Bug 1623179 [wpt PR 22310] - Use sideways orientation on vertical-lr to force the alphabetic baseline, a=testonly
authorJavier Fernandez Garcia-Boente <jfernandez@igalia.com>
Mon, 23 Mar 2020 11:43:19 +0000
changeset 520509 6eb47dcc15aedb91d0c6db7178ff38c757be3269
parent 520508 d7cfa5f16e3fd1935f9e2d807468cff85e0dfccc
child 520510 3dbf58f319beb54b81f03d20a158f7465c32bee9
push id37252
push usermalexandru@mozilla.com
push dateThu, 26 Mar 2020 15:34:27 +0000
treeherdermozilla-central@31360ced8ff8 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1623179, 22310
milestone76.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1623179 [wpt PR 22310] - Use sideways orientation on vertical-lr to force the alphabetic baseline, a=testonly Automatic update from web-platform-tests Use sideways orientation on vertical-lr to force the alphabetic baseline (#22310) * Use sideways orientation on vertical-lr to force the alphabetic baseline. -- wpt-commits: b9888e62e3799d5f91f84cef477a5745469fd570 wpt-pr: 22310
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-008.html
testing/web-platform/tests/css/css-grid/alignment/grid-container-baseline-001.html
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-008.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-008.html
@@ -11,16 +11,17 @@
 <style>
 #container {
   position: relative;
   display: inline-grid;
   grid: 50px 50px 50px / 100px;
   background: grey;
   justify-items: baseline;
   font-family: Ahem;
+  text-orientation: sideways;
   line-height: 1;
 }
 #container > div { writing-mode: vertical-lr; }
 #item1 {
   font-size: 20px;
   background: blue;
 }
 #item2 {
@@ -35,25 +36,25 @@
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/resources/check-layout-th.js"></script>
 <script src="support/style-change.js"></script>
 <script>
 function runTest() {
     let before = {
-        item1: {"data-offset-x": 5  },
+        item1: {"data-offset-x": 2  },
         item2: {"data-offset-x": 30 },
         item3: {"data-offset-x": 0  }
     };
 
     let after = {
-        item1: {"data-offset-x": 10 },
-        item2: {"data-offset-x": 0  },
-        item3: {"data-offset-x": 5  }
+        item1: {"data-offset-x": 4 },
+        item2: {"data-offset-x": 0 },
+        item3: {"data-offset-x": 2 }
     };
 
     evaluateStyleChangeMultiple("before", before);
     item2.style.justifySelf = "baseline";
     evaluateStyleChangeMultiple("after", after);
     done();
 }
 </script>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-container-baseline-001.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-container-baseline-001.html
@@ -65,34 +65,34 @@
   <div class="grid">
     <div class="i1"></div>
     <div class="i2" style="writing-mode: vertical-rl;" data-offset-y="0"></div>
     <div class="i3"></div>
   </div>
   <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-y="40"></div>
 </div>
 
-<div class="wrapper" style="writing-mode: vertical-lr;">
-  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="65"></div>
+<div class="wrapper" style="writing-mode: vertical-lr; text-orientation: sideways;">
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div>
   <div class="grid">
     <div class="i1"></div>
     <div class="i2" data-offset-x="0"></div>
     <div class="i3"></div>
   </div>
-  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="65"></div>
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div>
 </div>
 
-<div class="wrapper" style="writing-mode: vertical-lr;">
-  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="65"></div>
+<div class="wrapper" style="writing-mode: vertical-lr; text-orientation: sideways;">
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div>
   <div class="grid">
     <div class="i1"></div>
     <div class="i2" style="writing-mode: horizontal-tb;" data-offset-x="0"></div>
     <div class="i3"></div>
   </div>
-  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="65"></div>
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div>
 </div>
 
 <div class="wrapper" style="writing-mode: vertical-lr; text-orientation: sideways;">
   <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div>
   <div class="grid">
     <div class="i1"></div>
     <div class="i2" data-offset-x="0"></div>
     <div class="i3"></div>
@@ -105,36 +105,16 @@
   <div class="grid">
     <div class="i1"></div>
     <div class="i2" style="writing-mode: horizontal-tb;" data-offset-x="0"></div>
     <div class="i3"></div>
   </div>
   <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div>
 </div>
 
-<div class="wrapper" style="writing-mode: vertical-rl;">
-  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="65"></div>
-  <div class="grid">
-    <div class="i1"></div>
-    <div class="i2" data-offset-x="75"></div>
-    <div class="i3"></div>
-  </div>
-  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="65"></div>
-</div>
-
-<div class="wrapper" style="writing-mode: vertical-rl;">
-  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="65"></div>
-  <div class="grid">
-    <div class="i1"></div>
-    <div class="i2" style="writing-mode: horizontal-tb;" data-offset-x="75"></div>
-    <div class="i3"></div>
-  </div>
-  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="65"></div>
-</div>
-
 <div class="wrapper" style="writing-mode: vertical-rl; text-orientation: sideways;">
   <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div>
   <div class="grid">
     <div class="i1"></div>
     <div class="i2" data-offset-x="75"></div>
     <div class="i3"></div>
   </div>
   <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div>
@@ -145,9 +125,29 @@
   <div class="grid">
     <div class="i1"></div>
     <div class="i2" style="writing-mode: horizontal-tb;" data-offset-x="75"></div>
     <div class="i3"></div>
   </div>
   <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div>
 </div>
 
+<div class="wrapper" style="writing-mode: vertical-rl; text-orientation: sideways;">
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div>
+  <div class="grid">
+    <div class="i1"></div>
+    <div class="i2" data-offset-x="75"></div>
+    <div class="i3"></div>
+  </div>
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div>
+</div>
+
+<div class="wrapper" style="writing-mode: vertical-rl; text-orientation:  sideways;">
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div>
+  <div class="grid">
+    <div class="i1"></div>
+    <div class="i2" style="writing-mode: horizontal-tb;" data-offset-x="75"></div>
+    <div class="i3"></div>
+  </div>
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div>
+</div>
+
 </body>