style: Container units should prevent us from sharing style by rule node

At least when the containers are different.

For now check that by doing a somewhat simplified test (checking
sibling-ness).

The new flag can be useful to optimize container query restyles on
resizes too, in the future.

Differential Revision: https://phabricator.services.mozilla.com/D179268

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;
     }
 }
 

components/style/sharing/mod.rs

@@ -877,10 +877,21 @@ impl<E: TElement> StyleSharingCache<E> {
             // 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,

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)),