Bug 1675171 [wpt PR 26371] - [css-flex] Fix some gap tests that fail …

…in firefox, a=testonly Automatic update from web-platform-tests [css-flex] Fix some gap tests that fail in firefox These failed due to firefox and chrome using different default fonts. I avoided that problem by assigning a fixed width to the divs containing the words. These tests now pass when I run them locally in firefox with ./wpt run --binary ~/ff-nightly/firefox firefox css/css-flexbox/gap-006* This was filed in web-platform-tests/wpt#26326 Fixes web-platform-tests/wpt#26326 Change-Id: Ib0795c67bce5f80f7a33e1da74a026c1ed574b41 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2515226 Reviewed-by: Philip Jägenstedt <foolip@chromium.org> Commit-Queue: David Grogan <dgrogan@chromium.org> Cr-Commit-Position: refs/heads/master@{#823830} -- wpt-commits: b9dea15062d348abb8da77996e8eb0bd4f9e5dec wpt-pr: 26371
mozilla · Nov 6, 2020 · 5cb4fb8 · 5cb4fb8
1 parent b9cfce2
commit 5cb4fb8
Show file tree

Hide file tree

Showing 8 changed files with 116 additions and 36 deletions.
diff --git a/testing/web-platform/tests/css/css-flexbox/gap-006-lr-ref.html b/testing/web-platform/tests/css/css-flexbox/gap-006-lr-ref.html
@@ -17,18 +17,28 @@
   section > div{
     background-color: grey;
     color: white;
+    block-size: 20px;
   }
-  section > div:not(:last-of-type) {
+  #bp {
+    inline-size: 120px;
+  }
+  #ww {
+    inline-size: 130px;
+  }
+  #s, #f {
+    inline-size: 40px;
+  }
+  #bp, #ww {
     margin-inline-end: 20px;
     margin-block-end: 20px;
   }
 </style>
 <body>
   <p>Test passes if there are <strong> green lines between boxes</strong>.</p>
   <section>
-    <div>Black Panther</div>
-    <div>Wonder Woman</div>
-    <div>Storm</div>
-    <div>Flash</div>
+    <div id=bp>Black Panther</div>
+    <div id=ww>Wonder Woman</div>
+    <div id=s>Storm</div>
+    <div id=f>Flash</div>
   </section>
 </body>
diff --git a/testing/web-platform/tests/css/css-flexbox/gap-006-lr.html b/testing/web-platform/tests/css/css-flexbox/gap-006-lr.html
@@ -24,14 +24,24 @@
   section > div{
     background-color: grey;
     color: white;
+    block-size: 20px;
+  }
+  #bp {
+    inline-size: 120px;
+  }
+  #ww {
+    inline-size: 130px;
+  }
+  #s, #f {
+    inline-size: 40px;
   }
 </style>
 <body>
   <p>Test passes if there are <strong> green lines between boxes</strong>.</p>
   <section>
-    <div>Black Panther</div>
-    <div>Wonder Woman</div>
-    <div>Storm</div>
-    <div>Flash</div>
+    <div id=bp>Black Panther</div>
+    <div id=ww>Wonder Woman</div>
+    <div id=s>Storm</div>
+    <div id=f>Flash</div>
   </section>
 </body>
diff --git a/testing/web-platform/tests/css/css-flexbox/gap-006-ltr-ref.html b/testing/web-platform/tests/css/css-flexbox/gap-006-ltr-ref.html
@@ -13,18 +13,28 @@
   section > div{
     background-color: grey;
     color: white;
+    block-size: 20px;
   }
-  section > div:not(:last-of-type) {
+  #bp {
+    inline-size: 120px;
+  }
+  #ww {
+    inline-size: 130px;
+  }
+  #s, #f {
+    inline-size: 40px;
+  }
+  #bp, #ww {
     margin-inline-end: 20px;
     margin-block-end: 20px;
   }
 </style>
 <body>
   <p>Test passes if there are <strong> green lines between boxes</strong>.</p>
   <section>
-    <div>Black Panther</div>
-    <div>Wonder Woman</div>
-    <div>Storm</div>
-    <div>Flash</div>
+    <div id=bp>Black Panther</div>
+    <div id=ww>Wonder Woman</div>
+    <div id=s>Storm</div>
+    <div id=f>Flash</div>
   </section>
 </body>
diff --git a/testing/web-platform/tests/css/css-flexbox/gap-006-ltr.html b/testing/web-platform/tests/css/css-flexbox/gap-006-ltr.html
@@ -20,14 +20,24 @@
   section > div{
     background-color: grey;
     color: white;
+    block-size: 20px;
+  }
+  #bp {
+    inline-size: 120px;
+  }
+  #ww {
+    inline-size: 130px;
+  }
+  #s, #f {
+    inline-size: 40px;
   }
 </style>
 <body>
   <p>Test passes if there are <strong> green lines between boxes</strong>.</p>
   <section>
-    <div>Black Panther</div>
-    <div>Wonder Woman</div>
-    <div>Storm</div>
-    <div>Flash</div>
+    <div id=bp>Black Panther</div>
+    <div id=ww>Wonder Woman</div>
+    <div id=s>Storm</div>
+    <div id=f>Flash</div>
   </section>
 </body>
diff --git a/testing/web-platform/tests/css/css-flexbox/gap-006-rl-ref.html b/testing/web-platform/tests/css/css-flexbox/gap-006-rl-ref.html
@@ -17,18 +17,28 @@
   section > div{
     background-color: grey;
     color: white;
+    block-size: 20px;
   }
-  section > div:not(:last-of-type) {
+  #bp {
+    inline-size: 120px;
+  }
+  #ww {
+    inline-size: 130px;
+  }
+  #s, #f {
+    inline-size: 40px;
+  }
+  #bp, #ww {
     margin-inline-end: 20px;
     margin-block-end: 20px;
   }
 </style>
 <body>
   <p>Test passes if there are <strong> green lines between boxes</strong>.</p>
   <section>
-    <div>Black Panther</div>
-    <div>Wonder Woman</div>
-    <div>Storm</div>
-    <div>Flash</div>
+    <div id=bp>Black Panther</div>
+    <div id=ww>Wonder Woman</div>
+    <div id=s>Storm</div>
+    <div id=f>Flash</div>
   </section>
 </body>
diff --git a/testing/web-platform/tests/css/css-flexbox/gap-006-rl.html b/testing/web-platform/tests/css/css-flexbox/gap-006-rl.html
@@ -24,14 +24,24 @@
   section > div{
     background-color: grey;
     color: white;
+    block-size: 20px;
+  }
+  #bp {
+    inline-size: 120px;
+  }
+  #ww {
+    inline-size: 130px;
+  }
+  #s, #f {
+    inline-size: 40px;
   }
 </style>
 <body>
   <p>Test passes if there are <strong> green lines between boxes</strong>.</p>
   <section>
-    <div>Black Panther</div>
-    <div>Wonder Woman</div>
-    <div>Storm</div>
-    <div>Flash</div>
+    <div id=bp>Black Panther</div>
+    <div id=ww>Wonder Woman</div>
+    <div id=s>Storm</div>
+    <div id=f>Flash</div>
   </section>
 </body>
diff --git a/testing/web-platform/tests/css/css-flexbox/gap-006-rtl-ref.html b/testing/web-platform/tests/css/css-flexbox/gap-006-rtl-ref.html
@@ -17,18 +17,28 @@
   section > div{
     background-color: grey;
     color: white;
+    block-size: 20px;
   }
-  section > div:not(:last-of-type) {
+  #bp {
+    inline-size: 120px;
+  }
+  #ww {
+    inline-size: 130px;
+  }
+  #s, #f {
+    inline-size: 40px;
+  }
+  #bp, #ww {
     margin-inline-end: 20px;
     margin-block-end: 20px;
   }
 </style>
 <body>
   <p>Test passes if there are <strong> green lines between boxes</strong>.</p>
   <section>
-    <div>Black Panther</div>
-    <div>Wonder Woman</div>
-    <div>Storm</div>
-    <div>Flash</div>
+    <div id=bp>Black Panther</div>
+    <div id=ww>Wonder Woman</div>
+    <div id=s>Storm</div>
+    <div id=f>Flash</div>
   </section>
 </body>
diff --git a/testing/web-platform/tests/css/css-flexbox/gap-006-rtl.html b/testing/web-platform/tests/css/css-flexbox/gap-006-rtl.html
@@ -24,14 +24,24 @@
   section > div{
     background-color: grey;
     color: white;
+    block-size: 20px;
+  }
+  #bp {
+    inline-size: 120px;
+  }
+  #ww {
+    inline-size: 130px;
+  }
+  #s, #f {
+    inline-size: 40px;
   }
 </style>
 <body>
   <p>Test passes if there are <strong> green lines between boxes</strong>.</p>
   <section>
-    <div>Black Panther</div>
-    <div>Wonder Woman</div>
-    <div>Storm</div>
-    <div>Flash</div>
+    <div id=bp>Black Panther</div>
+    <div id=ww>Wonder Woman</div>
+    <div id=s>Storm</div>
+    <div id=f>Flash</div>
   </section>
 </body>