diff --git a/lib/__tests__/email-dark-mode.test.ts b/lib/__tests__/email-dark-mode.test.ts index 52b6dd28c..298084a9f 100644 --- a/lib/__tests__/email-dark-mode.test.ts +++ b/lib/__tests__/email-dark-mode.test.ts @@ -163,3 +163,72 @@ describe('applyEmailDarkMode', () => { expect(doc.documentElement.classList.contains(DARK_PENDING_CLASS)).toBe(false); }); }); + +// #693: cells coloured through the legacy bgcolor attribute stayed white in +// dark mode. Browsers map bgcolor to background-color as a presentational hint +// (below every author style), which the pass reads back through computed +// style. jsdom has no presentational hints, so the helper below adds the same +// mapping as zero-specificity rules at the top of the cascade. +describe('applyEmailDarkMode with bgcolor', () => { + const mapBgcolorLikeBrowser = (doc: Document) => { + const rules: string[] = []; + doc.querySelectorAll('[bgcolor]').forEach((el, i) => { + el.setAttribute('data-bgcolor-hint', String(i)); + rules.push(`:where([data-bgcolor-hint="${i}"]) { background-color: ${el.getAttribute('bgcolor')}; }`); + }); + const sheet = doc.createElement('style'); + sheet.textContent = rules.join('\n'); + doc.head.prepend(sheet); + }; + + const render = (mail: string, bodyBgcolor?: string) => { + const { html } = sanitizeEmailBodyForIframe(mail, true); + const frame = document.createElement('iframe'); + document.body.appendChild(frame); + const doc = frame.contentDocument!; + doc.documentElement.className = DARK_PENDING_CLASS; + doc.documentElement.style.backgroundColor = 'rgb(20, 20, 20)'; + if (bodyBgcolor) doc.body.setAttribute('bgcolor', bodyBgcolor); + doc.body.innerHTML = html; + mapBgcolorLikeBrowser(doc); + applyEmailDarkMode(doc); + return doc; + }; + + // The darkened colour the pass wrote over the sender's one. + const rewrittenBg = (el: HTMLElement) => { + expect(el.style.getPropertyPriority('background-color')).toBe('important'); + return c(el.ownerDocument.defaultView!.getComputedStyle(el).backgroundColor); + }; + + it.each([ + ['td', '
Hello |
Hello |
Hello |
Hello |
Hello |
| Hello |
| Sale |
Hello
', '#ffffff'); + expect(lightness(rewrittenBg(doc.body))).toBeLessThan(40); + }); +});