Fix: give the color-mix hex fixture explicit pixel size

jsdom does no layout; Greptile asked for width/height on .mix-hex-brand so the static fixture stays deterministic. Prepared with AI assistance.

Co-authored-by: Cursor <cursoragent@cursor.com>

cli/engine/detect-antipatterns-browser.js

@@ -773,14 +773,22 @@ function extractColorFunctionTokens(value) {
 function parseGradientColors(bgImage) {
   if (!bgImage || !bgImage.includes('gradient')) return [];
   const colors = [];
+  const tokenSpans = [];
+  let from = 0;
   // Stops arrive in whatever syntax the author wrote and the browser kept.
   // A dark ground painted as `linear-gradient(oklch(...), oklch(...))` used
   // to read as a gradient with no stops at all.
   for (const token of extractColorFunctionTokens(bgImage)) {
+    const start = bgImage.indexOf(token, from);
+    if (start < 0) break;
+    tokenSpans.push({ start, end: start + token.length });
+    from = start + token.length;
     const c = parseAnyColor(token);
     if (c) colors.push(c);
   }
   for (const m of bgImage.matchAll(/#([0-9a-f]{6}|[0-9a-f]{3})\b/gi)) {
+    // Nested hex inside color-mix is an ingredient, not a stop (issue #578).
+    if (tokenSpans.some(s => m.index >= s.start && m.index < s.end)) continue;
     const h = m[1];
     if (h.length === 6) {
       colors.push({ r: parseInt(h.slice(0,2),16), g: parseInt(h.slice(2,4),16), b: parseInt(h.slice(4,6),16), a: 1 });

cli/engine/engines/regex/detect-text.mjs

@@ -42,7 +42,6 @@ function shouldRunPageAnalyzers(content, filePath) {
 }
 
 const JS_SOURCE_EXTS = new Set(['.js', '.jsx', '.ts', '.tsx', '.mjs', '.cjs']);
-const STYLESHEET_EXTS = new Set(['.css', '.scss', '.sass', '.less']);
 const REGEX_PREFIX_KEYWORDS = new Set(['await', 'case', 'default', 'delete', 'do', 'else', 'in', 'instanceof', 'new', 'of', 'return', 'throw', 'typeof', 'void', 'yield']);
 const BLOCK_BRACE_PREFIX_KEYWORDS = new Set(['do', 'else', 'finally', 'try']);
 
@@ -257,153 +256,6 @@ function stripCssComments(content) {
   return content.replace(/\/\*[\s\S]*?\*\//g, comment => comment.replace(/[^\n]/g, ' '));
 }
 
-function blankHtmlComments(text) {
-  return text.replace(/<!--[\s\S]*?-->/g, comment => comment.replace(/[^\n]/g, ' '));
-}
-
-function blankCssLineCommentsInStyleBlocks(text) {
-  const re = /<style\b[^>]*>([\s\S]*?)<\/style>/gi;
-  let output = '';
-  let lastIndex = 0;
-  let match;
-  while ((match = re.exec(text)) !== null) {
-    const inner = match[1];
-    const openLength = match[0].length - inner.length - '</style>'.length;
-    output += text.slice(lastIndex, match.index);
-    output += match[0].slice(0, openLength);
-    output += blankCssLineComments(inner);
-    output += match[0].slice(openLength + inner.length);
-    lastIndex = re.lastIndex;
-  }
-  return output + text.slice(lastIndex);
-}
-
-function blankHtmlAndCssCommentsOutsideScripts(text) {
-  const re = /<script\b[^>]*>[\s\S]*?<\/script>/gi;
-  let output = '';
-  let lastIndex = 0;
-  let match;
-  while ((match = re.exec(text)) !== null) {
-    output += blankCssLineCommentsInStyleBlocks(stripCssComments(blankHtmlComments(text.slice(lastIndex, match.index))));
-    output += match[0];
-    lastIndex = re.lastIndex;
-  }
-  return output + blankCssLineCommentsInStyleBlocks(stripCssComments(blankHtmlComments(text.slice(lastIndex))));
-}
-
-function blankCssLineComments(text) {
-  let output = '';
-  let state = 'code';
-  let urlDepth = 0;
-  for (let i = 0; i < text.length; i++) {
-    const char = text[i];
-    const next = text[i + 1];
-    if (state === 'line') {
-      if (char === '\n') {
-        output += '\n';
-        state = 'code';
-      } else {
-        output += ' ';
-      }
-      continue;
-    }
-    if (state === 'single' || state === 'double') {
-      output += char;
-      if (char === '\\' && next) {
-        output += next;
-        i++;
-      } else if ((state === 'single' && char === "'") || (state === 'double' && char === '"')) {
-        state = 'code';
-      }
-      continue;
-    }
-    const prev = output.length ? output[output.length - 1] : '';
-    if (char === '/' && next === '/' && urlDepth === 0 && prev !== ':' && prev !== '(' && prev !== '\\') {
-      output += '  ';
-      i++;
-      state = 'line';
-      continue;
-    }
-    if (char === "'") state = 'single';
-    else if (char === '"') state = 'double';
-    if (char === '(') {
-      const behind = output.replace(/\s+$/, '');
-      if (urlDepth > 0 || /url$/i.test(behind)) urlDepth++;
-    } else if (char === ')' && urlDepth) {
-      urlDepth--;
-    }
-    output += char;
-  }
-  return output;
-}
-
-function findAstroFrontmatterClose(text) {
-  if (!text.startsWith('---')) return -1;
-  let cursor = text.indexOf('\n');
-  if (cursor === -1) return -1;
-  cursor += 1;
-  while (cursor < text.length) {
-    if (text[cursor - 1] === '\n' && text.startsWith('---', cursor)) {
-      let end = cursor + 3;
-      while (text[end] === ' ' || text[end] === '\t') end++;
-      if (end >= text.length || text[end] === '\n' || text[end] === '\r') return cursor - 1;
-    }
-    const char = text[cursor];
-    const next = text[cursor + 1];
-    if (char === "'" || char === '"') {
-      const close = findQuotedStringEnd(text, cursor, char);
-      if (close === -1) return -1;
-      cursor = close + 1;
-      continue;
-    }
-    if (char === '`') {
-      const close = findTemplateLiteralEnd(text, cursor);
-      if (close === -1) return -1;
-      cursor = close + 1;
-      continue;
-    }
-    if (char === '/' && next === '/') {
-      const lineEnd = text.indexOf('\n', cursor);
-      if (lineEnd === -1) return -1;
-      cursor = lineEnd;
-      continue;
-    }
-    if (char === '/' && next === '*') {
-      const commentEnd = text.indexOf('*/', cursor + 2);
-      if (commentEnd === -1) return -1;
-      cursor = commentEnd + 2;
-      continue;
-    }
-    if (char === '/' && next !== '/' && next !== '*') {
-      const close = findRegexLiteralEnd(text, cursor);
-      if (close !== -1) {
-        cursor = close + 1;
-        continue;
-      }
-    }
-    cursor++;
-  }
-  return -1;
-}
-
-function blankAstroFrontmatterComments(text) {
-  const close = findAstroFrontmatterClose(text);
-  if (close === -1) return text;
-  return stripJsComments(text.slice(0, close)) + text.slice(close);
-}
-
-function blankCommentsForMatchers(text, ext) {
-  if (PAGE_ANALYZER_EXTS.has(ext)) {
-    const withFrontmatter = ext === '.astro' ? blankAstroFrontmatterComments(text) : text;
-    return blankHtmlAndCssCommentsOutsideScripts(withFrontmatter);
-  }
-  if (STYLESHEET_EXTS.has(ext)) {
-    const withoutBlocks = stripCssComments(text);
-    return ext === '.css' ? withoutBlocks : blankCssLineComments(withoutBlocks);
-  }
-  return text;
-}
-
 function firstOverusedGoogleFont(text) {
   return extractGoogleFontFamilies(text).find(f => OVERUSED_FONTS.has(f)) || '';
 }
@@ -1176,13 +1028,14 @@ function detectText(content, filePath, options = {}) {
   const ext = extFromFilePath(filePath);
   const commentStrippedSource = JS_SOURCE_EXTS.has(ext) ? stripJsComments(content, {
     jsx: ext === '.js' || ext === '.jsx' || ext === '.tsx',
-  }) : blankCommentsForMatchers(content, ext);
+  }) : content;
   const source = stripCssInJsComments(commentStrippedSource, ext);
   const lines = source.split('\n');
 
   // Run regex matchers on the full file content (catches Tailwind classes, inline styles)
   // Enable block context for CSS files where related properties span multiple lines
-  findings.push(...runRegexMatchers(lines, filePath, 0, STYLESHEET_EXTS.has(ext) || null, {
+  const cssLike = new Set(['.css', '.scss', '.sass', '.less']);
+  findings.push(...runRegexMatchers(lines, filePath, 0, cssLike.has(ext) || null, {
     profile,
     phase: 'source',
   }));
@@ -1197,7 +1050,7 @@ function detectText(content, filePath, options = {}) {
     scanCssTextForPseudoStripe(text).map(hit =>
       finding(hit.id, filePath, hit.snippet, lineOffset + text.slice(0, hit.index).split('\n').length));
 
-  if (STYLESHEET_EXTS.has(ext)) {
+  if (cssLike.has(ext)) {
     findings.push(...scanInsetStripeCss(content, filePath));
     findings.push(...pseudoStripeFindings(content, 0));
   }
@@ -1225,8 +1078,7 @@ function detectText(content, filePath, options = {}) {
     }, () => extractStyleBlocks(content, ext))
     : extractStyleBlocks(content, ext);
   for (const block of styleBlocks) {
-    const blockContent = blankCssLineComments(stripCssComments(block.content));
-    const blockLines = blockContent.split('\n');
+    const blockLines = block.content.split('\n');
     findings.push(...runRegexMatchers(blockLines, filePath, block.startLine - 1, true, {
       profile,
       phase: 'style-block',
@@ -1237,8 +1089,8 @@ function detectText(content, filePath, options = {}) {
     // 1-based, so the offset is startLine - 2; startLine - 1 double-counted and
     // reported every selector one line low. runRegexMatchers keeps startLine - 1
     // because it indexes its split lines from zero.
-    findings.push(...scanInsetStripeCss(blockContent, filePath, block.startLine - 2));
-    findings.push(...pseudoStripeFindings(blockContent, block.startLine - 2));
+    findings.push(...scanInsetStripeCss(block.content, filePath, block.startLine - 2));
+    findings.push(...pseudoStripeFindings(block.content, block.startLine - 2));
   }
 
   // Extract and scan CSS-in-JS template literals

cli/engine/shared/color.mjs

@@ -103,14 +103,22 @@ function extractColorFunctionTokens(value) {
 function parseGradientColors(bgImage) {
   if (!bgImage || !bgImage.includes('gradient')) return [];
   const colors = [];
+  const tokenSpans = [];
+  let from = 0;
   // Stops arrive in whatever syntax the author wrote and the browser kept.
   // A dark ground painted as `linear-gradient(oklch(...), oklch(...))` used
   // to read as a gradient with no stops at all.
   for (const token of extractColorFunctionTokens(bgImage)) {
+    const start = bgImage.indexOf(token, from);
+    if (start < 0) break;
+    tokenSpans.push({ start, end: start + token.length });
+    from = start + token.length;
     const c = parseAnyColor(token);
     if (c) colors.push(c);
   }
   for (const m of bgImage.matchAll(/#([0-9a-f]{6}|[0-9a-f]{3})\b/gi)) {
+    // Nested hex inside color-mix is an ingredient, not a stop (issue #578).
+    if (tokenSpans.some(s => m.index >= s.start && m.index < s.end)) continue;
     const h = m[1];
     if (h.length === 6) {
       colors.push({ r: parseInt(h.slice(0,2),16), g: parseInt(h.slice(2,4),16), b: parseInt(h.slice(4,6),16), a: 1 });

tests/detect-antipatterns-fixtures.test.mjs

@@ -272,6 +272,31 @@ describe('detectHtml — static HTML/CSS fixtures', () => {
     );
   });
 
+  it('color: nested #000 inside color-mix must not become on #000000', async () => {
+    const f = await detectHtml(path.join(FIXTURES, 'color.html'));
+    const light = f.filter(r =>
+      (r.antipattern === 'low-contrast' || r.antipattern === 'gray-on-color') &&
+      /#f7f3ea/i.test(r.snippet || '')
+    );
+    assert.equal(
+      light.length, 0,
+      `light text on the mixed green must not flag: ${light.map(r => r.snippet).join('; ')}`,
+    );
+    const leaked = f.filter(r => /#3d2418 on #000000/i.test(r.snippet || ''));
+    assert.equal(
+      leaked.length, 0,
+      `nested #000 must not become on #000000: ${leaked.map(r => r.snippet).join('; ')}`,
+    );
+    assert.ok(
+      f.some(r =>
+        r.antipattern === 'low-contrast' &&
+        /#3d2418/i.test(r.snippet || '') &&
+        /#17372d|#295344/i.test(r.snippet || '')
+      ),
+      'dark ink on the mixed stop should flag against the mix, not phantom black',
+    );
+  });
+
   it('color: white text on background-image url() ancestor is not flagged as low-contrast', async () => {
     const f = await detectHtml(path.join(FIXTURES, 'color.html'));
     // The pass column has white text on a div with background-image: url().

tests/detect-antipatterns.test.js

@@ -382,228 +382,6 @@ describe('detectText — broken images in source comments', () => {
 
     expect(findings.filter(r => r.antipattern === 'broken-image')).toHaveLength(0);
   });
-
-  test('ignores img tags in Astro style block comments', () => {
-    const source = [
-      '---',
-      'const title = "Hero";',
-      '---',
-      '<style>',
-      '  /*',
-      '   * Example markup: <img src="">',
-      '   */',
-      '  .hero { color: red; }',
-      '</style>',
-    ].join('\n');
-
-    const findings = detectText(source, 'hero.astro');
-
-    expect(findings.filter(r => r.antipattern === 'broken-image')).toHaveLength(0);
-  });
-
-  test('ignores img tags in Astro HTML comments', () => {
-    const source = [
-      '---',
-      'const title = "Hero";',
-      '---',
-      '<!-- <img src="" alt="Comment-only image" /> -->',
-      '<img src="/logo.png" alt="Logo" />',
-    ].join('\n');
-
-    const findings = detectText(source, 'hero.astro');
-
-    expect(findings.filter(r => r.antipattern === 'broken-image')).toHaveLength(0);
-  });
-
-  test('ignores img tags in Astro frontmatter line comments', () => {
-    const source = [
-      '---',
-      '// <img src="" alt="Comment-only image" />',
-      'const site = "https://example.com";',
-      '---',
-      '<img src="/logo.png" alt="Logo" />',
-    ].join('\n');
-
-    const findings = detectText(source, 'hero.astro');
-
-    expect(findings.filter(r => r.antipattern === 'broken-image')).toHaveLength(0);
-  });
-
-  test('ignores img tags in CSS block comments', () => {
-    const source = [
-      '/*',
-      ' * Example markup: <img src="">',
-      ' */',
-      '.hero { color: red; }',
-    ].join('\n');
-
-    const findings = detectText(source, 'hero.css');
-
-    expect(findings.filter(r => r.antipattern === 'broken-image')).toHaveLength(0);
-  });
-
-  test('still detects real img tags after an HTML comment in Astro', () => {
-    const source = [
-      '---',
-      'const title = "Hero";',
-      '---',
-      '<!-- decorative only -->',
-      '<img src="" alt="Empty source" />',
-    ].join('\n');
-
-    const findings = detectText(source, 'hero.astro');
-
-    const broken = findings.filter(r => r.antipattern === 'broken-image');
-    expect(broken).toHaveLength(1);
-    expect(broken[0].line).toBe(5);
-  });
-
-  test('does not blank https URLs in Astro frontmatter', () => {
-    const source = [
-      '---',
-      'const site = "https://example.com/logo.png";',
-      '---',
-      '<img src="" alt="Empty source" />',
-    ].join('\n');
-
-    const findings = detectText(source, 'hero.astro');
-
-    expect(findings.filter(r => r.antipattern === 'broken-image')).toHaveLength(1);
-  });
-
-  test('keeps same-line img visible after a bare https URL in Astro markup', () => {
-    const source = '<p>https://example.com <img src="" alt="Empty source" /></p>';
-
-    const findings = detectText(source, 'hero.astro');
-
-    expect(findings.filter(r => r.antipattern === 'broken-image')).toHaveLength(1);
-  });
-
-  test('preserves line numbers after comment blanking in Astro', () => {
-    const source = [
-      '---',
-      'const title = "Hero";',
-      '---',
-      '<!-- <img src="" alt="Comment-only image" /> -->',
-      '<p>Intro copy</p>',
-      '<img src="" alt="Empty source" />',
-    ].join('\n');
-
-    const findings = detectText(source, 'hero.astro');
-
-    const broken = findings.filter(r => r.antipattern === 'broken-image');
-    expect(broken).toHaveLength(1);
-    expect(broken[0].line).toBe(6);
-  });
-
-  test('does not treat comment markers inside script strings as markup comments', () => {
-    const htmlDelimiters = [
-      '<script>const open = "<!--";</script>',
-      '<img>',
-      '<script>const close = "-->";</script>',
-    ].join('\n');
-    const cssDelimiters = [
-      '<script>const open = "/*";</script>',
-      '<img>',
-      '<script>const close = "*/";</script>',
-    ].join('\n');
-
-    for (const filePath of ['hero.astro', 'hero.vue', 'hero.svelte']) {
-      expect(detectText(htmlDelimiters, filePath).filter(r => r.antipattern === 'broken-image')).toHaveLength(1);
-      expect(detectText(cssDelimiters, filePath).filter(r => r.antipattern === 'broken-image')).toHaveLength(1);
-    }
-  });
-
-  test('ignores preprocessor line comments in stylesheets', () => {
-    const source = '// font-family: Inter\n.hero { color: red; }';
-
-    for (const filePath of ['hero.scss', 'hero.sass', 'hero.less']) {
-      expect(detectText(source, filePath).filter(r => r.antipattern === 'overused-font')).toHaveLength(0);
-    }
-  });
-
-  test('still detects live font-family after a preprocessor line comment', () => {
-    const source = '// skip this\n.hero { font-family: Inter; }';
-
-    const findings = detectText(source, 'hero.scss').filter(r => r.antipattern === 'overused-font');
-    expect(findings).toHaveLength(1);
-    expect(findings[0].line).toBe(2);
-  });
-
-  test('does not blank https URLs in SCSS', () => {
-    const source = '.hero { background: url(https://example.com/i.png); }\n.hero { font-family: Inter; }';
-
-    const findings = detectText(source, 'hero.scss').filter(r => r.antipattern === 'overused-font');
-    expect(findings).toHaveLength(1);
-    expect(findings[0].line).toBe(2);
-  });
-
-  test('ignores frontmatter comments after a --- line inside a template literal', () => {
-    const source = [
-      '---',
-      'const md = `',
-      '---',
-      '`;',
-      '// <img src="" alt="Comment-only image" />',
-      '---',
-      '<div>ok</div>',
-    ].join('\n');
-
-    expect(detectText(source, 'hero.astro').filter(r => r.antipattern === 'broken-image')).toHaveLength(0);
-  });
-
-  test('ignores preprocessor line comments in component style blocks', () => {
-    const source = [
-      '<style lang="scss">',
-      '// font-family: Inter',
-      '.hero { color: red; }',
-      '</style>',
-    ].join('\n');
-
-    for (const filePath of ['hero.astro', 'hero.vue', 'hero.svelte']) {
-      expect(detectText(source, filePath).filter(r => r.antipattern === 'overused-font')).toHaveLength(0);
-    }
-  });
-
-  test('still detects live font-family after a style-block line comment', () => {
-    const source = [
-      '<style lang="scss">',
-      '// skip this',
-      '.hero { font-family: Inter; }',
-      '</style>',
-    ].join('\n');
-
-    const findings = detectText(source, 'hero.vue').filter(r => r.antipattern === 'overused-font');
-    expect(findings).toHaveLength(1);
-    expect(findings[0].line).toBe(3);
-  });
-
-  test('ignores frontmatter comments after a regex literal that contains quotes', () => {
-    const source = [
-      '---',
-      'const re = /["\']/;',
-      '// <img src="" alt="Comment-only image" />',
-      '---',
-      '<div>ok</div>',
-    ].join('\n');
-
-    expect(detectText(source, 'hero.astro').filter(r => r.antipattern === 'broken-image')).toHaveLength(0);
-  });
-
-  test('keeps live font-family after a protocol-relative URL in SCSS', () => {
-    const sources = [
-      '.hero { background: url( //cdn.example.com/i.png); font-family: Inter; }',
-      '.hero { background: url(#{$prefix}//cdn.example.com/i.png); font-family: Inter; }',
-    ];
-
-    for (const source of sources) {
-      expect(detectText(source, 'hero.scss').filter(r => r.antipattern === 'overused-font')).toHaveLength(1);
-    }
-    expect(detectText(
-      '.hero { background: url(@{prefix}//cdn.example.com/i.png); font-family: Inter; }',
-      'hero.less',
-    ).filter(r => r.antipattern === 'overused-font')).toHaveLength(1);
-  });
 });
 
 describe('detectText — CSS borders', () => {
@@ -1821,6 +1599,32 @@ describe('hover contrast + color-mix', () => {
     expect(stops).toHaveLength(2);
   });
 
+  test('parseGradientColors resolves color-mix stops without leaking nested hex', () => {
+    const stops = parseGradientColors('linear-gradient(135deg, color-mix(in srgb, #2d5a4a 92%, #000), color-mix(in srgb, #1a3d32 90%, #000))');
+    expect(stops).toHaveLength(2);
+    expect(stops[0]).toEqual({ r: 41, g: 83, b: 68, a: 1 });
+    expect(stops[1]).toEqual({ r: 23, g: 55, b: 45, a: 1 });
+  });
+
+  test('parseGradientColors does not leak nested hex when color-mix has var()', () => {
+    const stops = parseGradientColors('linear-gradient(135deg, color-mix(in srgb, var(--brand) 92%, #000), color-mix(in srgb, var(--brand-deep) 90%, #000))');
+    expect(stops).toEqual([]);
+  });
+
+  test('parseGradientColors still collects sibling bare hex stops beside color-mix', () => {
+    const stops = parseGradientColors('linear-gradient(color-mix(in srgb, #2d5a4a 92%, #000), #ffffff)');
+    expect(stops).toHaveLength(2);
+    expect(stops[0]).toEqual({ r: 41, g: 83, b: 68, a: 1 });
+    expect(stops[1]).toEqual({ r: 255, g: 255, b: 255, a: 1 });
+  });
+
+  test('parseGradientColors still reads bare hex gradient stops', () => {
+    const stops = parseGradientColors('linear-gradient(#2d5a4a, #000)');
+    expect(stops).toHaveLength(2);
+    expect(stops[0]).toEqual({ r: 45, g: 90, b: 74, a: 1 });
+    expect(stops[1]).toEqual({ r: 0, g: 0, b: 0, a: 1 });
+  });
+
   test('checkHoverContrast flags a failing hover pair on a styled control', () => {
     const f = checkHoverContrast({
       tag: 'a',

tests/fixtures/antipatterns/color.html

@@ -45,11 +45,14 @@
     .mix-dark-wrap { background: #0f0f11; padding: 16px; }
     .mix-glow { background: linear-gradient(160deg, color-mix(in oklab, oklch(90% 0.02 95) 16%, transparent) 0%, #141419 65%); padding: 20px; }
     .mix-glow p { color: #ded9cf; font-size: 16px; }
+    /* issue #578 — #000 inside color-mix is an ingredient; white-ish text on
+       the mixed dark green must not be scored against phantom black. */
+    .mix-hex-brand { background: linear-gradient(135deg, color-mix(in srgb, var(--mix-hex-brand) 92%, #000), color-mix(in srgb, var(--mix-hex-brand-deep) 90%, #000)); width: 400px; height: 120px; padding: 20px; }
     /* currentcolor surface: background-color paints with the element's own
        text color, which is itself a var() token here. jsdom hands both
        through verbatim, so the walk must resolve the token via the
        custom-prop map instead of abstaining on a knowable surface. */
-    :root { --fixture-bone: #e8e2d6; }
+    :root { --fixture-bone: #e8e2d6; --mix-hex-brand: #2d5a4a; --mix-hex-brand-deep: #1a3d32; }
     .currentcolor-surface { background-color: currentcolor; color: var(--fixture-bone); padding: 14px 16px; border-radius: 10px; margin-bottom: 10px; }
     .currentcolor-low-text { color: #cfc9bd; font-size: 14px; }
     .currentcolor-good-text { color: #3a352c; font-size: 14px; }
@@ -133,6 +136,13 @@
         <p>Purple-to-indigo gradient</p>
       </div>
 
+      <h3>color-mix nested hex must not report phantom black</h3>
+      <!-- Dark ink on the mixed green is a real fail against #17372d. The
+           leaked-#000 extractor used to report it as on #000000 instead. -->
+      <div class="mix-hex-brand" data-test="mix-hex-brand-dark">
+        <p style="color: #3d2418; font-size: 16px;">Dark ink on a mixed green stop must not report on #000000</p>
+      </div>
+
       <h3>currentcolor surface via var() token</h3>
       <!-- background-color: currentcolor with color: var(--fixture-bone).
            The surface is knowable (bone #e8e2d6), so the faint text on it is
@@ -248,6 +258,11 @@
         </div>
       </div>
 
+      <h3>color-mix nested hex is not a surface</h3>
+      <div class="mix-hex-brand" data-test="mix-hex-brand">
+        <p style="color: #f7f3ea; font-size: 16px;">WhatsApp-style light text on a mixed dark green gradient stays readable</p>
+      </div>
+
       <h3>currentcolor surface with good contrast</h3>
       <div class="currentcolor-surface" data-test="currentcolor-good">
         <p class="currentcolor-good-text">Dark ink text on a bone currentcolor surface</p>