Bug 1253354: Update flexbox reftests that deal with table parts in a flex container; now these elements will be blockified & will become flex items. r=mats
authorDaniel Holbert <dholbert@cs.stanford.edu>
Thu, 03 Mar 2016 17:15:22 -0800
changeset 323076 50d4faf062bbe8888a64a18683f98e9b88082f8b
parent 323075 5b2e715559c94c2ecbbf545f52130fa3b8703365
child 323077 55c0b0d0747846ecae8f3d5eeabe79e78b78124d
push id5913
push userjlund@mozilla.com
push dateMon, 25 Apr 2016 16:57:49 +0000
treeherdermozilla-beta@dcaf0a6fa115 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmats
bugs1253354
milestone47.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 1253354: Update flexbox reftests that deal with table parts in a flex container; now these elements will be blockified & will become flex items. r=mats Specific changes: - flexbox-table-fixup-001a.xhtml previously tested that table parts would get wrapped in an anonymous table, which would form a single flex item. This patch changes it to instead test that each table-part forms its own flex item. - flexbox-table-fixup-001b.xhtml previously was a "belt and suspenders" afterthought to its "001a" counterpart. It verified that flex-item properties (like "flex") had no effect on table parts in a flex container. This patch removes this test (since it's no longer valid) and renames the "001a" test to simply "001" as a result. - flexbox-with-pseudo-elements-003.html previously tested that ::before/::after pseudo-elements with table-part display values would have their flex-item-related properties ignored (because they'd be wrapped in an anonymous table). This patch flips that expectation, because now these pseudo-elements will directly become flex items and these properties should be honored.
layout/reftests/w3c-css/submitted/flexbox/flexbox-table-fixup-001-ref.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-table-fixup-001.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-table-fixup-001a.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-table-fixup-001b.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-003-ref.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-003.html
layout/reftests/w3c-css/submitted/flexbox/reftest.list
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-table-fixup-001-ref.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-table-fixup-001-ref.xhtml
@@ -1,30 +1,25 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<!-- Reference case for table-fixup on table parts inside of a
-     flex container. -->
+<!-- Reference case for ensuring table-fixup does not happen to adjacent
+     table parts directly inside of a flex container. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <title>CSS Reftest Reference</title>
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
     <style>
       div.flexbox {
         border: 1px dashed blue;
-      }
-
-      <!-- NOTE: table-fixup pads each td element by 1px on each side. We
-           override that for top & bottom, for simplicity. So the td makes us
-           generate a box that's 2px wider than its contents. -->
-      td {
-        padding-top: 0px;
-        padding-bottom: 0px;
+        width: 200px;
+        display: flex;
+        justify-content: space-around;
       }
 
       .a {
         background: lightgreen;
         width: 48px;
       }
 
       .b {
@@ -34,28 +29,23 @@
 
       .c {
         background: pink;
         width: 48px;
       }
     </style>
   </head>
   <body>
-    <!-- Just 2 adjacent table cells (they end up in the same table) -->
-    <div class="flexbox" style="padding-left: 50px; width: 150px"
-         ><td class="a">cell1</td
-         ><td class="b">cell2</td
+    <!-- In each example here, we simply use blocks instead of table parts -->
+    <div class="flexbox"
+         ><div class="a">cell1</div><div class="b">cell2</div
     ></div>
 
-    <!-- Table cell followed by tbody (they end up in the same table) -->
-    <div class="flexbox" style="padding-left: 75px; width: 125px"
-         ><td class="a">cell1</td
-         ><tbody class="b">t</tbody
+    <div class="flexbox"
+         ><div class="a">cell1</div><div class="b">t</div
     ></div>
 
-    <!-- Empty table cell (ends up occupying 2px of width), followed by div,
-         followed by nonempty table cell. (3 flex items). -->
-    <div class="flexbox" style="padding-left: 52px; width: 148px"
-         ><div style="display: inline-block;"  class="c">div</div
-         ><div style="display: inline-table; margin-left: 50px"><td class="b">cell1</td></div
+    <div class="flexbox"
+         ><div></div
+         ><div class="b">cell1</div
     ></div>
   </body>
 </html>
rename from layout/reftests/w3c-css/submitted/flexbox/flexbox-table-fixup-001a.xhtml
rename to layout/reftests/w3c-css/submitted/flexbox/flexbox-table-fixup-001.xhtml
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-table-fixup-001a.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-table-fixup-001.xhtml
@@ -1,39 +1,38 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <!--
-     Testcase with table parts inside of a flex container, triggering
-     table-fixup.  We use justify-content:space-between to stick packing
+     Testcase with table parts inside of a flex container, which should *not*
+     trigger table-fixup.  We use justify-content:space-between to stick packing
      space between flex items, so that we can verify that e.g. a contiguous
-     run of <td>s will end up in the same flex item (wrapped in a table).
+     run of <td>s will each be blockified & form its own flex item (instead of
+     being aggregated into a single table & single flex item).
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
-    <title>CSS Test: Testing that table cells in a flex container get an anonymous table wrapper that forms the flex item</title>
+    <title>CSS Test: Testing that table cells in a flex container get blockified and each form their own flex item</title>
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
     <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"/>
     <link rel="match" href="flexbox-table-fixup-001-ref.xhtml"/>
     <style>
       div.flexbox {
         border: 1px dashed blue;
         width: 200px;
         display: flex;
         justify-content: space-around;
       }
 
-      <!-- NOTE: table-fixup pads each td element by 1px on each side. We
-           override that for top & bottom, for simplicity. So the td makes us
-           generate a box that's 2px wider than its contents. -->
       td {
-        padding-top: 0px;
-        padding-bottom: 0px;
+        /* Remove any default padding for td elements, so we can compare them
+           easily against blocks in the reference case. */
+        padding: 0px;
       }
 
       .a {
         background: lightgreen;
         width: 48px;
       }
 
       .b {
@@ -43,24 +42,24 @@
 
       .c {
         background: pink;
         width: 48px;
       }
     </style>
   </head>
   <body>
-    <!-- Just 2 adjacent table cells (they end up in the same table) -->
+    <!-- The adjacent table-parts in each example below should *not* be
+         grouped into the same flex item. -->
+    <!-- 2 adjacent table cells -->
     <div class="flexbox"
          ><td class="a">cell1</td><td class="b">cell2</td></div>
 
-    <!-- Table cell followed by tbody (they end up in the same table) -->
+    <!-- Table cell followed by tbody -->
     <div class="flexbox"
          ><td class="a">cell1</td><tbody class="b">t</tbody></div>
 
-    <!-- Empty table cell (ends up occupying 2px of width), followed by div,
-         followed by nonempty table cell. (3 flex items). -->
-    <!-- Note: We use "space-between" (instead of "space-around") here because
-         it makes the math cleaner. (100px split 2 ways instead of 3 ways.) -->
-    <div class="flexbox" style="justify-content: space-between"
-         ><td></td><div class="c">div</div><td class="b">cell1</td></div>
+    <!-- Empty table cell (ends up occupying 2px of width), followed by
+         nonempty table cell.-->
+    <div class="flexbox"
+         ><td></td><td class="b">cell1</td></div>
   </body>
 </html>
deleted file mode 100644
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-table-fixup-001b.xhtml
+++ /dev/null
@@ -1,74 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<!--
-     Testcase with table parts inside of a flex container, triggering
-     table-fixup.  We use justify-content:space-between to stick packing
-     space between flex items, so that we can verify that e.g. a contiguous
-     run of <td>s will end up in the same flex item (wrapped in a table).
-
-     In this variant of the test, we also assign 'flex' values to the
-     table parts - these values should have no effect, since these children
-     don't themselves form flex items.  The flex property _is_ honored on
-     the <div class="c">, though, because _its_ box _is_ a direct child of a
-     flexbox, so it _is_ a flex item.
--->
-<html xmlns="http://www.w3.org/1999/xhtml">
-  <head>
-    <title>CSS Test: Testing that the 'flex' shorthand has no effect on table cells in a flex container, since they aren't flex items</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
-    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"/>
-    <link rel="match" href="flexbox-table-fixup-001-ref.xhtml"/>
-    <style>
-      div.flexbox {
-        border: 1px dashed blue;
-        width: 200px;
-        display: flex;
-        justify-content: space-around;
-      }
-
-      <!-- NOTE: table-fixup pads each td element by 1px on each side. We
-           override that for top & bottom, for simplicity. So the td makes us
-           generate a box that's 2px wider than its contents. -->
-      td {
-        padding-top: 0px;
-        padding-bottom: 0px;
-      }
-
-      .a {
-        background: lightgreen;
-        width: 48px;
-        flex: 5 3 100px;
-      }
-
-      .b {
-        background: yellow;
-        width: 48px;
-        flex: 1 2 3px;
-      }
-
-      .c {
-        background: pink;
-        flex: 0 0 48px;
-      }
-    </style>
-  </head>
-  <body>
-    <!-- Just 2 adjacent table cells (they end up in the same table) -->
-    <div class="flexbox"
-         ><td class="a">cell1</td><td class="b">cell2</td></div>
-
-    <!-- Table cell followed by tbody (they end up in the same table) -->
-    <div class="flexbox"
-         ><td class="a">cell1</td><tbody class="b">t</tbody></div>
-
-    <!-- Empty table cell (ends up occupying 2px of width), followed by div,
-         followed by nonempty table cell. (3 flex items). -->
-    <!-- Note: We use "space-between" (instead of "space-around") here because
-         it makes the math cleaner. (100px split 2 ways instead of 3 ways.) -->
-    <div class="flexbox" style="justify-content: space-between"
-         ><td></td><div class="c">div</div><td class="b">cell1</td></div>
-  </body>
-</html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-003-ref.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-003-ref.html
@@ -21,20 +21,24 @@
       height: 50px;
       width: 300px;
       margin-bottom: 2px;
       background: lightgray;
     }
     .fakeBefore {
       content: 'b';
       background: yellow;
+      align-self: center;
+      order: 1;
     }
     .fakeAfter {
       content: 'a';
       background: lightblue;
+      align-self: center;
+      order: -1;
     }
   </style>
 </head>
 <body>
   <div class="flexContainer">
     <div class="fakeBefore">b</div>
     x
     <div>y</div>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-003.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-003.html
@@ -2,20 +2,19 @@
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <!-- Testcase to ensure we handle ::before and ::after pseudo-elements on a
      flex container, specifically when they've got display:table-row or
      table-cell.
 
-     Note that we *don't* treat the table row or cell frames themselves as flex
-     items, because they get wrapped in an anonymous table box, and *that* is
-     the flex item.  So, "align-self" and "order" have no effect on the
-     row/cell. -->
+     The table-row / table-cell 'display' values should be blockified, and the
+     pseudo-elements should be treated as flex items. (They should not get
+     wrapped in an anonymous table box.) -->
 <html>
 <head>
   <title>CSS Test: Testing that generated content nodes with table-part display types are wrapped with an anonymous table, which forms a flex item</title>
   <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
   <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items">
   <link rel="match" href="flexbox-with-pseudo-elements-003-ref.html">
   <meta charset="utf-8">
   <style>
@@ -27,25 +26,29 @@
       width: 300px;
       margin-bottom: 2px;
       background: lightgray;
     }
     div.withBefore::before {
       display: table-row;
       content: 'b';
       background: yellow;
-      align-self: center; /* should have no effect */
-      order: 1;           /* should have no effect */
+      /* If these "align-self" & "order" properties impact the rendering (as
+         they should), that verifies we're being treated as a flex item. */
+      align-self: center;
+      order: 1;
     }
     div.withAfter::after {
       display: table-cell;
       content: 'a';
       background: lightblue;
-      align-self: center; /* should have no effect */
-      order: -1;          /* should have no effect */
+      /* If these "align-self" & "order" properties impact the rendering (as
+         they should), that verifies we're being treated as a flex item. */
+      align-self: center;
+      order: -1;
     }
   </style>
 </head>
 <body>
   <div class="flexContainer withBefore">
     x
     <div>y</div>
     z
--- a/layout/reftests/w3c-css/submitted/flexbox/reftest.list
+++ b/layout/reftests/w3c-css/submitted/flexbox/reftest.list
@@ -164,29 +164,28 @@ fails == flexbox-min-width-auto-002b.htm
 == flexbox-root-node-001b.html flexbox-root-node-001-ref.html
 
 # Tests for sizing of flex containers, e.g. under min/max size constraints
 == flexbox-sizing-horiz-001.xhtml flexbox-sizing-horiz-001-ref.xhtml
 == flexbox-sizing-horiz-002.xhtml flexbox-sizing-horiz-002-ref.xhtml
 == flexbox-sizing-vert-001.xhtml  flexbox-sizing-vert-001-ref.xhtml
 == flexbox-sizing-vert-002.xhtml  flexbox-sizing-vert-002-ref.xhtml
 
-# Tests for table-fixup on flex items
-!= flexbox-table-fixup-001a.xhtml flexbox-table-fixup-001-ref.xhtml
-!= flexbox-table-fixup-001b.xhtml flexbox-table-fixup-001-ref.xhtml
+# Tests for table-fixup *not happening* on direct children of a flex container
+== flexbox-table-fixup-001.xhtml flexbox-table-fixup-001-ref.xhtml
 
 # Tests for handling of whitespace within anonymous flex items.
 == flexbox-whitespace-handling-001a.xhtml flexbox-whitespace-handling-001-ref.xhtml
 == flexbox-whitespace-handling-001b.xhtml flexbox-whitespace-handling-001-ref.xhtml
 == flexbox-whitespace-handling-002.xhtml  flexbox-whitespace-handling-002-ref.xhtml
 
 # Tests for flex containers with pseudo-elements
 == flexbox-with-pseudo-elements-001.html flexbox-with-pseudo-elements-001-ref.html
 == flexbox-with-pseudo-elements-002.html flexbox-with-pseudo-elements-002-ref.html
-!= flexbox-with-pseudo-elements-003.html flexbox-with-pseudo-elements-003-ref.html
+== flexbox-with-pseudo-elements-003.html flexbox-with-pseudo-elements-003-ref.html
 
 # Tests for combined influence of 'writing-mode' & 'direction' on flex axes
 test-pref(layout.css.vertical-text.enabled,true) == flexbox-writing-mode-001.html flexbox-writing-mode-001-ref.html
 test-pref(layout.css.vertical-text.enabled,true) == flexbox-writing-mode-002.html flexbox-writing-mode-002-ref.html
 test-pref(layout.css.vertical-text.enabled,true) == flexbox-writing-mode-003.html flexbox-writing-mode-003-ref.html
 test-pref(layout.css.vertical-text.enabled,true) == flexbox-writing-mode-004.html flexbox-writing-mode-004-ref.html
 test-pref(layout.css.vertical-text.enabled,true) == flexbox-writing-mode-005.html flexbox-writing-mode-005-ref.html
 test-pref(layout.css.vertical-text.enabled,true) == flexbox-writing-mode-006.html flexbox-writing-mode-006-ref.html