azul_core/

compact.rs

//! Builder function to convert CssPropertyCache → CompactLayoutCache.
//!
//! Called once after restyle + apply_ua_css + compute_inherited_values.
//! Uses typed getters on CssPropertyCache (which cascade through all sources)
//! to resolve each property for the "normal" state (all pseudo-states = false).

use crate::dom::{NodeData, NodeId};
use crate::prop_cache::CssPropertyCache;

use crate::styled_dom::StyledNodeState;
// wildcard import: this module is the consumer of the whole compact_cache codec
// (encode/decode helpers + sentinel consts); enumerating them is unmaintainable.
use crate::hash::DefaultHasher;
use alloc::vec::Vec;
#[allow(clippy::wildcard_imports)]
use azul_css::compact_cache::*;
use azul_css::css::CssPropertyValue;
use azul_css::props::basic::length::SizeMetric;
use azul_css::props::layout::dimensions::{LayoutHeight, LayoutWidth};
use azul_css::props::layout::flex::LayoutFlexBasis;
use azul_css::props::layout::position::LayoutZIndex;
use azul_css::props::property::CssProperty;
use core::hash::{Hash, Hasher};

impl CssPropertyCache {
    /// Build a `CompactLayoutCache` from the current property cache state.
    ///
    /// Must be called after `restyle()`, `apply_ua_css()`, and `compute_inherited_values()`.
    /// Resolves all layout-relevant properties for every node in the "normal" state
    /// (no hover/active/focus) and encodes them into compact arrays.
    ///
    /// Tier 1/2/2b provide fast-path access for layout-hot properties.
    /// Non-compact properties (background, transform, box-shadow, etc.) are
    /// resolved via the slow cascade path in `get_property_slow()`.
    ///
    /// `prev_font_hashes` is the per-node font hash array from the previous frame.
    /// When non-empty, each node's new `font_family_hash` is compared against the
    /// previous value, and differing nodes are recorded in `font_dirty_nodes`.
    /// On the first build (empty slice), ALL text nodes are marked dirty.
    // fixed-point encoders: z-index and line-height (%×10) are range-checked
    // against the i16 sentinel threshold before the deliberate narrowing cast.
    #[allow(clippy::cast_possible_truncation)]
    #[allow(clippy::similar_names)] // domain-standard coordinate/control-point names
    #[allow(clippy::too_many_lines, clippy::cognitive_complexity)] // large but cohesive: single-purpose parser/builder/dispatch (one branch per input variant)
    pub fn build_compact_cache(
        &self,
        node_data: &[NodeData],
        prev_font_hashes: &[u64],
    ) -> CompactLayoutCache {
        let node_count = self.node_count;
        let default_state = StyledNodeState::default();
        let mut result = CompactLayoutCache::with_capacity(node_count);

        for (i, nd) in node_data.iter().enumerate().take(node_count) {
            let node_id = NodeId::new(i);

            // =====================================================================
            // Tier 1: Encode all 20 enum properties into u64
            // =====================================================================

            let display = self
                .get_display(nd, &node_id, &default_state)
                .and_then(|v| v.get_property().copied())
                .unwrap_or_default();
            let position = self
                .get_position(nd, &node_id, &default_state)
                .and_then(|v| v.get_property().copied())
                .unwrap_or_default();
            let float = self
                .get_float(nd, &node_id, &default_state)
                .and_then(|v| v.get_property().copied())
                .unwrap_or_default();
            let overflow_x = self
                .get_overflow_x(nd, &node_id, &default_state)
                .and_then(|v| v.get_property().copied())
                .unwrap_or_default();
            let overflow_y = self
                .get_overflow_y(nd, &node_id, &default_state)
                .and_then(|v| v.get_property().copied())
                .unwrap_or_default();
            let box_sizing = self
                .get_box_sizing(nd, &node_id, &default_state)
                .and_then(|v| v.get_property().copied())
                .unwrap_or_default();
            let flex_direction = self
                .get_flex_direction(nd, &node_id, &default_state)
                .and_then(|v| v.get_property().copied())
                .unwrap_or_default();
            let flex_wrap = self
                .get_flex_wrap(nd, &node_id, &default_state)
                .and_then(|v| v.get_property().copied())
                .unwrap_or_default();
            let justify_content = self
                .get_justify_content(nd, &node_id, &default_state)
                .and_then(|v| v.get_property().copied())
                .unwrap_or_default();
            let align_items = self
                .get_align_items(nd, &node_id, &default_state)
                .and_then(|v| v.get_property().copied())
                .unwrap_or_default();
            let align_content = self
                .get_align_content(nd, &node_id, &default_state)
                .and_then(|v| v.get_property().copied())
                .unwrap_or_default();
            let writing_mode = self
                .get_writing_mode(nd, &node_id, &default_state)
                .and_then(|v| v.get_property().copied())
                .unwrap_or_default();
            let clear = self
                .get_clear(nd, &node_id, &default_state)
                .and_then(|v| v.get_property().copied())
                .unwrap_or_default();
            let font_weight = self
                .get_font_weight(nd, &node_id, &default_state)
                .and_then(|v| v.get_property().copied())
                .unwrap_or_default();
            let font_style = self
                .get_font_style(nd, &node_id, &default_state)
                .and_then(|v| v.get_property().copied())
                .unwrap_or_default();
            let text_align = self
                .get_text_align(nd, &node_id, &default_state)
                .and_then(|v| v.get_property().copied())
                .unwrap_or_default();
            let visibility = self
                .get_visibility(nd, &node_id, &default_state)
                .and_then(|v| v.get_property().copied())
                .unwrap_or_default();
            let white_space = self
                .get_white_space(nd, &node_id, &default_state)
                .and_then(|v| v.get_property().copied())
                .unwrap_or_default();
            let direction = self
                .get_direction(nd, &node_id, &default_state)
                .and_then(|v| v.get_property().copied())
                .unwrap_or_default();
            let vertical_align = self
                .get_vertical_align(nd, &node_id, &default_state)
                .and_then(|v| v.get_property().copied())
                .unwrap_or_default();

            let border_collapse = self
                .get_border_collapse(nd, &node_id, &default_state)
                .and_then(|v| v.get_property().copied())
                .unwrap_or_default();

            result.tier1_enums[i] = encode_tier1(
                display,
                position,
                float,
                overflow_x,
                overflow_y,
                box_sizing,
                flex_direction,
                flex_wrap,
                justify_content,
                align_items,
                align_content,
                writing_mode,
                clear,
                font_weight,
                font_style,
                text_align,
                visibility,
                white_space,
                direction,
                vertical_align,
                border_collapse,
            );

            // =====================================================================
            // Tier 2: Encode numeric dimension properties
            // =====================================================================

            // Width/Height are enums: Auto | Px(PixelValue) | MinContent | MaxContent | Calc
            if let Some(val) = self.get_width(nd, &node_id, &default_state) {
                result.tier2_dims[i].width = encode_layout_width(val);
            }
            if let Some(val) = self.get_height(nd, &node_id, &default_state) {
                result.tier2_dims[i].height = encode_layout_height(val);
            }

            // Min/Max Width/Height are simple PixelValue wrappers
            if let Some(val) = self.get_min_width(nd, &node_id, &default_state) {
                result.tier2_dims[i].min_width = encode_pixel_prop(val);
            }
            if let Some(val) = self.get_max_width(nd, &node_id, &default_state) {
                result.tier2_dims[i].max_width = encode_pixel_prop(val);
            }
            if let Some(val) = self.get_min_height(nd, &node_id, &default_state) {
                result.tier2_dims[i].min_height = encode_pixel_prop(val);
            }
            if let Some(val) = self.get_max_height(nd, &node_id, &default_state) {
                result.tier2_dims[i].max_height = encode_pixel_prop(val);
            }

            // Flex basis (enum: Auto | Exact(PixelValue))
            if let Some(val) = self.get_flex_basis(nd, &node_id, &default_state) {
                result.tier2_dims[i].flex_basis = encode_flex_basis(val);
            }

            // Font size
            if let Some(val) = self.get_font_size(nd, &node_id, &default_state) {
                result.tier2_dims[i].font_size = encode_pixel_prop(val);
            }

            // Padding (i16 × 10 resolved px)
            if let Some(val) = self.get_padding_top(nd, &node_id, &default_state) {
                result.tier2_dims[i].padding_top = encode_css_pixel_as_i16(val);
            }
            if let Some(val) = self.get_padding_right(nd, &node_id, &default_state) {
                result.tier2_dims[i].padding_right = encode_css_pixel_as_i16(val);
            }
            if let Some(val) = self.get_padding_bottom(nd, &node_id, &default_state) {
                result.tier2_dims[i].padding_bottom = encode_css_pixel_as_i16(val);
            }
            if let Some(val) = self.get_padding_left(nd, &node_id, &default_state) {
                result.tier2_dims[i].padding_left = encode_css_pixel_as_i16(val);
            }

            // Margin (i16, auto is special)
            if let Some(val) = self.get_margin_top(nd, &node_id, &default_state) {
                result.tier2_dims[i].margin_top = encode_margin_i16(val);
            }
            if let Some(val) = self.get_margin_right(nd, &node_id, &default_state) {
                result.tier2_dims[i].margin_right = encode_margin_i16(val);
            }
            if let Some(val) = self.get_margin_bottom(nd, &node_id, &default_state) {
                result.tier2_dims[i].margin_bottom = encode_margin_i16(val);
            }
            if let Some(val) = self.get_margin_left(nd, &node_id, &default_state) {
                result.tier2_dims[i].margin_left = encode_margin_i16(val);
            }

            // Border widths (i16 × 10 resolved px)
            if let Some(val) = self.get_border_top_width(nd, &node_id, &default_state) {
                result.tier2_dims[i].border_top_width = encode_css_pixel_as_i16(val);
            }
            if let Some(val) = self.get_border_right_width(nd, &node_id, &default_state) {
                result.tier2_dims[i].border_right_width = encode_css_pixel_as_i16(val);
            }
            if let Some(val) = self.get_border_bottom_width(nd, &node_id, &default_state) {
                result.tier2_dims[i].border_bottom_width = encode_css_pixel_as_i16(val);
            }
            if let Some(val) = self.get_border_left_width(nd, &node_id, &default_state) {
                result.tier2_dims[i].border_left_width = encode_css_pixel_as_i16(val);
            }

            // Position offsets (top/right/bottom/left)
            if let Some(val) = self.get_top(nd, &node_id, &default_state) {
                result.tier2_dims[i].top = encode_css_pixel_as_i16(val);
            }
            if let Some(val) = self.get_right(nd, &node_id, &default_state) {
                result.tier2_dims[i].right = encode_css_pixel_as_i16(val);
            }
            if let Some(val) = self.get_bottom(nd, &node_id, &default_state) {
                result.tier2_dims[i].bottom = encode_css_pixel_as_i16(val);
            }
            if let Some(val) = self.get_left(nd, &node_id, &default_state) {
                result.tier2_dims[i].left = encode_css_pixel_as_i16(val);
            }

            // Flex grow/shrink (u16 × 100)
            if let Some(val) = self.get_flex_grow(nd, &node_id, &default_state) {
                if let Some(exact) = val.get_property() {
                    result.tier2_dims[i].flex_grow = encode_flex_u16(exact.inner.get());
                }
            }
            if let Some(val) = self.get_flex_shrink(nd, &node_id, &default_state) {
                if let Some(exact) = val.get_property() {
                    result.tier2_dims[i].flex_shrink = encode_flex_u16(exact.inner.get());
                }
            }

            // =====================================================================
            // Tier 2 cold: Paint-only properties
            // =====================================================================

            // Z-index
            if let Some(val) = self.get_z_index(nd, &node_id, &default_state) {
                if let Some(exact) = val.get_property() {
                    match exact {
                        LayoutZIndex::Auto => result.tier2_cold[i].z_index = I16_AUTO,
                        LayoutZIndex::Integer(z) => {
                            // Two-sided, like the line-height encoder: a large NEGATIVE z
                            // used to fall through to `*z as i16` and WRAP positive
                            // (-40000 -> +25536). Escape both out-of-range ends to the
                            // sentinel (tier 3) so the real value is preserved.
                            result.tier2_cold[i].z_index =
                                if *z >= -32768 && *z < i32::from(I16_SENTINEL_THRESHOLD) {
                                    *z as i16
                                } else {
                                    I16_SENTINEL
                                };
                        }
                    }
                }
            }

            // Border styles (packed into u16)
            {
                let bts = self
                    .get_border_top_style(nd, &node_id, &default_state)
                    .and_then(|v| v.get_property().copied())
                    .map(|v| v.inner)
                    .unwrap_or_default();
                let brs = self
                    .get_border_right_style(nd, &node_id, &default_state)
                    .and_then(|v| v.get_property().copied())
                    .map(|v| v.inner)
                    .unwrap_or_default();
                let bbs = self
                    .get_border_bottom_style(nd, &node_id, &default_state)
                    .and_then(|v| v.get_property().copied())
                    .map(|v| v.inner)
                    .unwrap_or_default();
                let bls = self
                    .get_border_left_style(nd, &node_id, &default_state)
                    .and_then(|v| v.get_property().copied())
                    .map(|v| v.inner)
                    .unwrap_or_default();
                result.tier2_cold[i].border_styles_packed =
                    encode_border_styles_packed(bts, brs, bbs, bls);
            }

            // Border colors (ColorU → u32 as 0xRRGGBBAA)
            if let Some(val) = self.get_border_top_color(nd, &node_id, &default_state) {
                if let Some(color) = val.get_property() {
                    result.tier2_cold[i].border_top_color = encode_color_u32(&color.inner);
                }
            }
            if let Some(val) = self.get_border_right_color(nd, &node_id, &default_state) {
                if let Some(color) = val.get_property() {
                    result.tier2_cold[i].border_right_color = encode_color_u32(&color.inner);
                }
            }
            if let Some(val) = self.get_border_bottom_color(nd, &node_id, &default_state) {
                if let Some(color) = val.get_property() {
                    result.tier2_cold[i].border_bottom_color = encode_color_u32(&color.inner);
                }
            }
            if let Some(val) = self.get_border_left_color(nd, &node_id, &default_state) {
                if let Some(color) = val.get_property() {
                    result.tier2_cold[i].border_left_color = encode_color_u32(&color.inner);
                }
            }

            // Border spacing (two PixelValue → i16 × 10 resolved px)
            if let Some(val) = self.get_border_spacing(nd, &node_id, &default_state) {
                if let Some(spacing) = val.get_property() {
                    if spacing.horizontal.metric == SizeMetric::Px {
                        result.tier2_cold[i].border_spacing_h =
                            encode_resolved_px_i16(spacing.horizontal.number.get());
                    }
                    if spacing.vertical.metric == SizeMetric::Px {
                        result.tier2_cold[i].border_spacing_v =
                            encode_resolved_px_i16(spacing.vertical.number.get());
                    }
                }
            }

            // Tab size (PixelValue → i16 × 10 resolved px)
            if let Some(val) = self.get_tab_size(nd, &node_id, &default_state) {
                result.tier2_cold[i].tab_size = encode_css_pixel_as_i16(val);
            }

            // =====================================================================
            // Tier 2b: Text properties
            // =====================================================================

            // Text color (ColorU → u32 as 0xRRGGBBAA)
            if let Some(val) = self.get_text_color(nd, &node_id, &default_state) {
                if let Some(color) = val.get_property() {
                    let c = &color.inner;
                    result.tier2b_text[i].text_color = (u32::from(c.r) << 24)
                        | (u32::from(c.g) << 16)
                        | (u32::from(c.b) << 8)
                        | u32::from(c.a);
                }
            }

            // Font-family (hash the whole StyleFontFamilyVec for fast comparison)
            if let Some(val) = self.get_font_family(nd, &node_id, &default_state) {
                if let Some(families) = val.get_property() {
                    let mut hasher = DefaultHasher::new();
                    families.hash(&mut hasher);
                    let h = hasher.finish();
                    let h = if h == 0 { 1 } else { h };
                    result.tier2b_text[i].font_family_hash = h;
                    result.font_hash_to_families.insert(h, families.clone());
                }
            }

            // Line-height. Parser convention: a NEGATIVE normalized() is an
            // ABSOLUTE pixel line-height, a positive one a unitless multiple
            // (or percentage) of font-size. The two need different i16
            // scales:
            //  - positive: multiple × 1000 (120% -> 1200; range up to ~32x)
            //  - negative: -px × 10 (line-height: 40px -> -400; ±3276.7px)
            // The old single ×1000 scale overflowed i16 for any absolute
            // line-height above 32.76px, stored the SENTINEL, and the getter
            // decoded that as "line-height: normal" - `line-height: 40px`
            // was silently dropped on every normal-state node.
            if let Some(val) = self.get_line_height(nd, &node_id, &default_state) {
                if let Some(lh) = val.get_property() {
                    let n = lh.inner.normalized();
                    let stored = if n < 0.0 {
                        // Absolute px: clamp to the representable range
                        // instead of falling to the sentinel ("normal").
                        ((n * 10.0).round() as i32).max(-32768)
                    } else {
                        (n * 1000.0).round() as i32
                    };
                    if stored >= -32768 && stored < i32::from(I16_SENTINEL_THRESHOLD) {
                        result.tier2b_text[i].line_height = stored as i16;
                    } else {
                        result.tier2b_text[i].line_height = I16_SENTINEL;
                    }
                }
            }

            // Letter-spacing (PixelValue wrapper → i16 × 10 resolved px)
            if let Some(val) = self.get_letter_spacing(nd, &node_id, &default_state) {
                result.tier2b_text[i].letter_spacing = encode_css_pixel_as_i16(val);
            }

            // Word-spacing (PixelValue wrapper → i16 × 10 resolved px)
            if let Some(val) = self.get_word_spacing(nd, &node_id, &default_state) {
                result.tier2b_text[i].word_spacing = encode_css_pixel_as_i16(val);
            }

            // Text-indent (PixelValue wrapper → i16 × 10 resolved px)
            if let Some(val) = self.get_text_indent(nd, &node_id, &default_state) {
                result.tier2b_text[i].text_indent = encode_css_pixel_as_i16(val);
            }
        }

        // =====================================================================
        // Per-node font dirty tracking (P4)
        // Compare each node's font_family_hash against the previous frame's hash.
        // Nodes whose hash changed are recorded in font_dirty_nodes for
        // incremental font chain re-resolution instead of all-or-nothing.
        // =====================================================================
        result.font_dirty_nodes.clear();
        for i in 0..node_count {
            let new_hash = result.tier2b_text[i].font_family_hash;
            let old_hash = prev_font_hashes.get(i).copied().unwrap_or(0);
            if new_hash != old_hash {
                result.font_dirty_nodes.push(i);
            }
        }
        // Save current hashes as prev_font_hashes for next frame comparison
        result.prev_font_hashes = result
            .tier2b_text
            .iter()
            .map(|t| t.font_family_hash)
            .collect();

        result
    }

    /// Build compact cache with inheritance in a single pass.
    ///
    /// Replaces the separate `compute_inherited_values()` + `build_compact_cache()` calls.
    /// For each node (in DOM index order, which is pre-order = parents before children):
    ///   1. Copy parent's compact values for INHERITABLE properties
    ///   2. Apply this node's CSS properties on top (from `css_props` + inline + UA)
    ///   3. Write directly to compact arrays
    ///
    /// This eliminates 50K Vec clones from `compute_inherited_values` and
    /// avoids re-reading properties from 5 separate data structures.
    pub fn build_compact_cache_with_inheritance(
        &self,
        node_data: &[NodeData],
        node_hierarchy: &[crate::styled_dom::NodeHierarchyItem],
        prev_font_hashes: &[u64],
    ) -> CompactLayoutCache {
        self.build_compact_cache_with_inheritance_debug(
            node_data,
            node_hierarchy,
            prev_font_hashes,
            &mut None,
        )
    }

    /// Same as `build_compact_cache_with_inheritance` but with optional debug logging.
    #[allow(clippy::too_many_lines, clippy::cognitive_complexity)] // large but cohesive: single-purpose parser/builder/dispatch (one branch per input variant)
    pub fn build_compact_cache_with_inheritance_debug(
        &self,
        node_data: &[NodeData],
        node_hierarchy: &[crate::styled_dom::NodeHierarchyItem],
        prev_font_hashes: &[u64],
        debug_messages: &mut Option<Vec<azul_css::LayoutDebugMessage>>,
    ) -> CompactLayoutCache {
        let node_count = self.node_count;
        let default_state = StyledNodeState::default();
        let mut result = CompactLayoutCache::with_capacity(node_count);

        // Pre-encode global CSS properties (from `*` rules) into compact form.
        // These are applied as baseline for every node before inheritance.
        let mut global_tier1: u64 = 0;
        let mut global_dims = CompactNodeProps::default();
        let mut global_cold = CompactNodePropsCold::default();
        let mut global_text = CompactTextProps::default();
        let has_global = !self.global_css_props.is_empty();

        if has_global {
            use azul_css::props::property::CssProperty;

            for prop in &self.global_css_props {
                result.uses_viewport_units |= css_property_uses_viewport_units(prop);
                // Apply each global property to the pre-encoded compact values
                macro_rules! global_tier1_enum {
                    ($variant:ident, $shift:ident, $mask:ident, $encoder:ident) => {
                        if let CssProperty::$variant(v) = prop {
                            if let Some(exact) = v.get_property() {
                                let encoded = u64::from($encoder(*exact));
                                let shifted_mask = $mask << $shift;
                                global_tier1 =
                                    (global_tier1 & !shifted_mask) | ((encoded & $mask) << $shift);
                            }
                        }
                    };
                }

                global_tier1_enum!(Display, DISPLAY_SHIFT, DISPLAY_MASK, layout_display_to_u8);
                global_tier1_enum!(
                    Position,
                    POSITION_SHIFT,
                    POSITION_MASK,
                    layout_position_to_u8
                );
                global_tier1_enum!(Float, FLOAT_SHIFT, FLOAT_MASK, layout_float_to_u8);
                global_tier1_enum!(
                    OverflowX,
                    OVERFLOW_X_SHIFT,
                    OVERFLOW_MASK,
                    layout_overflow_to_u8
                );
                global_tier1_enum!(
                    OverflowY,
                    OVERFLOW_Y_SHIFT,
                    OVERFLOW_MASK,
                    layout_overflow_to_u8
                );
                global_tier1_enum!(
                    BoxSizing,
                    BOX_SIZING_SHIFT,
                    BOX_SIZING_MASK,
                    layout_box_sizing_to_u8
                );
                global_tier1_enum!(
                    FlexDirection,
                    FLEX_DIRECTION_SHIFT,
                    FLEX_DIR_MASK,
                    layout_flex_direction_to_u8
                );
                global_tier1_enum!(
                    FlexWrap,
                    FLEX_WRAP_SHIFT,
                    FLEX_WRAP_MASK,
                    layout_flex_wrap_to_u8
                );
                global_tier1_enum!(
                    JustifyContent,
                    JUSTIFY_CONTENT_SHIFT,
                    JUSTIFY_MASK,
                    layout_justify_content_to_u8
                );
                global_tier1_enum!(
                    AlignItems,
                    ALIGN_ITEMS_SHIFT,
                    ALIGN_MASK,
                    layout_align_items_to_u8
                );
                global_tier1_enum!(
                    AlignContent,
                    ALIGN_CONTENT_SHIFT,
                    ALIGN_MASK,
                    layout_align_content_to_u8
                );
                global_tier1_enum!(Clear, CLEAR_SHIFT, CLEAR_MASK, layout_clear_to_u8);
                global_tier1_enum!(
                    Visibility,
                    VISIBILITY_SHIFT,
                    VISIBILITY_MASK,
                    style_visibility_to_u8
                );
                global_tier1_enum!(
                    WritingMode,
                    WRITING_MODE_SHIFT,
                    WRITING_MODE_MASK,
                    layout_writing_mode_to_u8
                );
                global_tier1_enum!(
                    FontWeight,
                    FONT_WEIGHT_SHIFT,
                    FONT_WEIGHT_MASK,
                    style_font_weight_to_u8
                );
                global_tier1_enum!(
                    FontStyle,
                    FONT_STYLE_SHIFT,
                    FONT_STYLE_MASK,
                    style_font_style_to_u8
                );
                global_tier1_enum!(
                    TextAlign,
                    TEXT_ALIGN_SHIFT,
                    TEXT_ALIGN_MASK,
                    style_text_align_to_u8
                );
                global_tier1_enum!(
                    WhiteSpace,
                    WHITE_SPACE_SHIFT,
                    WHITE_SPACE_MASK,
                    style_white_space_to_u8
                );
                global_tier1_enum!(
                    Direction,
                    DIRECTION_SHIFT,
                    DIRECTION_MASK,
                    style_direction_to_u8
                );
                global_tier1_enum!(
                    VerticalAlign,
                    VERTICAL_ALIGN_SHIFT,
                    VERTICAL_ALIGN_MASK,
                    style_vertical_align_to_u8
                );
                global_tier1_enum!(
                    BorderCollapse,
                    BORDER_COLLAPSE_SHIFT,
                    BORDER_COLLAPSE_MASK,
                    border_collapse_to_u8
                );

                // Tier 2 dims
                match prop {
                    CssProperty::PaddingTop(v) => {
                        global_dims.padding_top = encode_css_pixel_as_i16(v);
                    }
                    CssProperty::PaddingRight(v) => {
                        global_dims.padding_right = encode_css_pixel_as_i16(v);
                    }
                    CssProperty::PaddingBottom(v) => {
                        global_dims.padding_bottom = encode_css_pixel_as_i16(v);
                    }
                    CssProperty::PaddingLeft(v) => {
                        global_dims.padding_left = encode_css_pixel_as_i16(v);
                    }
                    CssProperty::MarginTop(v) => {
                        global_dims.margin_top = encode_margin_i16(v);
                    }
                    CssProperty::MarginRight(v) => {
                        global_dims.margin_right = encode_margin_i16(v);
                    }
                    CssProperty::MarginBottom(v) => {
                        global_dims.margin_bottom = encode_margin_i16(v);
                    }
                    CssProperty::MarginLeft(v) => {
                        global_dims.margin_left = encode_margin_i16(v);
                    }
                    CssProperty::Width(v) => {
                        global_dims.width = encode_layout_width(v);
                    }
                    CssProperty::Height(v) => {
                        global_dims.height = encode_layout_height(v);
                    }
                    CssProperty::FontSize(v) => {
                        global_dims.font_size = encode_pixel_prop(v);
                    }
                    CssProperty::BorderTopWidth(v) => {
                        global_dims.border_top_width = encode_css_pixel_as_i16(v);
                    }
                    CssProperty::BorderRightWidth(v) => {
                        global_dims.border_right_width = encode_css_pixel_as_i16(v);
                    }
                    CssProperty::BorderBottomWidth(v) => {
                        global_dims.border_bottom_width = encode_css_pixel_as_i16(v);
                    }
                    CssProperty::BorderLeftWidth(v) => {
                        global_dims.border_left_width = encode_css_pixel_as_i16(v);
                    }
                    _ => {}
                }
            }

            if global_tier1 != 0 {
                global_tier1 |= TIER1_POPULATED_BIT;
            }
        }

        // Helper: push debug message if debug_messages is Some
        macro_rules! cascade_debug {
            ($($arg:tt)*) => {
                if let Some(ref mut msgs) = debug_messages {
                    msgs.push(azul_css::LayoutDebugMessage::css_getter(format!($($arg)*)));
                }
            };
        }

        for i in 0..node_count {
            let node_id = NodeId::new(i);
            let nd = &node_data[i];

            // Step 0: Apply UA CSS defaults first (lowest priority).
            // Then global `*` rules override UA (higher priority).
            // Then per-node CSS (Step 3) overrides both.
            //
            // CSS cascade priority: UA < author `*` < author specific < inline

            // Step 1: Inherit from parent's COMPACT values (not computed_values)
            // Parent index is always < i in pre-order arena, so already computed.
            //
            // Step 1: Inherit ONLY inheritable CSS properties from parent.
            // Non-inheritable fields (display, position, float, overflow, box-sizing,
            // flex-*, clear, vertical-align, writing-mode) stay at 0 (CSS initial value).
            // They get set by UA CSS (Step 2) and author CSS (Step 3).
            let parent_id = node_hierarchy[i].parent_id();
            if let Some(pid) = parent_id {
                let pi = pid.index();

                // AUDIT: inheritance assumes a PRE-ORDER arena, i.e. a node's
                // parent is always stored at a lower index (`pi < i`) and has
                // therefore already been fully cascaded. A forward reference
                // (`pi >= i`) would silently inherit that parent's still-default
                // (all-zero) values, and an out-of-bounds `pi >= node_count`
                // would panic. Guard against both: assert the pre-order
                // invariant in debug builds, and skip inheritance (treat the
                // node as a root) for any malformed reference in release builds.
                debug_assert!(
                    pi < i,
                    "compact cascade: non-pre-order arena — node {i}'s parent {pi} \
                     is not stored before it; inheritance would read default values",
                );
                if pi < i {
                    // Copy only inheritable tier1 fields from parent
                    result.tier1_enums[i] = result.tier1_enums[pi] & INHERITABLE_TIER1_MASK;

                    // Inheritable tier2: font_size
                    result.tier2_dims[i].font_size = result.tier2_dims[pi].font_size;

                    // Inheritable tier2_cold: border_spacing, tab_size
                    result.tier2_cold[i].border_spacing_h = result.tier2_cold[pi].border_spacing_h;
                    result.tier2_cold[i].border_spacing_v = result.tier2_cold[pi].border_spacing_v;
                    result.tier2_cold[i].tab_size = result.tier2_cold[pi].tab_size;
                    // `cursor` is inheritable per spec - a `cursor: pointer`
                    // on a button has to reach the text inside it.
                    result.tier2_cold[i].cursor = result.tier2_cold[pi].cursor;

                    // Inheritable tier2b: all text properties
                    result.tier2b_text[i] = result.tier2b_text[pi];
                }
            }

            {
                let d = &result.tier2_dims[i];
                cascade_debug!("node[{}] {:?} after-inherit: pt={} pb={} pl={} pr={} mt={} mb={} ml={} mr={} w={} h={}",
                    i, nd.node_type, d.padding_top, d.padding_bottom, d.padding_left, d.padding_right,
                    d.margin_top, d.margin_bottom, d.margin_left, d.margin_right, d.width, d.height);
            }

            // Step 2: Apply UA CSS defaults for this node type directly to compact values.
            // UA defaults have lowest cascade priority — overridden by author CSS below.
            apply_ua_css_to_compact(
                &nd.node_type,
                &mut result.tier1_enums[i],
                &mut result.tier2_dims[i],
                &mut result.tier2_cold[i],
                &mut result.tier2b_text[i],
                &mut result.font_hash_to_families,
            );

            {
                let d = &result.tier2_dims[i];
                cascade_debug!(
                    "node[{}] {:?} after-UA: pt={} pb={} pl={} pr={} mt={} mb={} ml={} mr={}",
                    i,
                    nd.node_type,
                    d.padding_top,
                    d.padding_bottom,
                    d.padding_left,
                    d.padding_right,
                    d.margin_top,
                    d.margin_bottom,
                    d.margin_left,
                    d.margin_right
                );
            }

            // Step 2.5: Apply global `*` author CSS (overrides UA, overridden by specific rules)
            // Apply each `*` rule property individually (not bulk-assign) so we only
            // override properties the `*` rule actually set, preserving UA CSS for others.
            //
            // Per CSS spec, `*` matches all ELEMENTS. Text nodes are not elements —
            // they must only inherit from their parent. Without this check, `* { color: #666 }`
            // would overwrite the inherited `color: red` on a Text child of `<p>`,
            // even though `<p>` correctly got red from `p { color: red }`.
            if !nd.is_text_node() {
                for prop in &self.global_css_props {
                    // (flag already accumulated in the has_global pre-pass)
                    apply_css_property_to_compact(
                        prop,
                        &mut result.tier1_enums[i],
                        &mut result.tier2_dims[i],
                        &mut result.tier2_cold[i],
                        &mut result.tier2b_text[i],
                        &mut result.font_hash_to_families,
                    );
                    update_dom_declared_flags(prop, &mut result.dom_declared_flags);
                }
            }

            {
                let d = &result.tier2_dims[i];
                cascade_debug!("node[{}] {:?} after-global-star: pt={} pb={} pl={} pr={} mt={} mb={} ml={} mr={}",
                    i, nd.node_type, d.padding_top, d.padding_bottom, d.padding_left, d.padding_right,
                    d.margin_top, d.margin_bottom, d.margin_left, d.margin_right);
                let n_props = self.css_props.get_slice(i).len();
                let n_inline = nd.style.iter_inline_properties().count();
                cascade_debug!(
                    "node[{}] css_props={} entries, inline={} entries",
                    i,
                    n_props,
                    n_inline
                );
                for prop in self.css_props.get_slice(i) {
                    cascade_debug!(
                        "node[{}]   css_prop: state={:?} type={:?}",
                        i,
                        prop.state,
                        prop.prop_type
                    );
                }
            }

            // Step 3: Apply this node's CSS properties directly to compact values.
            // Per-node author CSS has higher specificity than global `*`.

            // Scan css_props (stylesheet rules, sorted by (state, prop_type))
            // Typically 5-15 entries per node. Only Normal state matters for layout.
            for prop in self.css_props.get_slice(i) {
                if prop.state != azul_css::dynamic_selector::PseudoStateType::Normal {
                    continue;
                }
                result.uses_viewport_units |= css_property_uses_viewport_units(&prop.property);
                apply_css_property_to_compact(
                    &prop.property,
                    &mut result.tier1_enums[i],
                    &mut result.tier2_dims[i],
                    &mut result.tier2_cold[i],
                    &mut result.tier2b_text[i],
                    &mut result.font_hash_to_families,
                );
                update_dom_declared_flags(&prop.property, &mut result.dom_declared_flags);
            }

            {
                let d = &result.tier2_dims[i];
                cascade_debug!("node[{}] {:?} after-css-props: pt={} pb={} pl={} pr={} mt={} mb={} ml={} mr={}",
                    i, nd.node_type, d.padding_top, d.padding_bottom, d.padding_left, d.padding_right,
                    d.margin_top, d.margin_bottom, d.margin_left, d.margin_right);
            }

            // Scan inline CSS (node_data.style — typically 0-3 properties).
            // Inline CSS has highest specificity — applied last to override stylesheet.
            for (prop, conds) in nd.style.iter_inline_properties() {
                // Apply when the conditions hold for the RESTING state:
                // pseudo-state conditions must be Normal, and every other
                // condition (viewport/@media, theme, OS...) is evaluated
                // against the window's dynamic context — the same rule
                // get_property_slow applies, so the fast path and the slow
                // path cannot disagree about a conditional property. A
                // non-pseudo condition also flags the cache, so the window
                // knows a context change requires a rebuild.
                let is_normal = conds.as_slice().is_empty()
                    || conds.as_slice().iter().all(|c| match c {
                        azul_css::dynamic_selector::DynamicSelector::PseudoState(s) => {
                            *s == azul_css::dynamic_selector::PseudoStateType::Normal
                        }
                        non_pseudo => {
                            result.has_dynamic_conditions = true;
                            // Harvest the thresholds this condition can flip
                            // at — the resize decision regenerates when the
                            // window crosses one (dedup/sort happens once,
                            // after the node loop).
                            {
                                let mut w = Vec::new();
                                let mut h = Vec::new();
                                azul_css::dynamic_selector::collect_viewport_thresholds(
                                    core::slice::from_ref(non_pseudo),
                                    &mut w,
                                    &mut h,
                                );
                                result
                                    .inline_viewport_w
                                    .extend(w.into_iter().map(f32::to_bits));
                                result
                                    .inline_viewport_h
                                    .extend(h.into_iter().map(f32::to_bits));
                            }
                            self.dynamic_context
                                .as_deref()
                                .is_some_and(|ctx| non_pseudo.matches(ctx))
                        }
                    });
                if !is_normal {
                    continue;
                }
                result.uses_viewport_units |= css_property_uses_viewport_units(prop);
                // Layout-critical props dispatched via single-variant `if let` (direct discriminant
                // COMPARES, no indirect jump). apply_css_property_to_compact's ~100-arm `match` lowers
                // to a jump table that remill mis-lifts (never reaches the right arm) — same class as the
                // CssProperty::clone bug. With the conversion-clone fix the prop discriminant is now
                // correct, so these compares match and apply the value; everything else falls back.
                // (CssProperty is imported at module top.)
                if let CssProperty::Width(v) = prop {
                    result.tier2_dims[i].width = encode_layout_width(v);
                } else if let CssProperty::Height(v) = prop {
                    result.tier2_dims[i].height = encode_layout_height(v);
                } else if let CssProperty::FlexGrow(v) = prop {
                    if let Some(e) = v.get_property() {
                        result.tier2_dims[i].flex_grow = encode_flex_u16(e.inner.get());
                    }
                } else if let CssProperty::Display(v) = prop {
                    if let Some(e) = v.get_property() {
                        let enc = u64::from(layout_display_to_u8(*e));
                        let m = DISPLAY_MASK;
                        let s = DISPLAY_SHIFT;
                        result.tier1_enums[i] =
                            (result.tier1_enums[i] & !(m << s)) | ((enc & m) << s);
                    }
                } else {
                    apply_css_property_to_compact(
                        prop,
                        &mut result.tier1_enums[i],
                        &mut result.tier2_dims[i],
                        &mut result.tier2_cold[i],
                        &mut result.tier2b_text[i],
                        &mut result.font_hash_to_families,
                    );
                }
                update_dom_declared_flags(prop, &mut result.dom_declared_flags);
            }

            // Step 4b: user-overridden properties (runtime patches via
            // `set_css_property` / `restyle_user_property`). The resolver
            // consults this layer FIRST, so the compact cache must apply it
            // LAST — the cache is a projection of the same cascade and the
            // two must agree. Without this step a rebuilt cache resurrected
            // the pre-patch value: `restyle_user_property` rebuilds the cache
            // right after recording the override, and the layout fast path
            // then read the stale display/geometry the patch had just
            // changed. Same dispatch shape as the inline loop above (the
            // single-variant `if let`s exist for the remill lift, see there).
            if let Some(user_props) = self.user_overridden_properties.get(i) {
                for (_, prop) in user_props {
                    result.uses_viewport_units |= css_property_uses_viewport_units(prop);
                    if let CssProperty::Width(v) = prop {
                        result.tier2_dims[i].width = encode_layout_width(v);
                    } else if let CssProperty::Height(v) = prop {
                        result.tier2_dims[i].height = encode_layout_height(v);
                    } else if let CssProperty::FlexGrow(v) = prop {
                        if let Some(e) = v.get_property() {
                            result.tier2_dims[i].flex_grow = encode_flex_u16(e.inner.get());
                        }
                    } else if let CssProperty::Display(v) = prop {
                        if let Some(e) = v.get_property() {
                            let enc = u64::from(layout_display_to_u8(*e));
                            let m = DISPLAY_MASK;
                            let s = DISPLAY_SHIFT;
                            result.tier1_enums[i] =
                                (result.tier1_enums[i] & !(m << s)) | ((enc & m) << s);
                        }
                    } else {
                        apply_css_property_to_compact(
                            prop,
                            &mut result.tier1_enums[i],
                            &mut result.tier2_dims[i],
                            &mut result.tier2_cold[i],
                            &mut result.tier2b_text[i],
                            &mut result.font_hash_to_families,
                        );
                    }
                    update_dom_declared_flags(prop, &mut result.dom_declared_flags);
                }
            }

            // Resolve font-size from em/percent/pt/etc. to px.
            // CSS 2.1: inherited font-size is the COMPUTED (px) value, not the specified value.
            // Pre-order traversal guarantees parent's font_size is already resolved.
            resolve_font_size_to_px(&mut result.tier2_dims, i, parent_id);

            // Set populated bit
            if result.tier1_enums[i] != 0 {
                result.tier1_enums[i] |= TIER1_POPULATED_BIT;
            }
        }

        // Font dirty tracking.
        // When prev_font_hashes is empty (first build for this DOM), mark ALL
        // text nodes dirty to force font resolution. Without this, a DOM with
        // no explicit font-family (all hashes 0) would compare 0==0 and skip
        // resolution, even though font-weight/font-style may differ from the
        // cached chains of a previous DOM.
        result.font_dirty_nodes.clear();
        let first_build = prev_font_hashes.is_empty();
        for i in 0..node_count {
            let new_hash = result.tier2b_text[i].font_family_hash;
            let old_hash = prev_font_hashes.get(i).copied().unwrap_or(0);
            if first_build || new_hash != old_hash {
                result.font_dirty_nodes.push(i);
            }
        }
        result.prev_font_hashes = result
            .tier2b_text
            .iter()
            .map(|t| t.font_family_hash)
            .collect();

        // Normalize the harvested viewport thresholds once (pushed raw per
        // node above): sorted + deduped by bit pattern.
        result.inline_viewport_w.sort_unstable();
        result.inline_viewport_w.dedup();
        result.inline_viewport_h.sort_unstable();
        result.inline_viewport_h.dedup();

        result
    }
}

// =============================================================================
// Helpers extracted from build_compact_cache_with_inheritance_debug
// =============================================================================

/// Apply UA CSS defaults for a node type directly to compact values.
/// UA defaults have lowest cascade priority — overridden by author CSS.
/// Which tier-1 bits a node COPIES FROM ITS PARENT — the packed form of "this
/// property is inherited".
///
/// It must hold a slot exactly when that slot's property is `is_inheritable()`.
/// Getting it wrong is silent in BOTH directions: a missing slot makes every
/// descendant fall back to the CSS initial value while `get_property_slow` —
/// which inherits through `computed_values` — still answers correctly, so the
/// two cascade paths disagree about the computed value. That is the failure
/// mode that bit the VirtualView overflow default. An extra slot inherits a
/// property CSS says does not.
///
/// `every_inheritable_tier1_property_is_actually_inherited` checks the
/// correspondence slot by slot against `CssPropertyType::is_inheritable`, so a
/// slot added later cannot quietly omit itself.
pub const INHERITABLE_TIER1_MASK: u64 = (FONT_WEIGHT_MASK << FONT_WEIGHT_SHIFT)
    | (FONT_STYLE_MASK << FONT_STYLE_SHIFT)
    | (TEXT_ALIGN_MASK << TEXT_ALIGN_SHIFT)
    | (VISIBILITY_MASK << VISIBILITY_SHIFT)
    | (WHITE_SPACE_MASK << WHITE_SPACE_SHIFT)
    | (DIRECTION_MASK << DIRECTION_SHIFT)
    | (BORDER_COLLAPSE_MASK << BORDER_COLLAPSE_SHIFT)
    // `writing-mode` is inheritable per CSS and has had a tier-1 slot all
    // along, but was never copied from the parent: `writing-mode: vertical-rl`
    // on a container laid its children out horizontally in the compact path,
    // while the slow path inherited it correctly. Found by auditing this mask
    // against `is_inheritable()` — it was the only disagreement.
    | (WRITING_MODE_MASK << WRITING_MODE_SHIFT);

fn apply_ua_css_to_compact(
    node_type: &crate::dom::NodeType,
    tier1: &mut u64,
    dims: &mut CompactNodeProps,
    cold: &mut CompactNodePropsCold,
    text: &mut CompactTextProps,
    font_hash_map: &mut alloc::collections::BTreeMap<
        u64,
        azul_css::props::basic::font::StyleFontFamilyVec,
    >,
) {
    use azul_css::props::property::CssPropertyType as PT2;
    const UA_PROPERTY_TYPES: &[PT2] = &[
        // Tier1 enum properties
        PT2::Display,
        PT2::Position,
        PT2::Float,
        PT2::Clear,
        PT2::OverflowX,
        PT2::OverflowY,
        PT2::BoxSizing,
        PT2::FlexDirection,
        PT2::FlexWrap,
        PT2::JustifyContent,
        PT2::AlignItems,
        PT2::AlignContent,
        PT2::WritingMode,
        PT2::FontWeight,
        PT2::FontStyle,
        PT2::TextAlign,
        PT2::Visibility,
        PT2::WhiteSpace,
        PT2::Direction,
        PT2::VerticalAlign,
        PT2::BorderCollapse,
        // Tier2 dimension properties
        PT2::Width,
        PT2::Height,
        PT2::FontSize,
        PT2::MarginTop,
        PT2::MarginBottom,
        PT2::MarginLeft,
        PT2::MarginRight,
        PT2::PaddingTop,
        PT2::PaddingBottom,
        PT2::PaddingLeft,
        PT2::PaddingRight,
        PT2::BorderTopWidth,
        PT2::BorderTopStyle,
        PT2::BorderTopColor,
        PT2::BorderRightWidth,
        PT2::BorderRightStyle,
        PT2::BorderRightColor,
        PT2::BorderBottomWidth,
        PT2::BorderBottomStyle,
        PT2::BorderBottomColor,
        PT2::BorderLeftWidth,
        PT2::BorderLeftStyle,
        PT2::BorderLeftColor,
        // Text properties
        PT2::TextColor,
        PT2::LineHeight,
        PT2::LetterSpacing,
        PT2::WordSpacing,
        PT2::TextDecoration,
        PT2::Cursor,
        PT2::ListStyleType,
        // Counters: the UA sheet resets `list-item` on <ol>/<ul> so each list
        // restarts numbering. Without these here the has_counter fast-path bit
        // stays unset for list containers, compute_counters skips the reset, and
        // the list-item counter runs globally (a <ul> then <ol> numbered 1,2 then
        // 3,4 instead of restarting at 1).
        PT2::CounterReset,
        PT2::CounterIncrement,
    ];
    for pt in UA_PROPERTY_TYPES {
        if let Some(ua_prop) = crate::ua_css::get_ua_property(node_type, *pt) {
            apply_css_property_to_compact(ua_prop, tier1, dims, cold, text, font_hash_map);
        }
    }
}

/// Resolve a node's font-size from relative units (em, %, rem, pt) to absolute px.
/// CSS 2.1: inherited font-size is the COMPUTED (px) value, not the specified value.
/// Pre-order traversal guarantees parent's `font_size` is already resolved.
fn resolve_font_size_to_px(
    tier2_dims: &mut [CompactNodeProps],
    node_idx: usize,
    parent_id: Option<NodeId>,
) {
    let raw_fs = tier2_dims[node_idx].font_size;
    if raw_fs == U32_SENTINEL || raw_fs >= U32_SENTINEL_THRESHOLD {
        return;
    }
    let pv = match decode_pixel_value_u32(raw_fs) {
        Some(pv) if pv.metric != SizeMetric::Px => pv,
        _ => return,
    };

    // AUDIT: pre-order arena assumed — the parent's font-size is already
    // resolved to px only when `pid < node_idx`. Use checked `get` so an
    // out-of-bounds parent ref cannot panic, and require `pid < node_idx` so a
    // forward reference falls back to the 16px CSS initial value instead of
    // reading an unresolved (still em/%) parent value.
    let parent_font_size_px = parent_id.map_or(16.0, |pid| {
        let pi = pid.index();
        debug_assert!(
            pi < node_idx,
            "compact font-size resolve: non-pre-order arena — node {node_idx}'s \
                 parent {pi} font-size is not yet resolved",
        );
        if pi < node_idx {
            tier2_dims
                .get(pi)
                .and_then(|p| decode_pixel_value_u32(p.font_size))
                .map_or(16.0, |ppv| ppv.number.get())
        } else {
            16.0
        }
    });

    let resolved_px = match pv.metric {
        SizeMetric::Em => pv.number.get() * parent_font_size_px,
        SizeMetric::Percent => pv.number.get() / 100.0 * parent_font_size_px,
        SizeMetric::Rem => {
            // rem = the ROOT element's font size. For the root itself that is circular,
            // so CSS resolves root rem against the 16px INITIAL value (Selectors/Values:
            // "when specified on the root element, rem refers to the initial value").
            // tier2_dims[0] IS the root's slot, but while resolving the root it still
            // holds the root's own unresolved raw rem — so `html { font-size: 2rem }`
            // computed 2*2 = 4px instead of 2*16 = 32px.
            let rem_base = if parent_id.is_none() {
                16.0
            } else {
                tier2_dims
                    .first()
                    .and_then(|r| decode_pixel_value_u32(r.font_size))
                    .map_or(16.0, |rpv| rpv.number.get())
            };
            rem_base * pv.number.get()
        }
        SizeMetric::Pt => pv.number.get() * 96.0 / 72.0,
        _ => pv.number.get(),
    };
    tier2_dims[node_idx].font_size =
        encode_pixel_value_u32(&azul_css::props::basic::pixel::PixelValue::px(resolved_px));
}

/// Does this property's value use a viewport-relative unit (vw/vh/vmin/vmax)?
///
/// Feeds `CompactLayoutCache::uses_viewport_units` from the property loops of
/// `build_compact_cache_with_inheritance` — one call per (node, property), on
/// data the loops are already iterating. See that field's docs for what the
/// flag buys (solver3 skips per-resize invalidation of every inline collection
/// for the overwhelming majority of documents that never mention a viewport
/// unit).
///
/// Coverage = the pixel-carrying properties the compact cache itself encodes,
/// which is a superset of what inline collection/measurement reads (the only
/// consumer). `calc()` widths/heights are flagged CONSERVATIVELY without
/// walking the AST — a false positive merely keeps the old always-invalidate
/// behaviour.
fn css_property_uses_viewport_units(prop: &CssProperty) -> bool {
    use azul_css::props::basic::length::SizeMetric;
    use azul_css::props::basic::pixel::PixelValue;
    const fn pv(p: &PixelValue) -> bool {
        matches!(
            p.metric,
            SizeMetric::Vw | SizeMetric::Vh | SizeMetric::Vmin | SizeMetric::Vmax
        )
    }
    fn inner<T: HasInnerPixelValue>(v: &CssPropertyValue<T>) -> bool {
        matches!(v, CssPropertyValue::Exact(x) if pv(&x.get_inner_pixel()))
    }
    use azul_css::props::layout::dimensions::{LayoutHeight, LayoutWidth};
    use azul_css::props::layout::flex::LayoutFlexBasis;
    match prop {
        CssProperty::Width(v) => matches!(v, CssPropertyValue::Exact(w) if match w {
            LayoutWidth::Px(p) | LayoutWidth::FitContent(p) => pv(p),
            LayoutWidth::Calc(_) => true,
            _ => false,
        }),
        CssProperty::Height(v) => matches!(v, CssPropertyValue::Exact(h) if match h {
            LayoutHeight::Px(p) | LayoutHeight::FitContent(p) => pv(p),
            LayoutHeight::Calc(_) => true,
            _ => false,
        }),
        CssProperty::FlexBasis(v) => {
            matches!(v, CssPropertyValue::Exact(LayoutFlexBasis::Exact(p)) if pv(p))
        }
        CssProperty::MinWidth(v) => inner(v),
        CssProperty::MaxWidth(v) => inner(v),
        CssProperty::MinHeight(v) => inner(v),
        CssProperty::MaxHeight(v) => inner(v),
        CssProperty::FontSize(v) => inner(v),
        CssProperty::PaddingTop(v) => inner(v),
        CssProperty::PaddingRight(v) => inner(v),
        CssProperty::PaddingBottom(v) => inner(v),
        CssProperty::PaddingLeft(v) => inner(v),
        CssProperty::MarginTop(v) => inner(v),
        CssProperty::MarginRight(v) => inner(v),
        CssProperty::MarginBottom(v) => inner(v),
        CssProperty::MarginLeft(v) => inner(v),
        CssProperty::BorderTopWidth(v) => inner(v),
        CssProperty::BorderRightWidth(v) => inner(v),
        CssProperty::BorderBottomWidth(v) => inner(v),
        CssProperty::BorderLeftWidth(v) => inner(v),
        CssProperty::Top(v) => inner(v),
        CssProperty::Right(v) => inner(v),
        CssProperty::Bottom(v) => inner(v),
        CssProperty::Left(v) => inner(v),
        CssProperty::LetterSpacing(v) => inner(v),
        CssProperty::WordSpacing(v) => inner(v),
        CssProperty::TextIndent(v) => inner(v),
        CssProperty::TabSize(v) => inner(v),
        _ => false,
    }
}

// =============================================================================
// Direct CssProperty → compact field writer
// =============================================================================

/// Apply a single `CssProperty` directly to the compact representation.
/// Called once per property per node — replaces the old 56+ getter approach.
#[inline]
// The scrollbar-* and counter-* arms have identical bodies
// (`if v.get_property().is_some() { flags |= … }`) but each variant wraps a
// DIFFERENT value type (StyleBackgroundContentValue, LayoutScrollbarWidthValue,
// StyleScrollbarColorValue, CounterResetValue, CounterIncrementValue, …), so an
// or-pattern binding `v` cannot be expressed across them.
#[allow(clippy::match_same_arms)]
// fixed-point encoders: z-index / line-height are range-checked before the
// narrowing cast, and opacity is clamped to [0,1] then scaled to [0,254] (u8).
#[allow(clippy::cast_possible_truncation, clippy::cast_sign_loss)]
#[allow(clippy::too_many_lines, clippy::cognitive_complexity)] // large but cohesive: single-purpose parser/builder/dispatch (one branch per input variant)
fn apply_css_property_to_compact(
    prop: &CssProperty,
    tier1: &mut u64,
    dims: &mut CompactNodeProps,
    cold: &mut CompactNodePropsCold,
    text: &mut CompactTextProps,
    font_hash_map: &mut alloc::collections::BTreeMap<
        u64,
        azul_css::props::basic::font::StyleFontFamilyVec,
    >,
) {
    macro_rules! set_tier1 {
        ($v:expr, $shift:expr, $mask:expr, $encoder:ident) => {
            if let Some(exact) = $v.get_property() {
                let encoded = u64::from($encoder(*exact));
                let shifted_mask = $mask << $shift;
                *tier1 = (*tier1 & !shifted_mask) | ((encoded & $mask) << $shift);
            }
        };
    }

    match prop {
        // Tier 1 enums
        CssProperty::Display(v) => set_tier1!(v, DISPLAY_SHIFT, DISPLAY_MASK, layout_display_to_u8),
        CssProperty::Position(v) => {
            set_tier1!(v, POSITION_SHIFT, POSITION_MASK, layout_position_to_u8);
        }
        CssProperty::Float(v) => set_tier1!(v, FLOAT_SHIFT, FLOAT_MASK, layout_float_to_u8),
        CssProperty::OverflowX(v) => {
            set_tier1!(v, OVERFLOW_X_SHIFT, OVERFLOW_MASK, layout_overflow_to_u8);
        }
        CssProperty::OverflowY(v) => {
            set_tier1!(v, OVERFLOW_Y_SHIFT, OVERFLOW_MASK, layout_overflow_to_u8);
        }
        // +spec:overflow:17654b - overflow-block / overflow-inline resolve to
        // the physical axis through the writing mode. Application is in
        // declaration order (a later physical declaration overwrites the
        // same tier1 slot and vice versa), which is exactly CSS's
        // equal-specificity last-wins rule for logical/physical pairs. The
        // writing mode is read from tier1 AT THIS POINT: the inherited value
        // is already present (inheritance runs first), so only the exotic
        // "writing-mode declared AFTER a logical overflow on the SAME node"
        // ordering maps against the pre-declaration mode.
        CssProperty::OverflowBlock(v) => {
            if let Some(val) = v.get_property() {
                let wm_bits = ((*tier1 >> WRITING_MODE_SHIFT) & WRITING_MODE_MASK) as u8;
                let vertical = wm_bits
                    == layout_writing_mode_to_u8(
                        azul_css::props::layout::wrapping::LayoutWritingMode::VerticalRl,
                    )
                    || wm_bits
                        == layout_writing_mode_to_u8(
                            azul_css::props::layout::wrapping::LayoutWritingMode::VerticalLr,
                        );
                let shift = if vertical {
                    OVERFLOW_X_SHIFT
                } else {
                    OVERFLOW_Y_SHIFT
                };
                let enc = u64::from(layout_overflow_to_u8(*val));
                *tier1 = (*tier1 & !(OVERFLOW_MASK << shift)) | ((enc & OVERFLOW_MASK) << shift);
            }
        }
        CssProperty::OverflowInline(v) => {
            if let Some(val) = v.get_property() {
                let wm_bits = ((*tier1 >> WRITING_MODE_SHIFT) & WRITING_MODE_MASK) as u8;
                let vertical = wm_bits
                    == layout_writing_mode_to_u8(
                        azul_css::props::layout::wrapping::LayoutWritingMode::VerticalRl,
                    )
                    || wm_bits
                        == layout_writing_mode_to_u8(
                            azul_css::props::layout::wrapping::LayoutWritingMode::VerticalLr,
                        );
                let shift = if vertical {
                    OVERFLOW_Y_SHIFT
                } else {
                    OVERFLOW_X_SHIFT
                };
                let enc = u64::from(layout_overflow_to_u8(*val));
                *tier1 = (*tier1 & !(OVERFLOW_MASK << shift)) | ((enc & OVERFLOW_MASK) << shift);
            }
        }
        CssProperty::BoxSizing(v) => set_tier1!(
            v,
            BOX_SIZING_SHIFT,
            BOX_SIZING_MASK,
            layout_box_sizing_to_u8
        ),
        CssProperty::FlexDirection(v) => set_tier1!(
            v,
            FLEX_DIRECTION_SHIFT,
            FLEX_DIR_MASK,
            layout_flex_direction_to_u8
        ),
        CssProperty::FlexWrap(v) => {
            set_tier1!(v, FLEX_WRAP_SHIFT, FLEX_WRAP_MASK, layout_flex_wrap_to_u8);
        }
        CssProperty::JustifyContent(v) => set_tier1!(
            v,
            JUSTIFY_CONTENT_SHIFT,
            JUSTIFY_MASK,
            layout_justify_content_to_u8
        ),
        CssProperty::AlignItems(v) => {
            set_tier1!(v, ALIGN_ITEMS_SHIFT, ALIGN_MASK, layout_align_items_to_u8);
        }
        CssProperty::AlignContent(v) => set_tier1!(
            v,
            ALIGN_CONTENT_SHIFT,
            ALIGN_MASK,
            layout_align_content_to_u8
        ),
        CssProperty::WritingMode(v) => set_tier1!(
            v,
            WRITING_MODE_SHIFT,
            WRITING_MODE_MASK,
            layout_writing_mode_to_u8
        ),
        CssProperty::Clear(v) => set_tier1!(v, CLEAR_SHIFT, CLEAR_MASK, layout_clear_to_u8),
        CssProperty::FontWeight(v) => set_tier1!(
            v,
            FONT_WEIGHT_SHIFT,
            FONT_WEIGHT_MASK,
            style_font_weight_to_u8
        ),
        CssProperty::FontStyle(v) => {
            set_tier1!(v, FONT_STYLE_SHIFT, FONT_STYLE_MASK, style_font_style_to_u8);
        }
        CssProperty::TextAlign(v) => {
            set_tier1!(v, TEXT_ALIGN_SHIFT, TEXT_ALIGN_MASK, style_text_align_to_u8);
        }
        CssProperty::Visibility(v) => {
            set_tier1!(v, VISIBILITY_SHIFT, VISIBILITY_MASK, style_visibility_to_u8);
        }
        CssProperty::WhiteSpace(v) => set_tier1!(
            v,
            WHITE_SPACE_SHIFT,
            WHITE_SPACE_MASK,
            style_white_space_to_u8
        ),
        CssProperty::Direction(v) => {
            set_tier1!(v, DIRECTION_SHIFT, DIRECTION_MASK, style_direction_to_u8);
        }
        CssProperty::VerticalAlign(v) => set_tier1!(
            v,
            VERTICAL_ALIGN_SHIFT,
            VERTICAL_ALIGN_MASK,
            style_vertical_align_to_u8
        ),
        // `cursor` is INHERITABLE and is resolved on every mouse move to pick
        // the pointer shape, so it wants a flat per-node read. It is NOT in
        // the tier-1 word: that word is full, and the bit range it was given
        // belonged to `align-self`, so writing a cursor re-aligned the node.
        CssProperty::Cursor(v) => {
            if let Some(exact) = v.get_property() {
                cold.cursor = cursor_to_u8(*exact);
            }
        }
        CssProperty::BorderCollapse(v) => set_tier1!(
            v,
            BORDER_COLLAPSE_SHIFT,
            BORDER_COLLAPSE_MASK,
            border_collapse_to_u8
        ),
        CssProperty::AlignSelf(v) => set_tier1!(
            v,
            ALIGN_SELF_SHIFT,
            ALIGN_SELF_MASK,
            layout_align_self_to_u8
        ),
        CssProperty::JustifySelf(v) => set_tier1!(
            v,
            JUSTIFY_SELF_SHIFT,
            JUSTIFY_SELF_MASK,
            layout_justify_self_to_u8
        ),
        CssProperty::GridAutoFlow(v) => set_tier1!(
            v,
            GRID_AUTO_FLOW_SHIFT,
            GRID_AUTO_FLOW_MASK,
            layout_grid_auto_flow_to_u8
        ),
        CssProperty::JustifyItems(v) => set_tier1!(
            v,
            JUSTIFY_ITEMS_SHIFT,
            JUSTIFY_ITEMS_MASK,
            layout_justify_items_to_u8
        ),

        // Tier 2 dimensions
        CssProperty::Width(v) => {
            dims.width = encode_layout_width(v);
        }
        CssProperty::Height(v) => {
            dims.height = encode_layout_height(v);
        }
        CssProperty::MinWidth(v) => {
            dims.min_width = encode_pixel_prop(v);
        }
        CssProperty::MaxWidth(v) => {
            dims.max_width = encode_pixel_prop(v);
        }
        CssProperty::MinHeight(v) => {
            dims.min_height = encode_pixel_prop(v);
        }
        CssProperty::MaxHeight(v) => {
            dims.max_height = encode_pixel_prop(v);
        }
        CssProperty::FlexBasis(v) => {
            dims.flex_basis = encode_flex_basis(v);
        }
        CssProperty::FontSize(v) => {
            dims.font_size = encode_pixel_prop(v);
        }
        CssProperty::PaddingTop(v) => {
            dims.padding_top = encode_css_pixel_as_i16(v);
        }
        CssProperty::PaddingRight(v) => {
            dims.padding_right = encode_css_pixel_as_i16(v);
        }
        CssProperty::PaddingBottom(v) => {
            dims.padding_bottom = encode_css_pixel_as_i16(v);
        }
        CssProperty::PaddingLeft(v) => {
            dims.padding_left = encode_css_pixel_as_i16(v);
        }
        CssProperty::MarginTop(v) => {
            dims.margin_top = encode_margin_i16(v);
        }
        CssProperty::MarginRight(v) => {
            dims.margin_right = encode_margin_i16(v);
        }
        CssProperty::MarginBottom(v) => {
            dims.margin_bottom = encode_margin_i16(v);
        }
        CssProperty::MarginLeft(v) => {
            dims.margin_left = encode_margin_i16(v);
        }
        CssProperty::BorderTopWidth(v) => {
            dims.border_top_width = encode_css_pixel_as_i16(v);
        }
        CssProperty::BorderRightWidth(v) => {
            dims.border_right_width = encode_css_pixel_as_i16(v);
        }
        CssProperty::BorderBottomWidth(v) => {
            dims.border_bottom_width = encode_css_pixel_as_i16(v);
        }
        CssProperty::BorderLeftWidth(v) => {
            dims.border_left_width = encode_css_pixel_as_i16(v);
        }
        CssProperty::Top(v) => {
            dims.top = encode_css_pixel_as_i16(v);
        }
        CssProperty::Right(v) => {
            dims.right = encode_css_pixel_as_i16(v);
        }
        CssProperty::Bottom(v) => {
            dims.bottom = encode_css_pixel_as_i16(v);
        }
        CssProperty::Left(v) => {
            dims.left = encode_css_pixel_as_i16(v);
        }
        CssProperty::FlexGrow(v) => {
            if let Some(exact) = v.get_property() {
                dims.flex_grow = encode_flex_u16(exact.inner.get());
            }
        }
        CssProperty::FlexShrink(v) => {
            if let Some(exact) = v.get_property() {
                dims.flex_shrink = encode_flex_u16(exact.inner.get());
            }
        }

        CssProperty::RowGap(v) => {
            if let Some(g) = v.get_property() {
                if g.inner.metric == SizeMetric::Px {
                    dims.row_gap = encode_resolved_px_i16(g.inner.number.get());
                }
            }
        }
        CssProperty::ColumnGap(v) => {
            if let Some(g) = v.get_property() {
                if g.inner.metric == SizeMetric::Px {
                    dims.column_gap = encode_resolved_px_i16(g.inner.number.get());
                }
            }
        }
        CssProperty::Gap(v) => {
            if let Some(g) = v.get_property() {
                if g.inner.metric == SizeMetric::Px {
                    let enc = encode_resolved_px_i16(g.inner.number.get());
                    dims.row_gap = enc;
                    dims.column_gap = enc;
                }
            }
        }

        // Grid placement (compact encoding for common Auto/Line cases)
        CssProperty::GridColumn(v) => {
            if let Some(gp) = v.get_property() {
                cold.grid_col_start = encode_grid_line(&gp.grid_start);
                cold.grid_col_end = encode_grid_line(&gp.grid_end);
            }
        }
        CssProperty::GridRow(v) => {
            if let Some(gp) = v.get_property() {
                cold.grid_row_start = encode_grid_line(&gp.grid_start);
                cold.grid_row_end = encode_grid_line(&gp.grid_end);
            }
        }

        // Tier 2 cold
        CssProperty::ZIndex(v) => {
            if let Some(exact) = v.get_property() {
                match exact {
                    LayoutZIndex::Auto => cold.z_index = I16_AUTO,
                    LayoutZIndex::Integer(z) => {
                        // Two-sided (see the tier2_cold path above): a large negative z
                        // used to wrap positive via `*z as i16`. Escape both ends.
                        cold.z_index = if *z >= -32768 && *z < i32::from(I16_SENTINEL_THRESHOLD) {
                            *z as i16
                        } else {
                            I16_SENTINEL
                        };
                    }
                }
            }
        }
        CssProperty::BorderTopStyle(v) => {
            if let Some(exact) = v.get_property() {
                let bs = u16::from(border_style_to_u8(exact.inner));
                cold.border_styles_packed = (cold.border_styles_packed & !0x000F) | bs;
            }
        }
        CssProperty::BorderRightStyle(v) => {
            if let Some(exact) = v.get_property() {
                let bs = u16::from(border_style_to_u8(exact.inner));
                cold.border_styles_packed = (cold.border_styles_packed & !0x00F0) | (bs << 4);
            }
        }
        CssProperty::BorderBottomStyle(v) => {
            if let Some(exact) = v.get_property() {
                let bs = u16::from(border_style_to_u8(exact.inner));
                cold.border_styles_packed = (cold.border_styles_packed & !0x0F00) | (bs << 8);
            }
        }
        CssProperty::BorderLeftStyle(v) => {
            if let Some(exact) = v.get_property() {
                let bs = u16::from(border_style_to_u8(exact.inner));
                cold.border_styles_packed = (cold.border_styles_packed & !0xF000) | (bs << 12);
            }
        }
        CssProperty::BorderTopColor(v) => {
            if let Some(c) = v.get_property() {
                cold.border_top_color = encode_color_u32(&c.inner);
            }
        }
        CssProperty::BorderRightColor(v) => {
            if let Some(c) = v.get_property() {
                cold.border_right_color = encode_color_u32(&c.inner);
            }
        }
        CssProperty::BorderBottomColor(v) => {
            if let Some(c) = v.get_property() {
                cold.border_bottom_color = encode_color_u32(&c.inner);
            }
        }
        CssProperty::BorderLeftColor(v) => {
            if let Some(c) = v.get_property() {
                cold.border_left_color = encode_color_u32(&c.inner);
            }
        }
        CssProperty::BorderSpacing(v) => {
            if let Some(spacing) = v.get_property() {
                if spacing.horizontal.metric == SizeMetric::Px {
                    cold.border_spacing_h = encode_resolved_px_i16(spacing.horizontal.number.get());
                }
                if spacing.vertical.metric == SizeMetric::Px {
                    cold.border_spacing_v = encode_resolved_px_i16(spacing.vertical.number.get());
                }
            }
        }
        CssProperty::TabSize(v) => {
            cold.tab_size = encode_css_pixel_as_i16(v);
        }

        // Tier 2b text
        CssProperty::TextColor(v) => {
            if let Some(color) = v.get_property() {
                let c = &color.inner;
                text.text_color = (u32::from(c.r) << 24)
                    | (u32::from(c.g) << 16)
                    | (u32::from(c.b) << 8)
                    | u32::from(c.a);
            }
        }
        CssProperty::FontFamily(v) => {
            if let Some(families) = v.get_property() {
                let mut hasher = DefaultHasher::new();
                families.hash(&mut hasher);
                let h = hasher.finish();
                let h = if h == 0 { 1 } else { h };
                text.font_family_hash = h;
                font_hash_map.insert(h, families.clone());
            }
        }
        CssProperty::LineHeight(v) => {
            if let Some(lh) = v.get_property() {
                // Split scale by SIGN (see the builder's line-height pre-pass
                // and compact_cache.rs field doc): negative normalized =
                // absolute px, stored as -px x 10; positive = multiple,
                // stored x 1000. A single x1000 scale overflowed i16 for any
                // absolute line-height above 32.76px and silently became
                // "normal" via the sentinel.
                let n = lh.inner.normalized();
                let stored = if n < 0.0 {
                    ((n * 10.0).round() as i32).max(-32768)
                } else {
                    (n * 1000.0).round() as i32
                };
                if stored >= -32768 && stored < i32::from(I16_SENTINEL_THRESHOLD) {
                    text.line_height = stored as i16;
                } else {
                    text.line_height = I16_SENTINEL;
                }
            }
        }
        CssProperty::LetterSpacing(v) => {
            text.letter_spacing = encode_css_pixel_as_i16(v);
        }
        CssProperty::WordSpacing(v) => {
            text.word_spacing = encode_css_pixel_as_i16(v);
        }
        CssProperty::TextIndent(v) => {
            text.text_indent = encode_css_pixel_as_i16(v);
        }

        // Border radii (cold): encode px × 10 into i16; sentinel stays = unset/0
        CssProperty::BorderTopLeftRadius(v) => {
            if let Some(exact) = v.get_property() {
                if exact.inner.metric == SizeMetric::Px {
                    cold.border_top_left_radius = encode_resolved_px_i16(exact.inner.number.get());
                }
            }
        }
        CssProperty::BorderTopRightRadius(v) => {
            if let Some(exact) = v.get_property() {
                if exact.inner.metric == SizeMetric::Px {
                    cold.border_top_right_radius = encode_resolved_px_i16(exact.inner.number.get());
                }
            }
        }
        CssProperty::BorderBottomLeftRadius(v) => {
            if let Some(exact) = v.get_property() {
                if exact.inner.metric == SizeMetric::Px {
                    cold.border_bottom_left_radius =
                        encode_resolved_px_i16(exact.inner.number.get());
                }
            }
        }
        CssProperty::BorderBottomRightRadius(v) => {
            if let Some(exact) = v.get_property() {
                if exact.inner.metric == SizeMetric::Px {
                    cold.border_bottom_right_radius =
                        encode_resolved_px_i16(exact.inner.number.get());
                }
            }
        }

        // Opacity: encode as 0-254, 255 = sentinel (unset/default = 1.0)
        CssProperty::Opacity(v) => {
            if let Some(exact) = v.get_property() {
                let o = exact.inner.normalized().clamp(0.0, 1.0);
                let byte = (o * 254.0).round() as u8;
                // byte is in [0, 254], never collides with OPACITY_SENTINEL=255
                cold.opacity = byte;
            }
        }

        // has-flags: set bit whenever property is set (regardless of value).
        // Getter uses this as a fast "is the default" bail-out.
        CssProperty::Transform(v) => {
            if v.get_property().is_some() {
                cold.hot_flags |= HOT_FLAG_HAS_TRANSFORM;
            }
        }
        CssProperty::TransformOrigin(v) => {
            if v.get_property().is_some() {
                cold.hot_flags |= HOT_FLAG_HAS_TRANSFORM_ORIGIN;
            }
        }
        // All four shadow sides wrap the same StyleBoxShadowValue and set the
        // single has-box-shadow bit.
        CssProperty::BoxShadowTop(v)
        | CssProperty::BoxShadowBottom(v)
        | CssProperty::BoxShadowLeft(v)
        | CssProperty::BoxShadowRight(v) => {
            if v.get_property().is_some() {
                cold.hot_flags |= HOT_FLAG_HAS_BOX_SHADOW;
            }
        }
        CssProperty::TextDecoration(v) => {
            if v.get_property().is_some() {
                cold.hot_flags |= HOT_FLAG_HAS_TEXT_DECORATION;
            }
        }
        CssProperty::ScrollbarGutter(v) => {
            if let Some(exact) = v.get_property() {
                use azul_css::props::layout::overflow::StyleScrollbarGutter;
                let bits: u8 = match exact {
                    StyleScrollbarGutter::Auto => SCROLLBAR_GUTTER_AUTO,
                    StyleScrollbarGutter::Stable => SCROLLBAR_GUTTER_STABLE,
                    StyleScrollbarGutter::StableBothEdges => SCROLLBAR_GUTTER_BOTH_EDGES,
                };
                cold.hot_flags = (cold.hot_flags & !HOT_FLAG_SCROLLBAR_GUTTER_MASK)
                    | ((bits << HOT_FLAG_SCROLLBAR_GUTTER_SHIFT) & HOT_FLAG_SCROLLBAR_GUTTER_MASK);
            }
        }
        CssProperty::BackgroundContent(v) => {
            if v.get_property().is_some() {
                cold.hot_flags |= HOT_FLAG_HAS_BACKGROUND;
            }
        }
        CssProperty::ClipPath(v) => {
            if v.get_property().is_some() {
                cold.hot_flags |= HOT_FLAG_HAS_CLIP_PATH;
            }
        }

        // Any scrollbar customisation sets the single `has_any_scrollbar_css`
        // bit. When unset, get_scrollbar_style can bail to UA defaults without
        // doing 8 cascade walks.
        CssProperty::ScrollbarTrack(v) => {
            if v.get_property().is_some() {
                cold.extra_flags |= EXTRA_FLAG_HAS_SCROLLBAR_CSS;
            }
        }
        CssProperty::ScrollbarThumb(v) => {
            if v.get_property().is_some() {
                cold.extra_flags |= EXTRA_FLAG_HAS_SCROLLBAR_CSS;
            }
        }
        CssProperty::ScrollbarButton(v) => {
            if v.get_property().is_some() {
                cold.extra_flags |= EXTRA_FLAG_HAS_SCROLLBAR_CSS;
            }
        }
        CssProperty::ScrollbarCorner(v) => {
            if v.get_property().is_some() {
                cold.extra_flags |= EXTRA_FLAG_HAS_SCROLLBAR_CSS;
            }
        }
        CssProperty::ScrollbarWidth(v) => {
            if v.get_property().is_some() {
                cold.extra_flags |= EXTRA_FLAG_HAS_SCROLLBAR_CSS;
            }
        }
        CssProperty::ScrollbarColor(v) => {
            if v.get_property().is_some() {
                cold.extra_flags |= EXTRA_FLAG_HAS_SCROLLBAR_CSS;
            }
        }
        CssProperty::ScrollbarVisibility(v) => {
            if v.get_property().is_some() {
                cold.extra_flags |= EXTRA_FLAG_HAS_SCROLLBAR_CSS;
            }
        }
        CssProperty::ScrollbarFadeDelay(v) => {
            if v.get_property().is_some() {
                cold.extra_flags |= EXTRA_FLAG_HAS_SCROLLBAR_CSS;
            }
        }
        CssProperty::ScrollbarFadeDuration(v) => {
            if v.get_property().is_some() {
                cold.extra_flags |= EXTRA_FLAG_HAS_SCROLLBAR_CSS;
            }
        }

        // Rare paint/layout props with dedicated fast-path bits.
        CssProperty::CounterReset(v) => {
            if v.get_property().is_some() {
                cold.extra_flags |= EXTRA_FLAG_HAS_COUNTER;
            }
        }
        CssProperty::CounterIncrement(v) => {
            if v.get_property().is_some() {
                cold.extra_flags |= EXTRA_FLAG_HAS_COUNTER;
            }
        }
        // Both break-before/after wrap PageBreakValue and set the has-break bit.
        CssProperty::BreakBefore(v) | CssProperty::BreakAfter(v) => {
            if v.get_property().is_some() {
                cold.extra_flags |= EXTRA_FLAG_HAS_BREAK;
            }
        }
        CssProperty::TextOrientation(v) => {
            if v.get_property().is_some() {
                cold.extra_flags |= EXTRA_FLAG_HAS_TEXT_ORIENTATION;
            }
        }
        CssProperty::TextShadow(v) => {
            if v.get_property().is_some() {
                cold.extra_flags |= EXTRA_FLAG_HAS_TEXT_SHADOW;
            }
        }
        CssProperty::BackdropFilter(v) => {
            if v.get_property().is_some() {
                cold.extra_flags |= EXTRA_FLAG_HAS_BACKDROP_FILTER;
            }
        }
        CssProperty::Filter(v) => {
            if v.get_property().is_some() {
                cold.extra_flags |= EXTRA_FLAG_HAS_FILTER;
            }
        }
        CssProperty::MixBlendMode(v) => {
            if v.get_property().is_some() {
                cold.extra_flags |= EXTRA_FLAG_HAS_MIX_BLEND_MODE;
            }
        }

        // Non-compact properties (background, etc.) — handled by get_property_slow fallback
        _ => {}
    }
}

/// OR the DOM-level declared-flag for rarely-set text properties. Called once
/// per property per node so that when a flag bit is clear, callers
/// (e.g. `translate_to_text3_constraints`) can skip the cascade walk and use
/// the default value — the slow walk would never find a declaration anyway.
#[allow(clippy::too_many_lines)] // large but cohesive: one arm per declared-flag property
const fn update_dom_declared_flags(prop: &CssProperty, flags: &mut u32) {
    // Only mark if the property value is actually "set" (not Auto/Initial/etc.).
    // Using `get_property().is_some()` mirrors the pattern used elsewhere in
    // this builder for has-X bits.
    match prop {
        CssProperty::ShapeInside(v) => {
            if v.get_property().is_some() {
                *flags |= DOM_HAS_SHAPE_INSIDE;
            }
        }
        CssProperty::ShapeOutside(v) => {
            if v.get_property().is_some() {
                *flags |= DOM_HAS_SHAPE_OUTSIDE;
            }
        }
        CssProperty::TextJustify(v) => {
            if v.get_property().is_some() {
                *flags |= DOM_HAS_TEXT_JUSTIFY;
            }
        }
        CssProperty::TextIndent(v) => {
            if v.get_property().is_some() {
                *flags |= DOM_HAS_TEXT_INDENT;
            }
        }
        CssProperty::ColumnCount(v) => {
            if v.get_property().is_some() {
                *flags |= DOM_HAS_COLUMN_COUNT;
            }
        }
        CssProperty::ColumnGap(v) => {
            if v.get_property().is_some() {
                *flags |= DOM_HAS_COLUMN_GAP;
            }
        }
        CssProperty::ColumnWidth(v) => {
            if v.get_property().is_some() {
                *flags |= DOM_HAS_COLUMN_WIDTH;
            }
        }
        CssProperty::InitialLetter(v) => {
            if v.get_property().is_some() {
                *flags |= DOM_HAS_INITIAL_LETTER;
            }
        }
        CssProperty::InitialLetterAlign(v) => {
            if v.get_property().is_some() {
                *flags |= DOM_HAS_INITIAL_LETTER_ALIGN;
            }
        }
        CssProperty::LineClamp(v) => {
            if v.get_property().is_some() {
                *flags |= DOM_HAS_LINE_CLAMP;
            }
        }
        CssProperty::HangingPunctuation(v) => {
            if v.get_property().is_some() {
                *flags |= DOM_HAS_HANGING_PUNCTUATION;
            }
        }
        CssProperty::TextCombineUpright(v) => {
            if v.get_property().is_some() {
                *flags |= DOM_HAS_TEXT_COMBINE_UPRIGHT;
            }
        }
        CssProperty::ExclusionMargin(v) => {
            if v.get_property().is_some() {
                *flags |= DOM_HAS_EXCLUSION_MARGIN;
            }
        }
        CssProperty::ShapeMargin(v) => {
            if v.get_property().is_some() {
                *flags |= DOM_HAS_SHAPE_MARGIN;
            }
        }
        CssProperty::HyphenationLanguage(v) => {
            if v.get_property().is_some() {
                *flags |= DOM_HAS_HYPHENATION_LANGUAGE;
            }
        }
        CssProperty::UnicodeBidi(v) => {
            if v.get_property().is_some() {
                *flags |= DOM_HAS_UNICODE_BIDI;
            }
        }
        CssProperty::TextBoxTrim(v) => {
            if v.get_property().is_some() {
                *flags |= DOM_HAS_TEXT_BOX_TRIM;
            }
        }
        CssProperty::Hyphens(v) => {
            if v.get_property().is_some() {
                *flags |= DOM_HAS_HYPHENS;
            }
        }
        CssProperty::WordBreak(v) => {
            if v.get_property().is_some() {
                *flags |= DOM_HAS_WORD_BREAK;
            }
        }
        CssProperty::OverflowWrap(v) => {
            if v.get_property().is_some() {
                *flags |= DOM_HAS_OVERFLOW_WRAP;
            }
        }
        CssProperty::LineBreak(v) => {
            if v.get_property().is_some() {
                *flags |= DOM_HAS_LINE_BREAK;
            }
        }
        CssProperty::TextAlignLast(v) => {
            if v.get_property().is_some() {
                *flags |= DOM_HAS_TEXT_ALIGN_LAST;
            }
        }
        CssProperty::LineHeight(v) => {
            if v.get_property().is_some() {
                *flags |= DOM_HAS_LINE_HEIGHT;
            }
        }
        _ => {}
    }
}

// =============================================================================
// Helper encoders for dimension properties
// =============================================================================

/// Encode a `GridLine` into i16: `Auto=I16_AUTO`, Line(n)=n, Span(n)=-(n).
/// Named lines fall back to `I16_SENTINEL` (not compact-encodable).
// const fn: the `n as i16` casts are guarded by explicit +/-32000 range checks.
#[allow(clippy::cast_possible_truncation)]
const fn encode_grid_line(line: &azul_css::props::layout::grid::GridLine) -> i16 {
    use azul_css::props::layout::grid::GridLine;
    match line {
        GridLine::Auto => I16_AUTO,
        GridLine::Line(n) => {
            if *n >= -32000 && *n <= 32000 {
                *n as i16
            } else {
                I16_SENTINEL
            }
        }
        GridLine::Span(n) => {
            if *n >= 1 && *n <= 32000 {
                -(*n as i16)
            } else {
                I16_SENTINEL
            }
        }
        GridLine::Named(_) => I16_SENTINEL,
    }
}

/// Encode a `CssPropertyValue`<LayoutWidth> into u32 compact form.
fn encode_layout_width<T: LayoutWidthLike>(val: &CssPropertyValue<T>) -> u32 {
    match val {
        CssPropertyValue::Exact(w) => w.encode_compact_u32(),
        CssPropertyValue::Auto => U32_AUTO,
        CssPropertyValue::Initial => U32_INITIAL,
        CssPropertyValue::Inherit => U32_INHERIT,
        CssPropertyValue::None => U32_NONE,
        _ => U32_SENTINEL,
    }
}

/// Encode a `CssPropertyValue`<LayoutHeight> into u32 compact form.
fn encode_layout_height<T: LayoutWidthLike>(val: &CssPropertyValue<T>) -> u32 {
    encode_layout_width(val)
}

/// Trait for types that can be encoded as compact u32 dimension values.
/// Implemented for `LayoutWidth`, `LayoutHeight` (which are Auto|Px|MinContent|MaxContent|Calc enums).
trait LayoutWidthLike {
    fn encode_compact_u32(&self) -> u32;
}

impl LayoutWidthLike for LayoutWidth {
    fn encode_compact_u32(&self) -> u32 {
        match self {
            Self::Auto => U32_AUTO,
            Self::Px(pv) => encode_pixel_value_u32(pv),
            Self::MinContent => U32_MIN_CONTENT,
            Self::MaxContent => U32_MAX_CONTENT,
            // FitContent/Calc are not compact-encodable → overflow to tier 3.
            Self::FitContent(_) | Self::Calc(_) => U32_SENTINEL,
        }
    }
}

impl LayoutWidthLike for LayoutHeight {
    fn encode_compact_u32(&self) -> u32 {
        match self {
            Self::Auto => U32_AUTO,
            Self::Px(pv) => encode_pixel_value_u32(pv),
            Self::MinContent => U32_MIN_CONTENT,
            Self::MaxContent => U32_MAX_CONTENT,
            // FitContent/Calc are not compact-encodable → overflow to tier 3.
            Self::FitContent(_) | Self::Calc(_) => U32_SENTINEL,
        }
    }
}

/// Encode a `CssPropertyValue` wrapping a simple `PixelValue` struct (`LayoutMinWidth`, etc.)
fn encode_pixel_prop<T: HasInnerPixelValue>(val: &CssPropertyValue<T>) -> u32 {
    match val {
        CssPropertyValue::Exact(inner) => encode_pixel_value_u32(&inner.get_inner_pixel()),
        CssPropertyValue::Auto => U32_AUTO,
        CssPropertyValue::Initial => U32_INITIAL,
        CssPropertyValue::Inherit => U32_INHERIT,
        CssPropertyValue::None => U32_NONE,
        _ => U32_SENTINEL,
    }
}

/// Trait for dimension structs wrapping `inner: PixelValue`.
trait HasInnerPixelValue {
    fn get_inner_pixel(&self) -> azul_css::props::basic::pixel::PixelValue;
}

macro_rules! impl_has_inner_pixel {
    ($($ty:ty),*) => {
        $(
            impl HasInnerPixelValue for $ty {
                fn get_inner_pixel(&self) -> azul_css::props::basic::pixel::PixelValue {
                    self.inner
                }
            }
        )*
    };
}

impl_has_inner_pixel!(
    azul_css::props::layout::dimensions::LayoutMinWidth,
    azul_css::props::layout::dimensions::LayoutMaxWidth,
    azul_css::props::layout::dimensions::LayoutMinHeight,
    azul_css::props::layout::dimensions::LayoutMaxHeight,
    azul_css::props::basic::font::StyleFontSize,
    azul_css::props::layout::spacing::LayoutPaddingTop,
    azul_css::props::layout::spacing::LayoutPaddingRight,
    azul_css::props::layout::spacing::LayoutPaddingBottom,
    azul_css::props::layout::spacing::LayoutPaddingLeft,
    azul_css::props::layout::spacing::LayoutMarginTop,
    azul_css::props::layout::spacing::LayoutMarginRight,
    azul_css::props::layout::spacing::LayoutMarginBottom,
    azul_css::props::layout::spacing::LayoutMarginLeft,
    azul_css::props::style::border::LayoutBorderTopWidth,
    azul_css::props::style::border::LayoutBorderRightWidth,
    azul_css::props::style::border::LayoutBorderBottomWidth,
    azul_css::props::style::border::LayoutBorderLeftWidth,
    azul_css::props::layout::position::LayoutTop,
    azul_css::props::layout::position::LayoutRight,
    azul_css::props::layout::position::LayoutInsetBottom,
    azul_css::props::layout::position::LayoutLeft,
    azul_css::props::style::text::StyleLetterSpacing,
    azul_css::props::style::text::StyleWordSpacing,
    azul_css::props::style::text::StyleTextIndent,
    azul_css::props::style::text::StyleTabSize
);

/// Encode a `CssPropertyValue`<T> where T wraps a `PixelValue`, as i16 (×10 resolved px).
/// Delegates to the canonical `azul_css::compact_cache::encode_css_pixel_as_i16`.
fn encode_css_pixel_as_i16<T: HasInnerPixelValue>(val: &CssPropertyValue<T>) -> i16 {
    let mapped = match val {
        CssPropertyValue::Exact(inner) => CssPropertyValue::Exact(inner.get_inner_pixel()),
        CssPropertyValue::Auto => CssPropertyValue::Auto,
        CssPropertyValue::Initial => CssPropertyValue::Initial,
        CssPropertyValue::Inherit => CssPropertyValue::Inherit,
        CssPropertyValue::None => CssPropertyValue::None,
        _ => return I16_SENTINEL,
    };
    azul_css::compact_cache::encode_css_pixel_as_i16(&mapped)
}

/// Encode margin: same as `encode_css_pixel_as_i16` but Auto is a distinct value.
fn encode_margin_i16<T: HasInnerPixelValue>(val: &CssPropertyValue<T>) -> i16 {
    encode_css_pixel_as_i16(val)
}

/// Encode `CssPropertyValue`<LayoutFlexBasis> — `LayoutFlexBasis` is Auto | Exact(PixelValue).
fn encode_flex_basis(val: &CssPropertyValue<LayoutFlexBasis>) -> u32 {
    match val {
        CssPropertyValue::Exact(fb) => match fb {
            LayoutFlexBasis::Auto => U32_AUTO,
            LayoutFlexBasis::Exact(pv) => encode_pixel_value_u32(pv),
        },
        CssPropertyValue::Auto => U32_AUTO,
        CssPropertyValue::Initial => U32_INITIAL,
        CssPropertyValue::Inherit => U32_INHERIT,
        CssPropertyValue::None => U32_NONE,
        _ => U32_SENTINEL,
    }
}

#[cfg(test)]
#[path = "compact_test.rs"]
mod compact_test;