blitz_dom/

resolved_style.rs

//! Computation of *resolved* CSS property values, as exposed to JavaScript by
//! `getComputedStyle()`.
//!
//! For most properties the resolved value is the stylo computed value. For
//! layout-dependent properties (`width`/`height`, margins, padding, insets,
//! `transform-origin`, grid track sizes) it is the *used* value, computed from
//! the most recent layout.

use cssparser::Parser;
use selectors::matching::QuirksMode;
use style::computed_values::box_sizing::T as BoxSizing;
use style::computed_values::position::T as Position;
use style::parser::ParserContext;
use style::properties::declaration_block::{Importance, parse_style_attribute};
use style::properties::{
    ComputedValues, NonCustomPropertyId, PropertyDeclaration, PropertyDeclarationBlock,
    PropertyDeclarationId, PropertyId, ShorthandId, SourcePropertyDeclaration,
    parse_one_declaration_into,
};
use style::servo_arc::Arc as ServoArc;
use style::stylesheets::supports_rule::parse_condition_or_declaration;
use style::stylesheets::{CssRuleType, Origin, OriginSet, UrlExtraData};
use style::stylist::RegisterCustomPropertyResult;
use style::values::computed::length::CSSPixelLength;
use style::values::computed::{GridTemplateAreas, GridTemplateComponent, LengthPercentage};
use style::values::generics::position::{Inset as GenericInset, PreferredRatio};
use style::values::resolved;
use style::values::specified::box_::{DisplayInside, DisplayOutside};
use style_traits::{CssStringWriter, ParsingMode, ToCss};

use blitz_traits::node_id::NodeId;
use url::Url;

use crate::BaseDocument;
use crate::layout::replaced::is_replaced_element;
use crate::local_name;

/// Serialize a used length (in CSS pixels) the way stylo serializes computed lengths
fn format_px(px: f32) -> String {
    CSSPixelLength::new(px).to_css_string()
}

/// Resolve a computed inset value to CSS pixels against the given percentage
/// basis. Returns `None` for `auto` (and unsupported anchor functions).
fn resolve_inset<P>(val: &GenericInset<P, LengthPercentage>, basis: f32) -> Option<f32> {
    match val {
        GenericInset::LengthPercentage(lp) => Some(lp.resolve(CSSPixelLength::new(basis)).px()),
        _ => None,
    }
}

/// Serialize a transform matrix component rounded to 6 decimal places (as
/// browsers do when serializing resolved transform matrices)
fn format_matrix_component(v: f64) -> String {
    let rounded = (v * 1e6).round() / 1e6;
    // Avoid "-0"
    let rounded = if rounded == 0.0 { 0.0 } else { rounded };
    format!("{rounded}")
}

/// Serialize a used transform matrix the way `getComputedStyle()` does
/// (`matrix(...)` for 2D transforms, `matrix3d(...)` otherwise).
fn format_matrix(m: &euclid::default::Transform3D<f64>, is_3d: bool) -> String {
    let c = format_matrix_component;
    if is_3d {
        format!(
            "matrix3d({}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {})",
            c(m.m11),
            c(m.m12),
            c(m.m13),
            c(m.m14),
            c(m.m21),
            c(m.m22),
            c(m.m23),
            c(m.m24),
            c(m.m31),
            c(m.m32),
            c(m.m33),
            c(m.m34),
            c(m.m41),
            c(m.m42),
            c(m.m43),
            c(m.m44)
        )
    } else {
        format!(
            "matrix({}, {}, {}, {}, {}, {})",
            c(m.m11),
            c(m.m12),
            c(m.m21),
            c(m.m22),
            c(m.m41),
            c(m.m42)
        )
    }
}

/// Check whether `name` names a CSS property supported by the style engine.
/// Custom properties (`--*`) are not considered "supported" here, matching the
/// behaviour of the `in` operator on `CSSStyleDeclaration` objects in browsers.
pub fn css_property_is_supported(name: &str) -> bool {
    matches!(
        PropertyId::parse_enabled_for_all_content(name),
        Ok(property_id) if !matches!(property_id, PropertyId::Custom(_))
    )
}

/// Parse a CSS `transform` list into a 4x4 matrix, as required by the
/// `DOMMatrix(DOMString)` constructor and `DOMMatrix.setMatrixValue()`
/// (<https://drafts.fxtf.org/geometry/#parse-a-string-into-an-abstract-matrix>).
///
/// Returns the 16 matrix components in column-major order (`m11, m12, ...,
/// m44`) and whether the list contained only 2D transform functions.
/// Returns `None` if the string fails to parse as a transform list or uses
/// relative lengths (which cannot be resolved without a context).
pub fn parse_transform_matrix(value: &str) -> Option<([f64; 16], bool)> {
    use style::properties::longhands::transform;
    // Transform lists cannot contain URLs, so any base URL will do
    let url_data = UrlExtraData(ServoArc::new(Url::parse("about:blank").unwrap()));
    let context = ParserContext::new(
        Origin::Author,
        &url_data,
        Some(CssRuleType::Style),
        ParsingMode::DEFAULT,
        QuirksMode::NoQuirks,
        Default::default(),
        None,
        None,
        Default::default(),
    );
    let mut parser = Parser::new(value);
    let transform = parser
        .parse_entirely(|t| transform::parse(&context, t))
        .ok()?;
    let (m, is_3d) = transform.to_transform_3d_matrix_f64(None).ok()?;
    Some((
        [
            m.m11, m.m12, m.m13, m.m14, m.m21, m.m22, m.m23, m.m24, m.m31, m.m32, m.m33, m.m34,
            m.m41, m.m42, m.m43, m.m44,
        ],
        !is_3d,
    ))
}

/// The names of the properties exposed by the `CSSStyleDeclaration` returned
/// from `getComputedStyle()` (its indexed properties): every enabled longhand,
/// sorted alphabetically.
pub fn resolved_style_property_names() -> &'static [&'static str] {
    static NAMES: std::sync::OnceLock<Vec<&'static str>> = std::sync::OnceLock::new();
    NAMES.get_or_init(|| {
        let mut names: Vec<&'static str> = NonCustomPropertyId::iter()
            .filter_map(|id| id.as_longhand())
            .map(|longhand| longhand.name())
            .filter(|name| PropertyId::parse_enabled_for_all_content(name).is_ok())
            .collect();
        names.sort_unstable();
        names
    })
}

impl BaseDocument {
    /// Check whether `value` is a valid value for the CSS property `property`.
    /// Used by CSSOM APIs (`element.style.setProperty` and friends), which must
    /// ignore invalid declarations.
    pub fn css_declaration_is_valid(&self, property: &str, value: &str) -> bool {
        let Ok(property_id) = PropertyId::parse_enabled_for_all_content(property) else {
            return false;
        };
        let mut declarations = SourcePropertyDeclaration::default();
        parse_one_declaration_into(
            &mut declarations,
            property_id,
            value,
            Origin::Author,
            &self.url.url_extra_data(),
            None,
            ParsingMode::DEFAULT,
            QuirksMode::NoQuirks,
            CssRuleType::Style,
        )
        .is_ok()
    }

    /// Parse a `style` attribute string into a [`PropertyDeclarationBlock`].
    /// Invalid declarations are dropped (per CSS error recovery).
    fn parse_style_attr_block(&self, style_attr: &str) -> PropertyDeclarationBlock {
        parse_style_attribute(
            style_attr,
            &self.url.url_extra_data(),
            None,
            QuirksMode::NoQuirks,
            CssRuleType::Style,
        )
    }

    /// The canonical CSSOM serialization of a `style` attribute string
    /// (`CSSStyleDeclaration.cssText` getter).
    pub fn style_attr_serialize(&self, style_attr: &str) -> String {
        let block = self.parse_style_attr_block(style_attr);
        let mut css = CssStringWriter::new();
        let _ = block.to_css(&mut css);
        css
    }

    /// The canonical serialization of `property`'s value in a `style` attribute
    /// string (`CSSStyleDeclaration.getPropertyValue()`). Handles shorthands.
    /// Returns an empty string if the property is not set or not recognised.
    pub fn style_attr_get_property(&self, style_attr: &str, property: &str) -> String {
        let Ok(property_id) = PropertyId::parse_enabled_for_all_content(property) else {
            return String::new();
        };
        let block = self.parse_style_attr_block(style_attr);
        let mut css = CssStringWriter::new();
        let _ = block.property_value_to_css(&property_id, &mut css);
        css
    }

    /// Set `property` to `value` in a `style` attribute string
    /// (`CSSStyleDeclaration.setProperty()`), expanding shorthands.
    ///
    /// Returns the new (canonically serialized) style attribute, or `None` if
    /// the declaration was invalid (in which case the style is unchanged, per
    /// CSSOM). An empty `value` removes the property.
    pub fn style_attr_set_property(
        &self,
        style_attr: &str,
        property: &str,
        value: &str,
        important: bool,
    ) -> Option<String> {
        let property_id = PropertyId::parse_enabled_for_all_content(property).ok()?;
        let mut block = self.parse_style_attr_block(style_attr);

        if value.trim().is_empty() {
            if let Some(first_declaration) = block.first_declaration_to_remove(&property_id) {
                block.remove_property(&property_id, first_declaration);
            }
        } else {
            let mut source = SourcePropertyDeclaration::default();
            parse_one_declaration_into(
                &mut source,
                property_id,
                value,
                Origin::Author,
                &self.url.url_extra_data(),
                None,
                ParsingMode::DEFAULT,
                QuirksMode::NoQuirks,
                CssRuleType::Style,
            )
            .ok()?;
            let importance = if important {
                Importance::Important
            } else {
                Importance::Normal
            };
            block.extend(source.drain(), importance);
        }

        let mut css = CssStringWriter::new();
        let _ = block.to_css(&mut css);
        Some(css)
    }

    /// Remove `property` from a `style` attribute string
    /// (`CSSStyleDeclaration.removeProperty()`), removing all longhands if it
    /// is a shorthand.
    ///
    /// Returns the new (canonically serialized) style attribute and the removed
    /// property's previous serialized value.
    pub fn style_attr_remove_property(
        &self,
        style_attr: &str,
        property: &str,
    ) -> Option<(String, String)> {
        let property_id = PropertyId::parse_enabled_for_all_content(property).ok()?;
        let mut block = self.parse_style_attr_block(style_attr);

        let mut removed_value = CssStringWriter::new();
        let _ = block.property_value_to_css(&property_id, &mut removed_value);
        if let Some(first_declaration) = block.first_declaration_to_remove(&property_id) {
            block.remove_property(&property_id, first_declaration);
        }

        let mut css = CssStringWriter::new();
        let _ = block.to_css(&mut css);
        Some((css, removed_value))
    }

    /// Evaluate a `@supports` condition (e.g. `(display: grid)`,
    /// `selector(:hover)`) or a bare declaration (e.g. `display: grid`), as
    /// used by the CSSOM `CSS.supports(conditionText)` API. Returns `false`
    /// for unparseable conditions.
    pub fn css_supports_condition(&self, condition: &str) -> bool {
        let mut parser = Parser::new(condition);
        let Ok(condition) = parser.parse_entirely(parse_condition_or_declaration) else {
            return false;
        };

        let url_data = self.url.url_extra_data();
        let context = ParserContext::new(
            Origin::Author,
            &url_data,
            Some(CssRuleType::Style),
            ParsingMode::DEFAULT,
            QuirksMode::NoQuirks,
            Default::default(),
            None,
            None,
            Default::default(),
        );
        condition.eval(&context)
    }

    /// Register a custom property via script (`CSS.registerProperty()`).
    /// On success all styles are invalidated so that declarations of the
    /// property are re-parsed against the new registration.
    pub fn register_custom_property(
        &mut self,
        name: &str,
        syntax: &str,
        inherits: bool,
        initial_value: Option<&str>,
    ) -> RegisterCustomPropertyResult {
        let url_data = self.url.url_extra_data();
        let result =
            self.stylist
                .register_custom_property(&url_data, name, syntax, inherits, initial_value);
        if matches!(result, RegisterCustomPropertyResult::SuccessfullyRegistered) {
            self.stylist
                .force_stylesheet_origins_dirty(OriginSet::all());
        }
        result
    }

    /// Compute the resolved value of a CSS property for the given node, as exposed
    /// by `getComputedStyle()`. Returns an empty string for unknown properties and
    /// for nodes without styles.
    ///
    /// Layout-dependent properties (`width`/`height`, margins, padding, insets,
    /// `transform-origin`, `grid-template-rows`/`columns`) resolve to *used* values, so [`resolve`](Self::resolve) should be called
    /// before this method to ensure layout is up to date.
    pub fn resolved_style_value(&self, node_id: NodeId, property_name: &str) -> String {
        let Some(node) = self.get_node(node_id) else {
            return String::new();
        };
        // The computed style of an element that is not in the document is empty
        if !node.flags.is_in_document() {
            return String::new();
        }
        // Elements inside a `display: none` subtree are skipped by the style
        // traversal, so their style has to be computed on demand.
        let undisplayed_styles;
        let stored_styles = node.primary_styles();
        let styles: &ComputedValues = match &stored_styles {
            Some(styles) => styles,
            None => match self.resolve_undisplayed_style(node_id) {
                Some(styles) => {
                    undisplayed_styles = styles;
                    &undisplayed_styles
                }
                None => return String::new(),
            },
        };

        let display = styles.clone_display();
        // Non-atomic inline elements are laid out as style spans within their
        // inline root's text layout rather than as boxes of their own, so their
        // layout-dependent properties resolve to computed (not used) values.
        let is_non_atomic_inline = display.outside() == DisplayOutside::Inline
            && display.inside() == DisplayInside::Flow
            && !node.flags.is_inline_root()
            && node.element_data().is_none_or(|data| {
                let tag = &data.name.local;
                !(is_replaced_element(tag)
                    || *tag == local_name!("input")
                    || *tag == local_name!("textarea")
                    || *tag == local_name!("button"))
            });
        let generates_box =
            node.flags.is_in_document() && !display.is_none() && stored_styles.is_some();
        let has_layout_box = generates_box && !is_non_atomic_inline;

        let Ok(property_id) = PropertyId::parse_enabled_for_all_content(property_name) else {
            return String::new();
        };
        // Logical longhands resolve as the physical longhand they map to
        let property_name = match property_id.as_shorthand() {
            Err(PropertyDeclarationId::Longhand(longhand)) => {
                longhand.to_physical(styles.writing_mode).name()
            }
            _ => property_name,
        };

        // Used lengths are serialized unzoomed, like computed lengths
        let zoom = styles.effective_zoom.value();
        let format_used_px = |px: f32| format_px(px / zoom);

        // Layout-dependent "used value" special cases
        match property_name {
            // Shorthands of longhands that resolve to used values
            "margin" | "margin-block" | "margin-inline" | "padding" | "padding-block"
            | "padding-inline" | "inset" | "inset-block" | "inset-inline"
                if has_layout_box =>
            {
                if let Ok(shorthand) = property_id.as_shorthand() {
                    let sides: Vec<String> = shorthand
                        .longhands()
                        .map(|longhand| self.resolved_style_value(node_id, longhand.name()))
                        .collect();
                    return serialize_sides(&sides);
                }
            }
            "grid-template-columns" | "grid-template-rows"
                if display.inside() == DisplayInside::Grid =>
            {
                if let Some(info) =
                    node.element_data()
                        .and_then(|data| match &data.detailed_layout_info {
                            taffy::DetailedLayoutInfo::Grid(info) => Some(info),
                            _ => None,
                        })
                {
                    return if property_name == "grid-template-columns" {
                        info.grid_template_columns(zoom)
                    } else {
                        info.grid_template_rows(zoom)
                    };
                }
            }
            // Browsers serialize the `grid-template` shorthand from the computed
            // track lists, except that a `none` track list on a grid container
            // is replaced by the used (implicit) track sizes.
            "grid-template" if display.inside() == DisplayInside::Grid => {
                let pos_styles = styles.get_position();
                let rows_are_none =
                    matches!(pos_styles.grid_template_rows, GridTemplateComponent::None);
                let columns_are_none = matches!(
                    pos_styles.grid_template_columns,
                    GridTemplateComponent::None
                );
                let info = node
                    .element_data()
                    .and_then(|data| match &data.detailed_layout_info {
                        taffy::DetailedLayoutInfo::Grid(info) => Some(info),
                        _ => None,
                    });
                if let Some(info) = info
                    && (rows_are_none || columns_are_none)
                    && matches!(pos_styles.grid_template_areas, GridTemplateAreas::None)
                {
                    let rows = if rows_are_none {
                        info.grid_template_rows(zoom)
                    } else {
                        pos_styles.grid_template_rows.to_css_string()
                    };
                    let columns = if columns_are_none {
                        info.grid_template_columns(zoom)
                    } else {
                        pos_styles.grid_template_columns.to_css_string()
                    };
                    return format!("{rows} / {columns}");
                }
            }
            "width" | "height" if has_layout_box => {
                // Used value: the layout size interpreted according to `box-sizing`
                // (border-box size for `border-box`, content-box size for `content-box`)
                let layout = node.final_layout();
                let border_box = styles.get_position().box_sizing == BoxSizing::BorderBox;
                let size = if property_name == "width" {
                    if border_box {
                        layout.size.width
                    } else {
                        layout.size.width
                            - layout.border.left
                            - layout.border.right
                            - layout.padding.left
                            - layout.padding.right
                    }
                } else if border_box {
                    layout.size.height
                } else {
                    layout.size.height
                        - layout.border.top
                        - layout.border.bottom
                        - layout.padding.top
                        - layout.padding.bottom
                };
                return format_used_px(size.max(0.0));
            }
            "margin-top" | "margin-right" | "margin-bottom" | "margin-left" if has_layout_box => {
                // Used value: the margin resolved by layout (percentages and
                // `auto` margins resolved to lengths)
                let layout = node.final_layout();
                let margin = match property_name {
                    "margin-top" => layout.margin.top,
                    "margin-right" => layout.margin.right,
                    "margin-bottom" => layout.margin.bottom,
                    "margin-left" => layout.margin.left,
                    _ => unreachable!(),
                };
                return format_used_px(margin);
            }
            "padding-top" | "padding-right" | "padding-bottom" | "padding-left"
                if has_layout_box =>
            {
                // Used value: the padding resolved by layout (percentages
                // resolved to lengths)
                let layout = self.physical_unrounded_geometry(node_id).1;
                let padding = match property_name {
                    "padding-top" => layout.padding.top,
                    "padding-right" => layout.padding.right,
                    "padding-bottom" => layout.padding.bottom,
                    "padding-left" => layout.padding.left,
                    _ => unreachable!(),
                };
                return format_used_px(padding);
            }
            "transform-origin" | "perspective-origin" if has_layout_box => {
                // Used value: percentages resolved against the border box
                let layout = self.physical_unrounded_geometry(node_id).1;
                let resolve = |value: &LengthPercentage, basis: f32| {
                    format_used_px(value.resolve(CSSPixelLength::new(basis)).px())
                };
                let box_styles = styles.get_box();
                return if property_name == "transform-origin" {
                    let origin = &box_styles.transform_origin;
                    let x = resolve(&origin.horizontal, layout.size.width);
                    let y = resolve(&origin.vertical, layout.size.height);
                    if origin.depth.px() == 0.0 {
                        format!("{x} {y}")
                    } else {
                        format!("{x} {y} {}", format_used_px(origin.depth.px()))
                    }
                } else {
                    let origin = &box_styles.perspective_origin;
                    let x = resolve(&origin.horizontal, layout.size.width);
                    let y = resolve(&origin.vertical, layout.size.height);
                    format!("{x} {y}")
                };
            }
            "top" | "right" | "bottom" | "left" if has_layout_box => {
                let position = styles.clone_position();
                let parent_layout = node
                    .containing_block()
                    .and_then(|id| self.get_node(id))
                    .map(|parent| *parent.final_layout());

                match position {
                    // Used value: the relative offset. An `auto` side resolves
                    // to the negation of the opposite side. When both sides
                    // are set the axis is overconstrained and each side
                    // resolves to its computed value instead.
                    Position::Relative => {
                        let (cb_width, cb_height) = parent_layout
                            .map(|pl| {
                                (
                                    pl.size.width
                                        - pl.border.left
                                        - pl.border.right
                                        - pl.padding.left
                                        - pl.padding.right,
                                    pl.size.height
                                        - pl.border.top
                                        - pl.border.bottom
                                        - pl.padding.top
                                        - pl.padding.bottom,
                                )
                            })
                            .unwrap_or((0.0, 0.0));
                        let pos_styles = styles.get_position();
                        let is_vertical = matches!(property_name, "top" | "bottom");
                        let basis = if is_vertical { cb_height } else { cb_width };
                        let (start, end) = if is_vertical {
                            (
                                resolve_inset(&pos_styles.top, basis),
                                resolve_inset(&pos_styles.bottom, basis),
                            )
                        } else {
                            (
                                resolve_inset(&pos_styles.left, basis),
                                resolve_inset(&pos_styles.right, basis),
                            )
                        };
                        let is_start = matches!(property_name, "top" | "left");
                        let used = match (start, end) {
                            (Some(start), Some(end)) => {
                                if is_start {
                                    start
                                } else {
                                    end
                                }
                            }
                            (Some(start), None) => {
                                if is_start {
                                    start
                                } else {
                                    -start
                                }
                            }
                            (None, Some(end)) => {
                                if is_start {
                                    -end
                                } else {
                                    end
                                }
                            }
                            (None, None) => 0.0,
                        };
                        return format_used_px(used);
                    }
                    // A specified (non-`auto`) inset resolves as-is (with
                    // percentages resolved against the containing block), even
                    // when overconstrained. An `auto` inset resolves to the
                    // used distance between the box's margin edge and the
                    // corresponding edge of the containing block's padding box.
                    Position::Absolute | Position::Fixed => {
                        if let Some(pl) = parent_layout {
                            let cb_width = pl.size.width - pl.border.left - pl.border.right;
                            let cb_height = pl.size.height - pl.border.top - pl.border.bottom;

                            let pos_styles = styles.get_position();
                            let (inset, basis) = match property_name {
                                "top" => (&pos_styles.top, cb_height),
                                "bottom" => (&pos_styles.bottom, cb_height),
                                "left" => (&pos_styles.left, cb_width),
                                "right" => (&pos_styles.right, cb_width),
                                _ => unreachable!(),
                            };
                            if let Some(value) = resolve_inset(inset, basis) {
                                return format_used_px(value);
                            }

                            let layout = node.final_layout();
                            let margin_box_top =
                                layout.location.y - layout.margin.top - pl.border.top;
                            let margin_box_left =
                                layout.location.x - layout.margin.left - pl.border.left;
                            let margin_box_width =
                                layout.margin.left + layout.size.width + layout.margin.right;
                            let margin_box_height =
                                layout.margin.top + layout.size.height + layout.margin.bottom;
                            let used = match property_name {
                                "top" => margin_box_top,
                                "bottom" => cb_height - margin_box_top - margin_box_height,
                                "left" => margin_box_left,
                                "right" => cb_width - margin_box_left - margin_box_width,
                                _ => unreachable!(),
                            };
                            return format_used_px(used);
                        }
                    }
                    // `static` and `sticky` boxes resolve to the computed value
                    _ => {}
                }
            }
            // `min-width: auto` / `min-height: auto` resolve to `auto` only for
            // boxes with a preferred aspect ratio and for flex and grid items;
            // otherwise (including when no box is generated) they resolve to `0px`
            "min-width" | "min-height" => {
                let pos_styles = styles.get_position();
                let is_auto = if property_name == "min-width" {
                    pos_styles.min_width.is_auto()
                } else {
                    pos_styles.min_height.is_auto()
                };
                let has_aspect_ratio =
                    !matches!(pos_styles.aspect_ratio.ratio, PreferredRatio::None);
                let preserves_auto =
                    generates_box && (has_aspect_ratio || self.is_flex_or_grid_item(node_id));
                if is_auto && !preserves_auto {
                    return format_px(0.0);
                }
            }
            "transform" if has_layout_box => {
                let transform = &styles.get_box().transform;
                if !transform.0.is_empty() {
                    // Used value: the transform list resolved to a matrix, with
                    // percentages resolved against the border box
                    let layout = node.final_layout();
                    let reference_box = euclid::Rect::new(
                        euclid::Point2D::new(CSSPixelLength::new(0.0), CSSPixelLength::new(0.0)),
                        euclid::Size2D::new(
                            CSSPixelLength::new(layout.size.width),
                            CSSPixelLength::new(layout.size.height),
                        ),
                    );
                    if let Ok((matrix, is_3d)) =
                        transform.to_transform_3d_matrix_f64(Some(&reference_box))
                    {
                        return format_matrix(&matrix, is_3d);
                    }
                }
            }
            _ => {}
        }

        // General case: serialize the stylo computed value
        let css = match property_id.as_shorthand() {
            // Serialize shorthands from the resolved values of their longhands
            Ok(shorthand) => serialize_resolved_shorthand(styles, shorthand),
            Err(declaration_id) => styles.computed_value_to_string(declaration_id),
        };
        canonicalize_computed_alignment(property_name, css)
    }

    /// Whether the node's box is a flex or grid item, i.e. its nearest ancestor
    /// that generates a box (skipping `display: contents` ancestors) is a flex
    /// or grid container.
    fn is_flex_or_grid_item(&self, node_id: NodeId) -> bool {
        let mut parent_id = self.get_node(node_id).and_then(|node| node.parent);
        while let Some(parent) = parent_id.and_then(|id| self.get_node(id)) {
            let Some(parent_styles) = parent.primary_styles() else {
                return false;
            };
            let display = parent_styles.clone_display();
            if display.is_contents() {
                parent_id = parent.parent;
                continue;
            }
            return matches!(display.inside(), DisplayInside::Flex | DisplayInside::Grid);
        }
        false
    }
}

/// Serialize the values of a two-sided (start, end) or four-sided (top, right,
/// bottom, left) shorthand, omitting sides that repeat the opposite side.
fn serialize_sides(sides: &[String]) -> String {
    let len = match sides {
        [start, end] if start == end => 1,
        [top, right, bottom, left] if right == left => {
            if top != bottom {
                3
            } else if top != right {
                2
            } else {
                1
            }
        }
        _ => sides.len(),
    };
    sides[..len].join(" ")
}

/// Serialize the resolved value of a shorthand property by resolving each of
/// its longhands and re-serializing them as the shorthand (as
/// `getComputedStyle()` does for shorthands). Returns an empty string if the
/// longhand values cannot be represented as the shorthand.
fn serialize_resolved_shorthand(styles: &ComputedValues, shorthand: ShorthandId) -> String {
    // `all` cannot be serialized from longhands
    if shorthand == ShorthandId::All {
        return String::new();
    }

    let declarations: Vec<PropertyDeclaration> = shorthand
        .longhands()
        .map(|longhand| {
            let mut context = resolved::Context {
                style: styles,
                for_property: PropertyId::NonCustom(longhand.into()),
                current_longhand: Some(longhand),
            };
            styles.computed_or_resolved_declaration(longhand, Some(&mut context))
        })
        .collect();
    let declaration_refs: Vec<&PropertyDeclaration> = declarations.iter().collect();

    let mut css = CssStringWriter::new();
    let _ = shorthand.longhands_to_css(&declaration_refs, &mut css);
    css
}

/// Canonicalize the computed value of an alignment property the way css-align-3
/// now requires: `flex-start`/`flex-end` compute to `flow-start`/`flow-end`
/// (e.g. `align-self: flex-start` resolves to `flow-start`, `safe flex-end` to
/// `safe flow-end`). Stylo does not yet do this, so patch the serialized value
/// here until it does (see https://github.com/servo/stylo).
fn canonicalize_computed_alignment(property_name: &str, value: String) -> String {
    const ALIGNMENT_PROPERTIES: [&str; 9] = [
        "align-content",
        "align-items",
        "align-self",
        "justify-content",
        "justify-items",
        "justify-self",
        "place-content",
        "place-items",
        "place-self",
    ];
    if !ALIGNMENT_PROPERTIES.contains(&property_name) || !value.contains("flex-") {
        return value;
    }
    value
        .replace("flex-start", "flow-start")
        .replace("flex-end", "flow-end")
}