Bug 1832481 - Container units should prevent us from using the rule c…

…ache. r=dshin Much like with font-relative units, when they're used for a non-inherited property we need to avoid using the rule cache. This is because two elements matching the same rules won't get guaranteed-equal non-inherited style structs. Depends on D177732 Differential Revision: https://phabricator.services.mozilla.com/D177733
iaxat · May 11, 2023 · abd57d2 · abd57d2
1 parent db66591
commit abd57d2
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 0 deletions.
diff --git a/servo/components/style/values/specified/length.rs b/servo/components/style/values/specified/length.rs
@@ -784,6 +784,9 @@ impl ContainerRelativeLength {
 
     /// Computes the given container-relative length.
     pub fn to_computed_value(&self, context: &Context) -> CSSPixelLength {
+        if context.for_non_inherited_property.is_some() {
+            context.rule_cache_conditions.borrow_mut().set_uncacheable();
+        }
         let size = context.get_container_size_query();
         let (factor, container_length) = match *self {
             Self::Cqw(v) => (v, size.get_container_width(context)),

diff --git a/.../web-platform/tests/css/css-contain/container-queries/container-units-rule-cache-ref.html b/.../web-platform/tests/css/css-contain/container-queries/container-units-rule-cache-ref.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset="utf-8">
+<style>
+  .container {
+    width: 100px;
+  }
+
+  .half {
+    height: 50%;
+    background-color: green;
+  }
+</style>
+<div class="container" style="height: 100px">
+  <div class="half"></div>
+</div>
+<div class="container" style="height: 200px">
+  <div class="half"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-units-rule-cache.html b/testing/web-platform/tests/css/css-contain/container-queries/container-units-rule-cache.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<meta charset="utf-8">
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-lengths">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1832481">
+<link rel="author" href="mailto:[email protected]" title="Emilio Cobos Álvarez">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<link rel="match" href="container-units-rule-cache-ref.html">
+<style>
+  .container {
+    width: 100px;
+    container-type: size;
+  }
+
+  .half {
+    height: 50cqh;
+    background-color: green;
+  }
+</style>
+<div class="container" style="height: 100px">
+  <div class="half"></div>
+</div>
+<div class="container" style="height: 200px">
+  <div class="half"></div>
+</div>