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) draft
authorDaniel Holbert <dholbert@cs.stanford.edu>
Wed, 05 Apr 2017 16:07:17 -0700
changeset 556482 5d45c53fb5908310057c6b385d41a16bbf9289d8
parent 556481 48a5d76a0d1227e53bd3dfff5f3389707065a31d
child 622903 4ebb1c4909c179fbb36586059fb860a0535b3ea1
push id52563
push userdholbert@mozilla.com
push dateWed, 05 Apr 2017 23:07:53 +0000
bugs812687
milestone55.0a1
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.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.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>