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
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>