atmos/os_lib/css/

cascade.rs

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


/// 計算量: **O(R×Sel + N × (C × M + K))**
///
/// - R: ルール数、Sel: セレクタ数（索引構築ぶん）
/// - N: DOM ノード数
/// - C: 1 ノードあたりの候補ルール数（索引で絞った後）
/// - M: 1 ルールの照合コスト（セレクタ長・祖先チェーンの深さに比例）
/// - K: ノードごとの固定コスト（継承マップ／CSS 変数／カウンタの複製）
///
/// 実測（sugi-lab.net: R=2403, N=358）: 索引構築 27 tick、走査 291 tick。
/// **照合（C×M）は既に全体の一部でしかなく、K が支配的**。
/// 詳細は `spec/resource_loading.md`。
pub fn style_tree<'a>(root: &'a Node, stylesheet: &StyleSheet) -> StyledNode<'a> {
    // ツリー走査の間、ローカルに右端キー索引を構築し、各ノードのカスケードで
    // 照合するルールを絞り込む（グローバル Mutex ロックを完全排除）。
    let rule_index = super::rule_index::RuleIndex::build(&stylesheet.rules);
    let mut ancestors = Vec::new();
    style_tree_with_ancestors_vars(
        root,
        stylesheet,
        Some(&rule_index),
        &mut ancestors,
        None,
        None,
        &alloc::rc::Rc::new(BTreeMap::new()),
        &alloc::rc::Rc::new(BTreeMap::new()),
        &BTreeMap::new(),
    )
    .0
}

/// HTML5レガシー`width`/`height`属性値をCSS長さへ変換する（"rules for parsing
/// dimension values"の簡略版）。`%`で終われば百分率、それ以外は先頭の数字列を
/// pxとして扱う（`"400"` → `"400px"`。末尾の単位無しゴミは許容）。
fn html_legacy_dimension_to_css(raw: &str) -> Option<String> {
    let s = raw.trim();
    if s.is_empty() {
        return None;
    }
    if let Some(pct) = s.strip_suffix('%') {
        let pct = pct.trim();
        return pct.parse::<f32>().ok().map(|_| alloc::format!("{}%", pct));
    }
    let digits: String = s.chars().take_while(|c| c.is_ascii_digit()).collect();
    if digits.is_empty() {
        return None;
    }
    Some(alloc::format!("{}px", digits))
}

#[derive(Debug, Clone, Copy)]
pub(crate) struct AncestorContext<'a> {
    pub(crate) node: &'a Node,
    pub(crate) sibling_index: Option<usize>,
    pub(crate) sibling_count: Option<usize>,
}

#[inline]
fn insert_ua_pairs(specified_values: &mut BTreeMap<String, String>, pairs: &[(&'static str, &'static str)]) {
    for &(k, v) in pairs {
        specified_values.insert(String::from(k), String::from(v));
    }
}

pub(crate) fn compute_styles<'a>(
    root: &'a Node,
    stylesheet: &StyleSheet,
    ancestors: &[AncestorContext<'a>],
    sibling_index: Option<usize>,
    sibling_count: Option<usize>,
    active_pseudo_states: &[&str],
) -> BTreeMap<String, String> {
    let (vals, _, _, _) = compute_styles_with_vars(
        root,
        stylesheet,
        None,
        ancestors,
        sibling_index,
        sibling_count,
        active_pseudo_states,
        &alloc::rc::Rc::new(BTreeMap::new()),
        &BTreeMap::new(),
    );
    vals
}

/// `root` にスタイルを適用する。`counters_in` は直前までの文書順カウンタ状態
/// （`counter-reset`/`counter-increment`は全カウンタをフラットに共有する簡略化実装で、
/// 実 CSS 仕様のようなネストごとのスコープ分離は行わない）。戻り値の第3要素は
/// この要素自身の counter-reset/counter-increment 適用後のカウンタ状態。
pub(crate) fn compute_styles_with_vars<'a>(
    root: &'a Node,
    stylesheet: &StyleSheet,
    rule_index: Option<&super::rule_index::RuleIndex>,
    ancestors: &[AncestorContext<'a>],
    sibling_index: Option<usize>,
    sibling_count: Option<usize>,
    active_pseudo_states: &[&str],
    parent_vars: &alloc::rc::Rc<BTreeMap<String, String>>,
    counters_in: &BTreeMap<String, i64>,
) -> (
    BTreeMap<String, String>,
    alloc::rc::Rc<BTreeMap<String, String>>,
    BTreeMap<String, i64>,
    alloc::collections::BTreeSet<String>,
) {
    let mut specified_values = BTreeMap::new();
    // 【2026-08-05 性能】以前は全ノードで `parent_vars.clone()` していた。
    //
    // CSS 変数を定義するノードは `:root` などごく一部なのに、
    // 358 ノードすべてが 10 数個の `String` ペアを複製していた
    // （1 レイアウトあたり数千回の確保）。
    // `Rc` にして**書き込むノードだけ**が複製するようにする
    // （`Rc::make_mut` が必要なときだけ実体を複製する）。
    let mut css_vars: alloc::rc::Rc<BTreeMap<String, String>> = parent_vars.clone();
    let mut counters_out = if counters_in.is_empty() {
        BTreeMap::new()
    } else {
        counters_in.clone()
    };
    let mut counters_reset_names = alloc::collections::BTreeSet::new();

    match &root.node_type {
        NodeType::Element {
            tag_name,
            attributes,
            classes: _,
            id: _,
        } => {
            match tag_name.as_str() {
                "h1" => {
                    insert_ua_pairs(&mut specified_values, &[
                        ("display", "block"),
                        ("font-size", "32"),
                        ("font-weight", "bold"),
                        ("margin-top", "21"),
                        ("margin-bottom", "21"),
                    ]);
                }
                "h2" => {
                    insert_ua_pairs(&mut specified_values, &[
                        ("display", "block"),
                        ("font-size", "24"),
                        ("font-weight", "bold"),
                        ("margin-top", "20"),
                        ("margin-bottom", "20"),
                    ]);
                }
                "h3" => {
                    insert_ua_pairs(&mut specified_values, &[
                        ("display", "block"),
                        ("font-size", "18"),
                        ("font-weight", "bold"),
                        ("margin-top", "18"),
                        ("margin-bottom", "18"),
                    ]);
                }
                "p" => {
                    insert_ua_pairs(&mut specified_values, &[
                        ("display", "block"),
                        ("margin-top", "16"),
                        ("margin-bottom", "16"),
                    ]);
                }
                "body" => {
                    insert_ua_pairs(&mut specified_values, &[
                        ("display", "block"),
                        ("margin", "8"),
                    ]);
                }
                "ul" | "ol" => {
                    insert_ua_pairs(&mut specified_values, &[
                        ("display", "block"),
                        ("margin-left", "20px"),
                    ]);
                    // UA既定として `list-item` カウンタをこのリストのスコープでリセットする
                    // （実 CSS の `ol`/`ul` UA スタイルシートにある `counter-reset: list-item`
                    // に相当）。ネストした `<ol>` はこのリセットにより自動的に 1 から再スタート
                    // する（既存の counter-reset ネストスコープ折り畳みロジックがそのまま効く）。
                    // author が `counter-reset` を明示指定すればここは通常のカスケードで
                    // 上書きされる（同一キーの specified_values 挿入は後勝ちのため）。
                    //
                    // `<ol start="N">`（HTML属性、丸ごと未対応だった）: `counter-increment`
                    // は表示前に加算されるため、初期値を `N-1` にリセットして最初の `<li>` が
                    // ちょうど `N` になるようにする（`counter-reset:list-item 10` で最初の
                    // `<li>` が 11 になる既存の挙動と同じオフセット規則）。
                    let is_ol = tag_name.eq_ignore_ascii_case("ol");
                    let start_attr = if is_ol {
                        attributes.get("start").and_then(|s| s.trim().parse::<i64>().ok())
                    } else {
                        None
                    };
                    // `<ol reversed>`（HTML属性、丸ごと未対応だった）: `<li>` 側の
                    // counter-increment を -1 にする（下記 "li" 分岐が祖先の reversed を
                    // 見て切り替える）ため、こちら側は初期値を「開始値+1」にする必要がある
                    // （増分が -1 のため、最初の li は reset-1=開始値になる）。開始値は
                    // 明示 `start` があればそれ、無ければ直下の `<li>` 子要素数
                    // （降順のデフォルトは要素数から1まで数える仕様）。
                    let reversed = is_ol && attributes.contains_key("reversed");
                    let start_val = if reversed {
                        let li_count = root
                            .children
                            .iter()
                            .filter(|c| {
                                matches!(&c.node_type, NodeType::Element { tag_name, .. } if tag_name.eq_ignore_ascii_case("li"))
                            })
                            .count() as i64;
                        start_attr.unwrap_or(li_count) + 1
                    } else {
                        start_attr.map(|n| n - 1).unwrap_or(0)
                    };
                    specified_values.insert(
                        String::from("counter-reset"),
                        alloc::format!("list-item {start_val}"),
                    );
                }
                "li" => {
                    specified_values.insert(String::from("display"), String::from("block"));
                    // UA既定: `li` は毎回 `list-item` カウンタを1つ進める
                    // （実 CSS の `li { counter-increment: list-item; }` に相当）。
                    // `content: counter(list-item)` で著者が独自の番号書式を組み立てられるようにする。
                    // 直近の祖先が `<ol reversed>` なら降順（-1）に切り替える
                    // （`<ol reversed>` 自体は上の "ol" 分岐で初期値側を調整済み）。
                    let parent_reversed = ancestors.last().is_some_and(|a| {
                        matches!(&a.node.node_type, NodeType::Element { tag_name, attributes, .. }
                            if tag_name.eq_ignore_ascii_case("ol") && attributes.contains_key("reversed"))
                    });
                    let incr = if parent_reversed { "list-item -1" } else { "list-item" };
                    specified_values
                        .insert(String::from("counter-increment"), String::from(incr));
                }
                "pre" => {
                    insert_ua_pairs(&mut specified_values, &[
                        ("display", "block"),
                        ("background-color", "#f6f8fa"),
                        ("color", "#24292e"),
                        ("border-color", "#d0d7de"),
                        ("border-style", "solid"),
                        ("border-width", "1px"),
                        ("border-radius", "6px"),
                        ("padding", "12px"),
                        ("margin-top", "10px"),
                        ("margin-bottom", "10px"),
                    ]);
                }
                "code" => {
                    insert_ua_pairs(&mut specified_values, &[
                        ("display", "inline"),
                        ("background-color", "#f0f0f0"),
                        ("color", "#d63384"),
                        ("padding", "2px 4px"),
                        ("border-radius", "3px"),
                    ]);
                }
                "blockquote" => {
                    insert_ua_pairs(&mut specified_values, &[
                        ("display", "block"),
                        ("margin-left", "20px"),
                        ("margin-right", "20px"),
                        ("margin-top", "10px"),
                        ("margin-bottom", "10px"),
                        ("border-left", "4px solid #BD93F9"),
                    ]);
                }
                "div" | "html" | "form" | "header" | "footer" | "main" | "section" | "nav"
                | "hr" | "article" | "aside" | "figure" | "figcaption" | "fieldset" | "legend"
                | "dl" | "dt" | "dd" | "details" | "summary" => {
                    specified_values.insert(String::from("display"), String::from("block"));
                }
                // `<dialog>`（丸ごと未対応だった）。仕様上 `open` 属性が無い間は既定で
                // 非表示（`display: none`）、`open` 属性が付くと表示される。`show()`/
                // `showModal()`/`close()` はこの `open` 属性を JS 側で付け外しするだけの
                // 簡略実装（`::backdrop` 描画・モーダルフォーカストラップは対象外）。
                "dialog" => {
                    specified_values.insert(
                        String::from("display"),
                        if attributes.contains_key("open") {
                            String::from("block")
                        } else {
                            String::from("none")
                        },
                    );
                }
                // 実際の描画（動画再生・SVG図形・埋め込み文書等）は非対応でも、既定 display だけは
                // 仕様に合わせておく（無指定時に `_ => inline` へ落ちてレイアウトが崩れるのを防ぐ）。
                "select" | "video" | "audio" | "iframe" | "svg" | "canvas" => {
                    specified_values.insert(String::from("display"), String::from("inline-block"));
                }
                "center" => {
                    insert_ua_pairs(&mut specified_values, &[
                        ("display", "block"),
                        ("text-align", "center"),
                    ]);
                }
                "img" => {
                    specified_values.insert(String::from("display"), String::from("inline-block"));
                }
                "a" => {
                    insert_ua_pairs(&mut specified_values, &[
                        ("display", "inline"),
                        ("text-decoration", "underline"),
                    ]);
                }
                "strong" | "b" => {
                    insert_ua_pairs(&mut specified_values, &[
                        ("display", "inline"),
                        ("font-weight", "bold"),
                    ]);
                }
                "em" | "i" => {
                    insert_ua_pairs(&mut specified_values, &[
                        ("display", "inline"),
                        ("font-style", "italic"),
                    ]);
                }
                "u" => {
                    insert_ua_pairs(&mut specified_values, &[
                        ("display", "inline"),
                        ("text-decoration", "underline"),
                    ]);
                }
                "s" | "del" | "strike" => {
                    insert_ua_pairs(&mut specified_values, &[
                        ("display", "inline"),
                        ("text-decoration", "line-through"),
                    ]);
                }
                "input" | "textarea" | "button" => {
                    insert_ua_pairs(&mut specified_values, &[
                        ("display", "inline-block"),
                        ("border-radius", "6px"),
                    ]);
                }
                "table" => {
                    insert_ua_pairs(&mut specified_values, &[
                        ("display", "table"),
                        ("border-color", "#6272A4"),
                    ]);
                }
                "thead" | "tbody" | "tfoot" => {
                    specified_values
                        .insert(String::from("display"), String::from("table-row-group"));
                }
                "tr" => {
                    specified_values.insert(String::from("display"), String::from("table-row"));
                }
                "td" => {
                    insert_ua_pairs(&mut specified_values, &[
                        ("display", "table-cell"),
                        ("padding", "4px 8px"),
                    ]);
                }
                "th" => {
                    insert_ua_pairs(&mut specified_values, &[
                        ("display", "table-cell"),
                        ("padding", "4px 8px"),
                        ("font-weight", "bold"),
                        ("text-align", "center"),
                    ]);
                }
                "caption" => {
                    insert_ua_pairs(&mut specified_values, &[
                        ("display", "block"),
                        ("text-align", "center"),
                    ]);
                }
                // `noscript`: この処理系は JS を実行する（スクリプト有効）ため、HTML5 仕様
                // どおり常に非表示にする（スクリプト無効時のみ中身を表示する要素のため）。
                "head" | "title" | "meta" | "link" | "style" | "script" | "template"
                | "noscript" => {
                    specified_values.insert(String::from("display"), String::from("none"));
                }
                _ => {
                    specified_values.insert(String::from("display"), String::from("inline"));
                }
            }

            // HTML5 のレガシー`width`/`height`属性（`<img>`/`<iframe>`/`<video>`/
            // `<embed>`/`<object>`/`<canvas>`）。実ブラウザでは UA スタイルシート相当の
            // 優先度（著者CSSより弱い）でサイズを決めるが、CSS指定が無い場合はこの
            // 属性だけがサイズの手がかりになる。以前はどこにも配線されておらず、
            // `<iframe width="100%" height="400">`のようなレガシー記法（実サイト
            // www.sugi-lab.net の Access ページの地図埋め込み等で使用）が完全に
            // 無視され、サイズ未指定要素として折りたたまれるバグだった
            // （2026-07-21発見・修正）。`hidden`属性と同じ「タグ別UA既定値を
            // 上書きする形で適用し、後続の著者スタイルカスケードでauthorが
            // width/heightを明示指定すればそちらが優先される」という方針。
            if matches!(
                tag_name.as_str(),
                "img" | "iframe" | "video" | "embed" | "object" | "canvas"
            ) {
                if let Some(w) = attributes.get("width").and_then(|v| html_legacy_dimension_to_css(v)) {
                    specified_values.insert(String::from("width"), w);
                }
                if let Some(h) = attributes.get("height").and_then(|v| html_legacy_dimension_to_css(v)) {
                    specified_values.insert(String::from("height"), h);
                }
            }

            // HTML5 のグローバル真偽属性 `hidden`。実ブラウザでは UA スタイルシートの
            // `[hidden] { display: none }` が担う。ここではタグ別 UA 既定値を上書きする形で
            // 適用し、後続の著者スタイルカスケードで author が `display` を明示指定すれば
            // そちらが（この処理系の「著者スタイル優先」という簡略化方針どおり）優先される。
            if attributes.contains_key("hidden") {
                specified_values.insert(String::from("display"), String::from("none"));
            }

            // Popover API（`popover` グローバル属性。丸ごと未対応だった）。仕様上
            // `[popover]` 要素は既定で非表示、`showPopover()` 呼び出しで表示に
            // 切り替わる（`:popover-open` 状態）。`<dialog>` の `open` 属性と同じ
            // 「JS 側で内部専用属性を付け外しするだけ」の簡略実装とし、
            // `_popover_open` という内部専用属性名を使う（`::backdrop` 描画・
            // ライトディスミス・`beforetoggle`/`toggle` イベントは対象外）。
            if attributes.contains_key("popover") && !attributes.contains_key("_popover_open") {
                specified_values.insert(String::from("display"), String::from("none"));
            }

            // <details> が `open` 属性を持っていない場合、最初の <summary> 要素以外の子要素を非表示（display: none）にする。
            if let Some(parent_ctx) = ancestors.last() {
                if let NodeType::Element { tag_name: parent_tag, attributes: parent_attrs, .. } = &parent_ctx.node.node_type {
                    if parent_tag == "details" && !parent_attrs.contains_key("open") {
                        // 親の children の中で最初の <summary> 要素の位置を特定する。
                        let mut first_summary_idx = None;
                        for (idx, child) in parent_ctx.node.children.iter().enumerate() {
                            if let NodeType::Element { tag_name: child_tag, .. } = &child.node_type {
                                if child_tag == "summary" {
                                    first_summary_idx = Some(idx);
                                    break;
                                }
                             }
                        }

                        let is_first_summary = if let Some(fs_idx) = first_summary_idx {
                            sibling_index == Some(fs_idx)
                        } else {
                            false
                        };

                        if !is_first_summary {
                            specified_values.insert(String::from("display"), String::from("none"));
                        }
                    }
                }
            }

            // HTML5 のグローバル真偽属性 `inert`（丸ごと未対応だった）。仕様上の完全な
            // 意味論（フォーカス不可・アクセシビリティツリーから除外・検索対象外等）は
            // フォーカス管理/イベント配送の複数箇所にまたがる大改修が必要なため対象外
            // だが、「クリック等のポインタ操作を受け付けない」という中核効果は既存の
            // `pointer-events` の実装済みの挙動をそのまま使って実現できる（実ブラウザの
            // UA スタイルシートも `[inert] { pointer-events: none; }` 相当を持つ）。
            // `hidden` と同様、著者スタイルが `pointer-events` を明示指定すればそちらが
            // 優先される。
            if attributes.contains_key("inert") {
                specified_values.insert(String::from("pointer-events"), String::from("none"));
            }

            // HTML5 のグローバル属性 `dir="ltr"/"rtl"`。実 HTML では CSS `direction` の
            // プレゼンテーショナルヒントとして働く。`auto`（内容の文字種から双方向判定する
            // モード）はこの処理系にその判定機構が無いため非対応（値を無視し既定の継承へ
            // フォールバックする）。`hidden` と同様、後続の著者スタイルカスケードで
            // `direction` が明示指定されていればそちらが優先される。
            if let Some(dv) = attributes.get("dir").map(|v| v.trim().to_lowercase()) {
                if dv == "ltr" || dv == "rtl" {
                    specified_values.insert(String::from("direction"), dv);
                }
            }

            // 値ごとに (important, specificity, source_order, value) を保持。
            // 比較順: !important が最優先 → 特異度 → ソース順。
            let mut applied: BTreeMap<String, (bool, Option<usize>, (u32, u32, u32), usize, String)> =
                BTreeMap::new();

            // 【2026-07-27 性能修正】祖先を辿る `is_node_disabled` と兄弟を数える
            // `type_sibling_position` は**このノードについて一度計算すれば十分**
            // なのに、従来は `matches_selector` の内部でルールごとに再計算して
            // いた。実サイト規模（2403 ルール × 365 ノード ≒ 88 万回）ではこれが
            // 支配的コストとなり、1 回のカスケードに約 46 秒かかっていた。
            // ループの外で 1 回だけ求めて使い回す。
            let node_ctx = crate::os_lib::css::selector::NodeMatchContext::new(
                root,
                ancestors,
                sibling_index,
            );

            // 【2026-07-28 性能修正】右端キー索引でこのノードに関係し得るルールだけへ絞る。
            // 実サイトは Font Awesome 込みで 2403 ルールあり、従来は全ノードが全ルールを
            // 総当たりしていた（≒88 万回の照合）。1 回のレイアウトに約 50 秒かかり、
            // JS タイマーが毎フレーム DOM を dirty にするため描画が一度も完了しなかった。
            // 索引が使えない場合は従来どおり全ルールを見る（結果は変わらず遅いだけ）。
            let rule_orders: alloc::vec::Vec<usize> = match &root.node_type {
                NodeType::Element {
                    tag_name,
                    classes,
                    id,
                    ..
                } => {
                    if let Some(idx) = rule_index {
                        idx.candidates(tag_name.as_str(), id.as_deref(), classes.as_slice())
                            .unwrap_or_else(|_| (0..stylesheet.rules.len()).collect())
                    } else {
                        (0..stylesheet.rules.len()).collect()
                    }
                }
                // 【2026-07-31 性能修正】テキストノードはどのセレクタにも一致しないため空リスト
                _ => alloc::vec::Vec::new(),
            };

            for rule_order in rule_orders {
                let rule = &stylesheet.rules[rule_order];
                // 【2026-07-24追加】`@media`条件の動的判定。パース時の静的除外
                // （旧実装）だと、CSS解析はコンテンツ変化時の一度きりしか走らない
                // ため、その一度きりの評価時点のウィンドウ幅と実際の表示時の
                // ウィンドウ幅がズレると、モバイルファーストCSSのナビゲーション等が
                // 永久に非表示のままになるバグがあった。ここで毎回（レイアウトの
                // たびに）動的に再評価することで、ウィンドウ幅の変化に追従する。
                if let Some(q) = &rule.media_query {
                    if !crate::os_lib::css::media_query_matches(q) {
                        continue;
                    }
                }
                // 【2026-09-03】`@container` も同じく動的判定する。
                //
                // 基準はビューポートではなく「問い合わせコンテナ」なので、
                // レイアウト側が `CONTAINER_HINT_*` へ現在のコンテナ寸法を
                // 入れてからカスケードを呼ぶ。まだレイアウトが一度も
                // 走っていない初回は 0 が入っており、その場合は
                // ビューポート幅で代用する（0 のまま評価すると
                // `min-width` 系が軒並み偽になり、コンテナクエリを持つ
                // ページが初回描画で崩れるため）。
                if let Some(q) = &rule.container_query {
                    let mut cw = crate::os_lib::layout::CONTAINER_HINT_W
                        .load(core::sync::atomic::Ordering::Relaxed);
                    let mut ch = crate::os_lib::layout::CONTAINER_HINT_H
                        .load(core::sync::atomic::Ordering::Relaxed);
                    if cw <= 0 {
                        cw = crate::os_lib::layout::VIEWPORT_HINT_W
                            .load(core::sync::atomic::Ordering::Relaxed);
                    }
                    if ch <= 0 {
                        ch = crate::os_lib::layout::VIEWPORT_HINT_H
                            .load(core::sync::atomic::Ordering::Relaxed);
                    }
                    let size = crate::os_lib::css::container_query::ContainerSize {
                        width: cw,
                        height: ch,
                    };
                    // 入れ子は `&&` 連結。すべて満たす必要がある。
                    let all_ok = q.split("&&").all(|one| {
                        // 保持形式は `名前|条件`。名前は現状使わない
                        // （最も近い祖先のコンテナを常に対象とする簡略実装）。
                        let cond = one.split_once('|').map(|(_, c)| c).unwrap_or(one);
                        crate::os_lib::css::container_query::condition_matches(cond, size)
                    });
                    if !all_ok {
                        continue;
                    }
                }
                let mut matched_spec: Option<(u32, u32, u32)> = None;
                let mut matched_pseudo_el: Option<PseudoElement> = None;
                for selector in &rule.selectors {
                    if matches_selector(
                        selector,
                        root,
                        ancestors,
                        sibling_index,
                        sibling_count,
                        active_pseudo_states,
                        &node_ctx,
                    ) {
                        let spec = selector_specificity(selector);
                        if matched_spec.is_none_or(|cur| spec > cur) {
                            matched_spec = Some(spec);
                            matched_pseudo_el = selector_pseudo_element(selector);
                        }
                    }
                }
                if let Some(spec) = matched_spec {
                    // ::before / ::after / ::marker にマッチしたルールは、要素自体には
                    // 対象プロパティ以外を適用しない（疑似要素専用の宣言をそのまま親要素へ
                    // 流し込まないため）。content は合成プロパティ（x-before-content /
                    // x-after-content）へ、::marker の color は x-marker-color へ振り替え、
                    // flatten_layout 側で読み出して描画する。
                    // 注意: "--" 始まりのキーは下の後処理で specified_values ではなく
                    // css_vars 側へ入ってしまい styled.value() から読めなくなるため、
                    // ダッシュ2つ始まりにしない。
                    for decl in &rule.declarations {
                        let key: Option<alloc::borrow::Cow<'_, str>> = match matched_pseudo_el {
                            Some(PseudoElement::Before) => {
                                matches!(decl.name.as_str(), "content" | "display" | "font-family")
                                    .then(|| alloc::borrow::Cow::Owned(alloc::format!("x-before-{}", decl.name)))
                            }
                            Some(PseudoElement::After) => matches!(decl.name.as_str(), "content" | "display")
                                .then(|| alloc::borrow::Cow::Owned(alloc::format!("x-after-{}", decl.name))),
                            Some(PseudoElement::Marker) => {
                                matches!(decl.name.as_str(), "color" | "font-size" | "content")
                                    .then(|| alloc::borrow::Cow::Owned(alloc::format!("x-marker-{}", decl.name)))
                            }
                            Some(PseudoElement::Placeholder) => {
                                (decl.name == "color").then(|| alloc::borrow::Cow::Borrowed("x-placeholder-color"))
                            }
                            Some(PseudoElement::FirstLine) => matches!(
                                decl.name.as_str(),
                                "color" | "font-size" | "font-weight" | "font-style"
                            )
                            .then(|| alloc::borrow::Cow::Owned(alloc::format!("x-first-line-{}", decl.name))),
                            Some(PseudoElement::FirstLetter) => matches!(
                                decl.name.as_str(),
                                "color" | "font-size" | "font-weight" | "font-style"
                            )
                            .then(|| alloc::borrow::Cow::Owned(alloc::format!("x-first-letter-{}", decl.name))),
                            None => Some(alloc::borrow::Cow::Borrowed(decl.name.as_str())),
                        };
                        let Some(key) = key else {
                            continue;
                        };
                        let should_replace = match applied.get(key.as_ref()) {
                            Some((cur_imp, cur_layer, cur_spec, cur_order, _)) => {
                                if decl.important != *cur_imp {
                                    decl.important // important は非 important に常に勝つ
                                } else if decl.important {
                                    // !important 同士はレイヤーを見ずに従来通り specificity/order
                                    // で比較する（レイヤーとの優先順位反転は非対応の簡略実装）。
                                    spec > *cur_spec
                                        || (spec == *cur_spec && rule_order >= *cur_order)
                                } else {
                                    // 通常宣言: `@layer` の優先度（無し=最優先、後のレイヤーほど
                                    // 優先）→ specificity → source order の順で比較する。
                                    let cur_rank = cur_layer.map(|l| l as i64).unwrap_or(i64::MAX);
                                    let new_rank = rule.layer.map(|l| l as i64).unwrap_or(i64::MAX);
                                    new_rank > cur_rank
                                        || (new_rank == cur_rank
                                            && (spec > *cur_spec
                                                || (spec == *cur_spec && rule_order >= *cur_order)))
                                }
                            }
                            None => true,
                        };
                        if should_replace {
                            // content の実解析（attr()/counter() 展開）はこの要素自身の
                            // counter-reset/counter-increment 確定後まで遅延させる必要があるため、
                            // ここでは生の宣言値のまま保持する（下の apply_counter_decls 後に解決）。
                            applied.insert(
                                key.into_owned(),
                                (decl.important, rule.layer, spec, rule_order, decl.value.clone()),
                            );
                        }
                    }
                }
            }
            // カスケード優先順位（CSS仕様）: author !important > inline style !important
            // > inline style（通常）> author 通常。インライン style="" の上書きより先に、
            // どのキーが author 側の `!important` で確定したかを覚えておく必要がある
            // （`applied` を消費してしまう前に記録する）。
            let mut important_keys: alloc::collections::BTreeSet<String> =
                alloc::collections::BTreeSet::new();
            for (k, (is_important, _, _, _, _)) in &applied {
                if *is_important {
                    important_keys.insert(k.clone());
                }
            }
            for (k, (_, _, _, _, v)) in applied {
                if k.starts_with("--") {
                    alloc::rc::Rc::make_mut(&mut css_vars).insert(k, v);
                } else {
                    let resolved = if v.contains("var(") {
                        resolve_css_var(&v, &css_vars)
                    } else {
                        v
                    };
                    let resolved = if resolved.contains("env(") {
                        resolve_css_env(&resolved)
                    } else {
                        resolved
                    };
                    specified_values.insert(k, resolved);
                }
            }

            if let Some(style_attr) = attributes.get("style") {
                for decl in style_attr.split(';') {
                    let mut parts = decl.splitn(2, ':');
                    if let (Some(k), Some(v)) = (parts.next(), parts.next()) {
                        let k_trim = k.trim().to_string();
                        let raw_value = v.trim();
                        // `!important` を切り出す（スタイルシート側の宣言パースと同じ規則）。
                        let (v_trim, inline_important) = match raw_value.rfind('!') {
                            Some(pos)
                                if raw_value
                                    .get(pos + 1..)
                                    .unwrap_or("")
                                    .trim()
                                    .eq_ignore_ascii_case("important") =>
                            {
                                (
                                    String::from(raw_value.get(..pos).unwrap_or("").trim()),
                                    true,
                                )
                            }
                            _ => (String::from(raw_value), false),
                        };
                        if !k_trim.is_empty() {
                            // author 側が `!important` で確定済みのキーは、インライン側が
                            // `!important` でない限り上書きしない（CSS仕様のカスケード優先順位）。
                            if important_keys.contains(&k_trim) && !inline_important {
                                continue;
                            }
                            if k_trim.starts_with("--") {
                                alloc::rc::Rc::make_mut(&mut css_vars).insert(k_trim, v_trim);
                            } else {
                                let resolved = if v_trim.contains("var(") {
                                    resolve_css_var(&v_trim, &css_vars)
                                } else {
                                    v_trim
                                };
                                let resolved = if resolved.contains("env(") {
                                    resolve_css_env(&resolved)
                                } else {
                                    resolved
                                };
                                specified_values.insert(k_trim, resolved);
                            }
                        }
                    }
                }
            }
            expand_border_shorthands(&mut specified_values);
            expand_place_shorthands(&mut specified_values);
            expand_grid_template_shorthand(&mut specified_values);
            expand_text_emphasis_shorthand(&mut specified_values);
            expand_font_shorthand(&mut specified_values);
            expand_background_shorthand(&mut specified_values);

            // counter-reset/counter-increment をこの要素の確定値から適用してから、
            // 保留していた ::before/::after の content（counter() 参照を含む）を解決する。
            counters_reset_names = apply_counter_decls(&specified_values, &mut counters_out);
            // `quotes` は同一要素（::before/::after の元となる要素自身）への明示指定のみ対応。
            // 祖先からの継承は、この時点ではまだ継承伝搬（style_tree_with_ancestors_vars 側で
            // 後段に実行）が済んでいないため参照できない、という簡略化の制約がある。
            let quotes_pairs = specified_values
                .get("quotes")
                .and_then(|v| parse_quotes_pairs(v));
            // 入れ子レベル（`open-quote`/`close-quote` が何組目のペアを使うか）は、
            // 祖先の `<q>` 要素の個数から近似する（`<q>` は quotation を表す代表的な要素で、
            // 実用上のネスト深さと一致する）。以前は入れ子レベルを一切追跡せず常に最初の
            // ペアだけを使っていたため、入れ子の `<q>` で内側/外側とも同じ引用符になる
            // バグがあった。
            let quote_depth = ancestors
                .iter()
                .filter(|a| {
                    matches!(&a.node.node_type, NodeType::Element { tag_name, .. } if tag_name == "q")
                })
                .count();
            for key in ["x-before-content", "x-after-content", "x-marker-content"] {
                if let Some(raw) = specified_values.get(key).cloned() {
                    let resolved = parse_content_value(
                        &raw,
                        attributes,
                        &counters_out,
                        quotes_pairs.as_deref(),
                        quote_depth,
                        &stylesheet.counter_styles,
                    );
                    specified_values.insert(String::from(key), resolved);
                }
            }
        }
        NodeType::Text(_) => {
            specified_values.insert(String::from("display"), String::from("inline"));
        }
    }
    (specified_values, css_vars, counters_out, counters_reset_names)
}

/// 親から子へ継承される CSS プロパティ（テキストノードのレイアウト計測に必須）
pub(crate) const INHERITED_PROPS: &[&str] = &[
    "color",
    "-webkit-text-fill-color",
    // 【2026-08-03 発見・修正】`font-family` が抜けていた。
    // CSS 2.1 §15.3 で font-family は**継承プロパティ**である。
    // 抜けていたため `body { font-family: 'Noto Sans JP', sans-serif }` が
    // 子孫へ伝わらず、テキスト要素の family が常に空になっていた。
    // その結果、Web フォントを取得・展開・登録できても
    // **描画で一度も選ばれなかった**
    // （実測: 使われたのは要素自身に family 指定のあるアイコンフォントだけ）。
    "font-family",
    "font-size",
    "font-weight",
    "font-style",
    "line-height",
    "text-align",
    "letter-spacing",
    "word-spacing",
    "white-space",
    "text-transform",
    "list-style-type",
    "list-style-image",
    "list-style-position",
    "list-style",
    "tab-size",
    "direction",
    "visibility",
    // `text-indent` は継承プロパティ（ブロック要素に指定した値が子孫のテキストノードへ
    // 伝播すべき）だが、以前は INHERITED_PROPS に含まれておらず、通常の書き方
    // （`p{text-indent:2em}` のように親要素へ指定しテキストノード自身には指定しない）
    // では常に無視されるバグだった（`list-style-image`/`list-style-position` と同種）。
    "text-indent",
    // `border-collapse` も継承プロパティ（`layout.rs` が `TableNode` 自身の値しか見ないため、
    // `body{border-collapse:collapse}` のような祖先要素への指定が配下の `<table>` へ
    // 伝播しないバグがあった。`table` 要素自身への直接指定は元々動作するため見落とされていた）。
    "border-collapse",
    // `text-emphasis-style`/`text-emphasis-color` も継承プロパティ（実 CSS 仕様）。
    "text-emphasis-style",
    "text-emphasis-color",
    // `cursor` も継承プロパティ（実 CSS 仕様。祖先要素への指定が子孫へ伝播する）。
    "cursor",
    // `word-break`/`overflow-wrap`/`word-wrap` も継承プロパティ（CSS Text Module Specs）。
    "word-break",
    "overflow-wrap",
    "word-wrap",
];

pub(crate) fn style_tree_with_ancestors<'a>(
    root: &'a Node,
    stylesheet: &StyleSheet,
    ancestors: &[AncestorContext<'a>],
    sibling_index: Option<usize>,
    sibling_count: Option<usize>,
) -> StyledNode<'a> {
    let mut stack = ancestors.to_vec();
    style_tree_with_ancestors_vars(
        root,
        stylesheet,
        None,
        &mut stack,
        sibling_index,
        sibling_count,
        &alloc::rc::Rc::new(BTreeMap::new()),
        &alloc::rc::Rc::new(BTreeMap::new()),
        &BTreeMap::new(),
    )
    .0
}

/// `counter-reset`/`counter-increment`（CSS カウンタ）は文書順（深さ優先）で全カウンタを
/// フラット共有する簡略化実装のため、`counters_in`/戻り値で状態を兄弟間・親子間に
/// 連鎖させる必要がある（`.map()` では各要素が独立してしまうため使えない）。
pub(crate) fn style_tree_with_ancestors_vars<'a>(
    root: &'a Node,
    stylesheet: &StyleSheet,
    rule_index: Option<&super::rule_index::RuleIndex>,
    ancestors_stack: &mut Vec<AncestorContext<'a>>,
    sibling_index: Option<usize>,
    sibling_count: Option<usize>,
    parent_vars: &alloc::rc::Rc<BTreeMap<String, String>>,
    parent_inherited: &alloc::rc::Rc<BTreeMap<String, String>>,
    counters_in: &BTreeMap<String, i64>,
) -> (StyledNode<'a>, BTreeMap<String, i64>, alloc::collections::BTreeSet<String>) {
    let (mut specified_values, css_vars, counters_after_self, counters_reset_self) = compute_styles_with_vars(
        root,
        stylesheet,
        rule_index,
        ancestors_stack.as_slice(),
        sibling_index,
        sibling_count,
        &[],
        parent_vars,
        counters_in,
    );

    // `all: unset` 等の一括リセットは、個別プロパティの CSS-wide keyword 処理より先に
    // 行う（`all` 自身も含め、その後に個別の inherit/initial 等が残っていれば通常どおり処理する）。
    resolve_all_shorthand(&mut specified_values);
    // CSS-wide keywords（initial/inherit/unset/revert）を除去してから継承伝搬を行う。
    // 除去しておかないと、例えば `color:inherit` の文字列 "inherit" 自体が
    // specified_values に残ってしまい、後続の色パース等が本来の値ではなく
    // 壊れた文字列を見てしまう（かつ次の継承伝搬ステップが「既に指定済み」と
    // 誤認して親の値で埋めなくなる）。
    strip_css_wide_keywords(&mut specified_values);

    // 継承プロパティの伝搬: 自身で指定されていないものは親の値を引き継ぐ。
    // 特にテキストノードはこれが無いと layout が常に既定 16px で計測してしまい、
    // flatten（描画）側の継承サイズと食い違って折り返し幅・行送りが崩れる。
    for (k, v) in parent_inherited.iter() {
        if !specified_values.contains_key(k) {
            specified_values.insert(k.clone(), v.clone());
        }
    }
    // `margin-block`/`margin-inline`/`padding-block`/`padding-inline`/`inset-block`/
    // `inset-inline`（-start/-end をまとめて指定するショートハンド）が丸ごと未対応で、
    // longhand の `-start`/`-end` 個別指定しかできなかった。`resolve_logical_properties`
    // が理解する longhand へ展開してから渡す（展開自体は方向非依存: `-start`/`-end` は
    // 1〜2値の shorthand が持つ「1番目=start（値省略時は end にも流用）/2番目=end」という
    // 構文規則のみに従うため、`direction` 解決より前に済ませてよい）。
    expand_logical_box_shorthands(&mut specified_values);
    // 論理プロパティ（margin-inline-start 等）の解決は、`direction` の継承伝搬が終わった
    // 直後（＝物理プロパティへの変換時点で inherited な direction も見える状態）で行う。
    resolve_logical_properties(&mut specified_values);
    // currentColor キーワードの解決は、継承伝搬により `color` が確定した直後に行う必要がある
    // （継承された色を参照する `border-color:currentColor` 等が正しく解決されるようにするため）。
    resolve_current_color(&mut specified_values);
    // 【2026-07-31 性能修正】:hover / :focus / :active の事前計算を、
    // **そのノードの候補ルールが実際にその状態を参照している時だけ**走らせる。
    // 仕様は `spec/dynamic_pseudo_states.md`。
    //
    // 従来はノード 1 個につきカスケードを 4 回（通常＋3 状態）走らせていた。
    // 実測で `style_tree` のノード走査は 358 ノードで約 600 tick かかっており、
    // セレクタ照合は索引で既に 2.0% まで落ちている（照合はボトルネックではない）。
    // 残っていたのがこの 4 倍の固定コスト。
    //
    // 判定は候補ルールの**セレクタ構文だけ**を見る（D-3）。
    // 候補が取れない場合は安全側に倒して従来どおり走らせる（D-4）。
    let (uses_hover, uses_focus, uses_active) = match &root.node_type {
        NodeType::Element {
            tag_name,
            classes,
            id,
            ..
        } => {
            if let Some(idx) = rule_index {
                match idx.candidates(tag_name.as_str(), id.as_deref(), classes.as_slice()) {
                    Ok(cands) => match idx.states_of(&cands) {
                        Some(m) => (
                            m & super::rule_index::STATE_HOVER != 0,
                            m & super::rule_index::STATE_FOCUS != 0,
                            m & super::rule_index::STATE_ACTIVE != 0,
                        ),
                        None => (true, true, true),
                    },
                    Err(_) => (true, true, true),
                }
            } else {
                (true, true, true)
            }
        }
        // テキストノードはどのセレクタにも一致しないため、
        // どの状態でも差分は生じ得ない（`selector.rs` の `NodeType::Text(_) => false`）。
        _ => (false, false, false),
    };

    let hover_opt = if !uses_hover {
        None
    } else {
    let (hover_values_raw, _, _, _) = compute_styles_with_vars(
        root,
        stylesheet,
        rule_index,
        ancestors_stack.as_slice(),
        sibling_index,
        sibling_count,
        &["hover"],
        &css_vars,
        &counters_after_self,
    );
    let mut has_hover_diff = false;
    for (k, v) in &hover_values_raw {
        if specified_values.get(k) != Some(v) {
            has_hover_diff = true;
            break;
        }
    }
    if has_hover_diff {
        Some(hover_values_raw)
    } else {
        None
    }
    };

    let focus_opt = if !uses_focus {
        None
    } else {
    let (focus_values_raw, _, _, _) = compute_styles_with_vars(
        root,
        stylesheet,
        rule_index,
        ancestors_stack.as_slice(),
        sibling_index,
        sibling_count,
        &["focus"],
        &css_vars,
        &counters_after_self,
    );
    let mut has_focus_diff = false;
    for (k, v) in &focus_values_raw {
        if specified_values.get(k) != Some(v) {
            has_focus_diff = true;
            break;
        }
    }
    if has_focus_diff {
        Some(focus_values_raw)
    } else {
        None
    }
    };

    let active_opt = if !uses_active {
        None
    } else {
    let (active_values_raw, _, _, _) = compute_styles_with_vars(
        root,
        stylesheet,
        rule_index,
        ancestors_stack.as_slice(),
        sibling_index,
        sibling_count,
        &["active"],
        &css_vars,
        &counters_after_self,
    );
    let mut has_active_diff = false;
    for (k, v) in &active_values_raw {
        if specified_values.get(k) != Some(v) {
            has_active_diff = true;
            break;
        }
    }
    if has_active_diff {
        Some(active_values_raw)
    } else {
        None
    }
    };

    // 子へ渡す継承プロパティ集合（自身の確定値から抽出）
    let mut has_any_new_inherited = false;
    for k in INHERITED_PROPS {
        if let Some(v) = specified_values.get(*k) {
            if parent_inherited.get(*k) != Some(v) {
                has_any_new_inherited = true;
                break;
            }
        }
    }
    let inherited_for_children = if !has_any_new_inherited {
        parent_inherited.clone()
    } else {
        let mut map = BTreeMap::new();
        for k in INHERITED_PROPS {
            if let Some(v) = specified_values.get(*k) {
                map.insert(String::from(*k), v.clone());
            }
        }
        alloc::rc::Rc::new(map)
    };

    ancestors_stack.push(AncestorContext {
        node: root,
        sibling_index,
        sibling_count,
    });
    let child_count = root.children.len();
    let mut counters_running = counters_after_self;
    let mut children = alloc::vec::Vec::with_capacity(child_count);
    for (idx, child) in root.children.iter().enumerate() {
        // 子へ渡す直前のスナップショット。子（またはその子孫）が counter-reset した
        // 名前は、次の兄弟へは「この子に入る前の値」まで復元してから渡す（CSS 仕様の
        // カウンタスコープ規則: counter-reset は新しいスコープを作り、その効果は
        // リセットした要素の外（後続の兄弟）へ漏れてはならない）。子から返る
        // 第3要素は「その子自身が counter-reset したか」だけを表す（子の孫でリセット
        // された分は既に子自身の同じループで吸収済みのため、ここでは子自身の分だけを
        // 見れば十分で、それより深い階層のリセットを重ねて伝播させる必要は無い）。
        // counter-reset を伴わない通常の counter-increment（同一リストの `<li>` を
        // 跨いで番号を積み上げる、 professionsカウンタ本来の用途）はこの対象にならないため
        // 従来通り兄弟間で正しく蓄積される。
        let counters_before_child = if counters_running.is_empty() {
            None
        } else {
            Some(counters_running.clone())
        };
        let (child_styled, counters_after_child, reset_names_in_child) =
            style_tree_with_ancestors_vars(
                child,
                stylesheet,
                rule_index,
                ancestors_stack,
                Some(idx),
                Some(child_count),
                &css_vars,
                &inherited_for_children,
                &counters_running,
            );
        counters_running = counters_after_child;
        if !reset_names_in_child.is_empty() {
            if let Some(before) = &counters_before_child {
                for name in &reset_names_in_child {
                    match before.get(name) {
                        Some(v) => {
                            counters_running.insert(name.clone(), *v);
                        }
                        None => {
                            counters_running.remove(name);
                        }
                    }
                }
            } else {
                for name in &reset_names_in_child {
                    counters_running.remove(name);
                }
            }
        }
        children.push(child_styled);
    }
    ancestors_stack.pop();

    (
        StyledNode {
            node: root,
            specified_values,
            hover_values: hover_opt,
            focus_values: focus_opt,
            active_values: active_opt,
            css_vars: css_vars.clone(),
            children,
        },
        counters_running,
        counters_reset_self,
    )
}