[last-baseline] Adjust fallback alignment group based on direction.

This implements the change described in: w3c/csswg-drafts#7775 TL;DR instead of falling back to VLR - allow falling back to a VRL writing-mode if the direction is RTL. The tests changed are primarily flexbox tests which assumed that no alignment was occuring in the VRL group. Bug: 885175 Change-Id: I7bec9a2cfdb53c17c724d762ac965808aafb8ad5 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3927944 Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Reviewed-by: David Grogan <dgrogan@chromium.org> Cr-Commit-Position: refs/heads/main@{#1055573}
web-platform-tests · Oct 6, 2022 · c7c8933 · c7c8933
1 parent 0e5f85c
commit c7c8933
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 18 deletions.
diff --git a/css/css-flexbox/flexbox-align-self-vert-rtl-001-ref.xhtml b/css/css-flexbox/flexbox-align-self-vert-rtl-001-ref.xhtml
@@ -25,7 +25,7 @@
         width: 50px;
       }
 
-      .flexbox > * {
+      div {
         clear: both;
       }
 
@@ -44,7 +44,7 @@
       }
       .baseline {
         background: teal;
-        float: right;
+        float: left;
       }
       .stretch {
         background: pink;
@@ -77,6 +77,10 @@
         display: inline-block;
         text-align: left; /* Keep parent's centering from tweaking my text */
       }
+
+      .baselineParent {
+        float: right;
+      }
    </style>
   </head>
   <body>
@@ -89,8 +93,10 @@
         <div class="center">center</div>
       </div>
       <div class="center big">a b c d e f</div>
-      <div class="baseline">base</div>
-      <div class="baseline big">abc</div>
+      <div class="baselineParent">
+        <div class="baseline">base</div>
+        <div class="baseline big">abc</div>
+      </div>
       <div class="stretch">stretch</div>
       <div class="stretch big">a b c d e f</div>
       <div class="centerParent">

diff --git a/css/css-flexbox/flexbox-align-self-vert-rtl-002-ref.xhtml b/css/css-flexbox/flexbox-align-self-vert-rtl-002-ref.xhtml
@@ -54,9 +54,12 @@
         display: inline-block;
         text-align: right; /* Keep parent's centering from tweaking my text */
       }
+      .baselineParent {
+        float: right;
+      }
       .baseline {
         background: teal;
-        float: right;
+        float: left;
       }
       .stretch {
         background: pink;
@@ -79,8 +82,10 @@
       </div>
     </div>
     <div class="flexbox">
-      <div class="baseline">base</div>
-      <div class="baseline big">abc</div>
+      <div class="baselineParent">
+        <div class="baseline">base</div>
+        <div class="baseline big">abc</div>
+      </div>
       <div class="clearFloats"></div>
       <div class="stretch">stretch</div>
       <!-- Force a 3px + 1px = 4px margin between this and the previous div

diff --git a/css/css-flexbox/flexbox-align-self-vert-rtl-003-ref.xhtml b/css/css-flexbox/flexbox-align-self-vert-rtl-003-ref.xhtml
@@ -51,9 +51,12 @@
         display: inline-block;
         text-align: right; /* Keep parent's centering from tweaking my text */
       }
+      .baselineParent {
+        float: right;
+      }
       .baseline {
         background: teal;
-        float: right;
+        float: left;
       }
       .stretch {
         background: pink;
@@ -73,8 +76,10 @@
       <div class="centerParent">
         <div class="center big">a b</div>
       </div>
-      <div class="baseline">base</div>
-      <div class="baseline big">abc</div>
+      <div class="baselineParent">
+        <div class="baseline">base</div>
+        <div class="baseline big">abc</div>
+      </div>
       <div class="stretch clearFloats">stretch</div>
       <div class="stretch big">a b</div>
     </div>

diff --git a/css/css-flexbox/flexbox-align-self-vert-rtl-004-ref.xhtml b/css/css-flexbox/flexbox-align-self-vert-rtl-004-ref.xhtml
@@ -60,9 +60,12 @@
         display: inline-block;
         text-align: right; /* Keep parent's centering from tweaking my text */
       }
+      .baselineParent {
+        float: right;
+      }
       .baseline {
         background: teal;
-        float: right;
+        float: left;
       }
       .stretch {
         background: pink;
@@ -89,8 +92,10 @@
       </div>
     </div>
     <div class="flexbox">
-      <div class="baseline">base</div>
-      <div class="baseline big">abc</div>
+      <div class="baselineParent">
+        <div class="baseline">base</div>
+        <div class="baseline big">abc</div>
+      </div>
       <div class="flex-end">end</div>
       <div class="flex-end big">a b</div>
     </div>

diff --git a/css/css-flexbox/flexbox-align-self-vert-rtl-005-ref.xhtml b/css/css-flexbox/flexbox-align-self-vert-rtl-005-ref.xhtml
@@ -52,9 +52,12 @@
         display: inline-block;
         text-align: right; /* Keep parent's centering from tweaking my text */
       }
+      .baselineParent {
+        float: right;
+      }
       .baseline {
         background: teal;
-        float: right;
+        float: left;
       }
       .stretch {
         background: pink;
@@ -85,8 +88,10 @@
       </div>
     </div>
     <div class="flexbox">
-      <div class="baseline">base</div>
-      <div class="baseline big">abc</div>
+      <div class="baselineParent">
+        <div class="baseline">base</div>
+        <div class="baseline big">abc</div>
+      </div>
       <div class="clearFloats"></div>
       <div class="stretch">stretch</div>
       <!-- Force a 3px + 1px = 4px margin between this and the previous div

diff --git a/css/css-grid/alignment/grid-justify-baseline-001-ref.html b/css/css-grid/alignment/grid-justify-baseline-001-ref.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
 <div style="display: grid; width: 100px; height: 100px; background: gray;">
-  <div style="writing-mode: vertical-rl; background: cyan; justify-self: start; direction: rtl;">one<br>two</div>
-  <div style="writing-mode: vertical-lr; font-size: 30px; background: lime; justify-self: end; direction: rtl;">one<br>two</div>
+  <div style="writing-mode: vertical-rl; background: cyan; justify-self: end; direction: rtl;">one<br>two</div>
+  <div style="writing-mode: vertical-lr; font-size: 30px; background: lime; justify-self: start; direction: rtl;">one<br>two</div>
 </div>