Answer stability round 1: 0 🔴, 1 🟡 (0 misread); the order test requires both base rules, a chip's dot goes where the native box shows
This commit is contained in:
@@ -478,13 +478,15 @@ span.nav-self { cursor: default; } /* static / non-clickable */
|
|||||||
.chip:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
|
.chip:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Without :has() every branch is open and every theme rule is inert: neither control does anything.
|
/* Without :has() every nav branch stays open and no theme rule applies, so the disclosure toggles and
|
||||||
The filter inputs stay visible, since the native control is then the only sign of a choice or of
|
the theme switch are hidden. The filter inputs are shown instead: the native control is then the
|
||||||
focus. After the base rules, since @supports adds no specificity. */
|
only sign of a choice or of focus, and the dot goes, since it would stay grey beside a ticked box. This block must come
|
||||||
|
after the base rules, since @supports adds no specificity. */
|
||||||
@supports not selector(:has(a)) {
|
@supports not selector(:has(a)) {
|
||||||
.nav-disc { visibility: hidden; } /* keeps its width, so the labels stay aligned */
|
.nav-disc { visibility: hidden; } /* keeps its width, so the labels stay aligned */
|
||||||
.theme-switch { display: none; }
|
.theme-switch { display: none; }
|
||||||
.segmented input, .chip input { position: static; opacity: 1; margin: 0; }
|
.segmented input, .chip input { position: static; opacity: 1; margin: 0; }
|
||||||
|
.chip .chip-dot { display: none; }
|
||||||
}
|
}
|
||||||
|
|
||||||
/* date range */
|
/* date range */
|
||||||
|
|||||||
@@ -153,16 +153,16 @@ test("styles.css hides the theme switch and the nav toggles where :has() is miss
|
|||||||
assert.match(block, /\.nav-disc\s*\{\s*visibility:\s*hidden/);
|
assert.match(block, /\.nav-disc\s*\{\s*visibility:\s*hidden/);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Both inputs are invisible in the base rules and only a `:has()` rule marks the choice, so without
|
|
||||||
// `:has()` the native control is the only sign of what is selected or focused.
|
|
||||||
test("styles.css shows the segmented and chip inputs where :has() is missing, after their base rules", () => {
|
test("styles.css shows the segmented and chip inputs where :has() is missing, after their base rules", () => {
|
||||||
const guard = stylesheet.indexOf("@supports not selector(:has(a)) {");
|
const guard = stylesheet.indexOf("@supports not selector(:has(a)) {");
|
||||||
assert.ok(guard >= 0, "no @supports not selector(:has(a)) block");
|
assert.ok(guard >= 0, "no @supports not selector(:has(a)) block");
|
||||||
const block = stylesheet.slice(guard, blockEnd(guard));
|
const block = stylesheet.slice(guard, blockEnd(guard));
|
||||||
for (const input of [".segmented input", ".chip input"]) {
|
for (const input of [".segmented input", ".chip input"]) {
|
||||||
assert.ok(stylesheet.indexOf(`${input} {`) < guard, `the base ${input} rule comes after the guard`);
|
const base = stylesheet.indexOf(`${input} {`);
|
||||||
|
assert.ok(base >= 0 && base < guard, `the base ${input} rule is missing or comes after the guard`);
|
||||||
}
|
}
|
||||||
assert.match(block, /\.segmented input,\s*\.chip input\s*\{[^}]*position:\s*static[^}]*opacity:\s*1/);
|
assert.match(block, /\.segmented input,\s*\.chip input\s*\{[^}]*position:\s*static[^}]*opacity:\s*1/);
|
||||||
|
assert.match(block, /\.chip \.chip-dot\s*\{\s*display:\s*none/);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Without `:has()` nothing reads #nav-toggle, so an off-canvas sidebar there is unreachable and the
|
// Without `:has()` nothing reads #nav-toggle, so an off-canvas sidebar there is unreachable and the
|
||||||
|
|||||||
Reference in New Issue
Block a user