[@container] Resolve logical units against element's writing-mode

andruud · chromium-wpt-export-bot · commit 0ee7849d44e5 · 2022-01-17T04:28:00.000-08:00
Previously the unit 'qi' (for example) would resolve against the nearest inline-axis container. However, according to a recent resolution [1] writing-mode sensitive units resolve to a physical axis based on the target element's writing mode. This simplifies the container-relative unit resolution a bit, since can always use PhysicalAxes when searching for the correct container. Being able to resolve logical units in CSSToLengthConversionData also prepares for implementation of the new viewport units [2], which include a number of new logical variants as well. (They also resolve to physical in the same way). This CL should only affect code behind the CSSContainerRelativeUnits runtime flag (status:test). [1] w3c/csswg-drafts#6873 [2] https://crbug.com/1093055 Bug: 1223030, 1093055 Change-Id: I548a613609b46a38262d5de48e294dab1131853b
diff --git a/css/css-contain/container-queries/container-units-selection.html b/css/css-contain/container-queries/container-units-selection.html
@@ -69,61 +69,33 @@
   test(() => {
     try {
       c1.className = 'size w500 h400';
-      c2.className = 'inline w300';
-      c3.className = 'inline w100 h200 vertical';
-
-      // Should select c2, and resolve against w300.
-      assert_unit_equals(child, '10qw', '30px');
-
-      // Should select c3, and resolve against h200.
-      assert_unit_equals(child, '10qi', '20px');
-
-      // Should select c3, and resolve against h200.
-      assert_unit_equals(child, '10qh', '20px');
-
-      // Should select c1, and resolve against h400.
-      assert_unit_equals(child, '10qb', '40px');
-
-      c3.classList.remove('vertical');
-
-      // Should select c3, and resolve against w100.
-      assert_unit_equals(child, '10qw', '10px');
-
-      // Should select c3, and resolve against w100.
-      assert_unit_equals(child, '10qi', '10px');
-
-      // Should select c1, and resolve against h400.
-      assert_unit_equals(child, '10qh', '40px');
-
-      // Should select c1, and resolve against h400.
-      assert_unit_equals(child, '10qb', '40px');
-
-    } finally {
-      for (let c of [c1, c2, c3, c4, child])
-        c.className = '';
-    }
-  }, 'Container with vertical writing mode');
-
-  test(() => {
-    try {
-      c1.className = 'size w500 h400';
-      c2.className = 'inline w300';
+      c2.className = 'inline w300 h200';
 
+      // [qi, qb] corresponds to [qw, qh].
       assert_unit_equals(child, '10qw', '30px');
       assert_unit_equals(child, '10qi', '30px');
       assert_unit_equals(child, '10qh', '40px');
       assert_unit_equals(child, '10qb', '40px');
 
       child.className = 'vertical';
-
+      // [qi, qb] now corresponds to [qh, qw].
       assert_unit_equals(child, '10qw', '30px');
-      assert_unit_equals(child, '10qi', '30px');
+      assert_unit_equals(child, '10qi', '40px');
       assert_unit_equals(child, '10qh', '40px');
-      assert_unit_equals(child, '10qb', '40px');
+      assert_unit_equals(child, '10qb', '30px');
+
+      c2.classList.add('vertical');
+      // The inline containment on #c2 now applies to the vertical axis.
+      // [qi, qb] still corresponds to [qh, qw], but we now expect
+      // qh to resolve against #c2, and qw to resolve against #c1.
+      assert_unit_equals(child, '10qw', '50px');
+      assert_unit_equals(child, '10qi', '20px');
+      assert_unit_equals(child, '10qh', '20px');
+      assert_unit_equals(child, '10qb', '50px');
 
     } finally {
       for (let c of [c1, c2, c3, c4, child])
         c.className = '';
     }
-  }, 'Units are not affected by the writing-mode of the current element');
+  }, 'Units respond to the writing-mode of the element');
 </script>
