Bug 812687 part 9: Add tests for "order" property's influence on list-numbering, baseline, and focus order in a flexbox. (no review, test-only)
authorDaniel Holbert <dholbert@cs.stanford.edu>
Wed, 05 Apr 2017 19:31:48 -0700
changeset 351434 001fd3755ac1810318bb7118b96ebbcc2a3e4a83
parent 351433 0a1df59228cbd98e22f729670b70901164ed8e1f
child 351435 dad7b2f08efdc23bc1234055c05a7c1c4d107b09
push id88868
push userdholbert@mozilla.com
push dateThu, 06 Apr 2017 02:32:04 +0000
treeherdermozilla-inbound@001fd3755ac1 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs812687
milestone55.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 812687 part 9: Add tests for "order" property's influence on list-numbering, baseline, and focus order in a flexbox. (no review, test-only) MozReview-Commit-ID: EEkPlCgzknG
layout/reftests/list-item/numbering-5-ref.html
layout/reftests/list-item/numbering-5.html
layout/reftests/list-item/reftest.list
layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-horiz-001.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-horiz-001a.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-horiz-001b.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-vert-001.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-vert-001a.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-vert-001b.html
layout/reftests/w3c-css/submitted/flexbox/reftest-stylo.list
layout/reftests/w3c-css/submitted/flexbox/reftest.list
layout/style/test/mochitest.ini
layout/style/test/test_flexbox_focus_order.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/list-item/numbering-5-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Reference for reordered 'li' flex items</title>
+  <style>
+    .container {
+      display: flex;
+      flex-direction: column;
+    }
+  </style>
+</head>
+<body>
+  <ol class="container">
+    <div>4. List item 4</div>
+    <div>2. List item 2</div>
+    <div>3. List item 3</div>
+    <div>5. List item 5</div>
+    <div>6. List item 6</div>
+    <div>8. List item 8</div>
+    <div>1. List item 1</div>
+    <div>7. List item 7</div>
+  </ol>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/list-item/numbering-5.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Testcase for reordered 'li' flex items</title>
+  <style>
+    .container {
+      list-style: decimal inside;
+      display: flex;
+      flex-direction: column;
+    }
+  </style>
+</head>
+<body>
+  <ol class="container">
+    <!-- Should be reordered to nearly the end: -->
+    <li style="order: 3">List item 1</li>
+    <li>List item 2</li>
+    <li>List item 3</li>
+    <!-- Should be reordered to the start: -->
+    <li style="order: -2">List item 4</li>
+    <li>List item 5</li>
+    <!-- order has no effect here, since it's not set on the flex item: -->
+    <div><li style="order: -3">List item 6</li></div>
+    <!-- Should be reordered to the end: -->
+    <div style="order: 5"><li>List item 7</li></div>
+    <div><li>List item 8</li></div>
+  </ol>
+</body>
+</html>
--- a/layout/reftests/list-item/reftest.list
+++ b/layout/reftests/list-item/reftest.list
@@ -1,12 +1,13 @@
 fuzzy-if(OSX,55,4) == numbering-1.html numbering-1-ref.html
 == numbering-2.html numbering-2-ref.html
 pref(layout.css.grid.enabled,true) fuzzy-if(OSX,8,1) == numbering-3.html numbering-3-ref.html
 fuzzy-if(OSX,72,2) == numbering-4.html numbering-4-ref.html
+== numbering-5.html numbering-5-ref.html
 == ol-reversed-1a.html ol-reversed-1-ref.html
 asserts(1) == ol-reversed-1b.html ol-reversed-1-ref.html # bug 478135
 == ol-reversed-1c.html ol-reversed-1-ref.html
 == ol-reversed-2.html ol-reversed-2-ref.html
 == ol-reversed-3.html ol-reversed-3-ref.html
 == bullet-space-1.html bullet-space-1-ref.html
 == bullet-space-2.html bullet-space-2-ref.html
 == bullet-intrinsic-isize-1.html bullet-intrinsic-isize-1-ref.html
rename from layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-horiz-001.html
rename to layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-horiz-001a.html
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-horiz-001.html
copy to layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-horiz-001b.html
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-horiz-001.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-horiz-001b.html
@@ -1,16 +1,16 @@
 <!DOCTYPE html>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <!-- Testcase for how we compute the baseline of a horizontal flex container
-     with several flex items, none of which have "align-self:baseline".  The
-     spec says this about this case:
+     with several "order"-reordered flex items, none of which have
+    "align-self:baseline".  The spec says this about this case:
        ...if the flex container has at least one flex item, and its
        first flex item has a baseline parallel to the flex
        container's main axis, the flex container's main-axis
        baseline is that baseline.
 -->
 <html>
 <head>
   <title>CSS Test: Testing the baseline of a horizontal flex container whose flex items are not baseline-aligned</title>
@@ -26,22 +26,24 @@
     .smallFont {
       font-size: 10px;
       line-height: 10px;
     }
     .bigFont {
       font-size: 20px;
       line-height: 20px;
     }
+    .smallOrder { order: -1 }
+    .bigOrder { order: 30 }
   </style>
 </head>
 <body>
   a
   <div class="flexContainer">
-    <div class="smallFont">b</div
-    ><div class="bigFont">c</div>
+    <div class="bigFont">c</div
+    ><div class="smallFont smallOrder">b</div>
   </div>
   <div class="flexContainer">
-    <div class="bigFont">d</div
-    ><div class="smallFont">e</div>
+    <div class="smallFont bigOrder">e</div
+    ><div class="bigFont">d</div>
   </div>
 </body>
 </html>
rename from layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-vert-001.html
rename to layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-vert-001a.html
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-vert-001.html
copy to layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-vert-001b.html
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-vert-001.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-vert-001b.html
@@ -1,16 +1,16 @@
 <!DOCTYPE html>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <!-- Testcase for how we compute the baseline of a vertical flex container
-     with several flex items, none of which have "align-self:baseline".  The
-     spec says this about this case:
+     with several "order"-reordered flex items, none of which have
+     "align-self:baseline".  The spec says this about this case:
        ...if the flex container has at least one flex item, and its
        first flex item has a baseline parallel to the flex
        container's main axis, the flex container's main-axis
        baseline is that baseline.
 -->
 <html>
 <head>
   <title>CSS Test: Testing the baseline of a vertical flex container whose flex items are not baseline-aligned</title>
@@ -36,22 +36,24 @@
       line-height: 10px;
       /* Baseline is 0.8em = 8px from top */
     }
     .bigFont {
       font-size: 20px;
       line-height: 20px;
       /* Baseline is 0.8em = 16px from top */
     }
+    .smallOrder { order: -1 }
+    .bigOrder { order: 30 }
   </style>
 </head>
 <body>
   a
   <div class="flexContainer">
-    <div class="smallFont">b</div
-    ><div class="bigFont">c</div>
+    <div class="bigFont">c</div
+    ><div class="smallFont smallOrder">b</div>
   </div>
   <div class="flexContainer">
-    <div class="bigFont">d</div
-    ><div class="smallFont">e</div>
+    <div class="smallFont bigOrder">e</div
+    ><div class="bigFont">d</div>
   </div>
 </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/reftest-stylo.list
+++ b/layout/reftests/w3c-css/submitted/flexbox/reftest-stylo.list
@@ -40,18 +40,20 @@
 == flexbox-align-self-vert-rtl-003.xhtml flexbox-align-self-vert-rtl-003.xhtml
 == flexbox-align-self-vert-rtl-004.xhtml flexbox-align-self-vert-rtl-004.xhtml
 
 # Tests for computing the baseline of a flex container
 == flexbox-baseline-align-self-baseline-horiz-001.html flexbox-baseline-align-self-baseline-horiz-001.html
 == flexbox-baseline-align-self-baseline-vert-001.html flexbox-baseline-align-self-baseline-vert-001.html
 == flexbox-baseline-empty-001a.html flexbox-baseline-empty-001a.html
 == flexbox-baseline-empty-001b.html flexbox-baseline-empty-001b.html
-== flexbox-baseline-multi-item-horiz-001.html flexbox-baseline-multi-item-horiz-001.html
-== flexbox-baseline-multi-item-vert-001.html flexbox-baseline-multi-item-vert-001.html
+== flexbox-baseline-multi-item-horiz-001a.html flexbox-baseline-multi-item-horiz-001a.html
+== flexbox-baseline-multi-item-horiz-001b.html flexbox-baseline-multi-item-horiz-001b.html
+== flexbox-baseline-multi-item-vert-001a.html flexbox-baseline-multi-item-vert-001a.html
+== flexbox-baseline-multi-item-vert-001b.html flexbox-baseline-multi-item-vert-001b.html
 == flexbox-baseline-multi-line-horiz-001.html flexbox-baseline-multi-line-horiz-001.html
 == flexbox-baseline-multi-line-horiz-002.html flexbox-baseline-multi-line-horiz-002.html
 == flexbox-baseline-multi-line-horiz-003.html flexbox-baseline-multi-line-horiz-003.html
 == flexbox-baseline-multi-line-horiz-004.html flexbox-baseline-multi-line-horiz-004.html
 == flexbox-baseline-multi-line-vert-001.html flexbox-baseline-multi-line-vert-001.html
 == flexbox-baseline-multi-line-vert-002.html flexbox-baseline-multi-line-vert-002.html
 == flexbox-baseline-single-item-001a.html flexbox-baseline-single-item-001a.html
 == flexbox-baseline-single-item-001b.html flexbox-baseline-single-item-001b.html
--- a/layout/reftests/w3c-css/submitted/flexbox/reftest.list
+++ b/layout/reftests/w3c-css/submitted/flexbox/reftest.list
@@ -41,18 +41,20 @@ fuzzy-if(Android,158,32) == flexbox-alig
 
 == flexbox-align-items-center-nested-001.html flexbox-align-items-center-nested-001-ref.html
 
 # Tests for computing the baseline of a flex container
 == flexbox-baseline-align-self-baseline-horiz-001.html flexbox-baseline-align-self-baseline-horiz-001-ref.html
 == flexbox-baseline-align-self-baseline-vert-001.html flexbox-baseline-align-self-baseline-vert-001-ref.html
 == flexbox-baseline-empty-001a.html flexbox-baseline-empty-001-ref.html
 == flexbox-baseline-empty-001b.html flexbox-baseline-empty-001-ref.html
-== flexbox-baseline-multi-item-horiz-001.html flexbox-baseline-multi-item-horiz-001-ref.html
-== flexbox-baseline-multi-item-vert-001.html flexbox-baseline-multi-item-vert-001-ref.html
+== flexbox-baseline-multi-item-horiz-001a.html flexbox-baseline-multi-item-horiz-001-ref.html
+== flexbox-baseline-multi-item-horiz-001b.html flexbox-baseline-multi-item-horiz-001-ref.html
+== flexbox-baseline-multi-item-vert-001a.html flexbox-baseline-multi-item-vert-001-ref.html
+== flexbox-baseline-multi-item-vert-001b.html flexbox-baseline-multi-item-vert-001-ref.html
 == flexbox-baseline-multi-line-horiz-001.html flexbox-baseline-multi-line-horiz-001-ref.html
 == flexbox-baseline-multi-line-horiz-002.html flexbox-baseline-multi-line-horiz-002-ref.html
 == flexbox-baseline-multi-line-horiz-003.html flexbox-baseline-multi-line-horiz-003-ref.html
 == flexbox-baseline-multi-line-horiz-004.html flexbox-baseline-multi-line-horiz-004-ref.html
 == flexbox-baseline-multi-line-vert-001.html flexbox-baseline-multi-line-vert-001-ref.html
 == flexbox-baseline-multi-line-vert-002.html flexbox-baseline-multi-line-vert-002-ref.html
 == flexbox-baseline-single-item-001a.html flexbox-baseline-single-item-001-ref.html
 == flexbox-baseline-single-item-001b.html flexbox-baseline-single-item-001-ref.html
--- a/layout/style/test/mochitest.ini
+++ b/layout/style/test/mochitest.ini
@@ -184,16 +184,17 @@ skip-if = toolkit == 'android' #bug 5366
 [test_descriptor_syntax_errors.html]
 [test_dont_use_document_colors.html]
 [test_dynamic_change_causing_reflow.html]
 [test_exposed_prop_accessors.html]
 [test_extra_inherit_initial.html]
 [test_flexbox_child_display_values.xhtml]
 [test_flexbox_flex_grow_and_shrink.html]
 [test_flexbox_flex_shorthand.html]
+[test_flexbox_focus_order.html]
 [test_flexbox_layout.html]
 support-files = flexbox_layout_testcases.js
 [test_flexbox_order.html]
 [test_flexbox_order_abspos.html]
 [test_flexbox_order_table.html]
 [test_flexbox_reflow_counts.html]
 [test_font_face_parser.html]
 [test_font_family_parsing.html]
new file mode 100644
--- /dev/null
+++ b/layout/style/test/test_flexbox_focus_order.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=812687
+-->
+<head>
+  <title>Test for Bug 812687: focus order of reordered flex items</title>
+  <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+  <style>
+    .container { display: flex; }
+
+    #focus1 { background: yellow;    }
+    #focus2 { background: lightgray; }
+    #focus3 { background: orange;    }
+    #focus4 { background: lightblue; }
+    #focus5 { background: pink;      }
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=812687">Mozilla Bug 812687</a>
+<p id="display">
+  <a href="#" id="beforeContainer">Link before container</a>
+  <!-- This flex container's children are reordered visually with the "order"
+       CSS property, but their focus order (when tabbing through them) should
+       match their DOM order. So, #focus1 should receive focus before the other
+       flex items, even though it isn't visually the first flex item.  And so
+       on, up to #focus5, which is visually first (due to its negative "order"
+       value) but should be focused last (due to being last in the DOM). -->
+  <div class="container">
+    <a href="#" id="focus1">1</a>
+    <div><a href="#" id="focus2">2</a></div>
+    <div style="order: 100"><a href="#" id="focus3">3</a></div>
+    <div><a href="#" id="focus4">4</a></div>
+    <a href="#" id="focus5" style="order: -1">5</a>
+  </div>
+</p>
+<div id="content" style="display: none"></div>
+
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for Bug 812687 **/
+
+const gKeyCodeForTab = 9;
+const gExpectedFocusedIds = [
+  "focus1",
+  "focus2",
+  "focus3",
+  "focus4",
+  "focus5"
+];
+
+function doTest() {
+  // First, we focus something just before the flex container:
+  document.getElementById('beforeContainer').focus();
+  is(document.activeElement, document.getElementById('beforeContainer'),
+     "explicitly-focused link should gain focus");
+
+  // And then we advance focus across the focusable things in the flex container
+  // and check that we traverse them in the expected order:
+  for (let expectedId of gExpectedFocusedIds) {
+    SpecialPowers.DOMWindowUtils.sendKeyEvent('keypress', gKeyCodeForTab, 0, 0);
+    is(document.activeElement, document.getElementById(expectedId),
+       "expecting element '#" + expectedId + "' to be focused");
+  }
+
+  SimpleTest.finish();
+}
+
+SimpleTest.waitForExplicitFinish();
+addLoadEvent(doTest);
+
+</script>
+</pre>
+</body>
+</html>