diff --git a/components/style/properties/computed_value_flags.rs b/components/style/properties/computed_value_flags.rs index 8ac90aee27f..f12760aa8b4 100644 --- a/components/style/properties/computed_value_flags.rs +++ b/components/style/properties/computed_value_flags.rs @@ -125,6 +125,11 @@ bitflags! { /// Whether the style evaluated the matched element to be an anchor of /// a relative selector. const ANCHORS_RELATIVE_SELECTOR = 1 << 25; + + /// Whether the style uses container query units, in which case the style depends on the + /// container's size and we can't reuse it across cousins (without double-checking the + /// container at least). + const USES_CONTAINER_UNITS = 1 << 26; } } diff --git a/components/style/sharing/mod.rs b/components/style/sharing/mod.rs index a78eb724c5d..9e5b9603d77 100644 --- a/components/style/sharing/mod.rs +++ b/components/style/sharing/mod.rs @@ -877,10 +877,21 @@ impl StyleSharingCache { // NOTE(emilio): We only need to check name / namespace because we // do name-dependent style adjustments, like the display: contents // to display: none adjustment. - if target.namespace() != candidate.element.namespace() { + if target.namespace() != candidate.element.namespace() || + target.local_name() != candidate.element.local_name() + { return None; } - if target.local_name() != candidate.element.local_name() { + // When using container units, inherited style + rules matched aren't enough to + // determine whether the style is the same. We could actually do a full container + // lookup but for now we just check that our actual traversal parent matches. + if data + .styles + .primary() + .flags + .intersects(ComputedValueFlags::USES_CONTAINER_UNITS) && + candidate.element.traversal_parent() != target.traversal_parent() + { return None; } // Rule nodes and styles are computed independent of the element's actual visitedness, diff --git a/components/style/values/specified/length.rs b/components/style/values/specified/length.rs index 45a3154fc0d..48928a8576d 100644 --- a/components/style/values/specified/length.rs +++ b/components/style/values/specified/length.rs @@ -7,6 +7,7 @@ //! [length]: https://drafts.csswg.org/css-values/#lengths use super::{AllowQuirks, Number, Percentage, ToComputedValue}; +use crate::computed_value_flags::ComputedValueFlags; use crate::font_metrics::{FontMetrics, FontMetricsOrientation}; use crate::parser::{Parse, ParserContext}; use crate::values::computed::{self, CSSPixelLength, Context}; @@ -787,6 +788,8 @@ impl ContainerRelativeLength { if context.for_non_inherited_property { context.rule_cache_conditions.borrow_mut().set_uncacheable(); } + context.builder.add_flags(ComputedValueFlags::USES_CONTAINER_UNITS); + let size = context.get_container_size_query(); let (factor, container_length) = match *self { Self::Cqw(v) => (v, size.get_container_width(context)),