atmos/os_lib/css/

selftest.rs

// 分割: css.rs より機械的に移動（2026-07-16 リファクタ フェーズ3）。
// ロジック不変。可視性のみ pub(crate) へ昇格し、親が pub(crate) use で再エクスポート。
use super::*;

/// CSS セレクタの自己テスト。各ケースで HTML をパースし、`css` を適用したとき
/// `id` の要素にマーカープロパティ `zz` が付くか（= セレクタが一致したか）を確認する。
pub fn selftest() -> (usize, usize) {
    let cases: &[(&str, &str, &str, bool)] = &[
        // 属性セレクタ
        (
            "<input id='t' type='text'>",
            "input[type=text]{zz:1}",
            "t",
            true,
        ),
        (
            "<input id='t' type='text'>",
            "input[type=checkbox]{zz:1}",
            "t",
            false,
        ),
        // 属性セレクタの大文字小文字無視フラグ `i`（Selectors Level 4 §6.4.1）。
        // 以前は末尾の ` i` がクォート付き値の一部として値へ混入し
        // （`"checkbox" i` → 値 `checkbox" i`）常に不一致になる静かな破壊バグだった。
        (
            "<input id='t' type='CHECKBOX'>",
            "input[type=\"checkbox\" i]{zz:1}",
            "t",
            true,
        ),
        // 値がクォート無しでもフラグは正しく分離される。
        (
            "<input id='t' type='CHECKBOX'>",
            "input[type=checkbox i]{zz:1}",
            "t",
            true,
        ),
        // フラグ無し（既定）は引き続き大文字小文字を区別する。
        (
            "<input id='t' type='CHECKBOX'>",
            "input[type=checkbox]{zz:1}",
            "t",
            false,
        ),
        // `s` フラグ（明示的に区別。既定と同じ動作）。
        (
            "<input id='t' type='CHECKBOX'>",
            "input[type=\"checkbox\" s]{zz:1}",
            "t",
            false,
        ),
        (
            "<div id='t' data-role='nav main'></div>",
            "[data-role~=main]{zz:1}",
            "t",
            true,
        ),
        (
            "<a id='t' href='https://x'></a>",
            "[href^='https']{zz:1}",
            "t",
            true,
        ),
        (
            "<a id='t' href='/page.html'></a>",
            "[href$='.html']{zz:1}",
            "t",
            true,
        ),
        (
            "<a id='t' href='/img/a.png'></a>",
            "[href*='img']{zz:1}",
            "t",
            true,
        ),
        ("<div id='t' class='box'></div>", "[class]{zz:1}", "t", true),
        ("<div id='t'></div>", "[class]{zz:1}", "t", false),
        // :checked / :disabled（DOM 属性の有無で判定する簡易実装）
        (
            "<input id='t' type='checkbox' checked>",
            "input:checked{zz:1}",
            "t",
            true,
        ),
        (
            "<input id='t' type='checkbox'>",
            "input:checked{zz:1}",
            "t",
            false,
        ),
        (
            "<button id='t' disabled>x</button>",
            "button:disabled{zz:1}",
            "t",
            true,
        ),
        (
            "<button id='t'>x</button>",
            "button:disabled{zz:1}",
            "t",
            false,
        ),
        // `:enabled`（`:disabled` の対）が丸ごと未対応だった。
        (
            "<button id='t' disabled>x</button>",
            "button:enabled{zz:1}",
            "t",
            false,
        ),
        (
            "<button id='t'>x</button>",
            "button:enabled{zz:1}",
            "t",
            true,
        ),
        // `:indeterminate`（checkbox の不確定表示状態。`indeterminate` は本来
        // HTML 属性として存在しない JS 専用プロパティのため、内部専用の
        // `_indeterminate` 属性キー経由で判定される。フィクスチャは JS の
        // `checkbox.indeterminate = true` が書き込む内部キーを直接模擬する）。
        (
            "<input id='t' type='checkbox' _indeterminate>",
            "input:indeterminate{zz:1}",
            "t",
            true,
        ),
        // `:user-valid`/`:user-invalid`（CSS Selectors Level 4）が丸ごと未対応
        // だった。`_indeterminate`と同じ方針で、`interp.rs`の`dispatch_event`が
        // `input`/`change`発火時に書き込む内部専用属性`_user_interacted`を
        // フィクスチャで直接模擬する。ユーザー未操作なら`_user_interacted`が
        // 無いため`:user-invalid`にも`:user-valid`にも一致しない。
        (
            "<input id='t' type='text' required _user_interacted>",
            "input:user-invalid{zz:1}",
            "t",
            true,
        ),
        (
            "<input id='t' type='text' required value='x' _user_interacted>",
            "input:user-valid{zz:1}",
            "t",
            true,
        ),
        (
            "<input id='t' type='text' required>",
            "input:user-invalid{zz:1}",
            "t",
            false,
        ),
        // `:defined`（Selectors Level 4）が丸ごと未対応だった。`customElements`
        // 自体が未実装のため、パースされるタグは全て標準組み込み要素のみ
        // （常に「定義済み」）という正直な簡略実装。
        (
            "<div id='t'></div>",
            "div:defined{zz:1}",
            "t",
            true,
        ),
        (
            "<span id='t'></span>",
            ":defined{zz:1}",
            "t",
            true,
        ),
        // `:fullscreen`が丸ごと未対応だった。`element.requestFullscreen()`が
        // 書き込む内部専用属性`_fullscreen`をフィクスチャで直接模擬する。
        (
            "<div id='t' _fullscreen></div>",
            "div:fullscreen{zz:1}",
            "t",
            true,
        ),
        (
            "<div id='t'></div>",
            "div:fullscreen{zz:1}",
            "t",
            false,
        ),
        // `:modal`が丸ごと未対応だった。フルスクリーン要素、または
        // `dialog.showModal()`が書き込む`_modal`のいずれかに一致する。
        (
            "<dialog id='t' open _modal></dialog>",
            "dialog:modal{zz:1}",
            "t",
            true,
        ),
        (
            "<dialog id='t' open></dialog>",
            "dialog:modal{zz:1}",
            "t",
            false,
        ),
        (
            "<div id='t' _fullscreen></div>",
            "div:modal{zz:1}",
            "t",
            true,
        ),
        // `:popover-open`が丸ごと未対応だった。`element.showPopover()`が
        // 書き込む内部専用属性`_popover_open`をフィクスチャで直接模擬する。
        (
            "<div id='t' popover _popover_open></div>",
            "div:popover-open{zz:1}",
            "t",
            true,
        ),
        (
            "<div id='t' popover></div>",
            "div:popover-open{zz:1}",
            "t",
            false,
        ),
        (
            "<input id='t' type='checkbox'>",
            "input:indeterminate{zz:1}",
            "t",
            false,
        ),
        // nth-child
        (
            "<ul><li></li><li id='t'></li><li></li></ul>",
            "li:nth-child(2){zz:1}",
            "t",
            true,
        ),
        (
            "<ul><li id='t'></li><li></li></ul>",
            "li:nth-child(odd){zz:1}",
            "t",
            true,
        ),
        (
            "<ul><li></li><li id='t'></li></ul>",
            "li:nth-child(odd){zz:1}",
            "t",
            false,
        ),
        (
            "<ul><li></li><li id='t'></li><li></li><li></li></ul>",
            "li:nth-child(even){zz:1}",
            "t",
            true,
        ),
        (
            "<ul><li></li><li></li><li id='t'></li></ul>",
            "li:nth-child(3){zz:1}",
            "t",
            true,
        ),
        (
            "<ul><li></li><li></li><li id='t'></li></ul>",
            "li:nth-last-child(1){zz:1}",
            "t",
            true,
        ),
        // `:nth-child(-n+3)` — 負の `a`（「先頭N個」の定番イディオム）。ロジック自体は
        // 既に正しく実装済みだったが、負の `a` に対する専用の自己テストが無かったため
        // 追加しておく（`nth_matches` の `diff % a == 0 && diff / a >= 0` が
        // 負の `a` でも正しく機能することを保証する回帰防止）。
        (
            "<ul><li></li><li></li><li id='t'></li><li></li></ul>",
            "li:nth-child(-n+3){zz:1}",
            "t",
            true,
        ),
        (
            "<ul><li></li><li></li><li></li><li id='t'></li></ul>",
            "li:nth-child(-n+3){zz:1}",
            "t",
            false,
        ),
        (
            "<ul><li id='t'></li><li></li><li></li></ul>",
            "li:nth-child(-n+3){zz:1}",
            "t",
            true,
        ),
        // :nth-child(An+B of S)（Selectors Level 4）。以前は `of S` が丸ごと非対応で
        // `S` を無視した単なる `:nth-child(An+B)` と同じ結果になっていた
        // （`of` 以降を切り捨てるだけで An+B 自体は正しく解析されていたが、フィルタが
        // 一切効かなかった）。2026-07-09 に `S` に一致する兄弟だけを数える実装を追加。
        // 自分自身が `S` に一致しない要素は常に不一致。
        (
            "<ul><li id='t'></li><li></li></ul>",
            "li:nth-child(2n+1 of .foo){zz:1}",
            "t",
            false,
        ),
        // `.foo` に一致する兄弟だけを数えると t は絞り込み後1-based位置2（偶数）。
        (
            "<ul><li class='foo'></li><li></li><li class='foo' id='t'></li><li class='foo'></li></ul>",
            "li:nth-child(2n+1 of .foo){zz:1}",
            "t",
            false,
        ),
        (
            "<ul><li class='foo'></li><li></li><li class='foo' id='t'></li><li class='foo'></li></ul>",
            "li:nth-child(2n of .foo){zz:1}",
            "t",
            true,
        ),
        // :nth-last-child(An+B of S) — 絞り込み後の末尾から数える。
        (
            "<ul><li class='foo'></li><li></li><li class='foo' id='t'></li><li class='foo'></li></ul>",
            "li:nth-last-child(1 of .foo){zz:1}",
            "t",
            false,
        ),
        (
            "<ul><li class='foo'></li><li></li><li class='foo'></li><li class='foo' id='t'></li></ul>",
            "li:nth-last-child(1 of .foo){zz:1}",
            "t",
            true,
        ),
        // :nth-last-of-type — 同タグ名の兄弟内で末尾から1-based。
        (
            "<div><li></li><p></p><li></li><li id='t'></li></div>",
            "li:nth-last-of-type(1){zz:1}",
            "t",
            true,
        ),
        (
            "<div><li id='t'></li><p></p><li></li><li></li></div>",
            "li:nth-last-of-type(1){zz:1}",
            "t",
            false,
        ),
        (
            "<ul><li id='t'></li><li></li><li></li></ul>",
            "li:nth-child(2n+1){zz:1}",
            "t",
            true,
        ),
        // :not
        ("<p id='t' class='a'></p>", "p:not(.b){zz:1}", "t", true),
        ("<p id='t' class='b'></p>", "p:not(.b){zz:1}", "t", false),
        // universal
        ("<div id='t'></div>", "*{zz:1}", "t", true),
        // 複合（属性 + nth）
        (
            "<ul><li class='x'></li><li id='t' class='x'></li></ul>",
            ".x:nth-child(2){zz:1}",
            "t",
            true,
        ),
        // 兄弟結合子
        (
            "<div><h1></h1><p id='t'></p></div>",
            "h1 + p{zz:1}",
            "t",
            true,
        ),
        (
            "<div><h1></h1><span></span><p id='t'></p></div>",
            "h1 + p{zz:1}",
            "t",
            false,
        ),
        (
            "<div><h1></h1><span></span><p id='t'></p></div>",
            "h1 ~ p{zz:1}",
            "t",
            true,
        ),
        (
            "<div><p id='t'></p><h1></h1></div>",
            "h1 ~ p{zz:1}",
            "t",
            false,
        ),
        (
            "<ul><li class='a'></li><li id='t' class='b'></li></ul>",
            ".a + .b{zz:1}",
            "t",
            true,
        ),
        // :checked / :disabled / :required / :readonly — 要素自身の属性から静的判定。
        (
            "<input id='t' type='checkbox' checked>",
            "input:checked{zz:1}",
            "t",
            true,
        ),
        (
            "<input id='t' type='checkbox'>",
            "input:checked{zz:1}",
            "t",
            false,
        ),
        (
            "<input id='t' disabled>",
            "input:disabled{zz:1}",
            "t",
            true,
        ),
        ("<input id='t'>", "input:disabled{zz:1}", "t", false),
        (
            "<input id='t' required>",
            "input:required{zz:1}",
            "t",
            true,
        ),
        // :optional は :required の否定。
        ("<input id='t'>", "input:optional{zz:1}", "t", true),
        (
            "<input id='t' required>",
            "input:optional{zz:1}",
            "t",
            false,
        ),
        // `:valid`/`:invalid` が丸ごと未対応だった。
        (
            "<input id='t' required>",
            "input:invalid{zz:1}",
            "t",
            true,
        ),
        (
            "<input id='t' required value='x'>",
            "input:invalid{zz:1}",
            "t",
            false,
        ),
        (
            "<input id='t' required value='x'>",
            "input:valid{zz:1}",
            "t",
            true,
        ),
        (
            "<input id='t' min='1' max='10' value='20'>",
            "input:invalid{zz:1}",
            "t",
            true,
        ),
        (
            "<input id='t' min='1' max='10' value='5'>",
            "input:valid{zz:1}",
            "t",
            true,
        ),
        // `:valid`/`:invalid`のcheckbox/radio対応（2026-07-17）。以前は他のinputと
        // 同じ「value属性が空か」で判定しており、value属性を持たないchecked済み
        // チェックボックスが常に`:invalid`になる等、チェック状態と無関係な結果に
        // なっていた。
        (
            "<input id='t' type='checkbox' required>",
            "input:invalid{zz:1}",
            "t",
            true,
        ),
        (
            "<input id='t' type='checkbox' required checked>",
            "input:valid{zz:1}",
            "t",
            true,
        ),
        // radioは同じ親を持つ兄弟の中に1つでもcheckedがあれば自身は未checkedでも
        // valid（グループ判定は同一親の兄弟スコープに限定した簡略実装）。
        (
            "<div><input id='t' type='radio' name='g' required><input type='radio' name='g' checked></div>",
            "input:valid{zz:1}",
            "t",
            true,
        ),
        (
            "<div><input id='t' type='radio' name='g' required><input type='radio' name='g'></div>",
            "input:invalid{zz:1}",
            "t",
            true,
        ),
        (
            "<input id='t' readonly>",
            "input:readonly{zz:1}",
            "t",
            true,
        ),
        // `:read-write`（`:read-only`の対）が丸ごと未対応だった。
        (
            "<input id='t' readonly>",
            "input:read-write{zz:1}",
            "t",
            false,
        ),
        (
            "<input id='t'>",
            "input:read-write{zz:1}",
            "t",
            true,
        ),
        // :placeholder-shown は value 未指定/空 + placeholder あり のときのみマッチ。
        (
            "<input id='t' placeholder='name'>",
            "input:placeholder-shown{zz:1}",
            "t",
            true,
        ),
        (
            "<input id='t' placeholder='name' value='x'>",
            "input:placeholder-shown{zz:1}",
            "t",
            false,
        ),
        ("<input id='t'>", "input:placeholder-shown{zz:1}", "t", false),
        // :in-range / :out-of-range — min/max に対する value の範囲判定。
        (
            "<input id='t' type='number' min='1' max='10' value='5'>",
            "input:in-range{zz:1}",
            "t",
            true,
        ),
        (
            "<input id='t' type='number' min='1' max='10' value='50'>",
            "input:in-range{zz:1}",
            "t",
            false,
        ),
        (
            "<input id='t' type='number' min='1' max='10' value='50'>",
            "input:out-of-range{zz:1}",
            "t",
            true,
        ),
        (
            "<input id='t' type='number' min='1' max='10' value='5'>",
            "input:out-of-range{zz:1}",
            "t",
            false,
        ),
        // min/max がどちらも無ければ範囲制約自体が無いので、in-range/out-of-range 両方不一致。
        (
            "<input id='t' type='number' value='5'>",
            "input:in-range{zz:1}",
            "t",
            false,
        ),
        // :default — checkbox/radio は checked 属性、option は selected 属性の有無で判定。
        (
            "<input id='t' type='checkbox' checked>",
            "input:default{zz:1}",
            "t",
            true,
        ),
        (
            "<input id='t' type='checkbox'>",
            "input:default{zz:1}",
            "t",
            false,
        ),
        (
            "<input id='t' type='text' checked>",
            "input:default{zz:1}",
            "t",
            false,
        ),
        (
            "<option id='t' selected>x</option>",
            "option:default{zz:1}",
            "t",
            true,
        ),
        (
            "<option id='t'>x</option>",
            "option:default{zz:1}",
            "t",
            false,
        ),
        // :link / :visited — href を持つ a/area 要素のみ静的にマッチする。
        // 履歴を保持していないため :visited は常に不一致（プライバシー上安全側の簡略実装）。
        ("<a id='t' href='https://example.com'>x</a>", "a:link{zz:1}", "t", true),
        ("<a id='t'>x</a>", "a:link{zz:1}", "t", false),
        (
            "<a id='t' href='https://example.com'>x</a>",
            "a:visited{zz:1}",
            "t",
            false,
        ),
        // 構造疑似クラス: :first-of-type / :last-of-type / :nth-of-type / :only-of-type
        // / :only-child / :empty
        (
            "<div><p></p><span id='t'></span><span></span></div>",
            "span:first-of-type{zz:1}",
            "t",
            true,
        ),
        (
            "<div><span></span><p></p><span id='t'></span></div>",
            "span:first-of-type{zz:1}",
            "t",
            false,
        ),
        (
            "<div><span></span><span id='t'></span><p></p></div>",
            "span:last-of-type{zz:1}",
            "t",
            true,
        ),
        (
            "<div><p></p><span></span><span id='t'></span><span></span></div>",
            "span:nth-of-type(2){zz:1}",
            "t",
            true,
        ),
        (
            "<div><p id='t'></p><span></span></div>",
            "p:only-of-type{zz:1}",
            "t",
            true,
        ),
        (
            "<div><p id='t'></p><p></p></div>",
            "p:only-of-type{zz:1}",
            "t",
            false,
        ),
        ("<div><p id='t'></p></div>", "p:only-child{zz:1}", "t", true),
        (
            "<div><p id='t'></p><span></span></div>",
            "p:only-child{zz:1}",
            "t",
            false,
        ),
        ("<div id='t'></div>", "div:empty{zz:1}", "t", true),
        (
            "<div id='t'><span></span></div>",
            "div:empty{zz:1}",
            "t",
            false,
        ),
        (
            "<div id='t'>text</div>",
            "div:empty{zz:1}",
            "t",
            false,
        ),
        // :is() / :where() — リスト中いずれかにマッチすれば真。
        (
            "<p id='t' class='a'></p>",
            ":is(.a, .b){zz:1}",
            "t",
            true,
        ),
        (
            "<p id='t' class='c'></p>",
            ":is(.a, .b){zz:1}",
            "t",
            false,
        ),
        (
            "<div><section><p id='t'></p></section></div>",
            ":is(section, article) p{zz:1}",
            "t",
            true,
        ),
        (
            "<span id='t' class='x'></span>",
            ":where(.x, .y){zz:1}",
            "t",
            true,
        ),
        // :has() — 子孫（任意の深さ）にリスト中いずれかが一致すれば真。
        (
            "<div id='t'><span><img></span></div>",
            "div:has(img){zz:1}",
            "t",
            true,
        ),
        (
            "<div id='t'><span></span></div>",
            "div:has(img){zz:1}",
            "t",
            false,
        ),
        (
            "<div id='t'><p class='note'>x</p></div>",
            "div:has(.note, .warn){zz:1}",
            "t",
            true,
        ),
        // :has(> child) — 直接子コンビネータ。孫要素は一致しない（従来は子コンビネータ
        // 自体が非対応で常に不一致だった）。
        (
            "<div id='t'><img></div>",
            "div:has(> img){zz:1}",
            "t",
            true,
        ),
        (
            "<div id='t'><span><img></span></div>",
            "div:has(> img){zz:1}",
            "t",
            false,
        ),
        // :has(+ sel) — 直後の兄弟コンビネータ（以前は丸ごと非対応で常に不一致だった）。
        (
            "<div><p id='t'></p><img></div>",
            "p:has(+ img){zz:1}",
            "t",
            true,
        ),
        (
            "<div><p id='t'></p><span></span><img></div>",
            "p:has(+ img){zz:1}",
            "t",
            false,
        ),
        // :has(~ sel) — 以降の兄弟いずれか（直後でなくても良い）。
        (
            "<div><p id='t'></p><span></span><img></div>",
            "p:has(~ img){zz:1}",
            "t",
            true,
        ),
        (
            "<div><p id='t'></p><span></span></div>",
            "p:has(~ img){zz:1}",
            "t",
            false,
        ),
        // CSS Nesting Module Level 1 — `&` を親セレクタへ置換（連結）してデシュガー。
        (
            "<div class='card'><span id='t'></span></div>",
            ".card { & span { zz:1; } }",
            "t",
            true,
        ),
        // `&` を省略した場合も暗黙の子孫結合子として扱う。
        (
            "<div class='card'><span id='t'></span></div>",
            ".card { span { zz:1; } }",
            "t",
            true,
        ),
        // `&` はコンパウンド（間にスペース無し）で連結できる。クラス不一致なら不一致。
        (
            "<div id='t' class='card'></div>",
            ".card { &.active { zz:1; } }",
            "t",
            false,
        ),
        (
            "<div id='t' class='card active'></div>",
            ".card { &.active { zz:1; } }",
            "t",
            true,
        ),
        // ネストしたルールの後ろに続く宣言も、巻き添えで壊れずに正しくパースされる
        // （旧実装は最初の `{` 以降を丸ごと非対応として捨てていたため、ネスト後に
        // 続く宣言も消えてしまっていた）。
        (
            "<div id='t' class='card'></div>",
            ".card { &:hover{color:blue;} zz:1; }",
            "t",
            true,
        ),
        // @supports: 葉の `(property: value)` は常に「対応している」扱いだが
        // `not`/`and`/`or` の論理結合は実際に評価する。
        (
            "<div id='t'></div>",
            "@supports (display: grid) { #t{zz:1} }",
            "t",
            true,
        ),
        (
            "<div id='t'></div>",
            "@supports not (display: grid) { #t{zz:1} }",
            "t",
            false,
        ),
        (
            "<div id='t'></div>",
            "@supports (display: grid) and (gap: 1rem) { #t{zz:1} }",
            "t",
            true,
        ),
        (
            "<div id='t'></div>",
            "@supports not (display: grid) or (gap: 1rem) { #t{zz:1} }",
            "t",
            true,
        ),
        // prefers-color-scheme: PREFERS_DARK 既定値は light（false）。
        (
            "<div id='t'></div>",
            "@media (prefers-color-scheme: light) { #t{zz:1} }",
            "t",
            true,
        ),
        (
            "<div id='t'></div>",
            "@media (prefers-color-scheme: dark) { #t{zz:1} }",
            "t",
            false,
        ),
        // prefers-reduced-motion: この処理系は常に no-preference 扱い。
        (
            "<div id='t'></div>",
            "@media (prefers-reduced-motion: no-preference) { #t{zz:1} }",
            "t",
            true,
        ),
        (
            "<div id='t'></div>",
            "@media (prefers-reduced-motion: reduce) { #t{zz:1} }",
            "t",
            false,
        ),
        // prefers-contrast: 丸ごと未対応で `more`/`less` が同時に真になるバグ
        // だった（`pointer`/`hover` 等と同型）。この処理系は常に no-preference 扱い。
        (
            "<div id='t'></div>",
            "@media (prefers-contrast: no-preference) { #t{zz:1} }",
            "t",
            true,
        ),
        (
            "<div id='t'></div>",
            "@media (prefers-contrast: more) { #t{zz:1} }",
            "t",
            false,
        ),
        (
            "<div id='t'></div>",
            "@media (prefers-contrast: less) { #t{zz:1} }",
            "t",
            false,
        ),
        // `update`/`grid`/`prefers-reduced-transparency`/`prefers-reduced-data` も
        // 同じ「未知クエリ通過」フォールバックで相互排他の分岐が同時に真になる
        // 同型バグだった。
        (
            "<div id='t'></div>",
            "@media (update: fast) { #t{zz:1} }",
            "t",
            true,
        ),
        (
            "<div id='t'></div>",
            "@media (update: none) { #t{zz:1} }",
            "t",
            false,
        ),
        (
            "<div id='t'></div>",
            "@media (grid: 0) { #t{zz:1} }",
            "t",
            true,
        ),
        (
            "<div id='t'></div>",
            "@media (grid: 1) { #t{zz:1} }",
            "t",
            false,
        ),
        (
            "<div id='t'></div>",
            "@media (prefers-reduced-transparency: no-preference) { #t{zz:1} }",
            "t",
            true,
        ),
        (
            "<div id='t'></div>",
            "@media (prefers-reduced-transparency: reduce) { #t{zz:1} }",
            "t",
            false,
        ),
        (
            "<div id='t'></div>",
            "@media (prefers-reduced-data: no-preference) { #t{zz:1} }",
            "t",
            true,
        ),
        (
            "<div id='t'></div>",
            "@media (prefers-reduced-data: reduce) { #t{zz:1} }",
            "t",
            false,
        ),
        // `pointer`/`hover`（Media Queries Level 4）が丸ごと未対応で、末尾の
        // 「未知のクエリは通過」フォールバックに落ちて matches/coarse の両方が
        // 同時に真になってしまうバグだった。USB HID マウスを前提に fine/hover
        // 固定で答える。
        (
            "<div id='t'></div>",
            "@media (pointer: fine) { #t{zz:1} }",
            "t",
            true,
        ),
        (
            "<div id='t'></div>",
            "@media (pointer: coarse) { #t{zz:1} }",
            "t",
            false,
        ),
        (
            "<div id='t'></div>",
            "@media (hover: hover) { #t{zz:1} }",
            "t",
            true,
        ),
        (
            "<div id='t'></div>",
            "@media (hover: none) { #t{zz:1} }",
            "t",
            false,
        ),
        // `scripting`/`forced-colors`/`inverted-colors`/`color-gamut` も
        // `pointer`/`hover` と同型のバグだった（相互排他のはずの分岐が
        // フォールバックで両方 true になる）。
        (
            "<div id='t'></div>",
            "@media (scripting: enabled) { #t{zz:1} }",
            "t",
            true,
        ),
        (
            "<div id='t'></div>",
            "@media (scripting: none) { #t{zz:1} }",
            "t",
            false,
        ),
        (
            "<div id='t'></div>",
            "@media (forced-colors: none) { #t{zz:1} }",
            "t",
            true,
        ),
        (
            "<div id='t'></div>",
            "@media (forced-colors: active) { #t{zz:1} }",
            "t",
            false,
        ),
        // `resolution`/`min-resolution`/`max-resolution`（HiDPI/retina 向け
        // アセット出し分けの定番。丸ごと未対応で `min-width`/`max-width` と
        // 同様の数値レンジ特性にもかかわらずフォールバックに落ちていた）。
        // フレームバッファは等倍密度（1dppx）固定として扱う。
        (
            "<div id='t'></div>",
            "@media (min-resolution: 2dppx) { #t{zz:1} }",
            "t",
            false,
        ),
        (
            "<div id='t'></div>",
            "@media (min-resolution: 1dppx) { #t{zz:1} }",
            "t",
            true,
        ),
        (
            "<div id='t'></div>",
            "@media (max-resolution: 2dppx) { #t{zz:1} }",
            "t",
            true,
        ),
        (
            "<div id='t'></div>",
            "@media (min-resolution: 96dpi) { #t{zz:1} }",
            "t",
            true,
        ),
        // `monochrome` も同型のバグだった。カラー表示なので常に0階調。
        (
            "<div id='t'></div>",
            "@media (monochrome) { #t{zz:1} }",
            "t",
            false,
        ),
        (
            "<div id='t'></div>",
            "@media (monochrome: 0) { #t{zz:1} }",
            "t",
            true,
        ),
        (
            "<div id='t'></div>",
            "@media (min-monochrome: 1) { #t{zz:1} }",
            "t",
            false,
        ),
        // 複合 " and " 条件（VIEWPORT_HINT_W 既定値 800px 基準）。
        // 旧実装は `screen and (...)` 直後の単一条件すら判定式まで届かず常に true へ
        // フォールバックしていたため、`screen and (max-width: 700px)` が誤って true になっていた。
        (
            "<div id='t'></div>",
            "@media screen and (min-width: 700px) { #t{zz:1} }",
            "t",
            true,
        ),
        (
            "<div id='t'></div>",
            "@media screen and (max-width: 700px) { #t{zz:1} }",
            "t",
            false,
        ),
        // レンジ指定（`(min-width: X) and (max-width: Y)`）: 両方満たす場合のみマッチ。
        (
            "<div id='t'></div>",
            "@media (min-width: 700px) and (max-width: 900px) { #t{zz:1} }",
            "t",
            true,
        ),
        (
            "<div id='t'></div>",
            "@media (min-width: 700px) and (max-width: 750px) { #t{zz:1} }",
            "t",
            false,
        ),
        // :lang() — 要素自身の lang 属性を優先し、無ければ文書既定言語(DOCUMENT_LANG)へ
        // フォールバックする。ここでは DOCUMENT_LANG が空（テスト実行時は未設定）なので、
        // 要素自身の lang 属性のみで判定される。
        (
            "<p id='t' lang='en-US'>x</p>",
            ":lang(en){zz:1}",
            "t",
            true,
        ),
        (
            "<p id='t' lang='fr'>x</p>",
            ":lang(en){zz:1}",
            "t",
            false,
        ),
        (
            "<p id='t' lang='EN'>x</p>",
            ":lang(en){zz:1}",
            "t",
            true,
        ),
        // :dir(ltr|rtl) — 要素自身の dir 属性の値で判定。無指定/不正値は ltr 扱い
        // （祖先からの継承は非対応の簡略実装）。
        (
            "<p id='t' dir='rtl'>x</p>",
            ":dir(rtl){zz:1}",
            "t",
            true,
        ),
        (
            "<p id='t' dir='ltr'>x</p>",
            ":dir(rtl){zz:1}",
            "t",
            false,
        ),
        (
            "<p id='t'>x</p>",
            ":dir(ltr){zz:1}",
            "t",
            true,
        ),
        // :indeterminate — HTML属性直書き（簡略判定）と <progress value 未指定> の2パターン。
        (
            "<input id='t' indeterminate>",
            "input:indeterminate{zz:1}",
            "t",
            true,
        ),
        (
            "<input id='t' checked>",
            "input:indeterminate{zz:1}",
            "t",
            false,
        ),
        (
            "<progress id='t'></progress>",
            "progress:indeterminate{zz:1}",
            "t",
            true,
        ),
        (
            "<progress id='t' value='50'></progress>",
            "progress:indeterminate{zz:1}",
            "t",
            false,
        ),
    ];

    fn find_marked(node: &StyledNode, id: &str) -> Option<bool> {
        if let NodeType::Element { id: nid, .. } = &node.node.node_type {
            if nid.as_deref() == Some(id) {
                return Some(node.specified_values.contains_key("zz"));
            }
        }
        for c in &node.children {
            if let Some(r) = find_marked(c, id) {
                return Some(r);
            }
        }
        None
    }

    // カスケード優先順位（プロパティ値を検証）: (html, css, id, prop, expected)
    let value_cases: &[(&str, &str, &str, &str, &str)] = &[
        (
            "<p id='t'></p>",
            "p{color:red} p{color:blue}",
            "t",
            "color",
            "blue",
        ), // ソース順（後勝ち）
        // @layer: 後で宣言されたレイヤーが、通常宣言では specificity に関わらず勝つ。
        // ここでは #t（高 specificity）が先のレイヤー、p（低 specificity）が後のレイヤー。
        (
            "<p id='t'></p>",
            "@layer a { #t{color:red} } @layer b { p{color:blue} }",
            "t",
            "color",
            "blue",
        ),
        // @layer: レイヤー無し（unlayered）の通常宣言は、どのレイヤーよりも常に勝つ
        // （specificity が低くても）。
        (
            "<p id='t'></p>",
            "@layer a { #t{color:red} } p{color:blue}",
            "t",
            "color",
            "blue",
        ),
        // @layer: 同一レイヤー内は通常どおりソース順（後勝ち）。
        (
            "<p id='t'></p>",
            "@layer a { p{color:red} } @layer a { p{color:green} }",
            "t",
            "color",
            "green",
        ),
        // @layer: 同名レイヤーは初出位置にマージされ、優先順位は初出位置のまま
        // （再宣言のたびに末尾へ繰り下がったりしない）。もしマージ位置がずれて
        // レイヤー a が b より後ろ扱いになってしまうと、この結果は誤って
        // green（レイヤー a 側）になってしまう。
        (
            "<p id='t'></p>",
            "@layer a { p{color:red} } @layer b { #t{color:blue} } @layer a { p{color:green} }",
            "t",
            "color",
            "blue",
        ),
        // カスケード優先順位: author の !important は inline style（通常）より勝つ。
        // 以前は inline style="" が常に無条件で上書きしており、author !important を
        // 無視してしまうバグだった。
        (
            "<p id='t' style='color:blue'></p>",
            "p{color:red !important}",
            "t",
            "color",
            "red",
        ),
        // inline style の !important は author 側の !important にも勝つ（最優先）。
        (
            "<p id='t' style='color:blue !important'></p>",
            "p{color:red !important}",
            "t",
            "color",
            "blue",
        ),
        // author が !important でなければ、従来通り inline style（通常）が勝つ。
        (
            "<p id='t' style='color:blue'></p>",
            "p{color:red}",
            "t",
            "color",
            "blue",
        ),
        // CSS Nesting（`&`）は非対応だが、ネストしたルールが同じブロック内の正当な宣言を
        // 巻き添えで破壊しないことを確認する（以前は `&:hover{...}` の `{`/`;` が混入して
        // 直前の `color:red` まで壊れてしまうバグだった）。
        (
            "<div id='t' class='a'></div>",
            ".a{color:green; &:hover{color:blue;}}",
            "t",
            "color",
            "green",
        ),
        // visibility は継承プロパティ。親の visibility:hidden が子孫へ伝播することを確認する
        // （以前は INHERITED_PROPS に含まれておらず、親に visibility:hidden を指定しても
        // 子孫は通常通り表示されてしまうバグだった）。
        (
            "<div style='visibility:hidden'><span id='t'></span></div>",
            "",
            "t",
            "visibility",
            "hidden",
        ),
        // 子孫が明示的に visibility:visible を指定すれば、継承された hidden を上書きできる。
        (
            "<div style='visibility:hidden'><span id='t' style='visibility:visible'></span></div>",
            "",
            "t",
            "visibility",
            "visible",
        ),
        // list-style-image は継承プロパティ（list-style-type と同様）。ul 側の指定が
        // 子孫の li まで伝播することを確認する（以前は INHERITED_PROPS に含まれておらず、
        // ul{list-style-image:...} が li に一切効かないバグだった）。
        (
            "<ul><li id='t'></li></ul>",
            "ul{list-style-image:url(bullet.png)}",
            "t",
            "list-style-image",
            "url(bullet.png)",
        ),
        // list-style-position も継承プロパティ（list-style-image と同種のバグが
        // INHERITED_PROPS に含まれていなかったために存在した。ul 側の指定が子孫の li まで
        // 伝播することを確認する）。
        (
            "<ul><li id='t'></li></ul>",
            "ul{list-style-position:inside}",
            "t",
            "list-style-position",
            "inside",
        ),
        // text-indent も継承プロパティ（同種のバグ）。通常の書き方（親要素へ指定し
        // テキストノード自身には指定しない）で子孫要素まで伝播することを確認する。
        (
            "<p><span id='t'></span></p>",
            "p{text-indent:2em}",
            "t",
            "text-indent",
            "2em",
        ),
        (
            "<p id='t' class='x'></p>",
            "p{color:red} .x{color:green}",
            "t",
            "color",
            "green",
        ), // 特異度（class>tag）
        // :is() の特異度はリスト中の最大値（この場合 id セレクタ #nomatch の (1,0,0)）を
        // 採用する。ソース順では後に来る .c（class specificity (0,1,0)）より先に書かれて
        // いても、id を含む方が勝つ（旧実装は :is() を一律 class 数1として計算しており、
        // この場合ソース順で .c が誤って勝ってしまっていた）。
        (
            "<div id='t' class='b c'></div>",
            ":is(#nomatch, .b){color:red} .c{color:blue}",
            "t",
            "color",
            "red",
        ),
        // :where() の特異度は常に0。同じクラスセレクタ単体より弱いため、ソース順に関わらず
        // 通常のクラスセレクタが勝つ。
        (
            "<div id='t' class='a'></div>",
            ".a{color:blue} :where(.a){color:red}",
            "t",
            "color",
            "blue",
        ),
        (
            "<p id='t' class='x'></p>",
            "p{color:red !important} .x{color:green}",
            "t",
            "color",
            "red",
        ), // !important が特異度に勝つ
        (
            "<p id='t'></p>",
            "p{color:red !important} p{color:blue !important}",
            "t",
            "color",
            "blue",
        ), // 両 important→ソース順
        (
            "<p id='t' class='x'></p>",
            "#nope{color:black} .x{color:purple}",
            "t",
            "color",
            "purple",
        ),
        // text-transform は継承される（div → 子 p）。
        (
            "<div><p id='t'>x</p></div>",
            "div{text-transform:uppercase}",
            "t",
            "text-transform",
            "uppercase",
        ),
        // -webkit-text-fill-color も継承される（div → 子 p）。
        (
            "<div><p id='t'>x</p></div>",
            "div{-webkit-text-fill-color:red}",
            "t",
            "-webkit-text-fill-color",
            "red",
        ),
        // list-style-type も継承（ul → li）。
        (
            "<ul><li id='t'>x</li></ul>",
            "ul{list-style-type:none}",
            "t",
            "list-style-type",
            "none",
        ),
        // flex gap がカスケードで届く。
        (
            "<div id='t' class='f'></div>",
            ".f{display:flex; gap:10px}",
            "t",
            "gap",
            "10px",
        ),
        // overflow / position が specified_values に届く（flatten_layout が参照する）。
        (
            "<div id='t' class='o'></div>",
            ".o{overflow:hidden}",
            "t",
            "overflow",
            "hidden",
        ),
        (
            "<div id='t' class='lc'></div>",
            ".lc{-webkit-line-clamp: 3}",
            "t",
            "-webkit-line-clamp",
            "3",
        ),
        (
            "<div id='t' class='p'></div>",
            ".p{position:absolute; top:5px}",
            "t",
            "position",
            "absolute",
        ),
        // ::before / ::after の content が合成プロパティへ届く。
        (
            "<div id='t' class='q'></div>",
            ".q::before{content:\"★\"}",
            "t",
            "x-before-content",
            "★",
        ),
        (
            "<div id='t' class='q'></div>",
            ".q::after{content:'!'}",
            "t",
            "x-after-content",
            "!",
        ),
        // ::before の他プロパティ（color等）は要素自体には適用されない。
        (
            "<div id='t' class='q'></div>",
            ".q::before{content:\"x\";color:#ff0000}",
            "t",
            "color",
            "",
        ),
        // content: none は空文字（誤描画防止）。
        (
            "<div id='t' class='q'></div>",
            ".q::before{content:none}",
            "t",
            "x-before-content",
            "",
        ),
        // content: attr(name) — 対象要素自身の属性値を展開。
        (
            "<a id='t' href='/foo'></a>",
            "a::after{content:attr(href)}",
            "t",
            "x-after-content",
            "/foo",
        ),
        // content: "\f2c9" — 16進Unicodeエスケープ（FontAwesome等のアイコン
        // フォントが private-use-area コードポイントを埋め込むのに使う記法）を
        // デコードできること。以前は未対応でバックスラッシュ込みの生文字列
        // "\f2c9" がそのまま出力され、アイコンが表示されないバグだった。
        (
            "<div id='t' class='q'></div>",
            ".q::before{content:\"\\f2c9\"}",
            "t",
            "x-before-content",
            "\u{f2c9}",
        ),
        // 16進エスケープ直後の空白1つは区切りとして消費され、出力には残らない。
        (
            "<div id='t' class='q'></div>",
            ".q::before{content:\"\\f2c9 icon\"}",
            "t",
            "x-before-content",
            "\u{f2c9}icon",
        ),
        // ::before/::after の display は合成プロパティ x-before-display/x-after-display へ
        // 振り替えられ、`display:none` はボックス自体の非生成（描画側で content を空扱い）
        // に使われる。ここでは振り替え自体（cascade側）のみを検証する。
        (
            "<div id='t' class='q'></div>",
            ".q::before{content:\"x\";display:none}",
            "t",
            "x-before-display",
            "none",
        ),
        (
            "<div id='t' data-tip='hi'></div>",
            "div::after{content:attr(data-tip)}",
            "t",
            "x-after-content",
            "hi",
        ),
        // attr() + 文字列リテラルの連結。
        (
            "<a id='t' href='/x'></a>",
            "a::after{content:\"(\" attr(href) \")\"}",
            "t",
            "x-after-content",
            "(/x)",
        ),
        // 属性が無ければ空文字。
        (
            "<div id='t'></div>",
            "div::after{content:attr(data-tip)}",
            "t",
            "x-after-content",
            "",
        ),
        // `attr(name, fallback)`（CSS Values and Units Level 5、丸ごと未対応
        // だった。以前はフォールバック指定自体が属性名の一部として誤解釈され、
        // 属性が存在する場合すら空文字になっていた）。
        (
            "<div id='t'></div>",
            "div::after{content:attr(data-tip, \"none\")}",
            "t",
            "x-after-content",
            "none",
        ),
        // 属性が存在する場合はフォールバックを無視し属性値を使う。
        (
            "<div id='t' data-tip='hi'></div>",
            "div::after{content:attr(data-tip, \"none\")}",
            "t",
            "x-after-content",
            "hi",
        ),
        // content: counter(name) — counter-reset の初期値 + counter-increment の加算。
        (
            "<div id='t' class='q'></div>",
            ".q{counter-reset:c 4;counter-increment:c}.q::after{content:counter(c)}",
            "t",
            "x-after-content",
            "5",
        ),
        // @counter-style（カスタムカウンタ書式）: system:cyclic（既定）で symbols を循環。
        // counter-reset:c 1; counter-increment:c → val=2 → idx=(2-1)%2=1 → 2番目のsymbol。
        (
            "<div id='t' class='q'></div>",
            "@counter-style stars{system:cyclic;symbols:\"★\" \"☆\";suffix:\" \"} \
             .q{counter-reset:c 1;counter-increment:c}.q::after{content:counter(c, stars)}",
            "t",
            "x-after-content",
            "☆",
        ),
        // @counter-style system:numeric — symbols を桁の数字として位取り記数法で整形。
        // symbols:"0" "1"（2進数）で value=5 → "101"。
        (
            "<div id='t' class='q'></div>",
            "@counter-style bin{system:numeric;symbols:\"0\" \"1\"} \
             .q{counter-reset:c 4;counter-increment:c}.q::after{content:counter(c, bin)}",
            "t",
            "x-after-content",
            "101",
        ),
        // content: counter(name, style) — upper-roman/lower-roman/upper-alpha/lower-alpha は
        // list-style-type と同じ変換関数を再利用して整形される（value=5）。
        (
            "<div id='t' class='q'></div>",
            ".q{counter-reset:c 4;counter-increment:c}.q::after{content:counter(c, upper-roman)}",
            "t",
            "x-after-content",
            "V",
        ),
        (
            "<div id='t' class='q'></div>",
            ".q{counter-reset:c 4;counter-increment:c}.q::after{content:counter(c, lower-roman)}",
            "t",
            "x-after-content",
            "v",
        ),
        (
            "<div id='t' class='q'></div>",
            ".q{counter-reset:c 4;counter-increment:c}.q::after{content:counter(c, upper-alpha)}",
            "t",
            "x-after-content",
            "E",
        ),
        (
            "<div id='t' class='q'></div>",
            ".q{counter-reset:c 4;counter-increment:c}.q::after{content:counter(c, lower-alpha)}",
            "t",
            "x-after-content",
            "e",
        ),
        // 文書順で兄弟間にカウンタ状態が引き継がれる（リスト番号付けの典型パターン）。
        (
            "<ol><li class='c' id='a'>x</li><li class='c' id='t'>y</li></ol>",
            ".c{counter-increment:item}.c::after{content:counter(item)}",
            "t",
            "x-after-content",
            "2",
        ),
        // 未定義のカウンタ名は 0 として扱う。
        (
            "<div id='t' class='q'></div>",
            ".q::after{content:counter(missing)}",
            "t",
            "x-after-content",
            "0",
        ),
        // 入れ子リストの counter スコープ: 内側の <ol> の counter-reset は外側の兄弟へ
        // 漏れてはならない（CSS仕様の入れ子番号付けの典型パターン）。以前は counter が
        // 単一のフラットマップを兄弟間で素通りさせるだけで、深さに関わらず全カウンタを
        // 共有していたため、内側リストの reset/increment が外側リストの後続 <li> の
        // 番号を汚染するバグがあった。ここでは外側3番目の <li>（id='t'）が、内側リストの
        // 影響を受けず正しく3（1,2 に続く3番目）になることを確認する。
        (
            "<ol><li class='c'></li><li class='c'><ol><li class='c'></li><li class='c'></li></ol></li><li class='c' id='t'></li></ol>",
            "ol{counter-reset:item}.c{counter-increment:item}.c::after{content:counter(item)}",
            "t",
            "x-after-content",
            "3",
        ),
        // `content: counter(list-item)`: `<ul>`/`<ol>` は UA 既定で `counter-reset: list-item`、
        // `<li>` は `counter-increment: list-item` を持つ（実 CSS の UA スタイルシート相当）。
        // 著者が明示指定しなくても暗黙カウンタとして参照できることを確認する。
        (
            "<ol><li class='q'></li><li class='q' id='t'></li></ol>",
            ".q::after{content:counter(list-item)}",
            "t",
            "x-after-content",
            "2",
        ),
        // `<ol start="N">`（HTML属性、丸ごと未対応だった）: 最初の `<li>` の番号が
        // `N` から始まる。
        (
            "<ol start='5'><li class='q' id='t'></li><li class='q'></li></ol>",
            ".q::after{content:counter(list-item)}",
            "t",
            "x-after-content",
            "5",
        ),
        // `<ol reversed>`（HTML属性、丸ごと未対応だった）: `start` 未指定なら
        // 直下の `<li>` 総数（ここでは3）から降順に採番する。
        (
            "<ol reversed><li class='q' id='t'></li><li class='q'></li><li class='q'></li></ol>",
            ".q::after{content:counter(list-item)}",
            "t",
            "x-after-content",
            "3",
        ),
        // `<ol reversed start="10">`: 明示 `start` から降順に採番する。
        (
            "<ol reversed start='10'><li class='q' id='t'></li><li class='q'></li></ol>",
            ".q::after{content:counter(list-item)}",
            "t",
            "x-after-content",
            "10",
        ),
        // 著者が `counter-reset`/`counter-increment` を明示指定した場合、UA既定の
        // `list-item` 用の値を通常のカスケード規則どおり完全に上書きできることを確認する
        // （`ol{counter-reset:list-item 10}` が UA既定の `counter-reset:list-item`(=0開始)を上書き）。
        (
            "<ol><li class='q' id='t'></li></ol>",
            "ol{counter-reset:list-item 10}.q::after{content:counter(list-item)}",
            "t",
            "x-after-content",
            "11",
        ),
        // content: counters(name, "sep") — counter-reset/counter-increment がフラット共有の
        // 簡略実装（祖先スコープ積み上げ非対応）であることに合わせ、現在値を単一セグメントとして
        // 出す簡略実装。sep 引数自体はパースして消費するが実質未使用（value=5）。
        (
            "<div id='t' class='q'></div>",
            ".q{counter-reset:c 4;counter-increment:c}.q::after{content:counters(c, \".\")}",
            "t",
            "x-after-content",
            "5",
        ),
        // content: counters(name, "sep", style) — style 引数も counter() と同じ変換を適用。
        (
            "<div id='t' class='q'></div>",
            ".q{counter-reset:c 4;counter-increment:c}.q::after{content:counters(c, \".\", upper-roman)}",
            "t",
            "x-after-content",
            "V",
        ),
        // open-quote/close-quote: `quotes` プロパティ無指定時は既定の二重引用符を使う。
        (
            "<q id='t' class='q'></q>",
            ".q::before{content:open-quote}",
            "t",
            "x-before-content",
            "\u{201C}",
        ),
        (
            "<q id='t' class='q'></q>",
            ".q::after{content:close-quote}",
            "t",
            "x-after-content",
            "\u{201D}",
        ),
        // no-open-quote/no-close-quote は何も出力しない。
        (
            "<q id='t' class='q'></q>",
            ".q::before{content:no-open-quote}",
            "t",
            "x-before-content",
            "",
        ),
        // 文字列との連結（例: 属性由来の引用符囲み表示）。
        (
            "<q id='t' class='q'></q>",
            ".q::before{content:open-quote \"cited\" close-quote}",
            "t",
            "x-before-content",
            "\u{201C}cited\u{201D}",
        ),
        // quotes プロパティ（同一要素への明示指定）でカスタム引用符を指定できる。
        (
            "<q id='t' class='q'></q>",
            ".q{quotes:\"\u{00AB}\" \"\u{00BB}\"}.q::before{content:open-quote}",
            "t",
            "x-before-content",
            "\u{00AB}",
        ),
        (
            "<q id='t' class='q'></q>",
            ".q{quotes:\"\u{00AB}\" \"\u{00BB}\"}.q::after{content:close-quote}",
            "t",
            "x-after-content",
            "\u{00BB}",
        ),
        // quotes:none は open/close-quote とも空文字列。
        (
            "<q id='t' class='q'></q>",
            ".q{quotes:none}.q::before{content:open-quote}",
            "t",
            "x-before-content",
            "",
        ),
        // 入れ子の <q>: `quotes` に2組指定した場合、外側は1組目、内側（祖先に <q> が1つ）は
        // 2組目を使う（CSS3仕様の入れ子レベル規則）。以前は入れ子レベルを一切追跡せず、
        // 常に1組目だけを使っていたため、内側の <q> も外側と同じ引用符になっていた。
        (
            "<q class='q'><q id='t' class='q'></q></q>",
            ".q{quotes:\"\u{00AB}\" \"\u{00BB}\" \"\u{2018}\" \"\u{2019}\"}.q::before{content:open-quote}",
            "t",
            "x-before-content",
            "\u{2018}",
        ),
        // 手持ちのペア数を超える深さでは最後のペアを繰り返す（仕様どおり）。
        (
            "<q class='q'><q class='q'><q id='t' class='q'></q></q></q>",
            ".q{quotes:\"\u{00AB}\" \"\u{00BB}\" \"\u{2018}\" \"\u{2019}\"}.q::before{content:open-quote}",
            "t",
            "x-before-content",
            "\u{2018}",
        ),
        // ::marker{color:...} が合成プロパティ x-marker-color へ振り替えられる。
        (
            "<li id='t' class='q'></li>",
            ".q::marker{color:#ff0000}",
            "t",
            "x-marker-color",
            "#ff0000",
        ),
        // ::marker{font-size:...} が合成プロパティ x-marker-font-size へ振り替えられる。
        (
            "<li id='t' class='q'></li>",
            ".q::marker{font-size:99px}",
            "t",
            "x-marker-font-size",
            "99px",
        ),
        // ::marker{content:...} が合成プロパティ x-marker-content へ振り替えられる
        // （カスタムマーカー文字。counter()/attr() 等の content 関数も x-before-content/
        // x-after-content と同じ経路で解決される）。
        (
            "<li id='t' class='q'></li>",
            ".q::marker{content:\"\u{2192} \"}",
            "t",
            "x-marker-content",
            "\u{2192} ",
        ),
        // ::marker の color/font-size/content 以外の宣言は依然として無視される（未対応につき振り替え無し）。
        (
            "<li id='t' class='q'></li>",
            ".q::marker{font-weight:bold}",
            "t",
            "x-marker-color",
            "",
        ),
        // ::placeholder{color:...} が合成プロパティ x-placeholder-color へ振り替えられる。
        (
            "<input id='t' class='q'></input>",
            ".q::placeholder{color:#00aaff}",
            "t",
            "x-placeholder-color",
            "#00aaff",
        ),
        // ::placeholder の color 以外の宣言（例 font-size）は無視される（未対応につき振り替え無し）。
        (
            "<input id='t' class='q'></input>",
            ".q::placeholder{font-size:99px}",
            "t",
            "x-placeholder-color",
            "",
        ),
        // ::first-line{color/font-size/font-weight/font-style} が合成プロパティへ振り替えられる。
        (
            "<p id='t' class='q'></p>",
            ".q::first-line{color:#00ff00}",
            "t",
            "x-first-line-color",
            "#00ff00",
        ),
        (
            "<p id='t' class='q'></p>",
            ".q::first-line{font-size:24px}",
            "t",
            "x-first-line-font-size",
            "24px",
        ),
        // ::first-line の対応外プロパティ（例 background-color）は振り替えられない。
        (
            "<p id='t' class='q'></p>",
            ".q::first-line{background-color:#000000}",
            "t",
            "x-first-line-background-color",
            "",
        ),
        // ::first-letter{color/font-size} が合成プロパティへ振り替えられる。
        (
            "<p id='t' class='q'></p>",
            ".q::first-letter{color:#0000ff}",
            "t",
            "x-first-letter-color",
            "#0000ff",
        ),
        (
            "<p id='t' class='q'></p>",
            ".q::first-letter{font-size:32px}",
            "t",
            "x-first-letter-font-size",
            "32px",
        ),
        // 論理プロパティ: block 軸は常に縦方向 → margin-block-start は margin-top へ。
        (
            "<div id='t'></div>",
            "#t{margin-block-start:10px;margin-block-end:20px}",
            "t",
            "margin-top",
            "10px",
        ),
        // ltr（既定）: inline-start→left。
        (
            "<div id='t'></div>",
            "#t{padding-inline-start:5px}",
            "t",
            "padding-left",
            "5px",
        ),
        // `margin-block`/`margin-inline`/`padding-block`/`padding-inline`/`inset-block`/
        // `inset-inline`（-start/-end をまとめて指定するショートハンド）が丸ごと
        // 未対応だった。1値指定は start/end 両方に適用される。
        (
            "<div id='t'></div>",
            "#t{margin-block:15px}",
            "t",
            "margin-top",
            "15px",
        ),
        (
            "<div id='t'></div>",
            "#t{margin-block:15px}",
            "t",
            "margin-bottom",
            "15px",
        ),
        // 2値指定は1番目=start、2番目=end。
        (
            "<div id='t'></div>",
            "#t{padding-inline:5px 9px}",
            "t",
            "padding-left",
            "5px",
        ),
        (
            "<div id='t'></div>",
            "#t{padding-inline:5px 9px}",
            "t",
            "padding-right",
            "9px",
        ),
        // shorthand は longhand（-start/-end 個別指定）より優先度が低い。
        (
            "<div id='t'></div>",
            "#t{margin-inline:1px;margin-inline-start:2px}",
            "t",
            "margin-left",
            "2px",
        ),
        // direction:rtl では inline-start→right に反転する。
        (
            "<div id='t'></div>",
            "#t{direction:rtl;margin-inline-start:7px}",
            "t",
            "margin-right",
            "7px",
        ),
        // 祖先の direction:rtl も継承されてから論理プロパティが解決される。
        (
            "<div style='direction:rtl'><div id='t'></div></div>",
            "#t{padding-inline-end:9px}",
            "t",
            "padding-left",
            "9px",
        ),
        // 物理プロパティが明示されていれば論理プロパティより優先される。
        (
            "<div id='t'></div>",
            "#t{margin-left:1px;margin-inline-start:2px}",
            "t",
            "margin-left",
            "1px",
        ),
        // border-inline-start-width/style/color（ショートハンドではなく longhand 単体）も
        // margin/padding と同じ方式で論理方向解決される。
        (
            "<div id='t'></div>",
            "#t{border-inline-start-width:3px}",
            "t",
            "border-left-width",
            "3px",
        ),
        (
            "<div id='t'></div>",
            "#t{border-inline-start-style:dashed}",
            "t",
            "border-left-style",
            "dashed",
        ),
        (
            "<div id='t'></div>",
            "#t{direction:rtl;border-inline-end-color:#ff0000}",
            "t",
            "border-left-color",
            "#ff0000",
        ),
        (
            "<div id='t'></div>",
            "#t{border-block-start-width:4px}",
            "t",
            "border-top-width",
            "4px",
        ),
        // grid-template: <rows> / <columns> ショートハンドの展開。
        (
            "<div id='t'></div>",
            "#t{grid-template:1fr 2fr / 100px 200px}",
            "t",
            "grid-template-rows",
            "1fr 2fr",
        ),
        (
            "<div id='t'></div>",
            "#t{grid-template:1fr 2fr / 100px 200px}",
            "t",
            "grid-template-columns",
            "100px 200px",
        ),
        // text-emphasis: <style> <color> ショートハンドの展開。
        (
            "<div id='t'></div>",
            "#t{text-emphasis:dot red}",
            "t",
            "text-emphasis-style",
            "dot",
        ),
        (
            "<div id='t'></div>",
            "#t{text-emphasis:dot red}",
            "t",
            "text-emphasis-color",
            "red",
        ),
        // filled/open の fill キーワードは読み飛ばされ、style/color だけ展開される。
        (
            "<div id='t'></div>",
            "#t{text-emphasis:filled circle #00ff00}",
            "t",
            "text-emphasis-style",
            "circle",
        ),
        // grid-template-areas 構文混在時: 文字列リテラルは grid-template-areas へ、
        // トラックサイズのみ grid-template-rows へ展開される。
        (
            "<div id='t'></div>",
            "#t{grid-template:\"a\" 1fr / 1fr}",
            "t",
            "grid-template-areas",
            "\"a\" 1fr",
        ),
        (
            "<div id='t'></div>",
            "#t{grid-template:\"a\" 1fr / 1fr}",
            "t",
            "grid-template-rows",
            "1fr",
        ),
        (
            "<div id='t'></div>",
            "#t{grid-template:\"h h\" 1fr \"m m\" 2fr / 1fr 1fr}",
            "t",
            "grid-template-areas",
            "\"h h\" 1fr \"m m\" 2fr",
        ),
        (
            "<div id='t'></div>",
            "#t{grid-template:\"h h\" 1fr \"m m\" 2fr / 1fr 1fr}",
            "t",
            "grid-template-rows",
            "1fr 2fr",
        ),
        (
            "<div id='t'></div>",
            "#t{grid-template:\"h h\" 1fr \"m m\" 2fr / 1fr 1fr}",
            "t",
            "grid-template-columns",
            "1fr 1fr",
        ),
        // longhand が既に指定されていればショートハンドより優先される。
        (
            "<div id='t'></div>",
            "#t{grid-template-rows:5fr;grid-template:1fr / 1fr}",
            "t",
            "grid-template-rows",
            "5fr",
        ),
        // CSS-wide keywords: color:inherit は文字列 "inherit" を残さず、
        // 親の実際の計算値（継承プロパティなので自然な継承伝搬）へ解決される。
        (
            "<div style='color:red'><p id='t' style='color:inherit'></p></div>",
            "",
            "t",
            "color",
            "red",
        ),
        // カスタムプロパティの間接参照: --a が var(--b) を値に持つとき、
        // var(--a) は --b の実際の値まで再帰的に解決される。
        (
            "<div id='t'></div>",
            "#t{--b:red;--a:var(--b);color:var(--a)}",
            "t",
            "color",
            "red",
        ),
        // 間接参照が2段（--a → --b → --c）でも正しく解決される。
        (
            "<div id='t'></div>",
            "#t{--c:blue;--b:var(--c);--a:var(--b);color:var(--a)}",
            "t",
            "color",
            "blue",
        ),
        // 間接参照先の変数が未定義の場合、フォールバック値まで再帰的に解決される。
        (
            "<div id='t'></div>",
            "#t{--a:var(--undefined, var(--also-undefined, green));color:var(--a)}",
            "t",
            "color",
            "green",
        ),
        // `env(safe-area-inset-*)`（CSS Environment Variables）が丸ごと未対応
        // だった。ノッチ/セーフエリアという概念自体がこの処理系に無いため、
        // フォールバック省略時は常に`0px`へ解決される「正直な既定値ゼロ」。
        // 2026-07-18 発見・実装。
        (
            "<div id='t'></div>",
            "#t{margin-top:env(safe-area-inset-top)}",
            "t",
            "margin-top",
            "0px",
        ),
        // フォールバック指定がある場合はそちらが優先される。
        (
            "<div id='t'></div>",
            "#t{margin-top:env(safe-area-inset-top, 20px)}",
            "t",
            "margin-top",
            "20px",
        ),
        // font ショートハンド: style + weight + size/line-height + family の完全形。
        (
            "<div id='t'></div>",
            "#t{font:italic bold 16px/1.5 Arial, sans-serif}",
            "t",
            "font-style",
            "italic",
        ),
        (
            "<div id='t'></div>",
            "#t{font:italic bold 16px/1.5 Arial, sans-serif}",
            "t",
            "font-weight",
            "bold",
        ),
        (
            "<div id='t'></div>",
            "#t{font:italic bold 16px/1.5 Arial, sans-serif}",
            "t",
            "font-size",
            "16px",
        ),
        (
            "<div id='t'></div>",
            "#t{font:italic bold 16px/1.5 Arial, sans-serif}",
            "t",
            "line-height",
            "1.5",
        ),
        (
            "<div id='t'></div>",
            "#t{font:italic bold 16px/1.5 Arial, sans-serif}",
            "t",
            "font-family",
            "Arial, sans-serif",
        ),
        // size のみの簡略形（style/weight省略、line-height無し）。数値の裸weightにも対応。
        (
            "<div id='t'></div>",
            "#t{font:700 14px sans-serif}",
            "t",
            "font-weight",
            "700",
        ),
        (
            "<div id='t'></div>",
            "#t{font:700 14px sans-serif}",
            "t",
            "font-size",
            "14px",
        ),
        // font: oblique <angle> — CSS Fonts 4 の `oblique 10deg` 形式。角度単位(deg)を
        // size と誤認して font-size が壊れないことを確認する（is_size_token は既知の
        // サイズ単位のみ許容し、deg/grad/rad/turn は size と判定しない）。
        (
            "<div id='t'></div>",
            "#t{font:oblique 10deg 12px/1.5 sans-serif}",
            "t",
            "font-size",
            "12px",
        ),
        (
            "<div id='t'></div>",
            "#t{font:oblique 10deg 12px/1.5 sans-serif}",
            "t",
            "line-height",
            "1.5",
        ),
        (
            "<div id='t'></div>",
            "#t{font:oblique 10deg 12px/1.5 sans-serif}",
            "t",
            "font-family",
            "sans-serif",
        ),
        (
            "<div id='t'></div>",
            "#t{font:oblique 10deg 12px/1.5 sans-serif}",
            "t",
            "font-style",
            "oblique",
        ),
        // longhand が既に指定されていればショートハンドより優先される。
        (
            "<div id='t'></div>",
            "#t{font-size:9px;font:16px Arial}",
            "t",
            "font-size",
            "9px",
        ),
        // border ショートハンド: groove/ridge/inset/outset/hidden は BorderStyle enum が
        // 5種のみのため縮退させるが、トークン自体は無視されず border-top-style へ届く。
        (
            "<div id='t'></div>",
            "#t{border:2px groove #333333}",
            "t",
            "border-top-style",
            "solid",
        ),
        (
            "<div id='t'></div>",
            "#t{border:2px ridge #333333}",
            "t",
            "border-top-width",
            "2px",
        ),
        (
            "<div id='t'></div>",
            "#t{border:2px hidden #333333}",
            "t",
            "border-top-style",
            "none",
        ),
        (
            "<div id='t'></div>",
            "#t{border:2px outset #333333}",
            "t",
            "border-top-color",
            "#333333",
        ),
        // currentColor: 要素自身の color を border-color 等の値として解決する。
        (
            "<div id='t' style='color:#ff0000;border-color:currentColor'></div>",
            "",
            "t",
            "border-color",
            "#ff0000",
        ),
        // currentColor は継承された color（親から伝搬）も正しく参照できる。
        (
            "<div style='color:blue'><p id='t' style='outline-color:currentColor'></p></div>",
            "",
            "t",
            "outline-color",
            "blue",
        ),
        // 表記ゆれ（大文字小文字混在）も解決される。
        (
            "<div id='t' style='color:green;background-color:CURRENTCOLOR'></div>",
            "",
            "t",
            "background-color",
            "green",
        ),
        // color 自身への currentColor は対象外（自己参照を避けるため置換しない）。
        (
            "<div id='t' style='color:currentColor'></div>",
            "",
            "t",
            "color",
            "currentColor",
        ),
        // initial は該当プロパティを取り除く（未指定＝各所のデフォルトへフォールバック）。
        (
            "<div id='t' style='width:initial'></div>",
            "",
            "t",
            "width",
            "",
        ),
        // unset も同様に取り除かれる。
        (
            "<div id='t' style='border-color:unset'></div>",
            "",
            "t",
            "border-color",
            "",
        ),
        // all: unset — 他の個別プロパティも一括で消える。
        (
            "<div id='t' style='color:red;all:unset'></div>",
            "",
            "t",
            "color",
            "",
        ),
        // all に未知の値（unset/initial/revert 以外）が来た場合は一括リセットしない
        // （他のプロパティは無事）。
        (
            "<div id='t' style='color:red;all:revert-layer'></div>",
            "",
            "t",
            "color",
            "red",
        ),
        // place-items: 1値指定は align-items/justify-items 両方へ展開される。
        (
            "<div id='t' style='place-items:center'></div>",
            "",
            "t",
            "align-items",
            "center",
        ),
        (
            "<div id='t' style='place-items:center'></div>",
            "",
            "t",
            "justify-items",
            "center",
        ),
        // place-content: 2値指定は align-content/justify-content へそれぞれ展開される。
        (
            "<div id='t' style='place-content:start end'></div>",
            "",
            "t",
            "align-content",
            "start",
        ),
        (
            "<div id='t' style='place-content:start end'></div>",
            "",
            "t",
            "justify-content",
            "end",
        ),
        // longhand が明示されていればショートハンドより優先される。
        (
            "<div id='t' style='align-self:end;place-self:start'></div>",
            "",
            "t",
            "align-self",
            "end",
        ),
    ];

    // text-transform 変換関数（純関数）。
    let tt_cases: &[(&str, &str, &str)] = &[
        ("hello world", "uppercase", "HELLO WORLD"),
        ("Hello WORLD", "lowercase", "hello world"),
        ("hello world", "capitalize", "Hello World"),
        ("hello world", "none", "hello world"),
    ];

    fn find_prop(node: &StyledNode, id: &str, prop: &str) -> Option<String> {
        if let NodeType::Element { id: nid, .. } = &node.node.node_type {
            if nid.as_deref() == Some(id) {
                return Some(node.specified_values.get(prop).cloned().unwrap_or_default());
            }
        }
        for c in &node.children {
            if let Some(r) = find_prop(c, id, prop) {
                return Some(r);
            }
        }
        None
    }

    // list-style-type: upper-alpha/lower-alpha/upper-roman/lower-roman の変換関数(純関数)。
    let alpha_roman_cases: &[(&str, u32, bool, &str)] = &[
        ("alpha", 1, true, "A"),
        ("alpha", 26, true, "Z"),
        ("alpha", 27, true, "AA"),
        ("alpha", 1, false, "a"),
        ("roman", 1994, true, "MCMXCIV"),
        ("roman", 4, false, "iv"),
        ("roman", 2026, true, "MMXXVI"),
    ];

    // CSS `filter`: grayscale/brightness/invert/sepia/contrast/saturate の per-pixel 変換(純関数)。
    let filter_cases: &[(&str, (u8, u8, u8), (u8, u8, u8))] = &[
        ("grayscale(1)", (255, 0, 0), (76, 76, 76)),
        ("brightness(0.5)", (200, 200, 200), (100, 100, 100)),
        ("invert(1)", (0, 0, 0), (255, 255, 255)),
        ("", (10, 20, 30), (10, 20, 30)),
        // contrast(2): (200-128)*2+128=272→クランプ255、(50-128)*2+128=-28→クランプ0
        ("contrast(2)", (200, 50, 128), (255, 0, 128)),
        // saturate(0) はグレースケール化と同じ結果になる(amount=1のgrayscaleと同値)。
        ("saturate(0)", (255, 0, 0), (76, 76, 76)),
    ];

    // filter: blur(Npx) の半径パース(純関数)。
    let blur_radius_cases: &[(&str, i32)] = &[
        ("blur(5px)", 5),
        ("blur(20px)", 8), // 1-8pxにクランプ
        ("grayscale(1)", 0),
        ("", 0),
    ];

    // mix-blend-mode / background-blend-mode の合成関数（純関数）。
    let blend_cases: &[(&str, (u8, u8, u8), (u8, u8, u8), (u8, u8, u8))] = &[
        // multiply: 200*100/255=78
        ("multiply", (200, 200, 200), (100, 100, 100), (78, 78, 78)),
        // screen: 255-(255-200)*(255-100)/255 = 255-55*155/255 = 255-33 = 222
        ("screen", (200, 200, 200), (100, 100, 100), (222, 222, 222)),
        ("darken", (200, 50, 128), (100, 150, 128), (100, 50, 128)),
        ("lighten", (200, 50, 128), (100, 150, 128), (200, 150, 128)),
        ("difference", (200, 50, 128), (100, 150, 128), (100, 100, 0)),
        // 未対応/normal は src をそのまま返す。
        ("normal", (10, 20, 30), (200, 200, 200), (10, 20, 30)),
        // overlay: dst<=127分岐 → 2*200*100/255=156
        ("overlay", (200, 200, 200), (100, 100, 100), (156, 156, 156)),
        // hard-light: src>127分岐 → 255-2*55*155/255=189
        ("hard-light", (200, 200, 200), (100, 100, 100), (189, 189, 189)),
        // exclusion: 200+100-2*200*100/255=144
        ("exclusion", (200, 200, 200), (100, 100, 100), (144, 144, 144)),
        // color-dodge: 255*100/(255-200)=463→クランプ255
        ("color-dodge", (200, 200, 200), (100, 100, 100), (255, 255, 255)),
        // color-burn: 255-255*(255-100)/200=255-197=58
        ("color-burn", (200, 200, 200), (100, 100, 100), (58, 58, 58)),
        // 非可分モード: dst=黒/src=白の組み合わせは Lum/Sat が単純化されるため手計算で検証しやすい。
        // luminosity: SetLum(黒, Lum(白)=1.0) → 白
        ("luminosity", (255, 255, 255), (0, 0, 0), (255, 255, 255)),
        // color: SetLum(白, Lum(黒)=0) → 黒
        ("color", (255, 255, 255), (0, 0, 0), (0, 0, 0)),
        // hue: SetSat(白, Sat(黒)=0) は無彩色化 → SetLum後も黒
        ("hue", (255, 255, 255), (0, 0, 0), (0, 0, 0)),
        // saturation: SetSat(黒, Sat(白)=0) → 黒のまま
        ("saturation", (255, 255, 255), (0, 0, 0), (0, 0, 0)),
        // soft-light: cs=0.7843>0.5, cb=0.3922>0.25 → dd=sqrt(cb)。b=cb+(2cs-1)*(dd-cb)≈0.525→133
        ("soft-light", (200, 200, 200), (100, 100, 100), (133, 133, 133)),
    ];

    // background-repeat の解析(純関数)。(入力, want_x, want_y)
    let bg_repeat_cases: &[(&str, super::super::web_engine::BgRepeatMode, super::super::web_engine::BgRepeatMode)] = &[
        ("no-repeat", super::super::web_engine::BgRepeatMode::NoRepeat, super::super::web_engine::BgRepeatMode::NoRepeat),
        ("repeat-x", super::super::web_engine::BgRepeatMode::Repeat, super::super::web_engine::BgRepeatMode::NoRepeat),
        ("repeat-y", super::super::web_engine::BgRepeatMode::NoRepeat, super::super::web_engine::BgRepeatMode::Repeat),
        ("space", super::super::web_engine::BgRepeatMode::Space, super::super::web_engine::BgRepeatMode::Space),
        ("round", super::super::web_engine::BgRepeatMode::Round, super::super::web_engine::BgRepeatMode::Round),
        ("repeat space", super::super::web_engine::BgRepeatMode::Repeat, super::super::web_engine::BgRepeatMode::Space),
        ("round no-repeat", super::super::web_engine::BgRepeatMode::Round, super::super::web_engine::BgRepeatMode::NoRepeat),
    ];

    // rgb()/rgba() のパーセント表記コンポーネント（CSS1から有効な構文）の解析。
    let rgb_pct_cases: &[(&str, u32)] = &[
        ("rgb(100%, 50%, 0%)", 0xFFFF7F00),
        ("rgb(0%, 0%, 0%)", 0xFF000000),
        ("rgba(100%, 0%, 0%, 0.5)", 0x7FFF0000),
        // 整数表記と混在しても壊れない。
        ("rgb(255, 50%, 0)", 0xFFFF7F00),
        // `#RGBA`（4桁ショートハンド+アルファ、CSS Color Module Level 4）が
        // `#RGB`/6桁/8桁は対応済みなのにこれだけ丸ごと未対応で色指定自体が
        // 無視されるバグだった。
        ("#f00f", 0xFFFF0000),
        ("#f008", 0x88FF0000),
    ];

    // hsl() の hue は 360 を法とする値（負値・360以上でも巻き戻って解釈される）。
    let hsl_hue_wrap_cases: &[(&str, u32)] = &[
        // hsl(390,...) は hsl(30,...)（オレンジ）と同じになるはず。
        ("hsl(390, 100%, 50%)", 0xFFFF7F00),
        ("hsl(30, 100%, 50%)", 0xFFFF7F00),
        // hsl(-30,...) は hsl(330,...)（マゼンタ寄りのピンク）と同じになるはず。
        ("hsl(-30, 100%, 50%)", 0xFFFF007F),
        ("hsl(330, 100%, 50%)", 0xFFFF007F),
    ];

    // rgb()/rgba() のスペース区切り + 任意の `/ alpha`（CSS Color Level 4）。
    // 以前は `inner.split(',')` 固定でスペース区切りが常に色なし（None）に
    // 落ちるバグだった（hsl()/hwb() には既にこの構文対応があったが rgb()/rgba()
    // だけ漏れていた非対称ペア）。
    let rgb_space_cases: &[(&str, u32)] = &[
        ("rgb(255 0 0)", 0xFFFF0000),
        ("rgb(255 0 0 / 50%)", 0x7FFF0000),
        ("rgba(0 255 0 / 0.5)", 0x7F00FF00),
    ];

    // oklab()/oklch() — CSS Color Level 4（丸ごと未実装だった。OKLab⇄線形sRGB
    // 変換行列の設計上、L=1・彩度0 は必ず白、L=0 は必ず黒になる不変量で検証する）。
    let oklab_oklch_cases: &[(&str, u32)] = &[
        ("oklch(1 0 0)", 0xFFFFFFFF),
        ("oklch(0 0 0)", 0xFF000000),
        ("oklab(1 0 0)", 0xFFFFFFFF),
        ("oklab(0 0 0)", 0xFF000000),
    ];

    // color(COLORSPACE c1 c2 c3 [/ a]) — CSS Color Module Level 4の述語関数。
    // 丸ごと未対応だった。`srgb`（0-1範囲、ガンマ符号化済み。`rgb()`の値を
    // 255で割ったものと同じ）と`srgb-linear`（線形light、`oklab()`と同じ
    // 変換）のみ対応、それ以外の色空間（`display-p3`等）はNoneのまま。
    let color_fn_cases: &[(&str, u32)] = &[
        ("color(srgb 1 0 0)", 0xFFFF0000),
        ("color(srgb 0 1 0)", 0xFF00FF00),
        ("color(srgb 1 1 1 / 0.5)", 0x7FFFFFFF),
        ("color(srgb-linear 1 1 1)", 0xFFFFFFFF),
        ("color(srgb-linear 0 0 0)", 0xFF000000),
    ];

    // hwb(h w% b%) — CSS Color Level 4。
    let hwb_cases: &[(&str, u32)] = &[
        ("hwb(0, 0%, 0%)", 0xFFFF0000),   // 純赤
        ("hwb(0, 100%, 0%)", 0xFFFFFFFF), // white=100% は色相に関わらず白
        ("hwb(0, 0%, 100%)", 0xFF000000), // black=100% は色相に関わらず黒
        ("hwb(120, 0%, 0%)", 0xFF00FF00), // 純緑
        ("hwb(240, 0%, 0%)", 0xFF0000FF), // 純青
        ("hwb(0 0% 0% / 50%)", 0x7FFF0000), // スペース区切り + アルファ
    ];

    // color-mix(in <space>, <color> [<pct>]?, <color> [<pct>]?) — CSS Color Module Level 5。
    // 期待値はチャンネルごとの整数除算（切り捨て、四捨五入ではない）で手計算したもの。
    let color_mix_cases: &[(&str, u32)] = &[
        ("color-mix(in srgb, red, blue)", 0xFF7F007F), // 明示比率なし = 50/50
        ("color-mix(in srgb, red 100%, blue 0%)", 0xFFFF0000), // 100/0 = 片方そのまま
        ("color-mix(in srgb, red 0%, blue 100%)", 0xFF0000FF),
        ("color-mix(in srgb, red 75%, blue 25%)", 0xFFBF003F), // 3:1 比率
        ("color-mix(in srgb, red 40%, blue)", 0xFF660099), // 片方だけ指定 -> 他方は残り(60%)
        ("color-mix(in srgb, white, black)", 0xFF7F7F7F), // 白黒混合 = 灰色
    ];

    // text-decoration ショートハンド（line/style/color 空白区切り任意順）の解析(純関数)。
    // (入力, want_underline, want_line_through, want_overline, want_none, want_style, want_color)
    let text_decoration_cases: &[(&str, bool, bool, bool, bool, Option<&str>, Option<u32>)] = &[
        ("underline", true, false, false, false, None, None),
        ("none", false, false, false, true, None, None),
        ("underline wavy red", true, false, false, false, Some("wavy"), Some(0xFFFF0000)),
        (
            "line-through dotted #00ff00",
            false,
            true,
            false,
            false,
            Some("dotted"),
            Some(0xFF00FF00),
        ),
        ("overline", false, false, true, false, None, None),
    ];

    let mut passed = 0;
    // +3 は :focus/:focus-visible/:active 事前計算の直接検査、+2 は <style>/<script> の
    // Text 子ノード検査（下記）、+3 は複数背景レイヤー抽出（extract_all_url_paths）の
    // 直接検査の分、+1 は sample_box_blur の直接検査の分、+1 は :target の直接検査の分、
    // +2 は :root の直接検査の分、+1 は疑似要素の特異度寄与の直接検査の分、
    // +1 は :focus-within の直接検査の分、+3 は light-dark()（light/dark/
    // ネストの3件）の直接検査の分（この項が丸ごと抜けており `passed` が `total` を
    // 超えて CSS_SELFTEST が個別 FAIL メッセージ無しで丸ごと FAIL する回帰があった）、
    // +10 は `eval_calc`（除算/3項連鎖/括弧ネスト対応。2026-07-16）の
    // 直接検査10件の分、+10 は `parse_px_like`（vmin/vmax/絶対単位/
    // thin・medium・thickキーワード対応。2026-07-16/17）の直接検査10件の
    // 分、+7 は`parse_calc_unit`/`eval_length_token`（calc()本体/min()/
    // max()/clamp()引数のvh/vw/vmin/vmax/絶対単位対応。2026-07-17）の
    // 直接検査7件の分、+5 は `parse_line_height`（%/em単位対応。
    // 2026-07-17）の直接検査5件の分、+5 は `resolve_text_indent`
    // （%/em単位対応。2026-07-17）の直接検査5件の分、+5 は
    // `parse_shadow_len_tok`（box-shadow/text-shadowのrem単位対応。
    // 2026-07-17）の直接検査5件の分、末尾の +4 は`resolve_border_radius`
    // （rem単位対応。2026-07-17）の直接検査4件の分。
    let mut total = cases.len()
        + value_cases.len()
        + tt_cases.len()
        + alpha_roman_cases.len()
        + filter_cases.len()
        + blur_radius_cases.len()
        + blend_cases.len()
        + text_decoration_cases.len()
        + bg_repeat_cases.len()
        + rgb_pct_cases.len()
        + rgb_space_cases.len()
        + hsl_hue_wrap_cases.len()
        + hwb_cases.len()
        + oklab_oklch_cases.len()
        + color_fn_cases.len()
        + color_mix_cases.len()
        + 3
        + 2
        + 3
        + 1
        + 1
        + 2
        + 1
        + 1
        + 3
        + 10
        + 10
        + 7
        + 5
        + 5
        + 5
        + 4;
    for (input, want_radius) in blur_radius_cases {
        let got = super::super::web_engine::draw_helpers::parse_blur_radius(input);
        if got == *want_radius {
            passed += 1;
        } else {
            crate::println!(
                "CSS_SELFTEST FAIL: parse_blur_radius(`{}`) => {} (want {})",
                input, got, want_radius
            );
        }
    }
    // sample_box_blur: 3x3画像で中心のみ赤、周囲は黒。半径1で中心をぼかすと
    // R = 255/9 = 28（整数除算切り捨て）、G=B=0。
    {
        let mut rgba = alloc::vec![0u8; 3 * 3 * 4];
        let center_idx = 4 * 4;
        rgba[center_idx] = 255;
        rgba[center_idx + 3] = 255;
        let img = super::super::web_engine::DecodedImage { width: 3, height: 3, rgba };
        let got = super::super::web_engine::draw_helpers::sample_box_blur(&img, 1, 1, 1);
        if got == (28, 0, 0) {
            passed += 1;
        } else {
            crate::println!("CSS_SELFTEST FAIL: sample_box_blur => {:?} (want (28,0,0))", got);
        }
    }
    // `calc()`（丸ごと限定的な実装だった。以前は`+`/`-`/`*`を1回ずつ・2項までしか
    // 扱えず`/`（除算）が丸ごと未対応、括弧ネストも不可だった。実務でよく使う
    // `calc(100% / 3)`のような除算や`calc(100% - 20px - 10px)`のような3項式、
    // `calc((100% - 20px) / 2)`のような括弧ネストが軒並み評価失敗していた。
    // 2026-07-16 発見・修正）。
    {
        let calc_cases: &[(&str, i32, i32)] = &[
            // 既存の2項ケース（回帰確認）。
            ("calc(100px - 20px)", 0, 80),
            ("calc(50% + 10px)", 200, 110),
            ("calc(10px * 2)", 0, 20),
            // 除算（以前は丸ごと未対応）。
            ("calc(100px / 4)", 0, 25),
            ("calc(300% / 3)", 100, 100),
            // 3項以上の連鎖（以前は2項までしか扱えなかった）。
            ("calc(100% - 20px - 10px)", 200, 170),
            ("calc(10px + 20px + 30px)", 0, 60),
            // 丸括弧ネスト（以前は丸ごと未対応）。
            ("calc((100px - 20px) / 2)", 0, 40),
            ("calc(50% - (10px + 5px))", 200, 85),
            // 単項マイナス（先頭の `-` は演算子ではなく数値の一部）。
            ("calc(-10px + 50px)", 0, 40),
        ];
        for (expr, cw, want) in calc_cases {
            let got = super::values::eval_calc(expr, *cw);
            if got == Some(*want) {
                passed += 1;
            } else {
                crate::println!(
                    "CSS_SELFTEST FAIL: eval_calc(`{}`, {}) => {:?} (want Some({}))",
                    expr, cw, got, want
                );
            }
        }
    }
    // `parse_px_like`（`layout/values.rs`）に`vmin`/`vmax`（ビューポート相対
    // 単位。`vh`/`vw`は実装済みなのに同じ仲間だけ抜けていた兄弟ギャップ）と
    // 絶対長さ単位`in`/`cm`/`mm`/`pt`/`pc`/`q`（丸ごと未対応）が丸ごと
    // 未対応だったバグ（2026-07-16 発見・修正。CSS Values and Units の
    // 規定どおり`96px = 1in`を基準に換算）。ビューポート寸法を既知の値へ
    // 固定してから検証する。
    {
        // 他のテストケース（`@media`のビューポート幅判定等）へ影響しない
        // よう、変更前の値を退避し検証後に復元する（この検証で一度この
        // 復元漏れがあり、後続の`@media (min-width/max-width)`テストが
        // 巻き添えでFAILする回帰を自己発見・修正した）。
        let orig_w = crate::os_lib::layout::VIEWPORT_HINT_W.load(core::sync::atomic::Ordering::Relaxed);
        let orig_h = crate::os_lib::layout::VIEWPORT_HINT_H.load(core::sync::atomic::Ordering::Relaxed);
        crate::os_lib::layout::VIEWPORT_HINT_W.store(1000, core::sync::atomic::Ordering::Relaxed);
        crate::os_lib::layout::VIEWPORT_HINT_H.store(500, core::sync::atomic::Ordering::Relaxed);
        let px_cases: &[(&str, i32)] = &[
            // vmin/vmax: min(1000,500)=500, max(1000,500)=1000。
            ("50vmin", 250),
            ("50vmax", 500),
            // 絶対単位（96px基準）。
            ("1in", 96),
            ("2.54cm", 96),
            ("25.4mm", 96),
            ("72pt", 96),
            ("6pc", 96),
            // `border-width`のキーワード値（丸ごと未対応だった。`outline-
            // width`側は既に対応済みで`border-width`側にだけ兄弟ギャップが
            // 残っていた。2026-07-17 発見・実装）。
            ("thin", 1),
            ("medium", 3),
            ("thick", 5),
        ];
        for (input, want) in px_cases {
            let got = crate::os_lib::layout::parse_px_like(input);
            if got == Some(*want) {
                passed += 1;
            } else {
                crate::println!(
                    "CSS_SELFTEST FAIL: parse_px_like(`{}`) => {:?} (want Some({}))",
                    input, got, want
                );
            }
        }
        // `calc()`本体の単位トークン解決（`parse_calc_unit`）と、
        // `min()`/`max()`/`clamp()`の引数解決（`eval_length_token`）にも
        // 同じ`vh`/`vw`/`vmin`/`vmax`/絶対単位が丸ごと未対応だった
        // バグ（`calc(50vw + 10px)`/`min(50vw, 300px)`のようなビュー
        // ポート単位を含む式が丸ごと評価失敗、または引数が静かに脱落
        // していた。2026-07-17 発見・実装）。同じビューポート寸法
        // （1000×500）で検証する。
        let calc_unit_cases: &[(&str, i32, i32)] = &[
            ("calc(50vw + 10px)", 0, 510),
            ("calc(50vh - 10px)", 0, 240),
            ("calc(50vmin + 50px)", 0, 300),
            ("calc(1in + 4px)", 0, 100),
            ("min(50vw, 300px)", 0, 300),
            ("max(50vw, 300px)", 0, 500),
            ("clamp(10px, 50vw, 100px)", 0, 100),
        ];
        for (expr, cw, want) in calc_unit_cases {
            let got = super::values::eval_css_math(expr, *cw);
            if got == Some(*want) {
                passed += 1;
            } else {
                crate::println!(
                    "CSS_SELFTEST FAIL: eval_css_math(`{}`, {}) => {:?} (want Some({}))",
                    expr, cw, got, want
                );
            }
        }
        crate::os_lib::layout::VIEWPORT_HINT_W.store(orig_w, core::sync::atomic::Ordering::Relaxed);
        crate::os_lib::layout::VIEWPORT_HINT_H.store(orig_h, core::sync::atomic::Ordering::Relaxed);
    }
    // `line-height`が`%`/`em`単位を丸ごとサポートしていなかったバグ
    // （`web_engine/layout.rs`の`parse_line_height`。2026-07-17 発見・
    // 実装。自己テストのためネスト関数からモジュールトップレベルへ移動
    // 済み。詳細は同関数のdocコメント参照）。
    {
        let line_height_cases: &[(&str, u32, i32)] = &[
            ("16px", 16, 16),
            ("1.5", 16, 24),
            ("150%", 16, 24),
            ("1.5em", 16, 24),
            ("2em", 20, 40),
        ];
        for (input, font_size, want) in line_height_cases {
            let got = super::super::web_engine::parse_line_height(input, *font_size);
            if got == *want {
                passed += 1;
            } else {
                crate::println!(
                    "CSS_SELFTEST FAIL: parse_line_height(`{}`, {}) => {} (want {})",
                    input, font_size, got, want
                );
            }
        }
    }
    // `text-indent`が`%`/`em`単位を丸ごとサポートしていなかったバグ
    // （`web_engine/layout.rs`の`resolve_text_indent`。2026-07-17
    // 発見・実装。詳細は同関数のdocコメント参照）。
    {
        // (input, container_width, font_size, want)
        let text_indent_cases: &[(&str, i32, u32, i32)] = &[
            ("20px", 400, 16, 20),
            ("10", 400, 16, 10),
            ("10%", 400, 16, 40),
            ("2em", 400, 16, 32),
            ("2em", 400, 20, 40),
            ("1.5rem", 400, 20, 24),
        ];
        for (input, cw, font_size, want) in text_indent_cases {
            let got = super::super::web_engine::resolve_text_indent(input, *cw, *font_size);
            if got == *want {
                passed += 1;
            } else {
                crate::println!(
                    "CSS_SELFTEST FAIL: resolve_text_indent(`{}`, {}, {}) => {} (want {})",
                    input, cw, font_size, got, want
                );
            }
        }
    }
    // `box-shadow`/`text-shadow`のオフセット/ぼかし値が`rem`単位を丸ごと
    // サポートしていなかったバグ（`web_engine/layout.rs`の
    // `parse_shadow_len_tok`。2026-07-17 発見・実装。詳細は同関数の
    // docコメント参照）。
    {
        let shadow_len_cases: &[(&str, Option<i32>)] = &[
            ("10px", Some(10)),
            ("0.5rem", Some(8)),
            ("2rem", Some(32)),
            ("red", None),
            ("inset", None),
        ];
        for (input, want) in shadow_len_cases {
            let got = super::super::web_engine::parse_shadow_len_tok(input);
            if got == *want {
                passed += 1;
            } else {
                crate::println!(
                    "CSS_SELFTEST FAIL: parse_shadow_len_tok(`{}`) => {:?} (want {:?})",
                    input, got, want
                );
            }
        }
    }
    // `border-radius`が`rem`単位を丸ごとサポートしていなかったバグ
    // （`web_engine/layout.rs`の`resolve_border_radius`。2026-07-17
    // 発見・実装。詳細は同関数のdocコメント参照）。
    {
        // (input, container_w, want)
        let border_radius_cases: &[(&str, i32, i32)] = &[
            ("10px", 200, 10),
            ("50%", 200, 100),
            ("1rem", 200, 16),
            ("0.5rem", 200, 8),
        ];
        for (input, cw, want) in border_radius_cases {
            let got = super::super::web_engine::resolve_border_radius(input, *cw);
            if got == *want {
                passed += 1;
            } else {
                crate::println!(
                    "CSS_SELFTEST FAIL: resolve_border_radius(`{}`, {}) => {} (want {})",
                    input, cw, got, want
                );
            }
        }
    }
    for (input, want_u, want_lt, want_ov, want_none, want_style, want_color) in text_decoration_cases {
        let (u, lt, ov, is_none, style, color) =
            super::super::web_engine::helpers::parse_text_decoration_shorthand(input);
        let style_ok = style.as_deref() == *want_style;
        let color_ok = color == *want_color;
        if u == *want_u
            && lt == *want_lt
            && ov == *want_ov
            && is_none == *want_none
            && style_ok
            && color_ok
        {
            passed += 1;
        } else {
            crate::println!(
                "CSS_SELFTEST FAIL: parse_text_decoration_shorthand(`{}`) => ({},{},{},{},{:?},{:?}) (want ({},{},{},{},{:?},{:?}))",
                input, u, lt, ov, is_none, style, color, want_u, want_lt, want_ov, want_none, want_style, want_color
            );
        }
    }
    for (input, want_x, want_y) in bg_repeat_cases {
        let (x, y) = super::super::web_engine::helpers::parse_bg_repeat(Some(input));
        if x == *want_x && y == *want_y {
            passed += 1;
        } else {
            crate::println!(
                "CSS_SELFTEST FAIL: parse_bg_repeat(`{}`) => ({:?},{:?}) (want ({:?},{:?}))",
                input, x, y, want_x, want_y
            );
        }
    }
    for (input, want) in rgb_pct_cases {
        let got = parse_color(input);
        if got == Some(*want) {
            passed += 1;
        } else {
            crate::println!(
                "CSS_SELFTEST FAIL: parse_color(`{}`) => {:?} (want {:#010X})",
                input, got, want
            );
        }
    }
    for (input, want) in rgb_space_cases {
        let got = parse_color(input);
        if got == Some(*want) {
            passed += 1;
        } else {
            crate::println!(
                "CSS_SELFTEST FAIL: parse_color(`{}`) => {:?} (want {:#010X})",
                input, got, want
            );
        }
    }
    for (input, want) in hsl_hue_wrap_cases {
        let got = parse_color(input);
        if got == Some(*want) {
            passed += 1;
        } else {
            crate::println!(
                "CSS_SELFTEST FAIL: parse_color(`{}`) => {:?} (want {:#010X})",
                input, got, want
            );
        }
    }
    for (input, want) in hwb_cases {
        let got = parse_color(input);
        if got == Some(*want) {
            passed += 1;
        } else {
            crate::println!(
                "CSS_SELFTEST FAIL: parse_color(`{}`) => {:?} (want {:#010X})",
                input, got, want
            );
        }
    }
    for (input, want) in oklab_oklch_cases {
        let got = parse_color(input);
        if got == Some(*want) {
            passed += 1;
        } else {
            crate::println!(
                "CSS_SELFTEST FAIL: parse_color(`{}`) => {:?} (want {:#010X})",
                input, got, want
            );
        }
    }
    for (input, want) in color_fn_cases {
        let got = parse_color(input);
        if got == Some(*want) {
            passed += 1;
        } else {
            crate::println!(
                "CSS_SELFTEST FAIL: parse_color(`{}`) => {:?} (want {:#010X})",
                input, got, want
            );
        }
    }
    for (input, want) in color_mix_cases {
        let got = parse_color(input);
        if got == Some(*want) {
            passed += 1;
        } else {
            crate::println!(
                "CSS_SELFTEST FAIL: parse_color(`{}`) => {:?} (want {:#010X})",
                input, got, want
            );
        }
    }
    // light-dark(light, dark) — CSS Color Module Level 5。丸ごと未対応だった。
    // PREFERS_DARK（既定 light=false）を明示的に切り替えて両分岐を検証する。
    {
        let saved = PREFERS_DARK.load(AtomicOrd::Relaxed);
        PREFERS_DARK.store(false, AtomicOrd::Relaxed);
        let got_light = parse_color("light-dark(#ff0000, #0000ff)");
        if got_light == Some(0xFFFF0000) {
            passed += 1;
        } else {
            crate::println!(
                "CSS_SELFTEST FAIL: light-dark (light mode) => {:?} (want 0xFFFF0000)",
                got_light
            );
        }
        PREFERS_DARK.store(true, AtomicOrd::Relaxed);
        let got_dark = parse_color("light-dark(#ff0000, #0000ff)");
        if got_dark == Some(0xFF0000FF) {
            passed += 1;
        } else {
            crate::println!(
                "CSS_SELFTEST FAIL: light-dark (dark mode) => {:?} (want 0xFF0000FF)",
                got_dark
            );
        }
        // ネストした light-dark() の再帰解決も確認する。
        let got_nested = parse_color("light-dark(#ff0000, light-dark(#00ff00, #0000ff))");
        if got_nested == Some(0xFF0000FF) {
            passed += 1;
        } else {
            crate::println!(
                "CSS_SELFTEST FAIL: light-dark nested => {:?} (want 0xFF0000FF)",
                got_nested
            );
        }
        PREFERS_DARK.store(saved, AtomicOrd::Relaxed);
    }
    // :target — CURRENT_TARGET_ID を直接操作して判定を検証する。
    {
        *super::super::layout::CURRENT_TARGET_ID.lock() = String::from("sec2");
        let dom = super::super::dom::parse_html(
            "<div id='sec1'></div><div id='sec2'></div><div id='t'></div>",
        );
        let sheet = parse_css("#sec2:target{zz:1}");
        let styled = style_tree(&dom, &sheet);
        fn find_marked_target(node: &StyledNode, id: &str) -> Option<bool> {
            if let NodeType::Element { id: nid, .. } = &node.node.node_type {
                if nid.as_deref() == Some(id) {
                    return Some(node.specified_values.contains_key("zz"));
                }
            }
            for c in &node.children {
                if let Some(r) = find_marked_target(c, id) {
                    return Some(r);
                }
            }
            None
        }
        let matched = find_marked_target(&styled, "sec2").unwrap_or(false);
        let not_matched = find_marked_target(&styled, "sec1").unwrap_or(true);
        if matched && !not_matched {
            passed += 1;
        } else {
            crate::println!(
                "CSS_SELFTEST FAIL: :target => sec2={} sec1={} (want true/false)",
                matched, not_matched
            );
        }
        *super::super::layout::CURRENT_TARGET_ID.lock() = String::new();
    }
    // :focus-within — FOCUS_WITHIN_PTRS を直接操作して判定を検証する（本番コードでは
    // parse_and_layout がフォーカス変更のたびに祖先パスを再計算する）。id を持たない
    // 要素も含めてノードポインタの同一性で判定できることも確認する。
    {
        fn collect_path_to(
            node: &super::super::dom::Node,
            target_id: &str,
            path: &mut alloc::vec::Vec<usize>,
        ) -> bool {
            path.push(node as *const _ as usize);
            if let NodeType::Element { id, .. } = &node.node_type {
                if id.as_deref() == Some(target_id) {
                    return true;
                }
            }
            for c in &node.children {
                if collect_path_to(c, target_id, path) {
                    return true;
                }
            }
            path.pop();
            false
        }
        let dom = super::super::dom::parse_html(
            "<div id='outer'><span><input id='inp'></span></div><div id='other'></div>",
        );
        let mut path = alloc::vec::Vec::new();
        collect_path_to(&dom, "inp", &mut path);
        {
            let mut set = super::super::layout::FOCUS_WITHIN_PTRS.lock();
            set.clear();
            set.extend(path);
        }
        let sheet = parse_css("#outer:focus-within{zz:1}");
        let styled = style_tree(&dom, &sheet);
        fn find_marked_fw(node: &StyledNode, id: &str) -> Option<bool> {
            if let NodeType::Element { id: nid, .. } = &node.node.node_type {
                if nid.as_deref() == Some(id) {
                    return Some(node.specified_values.contains_key("zz"));
                }
            }
            for c in &node.children {
                if let Some(r) = find_marked_fw(c, id) {
                    return Some(r);
                }
            }
            None
        }
        let matched = find_marked_fw(&styled, "outer").unwrap_or(false);
        let not_matched = find_marked_fw(&styled, "other").unwrap_or(true);
        if matched && !not_matched {
            passed += 1;
        } else {
            crate::println!(
                "CSS_SELFTEST FAIL: :focus-within => outer={} other={} (want true/false)",
                matched, not_matched
            );
        }
        super::super::layout::FOCUS_WITHIN_PTRS.lock().clear();
    }
    // fieldset[disabled] 祖先による暗黙の無効化を :disabled/:enabled が反映することの検証
    {
        let html = r#"<div id="root"><fieldset disabled="true"><input id="i1" /></fieldset><fieldset><input id="i2" /></fieldset></div>"#;
        let dom = super::super::dom::parse_html(html);
        let sheet = parse_css("input:disabled{zz:1} input:enabled{yy:1}");
        let styled = style_tree(&dom, &sheet);
        fn find_marked_styles(node: &StyledNode, id: &str) -> Option<(bool, bool)> {
            if let NodeType::Element { id: nid, .. } = &node.node.node_type {
                if nid.as_deref() == Some(id) {
                    return Some((
                        node.specified_values.contains_key("zz"),
                        node.specified_values.contains_key("yy")
                    ));
                }
            }
            for c in &node.children {
                if let Some(r) = find_marked_styles(c, id) {
                    return Some(r);
                }
            }
            None
        }
        let i1_styles = find_marked_styles(&styled, "i1").unwrap_or((false, false));
        let i2_styles = find_marked_styles(&styled, "i2").unwrap_or((false, false));

        // i1 (disabled) => zz (disabled) should match, yy (enabled) should not.
        // i2 (enabled)  => zz (disabled) should not, yy (enabled) should match.
        let ok = i1_styles.0 && !i1_styles.1 && !i2_styles.0 && i2_styles.1;
        total += 1;
        if ok {
            passed += 1;
        } else {
            crate::println!(
                "CSS_SELFTEST FAIL: fieldset[disabled] CSS state propagation => i1={:?} i2={:?} (want (true,false) and (false,true))",
                i1_styles, i2_styles
            );
        }
    }
    // background-image の複数レイヤー抽出（純関数）。
    {
        let got = super::super::web_engine::helpers::extract_all_url_paths("url(a.png), url('b.png')");
        if got == alloc::vec!["a.png", "b.png"] {
            passed += 1;
        } else {
            crate::println!("CSS_SELFTEST FAIL: extract_all_url_paths multi => {:?}", got);
        }
        let got_single = super::super::web_engine::helpers::extract_all_url_paths("url(only.png)");
        if got_single == alloc::vec!["only.png"] {
            passed += 1;
        } else {
            crate::println!(
                "CSS_SELFTEST FAIL: extract_all_url_paths single => {:?}",
                got_single
            );
        }
        let got_none = super::super::web_engine::helpers::extract_all_url_paths("none");
        if got_none.is_empty() {
            passed += 1;
        } else {
            crate::println!("CSS_SELFTEST FAIL: extract_all_url_paths none => {:?}", got_none);
        }
    }
    // backdrop-filter / filter tokens test
    // `total`の集計漏れ（`fieldset[disabled]`テストと同じ自己追跡`total += 1`
    // パターンが無く、かつファイル冒頭の巨大な手動合計コメントにも記載が
    // 無かった。ファイル冒頭のコメントが警告している「`passed`が`total`を
    // 超えて個別FAILメッセージ無しで丸ごとFAILする」回帰そのもの。
    // 2026-07-18 発見・修正）。
    {
        let radius = super::super::web_engine::draw_helpers::parse_blur_radius("blur(8px) brightness(1.2)");
        total += 1;
        if radius == 8 {
            passed += 1;
        } else {
            crate::println!("CSS_SELFTEST FAIL: parse_blur_radius => {}", radius);
        }
    }
    // gradient alpha interpolation test
    {
        let stops = alloc::vec![
            super::super::web_engine::GradientStop { position: 0.0, color: 0x00FF0000 },
            super::super::web_engine::GradientStop { position: 1.0, color: 0xFF00FF00 },
        ];
        let mid_color = super::super::web_engine::draw_helpers::sample_gradient_stops(&stops, 0.5);
        let mid_alpha = (mid_color >> 24) & 0xFF;
        total += 1;
        if (120..=135).contains(&mid_alpha) {
            passed += 1;
        } else {
            crate::println!("CSS_SELFTEST FAIL: sample_gradient_stops alpha => 0x{:08X}", mid_color);
        }
    }
    // clip-path inset round test
    {
        total += 1;
        if let Some(shape) = super::super::web_engine::draw_helpers::parse_clip_shape("inset(10px round 20px)", 100, 100) {
            let inside_center = super::super::web_engine::draw_helpers::clip_inside(&shape, 50, 50);
            let inside_corner = super::super::web_engine::draw_helpers::clip_inside(&shape, 12, 12);
            if inside_center && !inside_corner {
                passed += 1;
            } else {
                crate::println!("CSS_SELFTEST FAIL: clip-path inset round => center={}, corner={}", inside_center, inside_corner);
            }
        } else {
            crate::println!("CSS_SELFTEST FAIL: clip-path inset round parse failed");
        }
    }
    // clip-path path() test
    {
        total += 1;
        if let Some(shape) = super::super::web_engine::draw_helpers::parse_clip_shape(r#"path("M 0 0 L 100 0 L 100 100 Z")"#, 100, 100) {
            let inside = super::super::web_engine::draw_helpers::clip_inside(&shape, 50, 20);
            let outside = super::super::web_engine::draw_helpers::clip_inside(&shape, 20, 50);
            if inside && !outside {
                passed += 1;
            } else {
                crate::println!("CSS_SELFTEST FAIL: clip-path path() => in={}, out={}", inside, outside);
            }
        } else {
            crate::println!("CSS_SELFTEST FAIL: clip-path path() parse failed");
        }
    }

    // text-stroke test
    {
        let sheet = parse_css("h1 { -webkit-text-stroke: 2px #ff0000; }");
        total += 1;
        if !sheet.rules.is_empty() {
            passed += 1;
        } else {
            crate::println!("CSS_SELFTEST FAIL: text-stroke parse failed");
        }
    }
    // `background`ショートハンドの`<position>/<size>`スラッシュ構文
    // （`background: url(...) center/cover no-repeat`）がカスケード時点の
    // `expand_background_shorthand`で`background-position`/`-size`/`-repeat`
    // longhandへ正しく展開されることを検証。以前はこの分解ロジックが
    // `web_engine/layout.rs`内の1箇所にしか配線されておらず、それ以外の
    // 10箇所以上の重複コードブロックでは`/size`が無視されるバグだった
    // （2026-07-21発見・修正。詳細はwalkthrough.md参照）。
    {
        let dom = super::super::dom::parse_html("<div id='d'></div>");
        let sheet = parse_css(
            "#d{background:url('x.jpg') center/cover no-repeat}",
        );
        let styled = style_tree(&dom, &sheet);
        fn find_div<'a>(node: &'a StyledNode<'a>) -> Option<&'a StyledNode<'a>> {
            if let NodeType::Element { id, .. } = &node.node.node_type {
                if id.as_deref() == Some("d") {
                    return Some(node);
                }
            }
            for c in &node.children {
                if let Some(r) = find_div(c) {
                    return Some(r);
                }
            }
            None
        }
        total += 1;
        if let Some(d) = find_div(&styled) {
            let size = d.specified_values.get("background-size").map(|s| s.as_str());
            let position = d.specified_values.get("background-position").map(|s| s.as_str());
            let repeat = d.specified_values.get("background-repeat").map(|s| s.as_str());
            if size == Some("cover") && position == Some("center") && repeat == Some("no-repeat") {
                passed += 1;
            } else {
                crate::println!(
                    "CSS_SELFTEST FAIL: background shorthand slash expansion => size={:?} position={:?} repeat={:?}",
                    size, position, repeat
                );
            }
        } else {
            crate::println!("CSS_SELFTEST FAIL: background shorthand slash expansion => #d not found");
        }
    }
    // `@font-face`の解析（従来は完全にスキップされていた）。`font-family`の
    // 抽出と、`src`の複数候補（`url() format()`）からTTF/OTF/WOFF2形式を
    // 優先してURLを選ぶロジックを検証する。**2026-07-22更新**: WOFF2デコーダ
    // （`decompress_woff2`/`decompress_brotli`）が実装されたことに伴い、
    // `parse_font_face_def`の`is_preferred`判定に`woff2`も追加された
    // （以前はTTF/OTFのみ優先しWOFF2は非優先扱いだったため`b.ttf`を選んで
    // いたが、今はWOFF2も同格に優先されるため先頭に現れた`a.woff2`が
    // 選ばれるのが正しい挙動）。
    {
        let sheet = parse_css(
            "@font-face{font-family:'Noto Sans JP';src:url(a.woff2) format('woff2'),url(b.ttf) format('truetype')}",
        );
        total += 1;
        if sheet.font_faces.len() == 1
            && sheet.font_faces[0].family == "Noto Sans JP"
            && sheet.font_faces[0].src_url.as_deref() == Some("a.woff2")
        {
            passed += 1;
        } else {
            crate::println!(
                "CSS_SELFTEST FAIL: @font-face parse => {:?}",
                sheet.font_faces
            );
        }
    }
    // `@font-face`で`format('truetype')`ヒントが無い場合は、見つかった最初の
    // `url()`をそのまま採用すること（フォーマットヒント自体は仕様上省略可能）。
    {
        let sheet = parse_css("@font-face{font-family:'X';src:url(only.ttf)}");
        total += 1;
        if sheet.font_faces.len() == 1 && sheet.font_faces[0].src_url.as_deref() == Some("only.ttf")
        {
            passed += 1;
        } else {
            crate::println!(
                "CSS_SELFTEST FAIL: @font-face parse (no format hint) => {:?}",
                sheet.font_faces
            );
        }
    }
    // 実行時カスタムフォント登録（`kernel::vector_font::register_custom_font`）の
    // 往復テスト。実際のネットワーク取得は自己テスト環境では行えないため、
    // 既にビルドに埋め込み済みのフォントのバイト列を「ダウンロードされた
    // バイト列」の代用として使い、シグネチャ判定→登録→検索の一連のパイプライン
    // 全体が正しく動作することを検証する。
    {
        let font_bytes = alloc::vec::Vec::from(
            &include_bytes!("../../../fonts/ipa/ipag.ttf")[..],
        );
        total += 1;
        let ok = crate::kernel::vector_font::register_custom_font("Test Custom Font", font_bytes);
        if ok && crate::kernel::vector_font::has_custom_font("test custom font") {
            passed += 1;
        } else {
            crate::println!("CSS_SELFTEST FAIL: register_custom_font round-trip => registered={}", ok);
        }
    }
    // `register_custom_font`は成功時に`GLOBAL_VECTOR_FONT`のプライマリを新フォント
    // へ切り替える（`VectorFont::set_primary`。ページ全体のテキストへ取得済み
    // Webフォントを反映するための単純だが安全な戦略。2026-07-22実装）。
    // `GLOBAL_VECTOR_FONT`自体はこの自己テストの実行時点（`main.rs`で
    // `init_global_font_chain`より前に`css::selftest()`が呼ばれる）ではまだ
    // 未初期化（`None`）のため、グローバルではなく独立した`VectorFont`
    // インスタンスを直接構築して`set_primary`の安全性（切替後も旧プライマリの
    // グリフカバレッジがフォールバック経由で失われないこと）を検証する。
    // このロジックが壊れていれば実運用では全ページのテキスト描画・幅計測に
    // 波及する重大な回帰になるため、最も基本的な安全性チェックとして重要。
    {
        total += 1;
        let font_a = include_bytes!("../../../fonts/MPLUS2/MPLUS2-Regular.ttf");
        let font_b = include_bytes!("../../../fonts/ipa/ipag.ttf");
        match crate::kernel::vector_font::VectorFont::new(font_a) {
            Ok(mut vf) => {
                let had_glyph_before = vf.get_glyph('a', 16).is_some();
                let switched = vf.set_primary(font_b).is_ok();
                let has_glyph_after = vf.get_glyph('a', 16).is_some();
                if had_glyph_before && switched && has_glyph_after {
                    passed += 1;
                } else {
                    crate::println!(
                        "CSS_SELFTEST FAIL: VectorFont::set_primary => before={} switched={} after={}",
                        had_glyph_before, switched, has_glyph_after
                    );
                }
            }
            Err(_) => {
                crate::println!("CSS_SELFTEST FAIL: VectorFont::set_primary => failed to build base font");
            }
        }
    }
    // Brotli解凍機能（`decompress_brotli`）が正常に機能すること。
    // 空Brotliストリームの正しいバイト値は`0x06`（`[3]`ではない）。Brotli仕様
    // （RFC 7932 §9.2）ではビットをLSB-firstで詰めるため、WBITS既定値(1bit=0)・
    // ISLAST(1bit=1)・ISLASTEMPTY(1bit=1)の3ビットは、それぞれバイトの
    // bit0/bit1/bit2に入る（0*1 + 1*2 + 1*4 = 6）。以前使っていた`[3]`
    // （0b00000011）はWBITSの1ビット目が1になっており「デフォルト以外の
    // window宣言」を意味してしまい、ISLASTEMPTYが0のため不完全な
    // メタブロックヘッダとして扱われ、実装のバグではなくテストデータ自体が
    // 不正だったために失敗していたと判明（2026-07-22発見・修正）。
    {
        total += 1;
        if let Some(dec) = crate::kernel::vector_font::decompress_brotli(&[6], 0) {
            if dec.is_empty() {
                passed += 1;
            } else {
                crate::println!("CSS_SELFTEST FAIL: decompress_brotli empty stream should be empty");
            }
        } else {
            crate::println!("CSS_SELFTEST FAIL: decompress_brotli empty stream failed");
        }
    }
    // 不正な/切り詰められた WOFF2 ヘッダーは安全に拒否され、クラッシュせず `false` を返すこと。
    {
        let fake_woff2 = alloc::vec![b'w', b'O', b'F', b'2', 0, 0, 0, 0];
        total += 1;
        if !crate::kernel::vector_font::register_custom_font("Fake Woff2", fake_woff2) {
            passed += 1;
        } else {
            crate::println!("CSS_SELFTEST FAIL: register_custom_font should reject invalid WOFF2 header");
        }
    }
    // `word-break`/`overflow-wrap`/`word-wrap` が親要素から子ノードへ継承されること。
    {
        total += 1;
        let html = "<html><body><div id='parent' style='word-break:break-all;overflow-wrap:break-word;'><span id='child'>text</span></div></body></html>";
        let doc = super::super::dom::parse_html(html);
        let stylesheet = parse_css("");
        let styled = style_tree(&doc, &stylesheet);
        fn find_by_id<'a>(node: &'a StyledNode<'a>, id: &str) -> Option<&'a StyledNode<'a>> {
            if let NodeType::Element { id: nid, .. } = &node.node.node_type {
                if nid.as_deref() == Some(id) {
                    return Some(node);
                }
            }
            for c in &node.children {
                if let Some(r) = find_by_id(c, id) {
                    return Some(r);
                }
            }
            None
        }
        if let Some(child) = find_by_id(&styled, "child") {
            let wb = child.value("word-break").map(|v| v.trim() == "break-all").unwrap_or(false);
            let ow = child.value("overflow-wrap").map(|v| v.trim() == "break-word").unwrap_or(false);
            if wb && ow {
                passed += 1;
            } else {
                crate::println!("CSS_SELFTEST FAIL: word-break/overflow-wrap inheritance => wb={} ow={}", wb, ow);
            }
        } else {
            crate::println!("CSS_SELFTEST FAIL: child node not found in style_tree");
        }
    }
    for (mode, src, dst, expect) in blend_cases {
        let got = super::super::web_engine::draw_helpers::blend_pixel(mode, *src, *dst);
        if got == *expect {
            passed += 1;
        } else {
            crate::println!(
                "CSS_SELFTEST FAIL: blend_pixel(`{}`, {:?}, {:?}) => {:?} (want {:?})",
                mode,
                src,
                dst,
                got,
                expect
            );
        }
    }
    for (filter, input, expect) in filter_cases {
        let got = super::super::web_engine::draw_helpers::apply_css_filters(filter, input.0, input.1, input.2);
        if got == *expect {
            passed += 1;
        } else {
            crate::println!(
                "CSS_SELFTEST FAIL: apply_css_filters(`{}`, {:?}) => {:?} (want {:?})",
                filter,
                input,
                got,
                expect
            );
        }
    }
    for (kind, n, upper, expect) in alpha_roman_cases {
        let got = if *kind == "alpha" {
            super::super::web_engine::number_to_alpha(*n, *upper)
        } else {
            super::super::web_engine::number_to_roman(*n, *upper)
        };
        if got == *expect {
            passed += 1;
        } else {
            crate::println!(
                "CSS_SELFTEST FAIL: number_to_{}({}, {}) => `{}` (want `{}`)",
                kind,
                n,
                upper,
                got,
                expect
            );
        }
    }
    for (input, mode, expect) in tt_cases {
        if apply_text_transform(input, mode) == *expect {
            passed += 1;
        } else {
            crate::println!(
                "CSS_SELFTEST FAIL: text-transform({}, {}) => `{}` (want `{}`)",
                input,
                mode,
                apply_text_transform(input, mode),
                expect
            );
        }
    }
    for (html, css, id, expect) in cases {
        let dom = super::super::dom::parse_html(html);
        let sheet = parse_css(css);
        let styled = style_tree(&dom, &sheet);
        let got = find_marked(&styled, id).unwrap_or(false);
        if got == *expect {
            passed += 1;
        } else {
            crate::println!(
                "CSS_SELFTEST FAIL: `{}` + `{}` on #{} => {} (want {})",
                html,
                css,
                id,
                got,
                expect
            );
        }
    }
    for (html, css, id, prop, expect) in value_cases {
        let dom = super::super::dom::parse_html(html);
        let sheet = parse_css(css);
        let styled = style_tree(&dom, &sheet);
        let got = find_prop(&styled, id, prop).unwrap_or_default();
        if got == *expect {
            passed += 1;
        } else {
            crate::println!(
                "CSS_SELFTEST FAIL: `{}` + `{}` on #{}.{} => `{}` (want `{}`)",
                html,
                css,
                id,
                prop,
                got,
                expect
            );
        }
    }
    // ---- :focus（hover と同じ事前計算方式）----
    // focus_values は実際のフォーカス状態に関わらず「:focus 適用時にどう変わるか」を
    // 常に事前計算しておく（実際の適用可否は描画側が focused_id と比較して選ぶ）。
    {
        fn find_node<'a>(node: &'a StyledNode, id: &str) -> Option<&'a StyledNode<'a>> {
            if let NodeType::Element { id: nid, .. } = &node.node.node_type {
                if nid.as_deref() == Some(id) {
                    return Some(node);
                }
            }
            for c in &node.children {
                if let Some(r) = find_node(c, id) {
                    return Some(r);
                }
            }
            None
        }
        let dom = super::super::dom::parse_html("<input id='t' type='text'>");
        let sheet = parse_css("input:focus{border-color:#ff0000}");
        let styled = style_tree(&dom, &sheet);
        let focus_border = find_node(&styled, "t")
            .and_then(|n| n.focus_values.as_ref())
            .and_then(|h| h.get("border-color").cloned())
            .unwrap_or_default();
        if focus_border == "#ff0000" {
            passed += 1;
        } else {
            crate::println!(
                "CSS_SELFTEST FAIL: :focus border-color => `{}` (want `#ff0000`)",
                focus_border
            );
        }
        // :focus-visible は :focus と同一視される簡略実装（キーボード/ポインタ操作の区別なし）。
        let sheet_fv = parse_css("input:focus-visible{border-color:#00ff00}");
        let styled_fv = style_tree(&dom, &sheet_fv);
        let focus_visible_border = find_node(&styled_fv, "t")
            .and_then(|n| n.focus_values.as_ref())
            .and_then(|h| h.get("border-color").cloned())
            .unwrap_or_default();
        if focus_visible_border == "#00ff00" {
            passed += 1;
        } else {
            crate::println!(
                "CSS_SELFTEST FAIL: :focus-visible border-color => `{}` (want `#00ff00`)",
                focus_visible_border
            );
        }
        // :active（hover/focus と同じ事前計算方式。実際の適用可否は描画側が
        // 「ホバー中 かつ マウス左ボタン押下中」を見て選ぶ）。
        let sheet_active = parse_css("input:active{border-color:#0000ff}");
        let styled_active = style_tree(&dom, &sheet_active);
        let active_border = find_node(&styled_active, "t")
            .and_then(|n| n.active_values.as_ref())
            .and_then(|h| h.get("border-color").cloned())
            .unwrap_or_default();
        if active_border == "#0000ff" {
            passed += 1;
        } else {
            crate::println!(
                "CSS_SELFTEST FAIL: :active border-color => `{}` (want `#0000ff`)",
                active_border
            );
        }
    }

    // ---- 疑似要素（::before 等）の特異度寄与 ----
    // 以前は simple_specificity() が sel.pseudo_element を一切見ておらず、
    // `::before` 単体の特異度が (0,0,0)（無寄与）のままになっていた。
    // CSS 仕様では疑似要素はタグ名セレクタと同じ重み（タグ数バケット）で寄与するため、
    // `::before` 単体は `div` 単体と同じ (0,0,1) になるべき。
    {
        let s1 = parse_selector("div::before").map(|s| selector_specificity(&s));
        let s2 = parse_selector("div").map(|s| selector_specificity(&s));
        if s1 == Some((0, 0, 2)) && s2 == Some((0, 0, 1)) {
            passed += 1;
        } else {
            crate::println!(
                "CSS_SELFTEST FAIL: pseudo-element specificity => div::before={:?} (want Some((0,0,2))), div={:?} (want Some((0,0,1)))",
                s1, s2
            );
        }
    }

    // ---- :root（文書ルート要素 <html> にのみ一致）----
    // parse_html() は常に暗黙の "html" 要素をルートとして生成するため、id を付けずに
    // ルート自身の specified_values を直接検査する。
    {
        let dom_root = super::super::dom::parse_html("<div id='child'></div>");
        let sheet_root = parse_css(":root{zz:1}");
        let styled_root = style_tree(&dom_root, &sheet_root);
        let root_marker = styled_root
            .specified_values
            .get("zz")
            .cloned()
            .unwrap_or_default();
        if root_marker == "1" {
            passed += 1;
        } else {
            crate::println!(
                "CSS_SELFTEST FAIL: :root zz => `{}` (want `1`)",
                root_marker
            );
        }
        // 子要素（html自身ではない）には :root がマッチしない。
        fn find_node2<'a>(node: &'a StyledNode, id: &str) -> Option<&'a StyledNode<'a>> {
            if let NodeType::Element { id: nid, .. } = &node.node.node_type {
                if nid.as_deref() == Some(id) {
                    return Some(node);
                }
            }
            for c in &node.children {
                if let Some(r) = find_node2(c, id) {
                    return Some(r);
                }
            }
            None
        }
        let child_matched = find_node2(&styled_root, "child")
            .and_then(|n| n.specified_values.get("zz").cloned())
            .is_some();
        if !child_matched {
            passed += 1;
        } else {
            crate::println!("CSS_SELFTEST FAIL: :root should not match non-root child element");
        }
    }

    // ---- <style>/<script> の中身が Text 子ノードとして保持されるか ----
    // 以前は skip_raw_content が中身を完全に読み捨てており、.textContent での参照や
    // DOM ツリー経由でのスタイルシート抽出（動的に追加された <style> 等）が
    // 一切効かないバグだった（2026-07-03 修正）。
    {
        fn find_tag_text<'a>(node: &'a super::super::dom::Node, tag: &str) -> Option<&'a str> {
            if let NodeType::Element { tag_name, .. } = &node.node_type {
                if tag_name == tag {
                    for c in &node.children {
                        if let NodeType::Text(t) = &c.node_type {
                            return Some(t.as_str());
                        }
                    }
                    return None;
                }
            }
            for c in &node.children {
                if let Some(r) = find_tag_text(c, tag) {
                    return Some(r);
                }
            }
            None
        }
        total += 1;
        let dom = super::super::dom::parse_html(
            "<html><style>a{color:red}</style><script>var x=1;</script></html>",
        );
        let style_text = find_tag_text(&dom, "style").unwrap_or("");
        if style_text.contains("color:red") {
            passed += 1;
        } else {
            crate::println!(
                "CSS_SELFTEST FAIL: <style> text child => `{}` (want to contain `color:red`)",
                style_text
            );
        }
        let script_text = find_tag_text(&dom, "script").unwrap_or("");
        if script_text.contains("var x=1") {
            passed += 1;
        } else {
            crate::println!(
                "CSS_SELFTEST FAIL: <script> text child => `{}` (want to contain `var x=1`)",
                script_text
            );
        }
    }

    // ---- CSS Transitions / Animations ----
    // (説明, 実測値, 期待値) の closure ベース検査。
    let mut anim_total = 0usize;
    let mut anim_check = |desc: &str, got: String, want: &str| {
        anim_total += 1;
        if got == want {
            passed += 1;
        } else {
            crate::println!(
                "CSS_SELFTEST FAIL: anim {} => `{}` (want `{}`)",
                desc,
                got,
                want
            );
        }
    };

    // --- イージング関数 ---
    anim_check(
        "linear@0.5",
        fmt_num(TimingFunction::Linear.ease(0.5)),
        "0.5",
    );
    anim_check("linear@0", fmt_num(TimingFunction::Linear.ease(0.0)), "0");
    anim_check("linear@1", fmt_num(TimingFunction::Linear.ease(1.0)), "1");
    // ease は中央でやや進む（>0.5）。
    {
        let e = TimingFunction::parse("ease").ease(0.5);
        anim_check("ease@0.5>0.5", (e > 0.55).to_string(), "true");
    }
    // ease-in は中央で遅れる（<0.5）。
    {
        let e = TimingFunction::parse("ease-in").ease(0.5);
        anim_check("ease-in@0.5<0.5", (e < 0.45).to_string(), "true");
    }
    // 端点は厳密に 0/1。
    anim_check(
        "ease@0",
        fmt_num(TimingFunction::parse("ease").ease(0.0)),
        "0",
    );
    anim_check(
        "ease@1",
        fmt_num(TimingFunction::parse("ease").ease(1.0)),
        "1",
    );
    // steps(4, end): t=0.5 → floor(2)/4 = 0.5。
    anim_check(
        "steps(4,end)@0.5",
        fmt_num(TimingFunction::parse("steps(4, end)").ease(0.5)),
        "0.5",
    );
    // steps(4, end): t=0.7 → floor(2.8)/4 = 0.5。
    anim_check(
        "steps(4,end)@0.7",
        fmt_num(TimingFunction::parse("steps(4, end)").ease(0.7)),
        "0.5",
    );
    // steps(4, start): t=0.5 → (floor(2)+1)/4 = 0.75。
    anim_check(
        "steps(4,start)@0.5",
        fmt_num(TimingFunction::parse("steps(4, start)").ease(0.5)),
        "0.75",
    );
    // cubic-bezier(0,0,1,1) は linear と等価。
    anim_check(
        "cubic-linear@0.3",
        fmt_num(TimingFunction::parse("cubic-bezier(0,0,1,1)").ease(0.3)),
        "0.3",
    );

    // --- 値の補間 ---
    anim_check("px@0.5", interpolate_value("0px", "100px", 0.5), "50px");
    anim_check("px@0", interpolate_value("10px", "100px", 0.0), "10px");
    anim_check("px@1", interpolate_value("10px", "100px", 1.0), "100px");
    anim_check("num@0.25", interpolate_value("0", "1", 0.25), "0.25");
    anim_check("pct@0.5", interpolate_value("0%", "50%", 0.5), "25%");
    anim_check("em@0.5", interpolate_value("1em", "3em", 0.5), "2em");
    // 単位無し`0`と`%`/`px`の混在（実サイト www.sugi-lab.net のタイピング演出
    // `@keyframes typing { from{width:0} to{width:100%} }`と同じパターン）。
    // 以前は単位の厳密一致(`u1 == u2`)のみで判定しており、この組合せは
    // 補間不能な離散ジャンプ扱いになるバグだった（2026-07-22発見・修正）。
    anim_check("zero-to-pct@0.5", interpolate_value("0", "100%", 0.5), "50%");
    anim_check("zero-to-pct@0", interpolate_value("0", "100%", 0.0), "0%");
    anim_check("zero-to-pct@1", interpolate_value("0", "100%", 1.0), "100%");
    anim_check("pct-to-zero@0.5", interpolate_value("100%", "0", 0.5), "50%");
    anim_check("zero-to-px@0.5", interpolate_value("0", "40px", 0.5), "20px");
    // 同じ単位無し0の互換性修正は、`translateY(30px)`→`translateY(0)`という
    // 関数呼び出し引数内の再帰的な補間（`translateY(...)`の中身を
    // `interpolate_value`で再帰処理する経路）にも自動的に効く。実サイトの
    // IntersectionObserverによるフェードイン演出（`.research-card`等多数の
    // 要素が`transform: translateY(30px)` → `translateY(0)`で登場する、
    // このサイト全体で広く使われるパターン）が同じバグの影響を受けていた
    // ことの確認（2026-07-22）。
    anim_check(
        "translateY-fadein@0.5",
        interpolate_value("translateY(30px)", "translateY(0)", 0.5),
        "translateY(15px)",
    );
    // 色補間（black→white の中点 = 灰）。
    anim_check(
        "color@0.5",
        interpolate_value("#000000", "#ffffff", 0.5),
        "#7f7f7f",
    );
    anim_check(
        "color-name@0",
        interpolate_value("red", "blue", 0.0),
        "#ff0000",
    );
    // 複数値（margin: 0 0 → 10px 20px）。
    anim_check(
        "multi@0.5",
        interpolate_value("0px 0px", "10px 20px", 0.5),
        "5px 10px",
    );
    // transform 関数の内側補間。
    anim_check(
        "translateX@0.5",
        interpolate_value("translateX(0px)", "translateX(40px)", 0.5),
        "translateX(20px)",
    );
    // カンマ区切り引数を持つ単一関数（`translate(x, y)`）。以前はカンマ後の空白が
    // 余分な空白区切りトークンを作り、各引数が正しく補間されずジャンプしていた。
    anim_check(
        "translate-xy@0.5",
        interpolate_value("translate(10px, 20px)", "translate(30px, 40px)", 0.5),
        "translate(20px, 30px)",
    );
    // matrix() のような6引数関数でも同様に全引数が独立して補間されることを確認する。
    anim_check(
        "matrix@0.5",
        interpolate_value("matrix(0, 0, 0, 0, 0, 0)", "matrix(2, 2, 2, 2, 2, 2)", 0.5),
        "matrix(1, 1, 1, 1, 1, 1)",
    );
    // 空白区切りの複数関数の並び（`translateX(..) rotate(..)`）は引き続き
    // トークンごとの独立補間のまま維持されること（単一関数誤認による回帰の防止）。
    anim_check(
        "translate-rotate-chain@0.5",
        interpolate_value(
            "translateX(0px) rotate(0deg)",
            "translateX(40px) rotate(90deg)",
            0.5,
        ),
        "translateX(20px) rotate(45deg)",
    );
    // `box-shadow`/`text-shadow` のようなカンマ区切りの複数レイヤー値は、レイヤーごとに
    // 独立して補間されること（以前はカンマ後の空白によるトークン化でレイヤー境界を
    // 跨いだ位置ベース補間になり、色や単位不一致で discrete フォールバックしていた）。
    anim_check(
        "multi-layer-shadow@0.5",
        interpolate_value("0px 0px, 1px 1px", "10px 10px, 21px 21px", 0.5),
        "5px 5px, 11px 11px",
    );
    // 補間不能（単位不一致）→ discrete。
    anim_check(
        "discrete@0.3",
        interpolate_value("auto", "100px", 0.3),
        "auto",
    );
    anim_check(
        "discrete@0.7",
        interpolate_value("auto", "100px", 0.7),
        "100px",
    );

    // --- 時間値パース ---
    anim_check("time-1s", fmt_num(parse_time_ms("1s")), "1000");
    anim_check("time-250ms", fmt_num(parse_time_ms("250ms")), "250");
    anim_check("time-0.5s", fmt_num(parse_time_ms("0.5s")), "500");

    // --- transition ショートハンドのパース ---
    {
        let specs = parse_transition("width 1s ease, background-color 0.5s linear 0.2s");
        anim_check("trans-count", specs.len().to_string(), "2");
        if specs.len() == 2 {
            anim_check("trans0-prop", specs[0].property.clone(), "width");
            anim_check("trans0-dur", fmt_num(specs[0].duration_ms), "1000");
            anim_check("trans1-prop", specs[1].property.clone(), "background-color");
            anim_check("trans1-delay", fmt_num(specs[1].delay_ms), "200");
            anim_check(
                "trans1-timing",
                (specs[1].timing == TimingFunction::Linear).to_string(),
                "true",
            );
        }
    }

    // --- transition ショートハンド: プロパティ名が 's' で終わる場合の誤分類バグ修正確認。
    // 旧実装は `ends_with('s')` だけで時間値と判定していたため、`flex-basis`/`border-radius`
    // のようなプロパティ名まで時間値と誤認し、本来の duration が消え property が "all" に
    // 化けていた。
    {
        let specs = parse_transition("flex-basis 0.3s ease");
        anim_check("trans-s-count-flexbasis", specs.len().to_string(), "1");
        if specs.len() == 1 {
            anim_check("trans-s-prop-flexbasis", specs[0].property.clone(), "flex-basis");
            anim_check("trans-s-dur-flexbasis", fmt_num(specs[0].duration_ms), "300");
        }
    }
    {
        let specs = parse_transition("border-radius 0.5s linear");
        if specs.len() == 1 {
            anim_check("trans-s-prop-borderradius", specs[0].property.clone(), "border-radius");
            anim_check("trans-s-dur-borderradius", fmt_num(specs[0].duration_ms), "500");
        }
    }

    // --- animation ショートハンド: アニメーション名が 's' で終わる場合の誤分類バグ修正確認。
    {
        let specs = parse_animations("appears 1s ease");
        anim_check("anim-s-count", specs.len().to_string(), "1");
        if specs.len() == 1 {
            anim_check("anim-s-name", specs[0].name.clone(), "appears");
            anim_check("anim-s-dur", fmt_num(specs[0].duration_ms), "1000");
        }
    }

    // --- animation ショートハンド内の `steps(n, jump-*)` タイミング関数
    // （実サイト www.sugi-lab.net のタイピング演出`animation: 2.5s steps(16,end)
    // typing`と同じパターン）が、カンマを含む関数呼び出しとして正しく1トークンへ
    // 結合され、`animation-name`と誤認識されないことを検証（2026-07-21）。
    {
        let specs = parse_animations("2.5s steps(16,end) typing");
        anim_check("anim-steps-count", specs.len().to_string(), "1");
        if specs.len() == 1 {
            anim_check("anim-steps-name", specs[0].name.clone(), "typing");
            anim_check("anim-steps-dur", fmt_num(specs[0].duration_ms), "2500");
            // steps(16,end)@0.5 = floor(0.5*16)/16 = 8/16 = 0.5。
            anim_check("anim-steps-timing", fmt_num(specs[0].timing.ease(0.5)), "0.5");
        }
    }

    // --- transition サンプリング ---
    {
        let spec = TransitionSpec {
            property: "width".into(),
            duration_ms: 1000.0,
            timing: TimingFunction::Linear,
            delay_ms: 0.0,
        };
        let (v, active) = sample_transition(&spec, "0px", "100px", 500.0);
        anim_check("samp-trans-mid", v, "50px");
        anim_check("samp-trans-active", active.to_string(), "true");
        let (v2, active2) = sample_transition(&spec, "0px", "100px", 1200.0);
        anim_check("samp-trans-end", v2, "100px");
        anim_check("samp-trans-done", active2.to_string(), "false");
        // delay 中は from のまま。
        let spec_d = TransitionSpec {
            property: "width".into(),
            duration_ms: 1000.0,
            timing: TimingFunction::Linear,
            delay_ms: 300.0,
        };
        let (v3, _) = sample_transition(&spec_d, "0px", "100px", 100.0);
        anim_check("samp-trans-delay", v3, "0px");
    }

    // --- @keyframes パース + animation サンプリング ---
    {
        let sheet = parse_css(
            "@keyframes slide { from { left: 0px; } to { left: 100px; } } \
             @keyframes fade { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }",
        );
        anim_check("kf-count", sheet.keyframes.len().to_string(), "2");
        let slide = sheet.keyframes.iter().find(|k| k.name == "slide");
        anim_check("kf-slide-found", slide.is_some().to_string(), "true");
        if let Some(slide) = slide {
            anim_check("kf-slide-frames", slide.frames.len().to_string(), "2");
            let spec = AnimationSpec {
                name: "slide".into(),
                duration_ms: 1000.0,
                timing: TimingFunction::Linear,
                delay_ms: 0.0,
                iterations: 1.0,
                direction: "normal".into(),
                fill: "none".into(),
                play_state: "running".into(),
            };
            let m = sample_animation(&spec, slide, 500.0);
            anim_check(
                "anim-slide-mid",
                m.get("left").cloned().unwrap_or_default(),
                "50px",
            );
        }
        let fade = sheet.keyframes.iter().find(|k| k.name == "fade");
        if let Some(fade) = fade {
            anim_check("kf-fade-frames", fade.frames.len().to_string(), "3");
            let spec = AnimationSpec {
                name: "fade".into(),
                duration_ms: 1000.0,
                timing: TimingFunction::Linear,
                delay_ms: 0.0,
                iterations: 1.0,
                direction: "normal".into(),
                fill: "none".into(),
                play_state: "running".into(),
            };
            // t=250ms → 0%→50% の中点 → opacity 0.5。
            let m = sample_animation(&spec, fade, 250.0);
            anim_check(
                "anim-fade-q1",
                m.get("opacity").cloned().unwrap_or_default(),
                "0.5",
            );
            // t=500ms → opacity 1。
            let m2 = sample_animation(&spec, fade, 500.0);
            anim_check(
                "anim-fade-mid",
                m2.get("opacity").cloned().unwrap_or_default(),
                "1",
            );
        }
    }

    // --- animation ショートハンドのパース ---
    {
        let spec = parse_animation("slide 2s ease-in-out 0.5s infinite alternate both");
        anim_check("anim-parse-some", spec.is_some().to_string(), "true");
        if let Some(s) = spec {
            anim_check("anim-name", s.name.clone(), "slide");
            anim_check("anim-dur", fmt_num(s.duration_ms), "2000");
            anim_check("anim-delay", fmt_num(s.delay_ms), "500");
            anim_check(
                "anim-iter-inf",
                s.iterations.is_infinite().to_string(),
                "true",
            );
            anim_check("anim-dir", s.direction.clone(), "alternate");
            anim_check("anim-fill", s.fill.clone(), "both");
        }
    }

    // --- animation ショートハンドのカンマ区切り複数項目対応 ---
    // (box-shadow/text-shadow と同じく、以前は最初の1件のみが解析され残りは無視されていたバグの修正確認)
    {
        let specs = parse_animations("fade 1s, bounce 2s infinite");
        anim_check("anim-multi-count", specs.len().to_string(), "2");
        if specs.len() == 2 {
            anim_check("anim-multi-name-0", specs[0].name.clone(), "fade");
            anim_check("anim-multi-dur-0", fmt_num(specs[0].duration_ms), "1000");
            anim_check("anim-multi-name-1", specs[1].name.clone(), "bounce");
            anim_check("anim-multi-dur-1", fmt_num(specs[1].duration_ms), "2000");
            anim_check(
                "anim-multi-iter-1-inf",
                specs[1].iterations.is_infinite().to_string(),
                "true",
            );
        }
    }

    // --- alternate direction（偶数/奇数反復で方向反転） ---
    {
        let sheet = parse_css("@keyframes mv { from { left: 0px; } to { left: 100px; } }");
        let kf = &sheet.keyframes[0];
        let spec = AnimationSpec {
            name: "mv".into(),
            duration_ms: 1000.0,
            timing: TimingFunction::Linear,
            delay_ms: 0.0,
            iterations: 4.0,
            direction: "alternate".into(),
            fill: "none".into(),
            play_state: "running".into(),
        };
        // 反復0 (0..1s) は順方向: t=500ms → 50px。
        let m0 = sample_animation(&spec, kf, 500.0);
        anim_check(
            "anim-alt-iter0",
            m0.get("left").cloned().unwrap_or_default(),
            "50px",
        );
        // 反復1 (1..2s) は逆方向: t=1500ms → local 0.5 reversed → 50px（中点なので同じ）。
        // 端で確認: t=1100ms → local 0.1 reversed=0.9 → 90px。
        let m1 = sample_animation(&spec, kf, 1100.0);
        anim_check(
            "anim-alt-iter1",
            m1.get("left").cloned().unwrap_or_default(),
            "90px",
        );
    }

    // --- 非整数 iteration-count + alternate + fill:forwards の完了後フレーム ---
    // 以前は完了時の反復インデックスが常に `floor(iterations) - 1` で計算されており、
    // 端数のある最終反復（本来のインデックスは `floor(iterations)`）を1つ前の反復と
    // 誤認していたため、alternate の偶奇判定が反転し、最終停止位置が左右逆になる
    // バグがあった。
    {
        let sheet = parse_css("@keyframes mv3b { from { left: 0px; } to { left: 100px; } }");
        let kf = &sheet.keyframes[0];
        let spec = AnimationSpec {
            name: "mv3b".into(),
            duration_ms: 1000.0,
            timing: TimingFunction::Linear,
            delay_ms: 0.0,
            iterations: 2.25,
            direction: "alternate".into(),
            fill: "forwards".into(),
            play_state: "running".into(),
        };
        // t=2250ms（=2.25反復ぶん経過、完了後）。反復0=順方向、反復1=逆方向、
        // 反復2（インデックス偶数→順方向）の25%地点で止まるはずなので left=25px。
        // 修正前はインデックスを1つ前(奇数=逆方向)と誤認し75pxになっていた。
        let m = sample_animation(&spec, kf, 2250.0);
        anim_check(
            "anim-frac-iter-alternate-forwards",
            m.get("left").cloned().unwrap_or_default(),
            "25px",
        );
    }

    // --- fill-mode forwards（終了後に最終値で固定） ---
    {
        let sheet = parse_css("@keyframes mv2 { from { left: 0px; } to { left: 100px; } }");
        let kf = &sheet.keyframes[0];
        let spec = AnimationSpec {
            name: "mv2".into(),
            duration_ms: 1000.0,
            timing: TimingFunction::Linear,
            delay_ms: 0.0,
            iterations: 1.0,
            direction: "normal".into(),
            fill: "forwards".into(),
            play_state: "running".into(),
        };
        // 終了後（2s）も forwards なら 100px。
        let m = sample_animation(&spec, kf, 2000.0);
        anim_check(
            "anim-fill-fwd",
            m.get("left").cloned().unwrap_or_default(),
            "100px",
        );
    }

    // --- AnimationEngine 統合: トランジションの時間進行 ---
    {
        let mut eng = AnimationEngine::new();
        let spec = TransitionSpec {
            property: "left".into(),
            duration_ms: 1000.0,
            timing: TimingFunction::Linear,
            delay_ms: 0.0,
        };
        // t=0 で 0px→100px のトランジション開始。
        eng.start_transition("box", "left", "0px", "100px", spec, 0.0);
        anim_check(
            "eng-tr-active",
            if eng.is_active() {
                "y".into()
            } else {
                "n".into()
            },
            "y",
        );
        // t=500ms → 50px、まだ進行中。
        let active = eng.tick(500.0);
        let v = eng
            .computed
            .iter()
            .find(|(e, p, _)| e == "box" && p == "left")
            .map(|(_, _, v)| v.clone())
            .unwrap_or_default();
        anim_check("eng-tr-mid", v, "50px");
        anim_check(
            "eng-tr-mid-active",
            if active { "y".into() } else { "n".into() },
            "y",
        );
        // t=1000ms → 100px、完了して transitions から除去される。
        eng.tick(1000.0);
        let v_end = eng
            .computed
            .iter()
            .find(|(e, p, _)| e == "box" && p == "left")
            .map(|(_, _, v)| v.clone())
            .unwrap_or_default();
        anim_check("eng-tr-end", v_end, "100px");
        anim_check(
            "eng-tr-done",
            if eng.is_active() {
                "y".into()
            } else {
                "n".into()
            },
            "n",
        );
    }

    // --- AnimationEngine 統合: `lifecycle_events`（`animationend`/`transitionend`/
    // `animationstart`の自動発火が丸ごと未対応だった。`AnimationEvent`/
    // `TransitionEvent`コンストラクタ自体は既に実装済みで手動dispatchは可能
    // だったが、実際の開始/完了を検知して自動発火する仕組みが無かった） ---
    {
        let mut eng = AnimationEngine::new();
        let spec = TransitionSpec {
            property: "left".into(),
            duration_ms: 1000.0,
            timing: TimingFunction::Linear,
            delay_ms: 0.0,
        };
        eng.start_transition("box3", "left", "0px", "100px", spec, 0.0);
        // t=500ms: まだ進行中なので lifecycle_events は空（トランジションには
        // `transitionstart`は今回対象外のため発火しない）。
        eng.tick(500.0);
        anim_check(
            "eng-transitionend-mid-empty",
            if eng.lifecycle_events.is_empty() { "y".into() } else { "n".into() },
            "y",
        );
        // t=1000ms: 完了し、この tick で `transitionend` が1件記録される。
        eng.tick(1000.0);
        let got = eng
            .lifecycle_events
            .iter()
            .find(|(e, ty, _)| e == "box3" && *ty == "transitionend")
            .map(|(_, _, name)| name.clone())
            .unwrap_or_default();
        anim_check("eng-transitionend-name", got, "left");
        // t=1500ms: 既に除去済みのトランジションなので再発火しない（毎tick重複しない
        // ことの確認）。
        eng.tick(1500.0);
        anim_check(
            "eng-transitionend-no-duplicate",
            if eng.lifecycle_events.is_empty() { "y".into() } else { "n".into() },
            "y",
        );
    }
    {
        let sheet = parse_css("@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }");
        let kf = sheet.keyframes[0].clone();
        let spec = AnimationSpec {
            name: "fadein".into(),
            duration_ms: 1000.0,
            timing: TimingFunction::Linear,
            delay_ms: 100.0,
            iterations: 1.0,
            direction: "normal".into(),
            fill: "none".into(),
            play_state: "running".into(),
        };
        let mut eng = AnimationEngine::new();
        eng.start_animation("box4", spec, kf, 0.0);
        // t=50ms: delay(100ms)未経過なので animationstart はまだ発火しない。
        eng.tick(50.0);
        anim_check(
            "eng-animationstart-before-delay-empty",
            if eng.lifecycle_events.is_empty() { "y".into() } else { "n".into() },
            "y",
        );
        // t=500ms: delay を過ぎ animationstart が1件記録される。まだ再生中なので
        // animationend は無い。
        eng.tick(500.0);
        let got_start = eng
            .lifecycle_events
            .iter()
            .find(|(e, ty, _)| e == "box4" && *ty == "animationstart")
            .map(|(_, _, name)| name.clone())
            .unwrap_or_default();
        anim_check("eng-animationstart-name", got_start, "fadein");
        anim_check(
            "eng-animationend-mid-empty",
            if eng.lifecycle_events.iter().any(|(_, ty, _)| *ty == "animationend") {
                "n".into()
            } else {
                "y".into()
            },
            "y",
        );
        // t=1100ms(delay 100ms + duration 1000ms): 完了し animationend が1件
        // 記録される。
        eng.tick(1100.0);
        let got = eng
            .lifecycle_events
            .iter()
            .find(|(e, ty, _)| e == "box4" && *ty == "animationend")
            .map(|(_, _, name)| name.clone())
            .unwrap_or_default();
        anim_check("eng-animationend-name", got, "fadein");
    }

    // --- AnimationEngine 統合: 進行中トランジションの中断→逆再生（現在値からの再開） ---
    // 以前は中断時に呼び出し側から渡された stale な from をそのまま使っており、
    // 現在の補間位置を無視して一瞬ジャンプしてから逆再生してしまうバグがあった。
    {
        let mut eng = AnimationEngine::new();
        let spec = TransitionSpec {
            property: "opacity".into(),
            duration_ms: 1000.0,
            timing: TimingFunction::Linear,
            delay_ms: 0.0,
        };
        // t=0 で opacity 1→0（hover開始相当）。
        eng.start_transition("box2", "opacity", "1", "0", spec.clone(), 0.0);
        // t=500ms（50%地点、opacity=0.5）で中断し、逆方向（0→1、hover解除相当）へ retarget。
        // 呼び出し側が渡す from="0"（1つ前の style スナップショット値、stale）は無視され、
        // 実際の現在値(0.5)からの再開になるはず。
        eng.start_transition("box2", "opacity", "0", "1", spec, 500.0);
        eng.tick(500.0);
        let v_retarget_start = eng
            .computed
            .iter()
            .find(|(e, p, _)| e == "box2" && p == "opacity")
            .map(|(_, _, v)| v.clone())
            .unwrap_or_default();
        anim_check("eng-tr-retarget-from-current", v_retarget_start, "0.5");
        // さらに500ms進む（retarget後の経過500ms、1000ms尺の50% → 0.5→1の中間=0.75）。
        eng.tick(1000.0);
        let v_retarget_mid = eng
            .computed
            .iter()
            .find(|(e, p, _)| e == "box2" && p == "opacity")
            .map(|(_, _, v)| v.clone())
            .unwrap_or_default();
        anim_check("eng-tr-retarget-progress", v_retarget_mid, "0.75");
    }

    // --- AnimationEngine 統合: キーフレームアニメの時間進行 ---
    {
        let sheet = parse_css("@keyframes slide { from { left: 0px; } to { left: 200px; } }");
        let kf = sheet.keyframes[0].clone();
        let spec = AnimationSpec {
            name: "slide".into(),
            duration_ms: 1000.0,
            timing: TimingFunction::Linear,
            delay_ms: 0.0,
            iterations: 1.0,
            direction: "normal".into(),
            fill: "forwards".into(),
            play_state: "running".into(),
        };
        let mut eng = AnimationEngine::new();
        eng.start_animation("a", spec, kf, 0.0);
        // t=250ms → 50px。
        eng.tick(250.0);
        let v = eng
            .computed
            .iter()
            .find(|(e, p, _)| e == "a" && p == "left")
            .map(|(_, _, v)| v.clone())
            .unwrap_or_default();
        anim_check("eng-anim-q1", v, "50px");
        // 完了後 forwards なので 200px で固定、is_active は false。
        eng.tick(2000.0);
        let v_end = eng
            .computed
            .iter()
            .find(|(e, p, _)| e == "a" && p == "left")
            .map(|(_, _, v)| v.clone())
            .unwrap_or_default();
        anim_check("eng-anim-fwd-hold", v_end, "200px");
        anim_check(
            "eng-anim-done",
            if eng.is_active() {
                "y".into()
            } else {
                "n".into()
            },
            "n",
        );
    }

    // --- AnimationEngine 統合: animation-play-state:paused で経過時間が凍結される ---
    // 以前は `animation-play-state` が一切パース/適用されず、paused 指定が常に無視され
    // 再生を止められないバグがあった。
    {
        let sheet = parse_css("@keyframes slide2 { from { left: 0px; } to { left: 200px; } }");
        let kf = sheet.keyframes[0].clone();
        let mut spec = AnimationSpec {
            name: "slide2".into(),
            duration_ms: 1000.0,
            timing: TimingFunction::Linear,
            delay_ms: 0.0,
            iterations: 1.0,
            direction: "normal".into(),
            fill: "forwards".into(),
            play_state: "running".into(),
        };
        let mut eng = AnimationEngine::new();
        eng.start_animation("b", spec.clone(), kf.clone(), 0.0);
        // t=250ms → 50px（一時停止前）。
        eng.tick(250.0);
        // ここで一時停止に切り替え（既存アニメの play_state だけを更新する経路を使う）。
        spec.play_state = "paused".into();
        eng.start_animation("b", spec.clone(), kf.clone(), 250.0);
        eng.tick(250.0);
        let v_paused = eng
            .computed
            .iter()
            .find(|(e, p, _)| e == "b" && p == "left")
            .map(|(_, _, v)| v.clone())
            .unwrap_or_default();
        anim_check("eng-anim-paused-frozen1", v_paused.clone(), "50px");
        // 一時停止中は時間が進んでも値が凍結されたままであることを確認（t=1000ms でも50px）。
        eng.tick(1000.0);
        let v_still_paused = eng
            .computed
            .iter()
            .find(|(e, p, _)| e == "b" && p == "left")
            .map(|(_, _, v)| v.clone())
            .unwrap_or_default();
        anim_check("eng-anim-paused-frozen2", v_still_paused, "50px");
        // 再開（play_state を running に戻す）: 再開を検知した tick の時刻が
        // 「一時停止が明けた瞬間」として扱われるため、再開検知直後の同時刻ではまだ
        // 凍結値(50px)のまま。その後さらに250ms進めると凍結値から連続して75pxへ進行する
        // （250ms分の進行 = 200px*250/1000=50px、50px+50px=100pxではなく凍結値50px起点で
        // 250ms分＝50px進むので合計100px）。
        spec.play_state = "running".into();
        eng.start_animation("b", spec, kf, 1000.0);
        eng.tick(1000.0);
        let v_resume_instant = eng
            .computed
            .iter()
            .find(|(e, p, _)| e == "b" && p == "left")
            .map(|(_, _, v)| v.clone())
            .unwrap_or_default();
        anim_check("eng-anim-resume-instant", v_resume_instant, "50px");
        eng.tick(1250.0);
        let v_resumed = eng
            .computed
            .iter()
            .find(|(e, p, _)| e == "b" && p == "left")
            .map(|(_, _, v)| v.clone())
            .unwrap_or_default();
        anim_check("eng-anim-resumed", v_resumed, "100px");
    }

    // --- AnimationEngine 統合: animation-name 切り替え時に古いアニメが取り消されること ---
    // 以前は `start_animation` の「同一 (element, name) なら更新のみ」という判定しか無く、
    // 別名へ切り替えても古いアニメが除去されず（特に infinite だと自然完了もしない）、
    // 新旧2つが永久に同時に走り続けてしまうバグがあった。
    {
        let sheet = parse_css(
            "@keyframes fadeA { from { opacity: 0; } to { opacity: 1; } } \
             @keyframes fadeB { from { opacity: 1; } to { opacity: 0; } }",
        );
        let empty_kf = |name: &str| Keyframes { name: name.into(), frames: Vec::new() };
        let kf_a = sheet
            .keyframes
            .iter()
            .find(|k| k.name == "fadeA")
            .cloned()
            .unwrap_or_else(|| empty_kf("fadeA"));
        let kf_b = sheet
            .keyframes
            .iter()
            .find(|k| k.name == "fadeB")
            .cloned()
            .unwrap_or_else(|| empty_kf("fadeB"));
        let mut eng = AnimationEngine::new();
        let spec_a = AnimationSpec {
            name: "fadeA".into(),
            duration_ms: 1000.0,
            timing: TimingFunction::Linear,
            delay_ms: 0.0,
            iterations: f32::INFINITY,
            direction: "normal".into(),
            fill: "none".into(),
            play_state: "running".into(),
        };
        eng.start_animation("c", spec_a, kf_a, 0.0);
        // "fadeA" から "fadeB" へ切り替え。current_names=["fadeB"] で同期すると
        // "fadeA" は取り消され、"fadeB" だけが残るはず。
        eng.retain_animation_names("c", &[alloc::string::String::from("fadeB")]);
        let spec_b = AnimationSpec {
            name: "fadeB".into(),
            duration_ms: 1000.0,
            timing: TimingFunction::Linear,
            delay_ms: 0.0,
            iterations: 1.0,
            direction: "normal".into(),
            fill: "forwards".into(),
            play_state: "running".into(),
        };
        eng.start_animation("c", spec_b, kf_b, 500.0);
        eng.tick(500.0);
        let props: alloc::vec::Vec<&alloc::string::String> = eng
            .computed
            .iter()
            .filter(|(e, _, _)| e == "c")
            .map(|(_, p, _)| p)
            .collect();
        // "fadeA" が残っていれば opacity への書き込みが重複/矛盾するが、ここでは
        // 単に "fadeB"（fadeA除去後の唯一のアニメ）由来の値が1件だけ出ることを確認する。
        anim_check("eng-anim-name-switch-count", props.len().to_string(), "1");
    }

    // --- AnimationEngine 統合: @keyframes の内容が更新されたら追従すること ---
    // 以前は同名アニメが既に存在する場合、`start_animation` が渡された新しい `keyframes`
    // を破棄し `play_state` しか更新しなかったため、`<style>` 再注入等で同名の @keyframes
    // ルールの中身が変わっても古い内容のまま固定されるバグがあった。
    {
        let sheet_v1 = parse_css("@keyframes mv3 { from { left: 0px; } to { left: 100px; } }");
        let kf_v1 = sheet_v1.keyframes[0].clone();
        let spec = AnimationSpec {
            name: "mv3".into(),
            duration_ms: 1000.0,
            timing: TimingFunction::Linear,
            delay_ms: 0.0,
            iterations: f32::INFINITY,
            direction: "normal".into(),
            fill: "none".into(),
            play_state: "running".into(),
        };
        let mut eng = AnimationEngine::new();
        eng.start_animation("d", spec.clone(), kf_v1, 0.0);
        eng.tick(500.0);
        let v_before = eng
            .computed
            .iter()
            .find(|(e, p, _)| e == "d" && p == "left")
            .map(|(_, _, v)| v.clone())
            .unwrap_or_default();
        anim_check("eng-anim-kf-before-update", v_before, "50px");
        // 同名 "mv3" のまま @keyframes の中身だけを差し替えて再度 start_animation を呼ぶ
        // （同じ経過時間 t=500ms でも到達点が変わるはず）。
        let sheet_v2 = parse_css("@keyframes mv3 { from { left: 0px; } to { left: 400px; } }");
        let kf_v2 = sheet_v2.keyframes[0].clone();
        eng.start_animation("d", spec, kf_v2, 500.0);
        eng.tick(500.0);
        let v_after = eng
            .computed
            .iter()
            .find(|(e, p, _)| e == "d" && p == "left")
            .map(|(_, _, v)| v.clone())
            .unwrap_or_default();
        anim_check("eng-anim-kf-after-update", v_after, "200px");
    }

    // --- AnimationEngine 統合: 再ターゲット（進行中に行先変更）---
    {
        let mut eng = AnimationEngine::new();
        let spec = TransitionSpec {
            property: "left".into(),
            duration_ms: 1000.0,
            timing: TimingFunction::Linear,
            delay_ms: 0.0,
        };
        eng.start_transition("b", "left", "0px", "100px", spec.clone(), 0.0);
        eng.tick(500.0); // 50px
                         // 進行中に 50px→0px へ再ターゲット（now=500）。
        eng.start_transition("b", "left", "50px", "0px", spec, 500.0);
        // 同一 (要素,プロパティ) は1本だけ。
        eng.tick(1000.0); // 再ターゲットから500ms → 25px
        let v = eng
            .computed
            .iter()
            .find(|(e, p, _)| e == "b" && p == "left")
            .map(|(_, _, v)| v.clone())
            .unwrap_or_default();
        anim_check("eng-retarget", v, "25px");
    }

    let total = total + anim_total;
    (passed, total)
}