mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-18 17:16:46 +03:00
Skip unresolved container query CSS
Exclude linked container-query groups when their current applicability cannot be resolved, with a browser regression proving inactive styles do not leak. AI assistance disclosure: This commit was prepared with Codex under maintainer direction.
This commit is contained in:
@@ -1321,6 +1321,13 @@ if (IS_BROWSER) {
|
|||||||
try { return CSS.supports(condition); }
|
try { return CSS.supports(condition); }
|
||||||
catch { return true; }
|
catch { return true; }
|
||||||
}
|
}
|
||||||
|
if (constructorName === 'CSSContainerRule' || /^\s*@container\b/i.test(rule?.cssText || '')) {
|
||||||
|
// The platform exposes no matchMedia-equivalent for container queries,
|
||||||
|
// and selector matches do not prove that the element's query container
|
||||||
|
// satisfies the condition. Omit the group rather than report styles that
|
||||||
|
// are inactive for the current layout.
|
||||||
|
return false;
|
||||||
|
}
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -8225,6 +8225,13 @@ if (IS_BROWSER) {
|
|||||||
try { return CSS.supports(condition); }
|
try { return CSS.supports(condition); }
|
||||||
catch { return true; }
|
catch { return true; }
|
||||||
}
|
}
|
||||||
|
if (constructorName === 'CSSContainerRule' || /^\s*@container\b/i.test(rule?.cssText || '')) {
|
||||||
|
// The platform exposes no matchMedia-equivalent for container queries,
|
||||||
|
// and selector matches do not prove that the element's query container
|
||||||
|
// satisfies the condition. Omit the group rather than report styles that
|
||||||
|
// are inactive for the current layout.
|
||||||
|
return false;
|
||||||
|
}
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1405,6 +1405,11 @@ describe('detectUrl — browser-only fixtures', () => {
|
|||||||
})));
|
})));
|
||||||
const linkedFindings = await linkedPage.evaluate(() => window.impeccableDetect({ serialize: true })
|
const linkedFindings = await linkedPage.evaluate(() => window.impeccableDetect({ serialize: true })
|
||||||
.flatMap(group => group.findings || []));
|
.flatMap(group => group.findings || []));
|
||||||
|
const inactiveContainerBackground = await linkedPage.$eval(
|
||||||
|
'.inactive-container-stripes',
|
||||||
|
element => getComputedStyle(element).backgroundImage,
|
||||||
|
);
|
||||||
|
assert.equal(inactiveContainerBackground, 'none');
|
||||||
const grids = linkedFindings.filter(finding => finding.type === 'codex-grid-background');
|
const grids = linkedFindings.filter(finding => finding.type === 'codex-grid-background');
|
||||||
assert.equal(grids.length, 1, JSON.stringify({ linkedFindings, linkedCssom }));
|
assert.equal(grids.length, 1, JSON.stringify({ linkedFindings, linkedCssom }));
|
||||||
assert.equal(grids[0].severity, 'advisory');
|
assert.equal(grids[0].severity, 'advisory');
|
||||||
|
|||||||
@@ -40,6 +40,17 @@ main > ::before {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.container-query-host {
|
||||||
|
container-type: inline-size;
|
||||||
|
width: 240px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@container (width > 900px) {
|
||||||
|
.inactive-container-stripes {
|
||||||
|
background: repeating-linear-gradient(45deg, #eee, #eee 10px, #fafafa 10px, #fafafa 20px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.unused-linked-transition {
|
.unused-linked-transition {
|
||||||
transition: width 200ms ease;
|
transition: width 200ms ease;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -11,6 +11,9 @@
|
|||||||
<div class="flag-linked-grid">Rendered decorative grid</div>
|
<div class="flag-linked-grid">Rendered decorative grid</div>
|
||||||
<div class="inactive-media-stripes">Inactive media stripes</div>
|
<div class="inactive-media-stripes">Inactive media stripes</div>
|
||||||
<div class="inactive-supports-stripes">Inactive supports stripes</div>
|
<div class="inactive-supports-stripes">Inactive supports stripes</div>
|
||||||
|
<div class="container-query-host">
|
||||||
|
<div class="inactive-container-stripes">Inactive container-query stripes</div>
|
||||||
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user