зеркало из https://github.com/mozilla/gecko-dev.git
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 --HG-- rename : 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 rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-horiz-001.html => layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-horiz-001b.html rename : 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 rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-vert-001.html => layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-vert-001b.html
This commit is contained in:
Daniel Holbert
Родитель
754dd1bf03
Коммит
6f23054538
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -2,6 +2,7 @@ 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
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
<!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 "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>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines">
|
||||
<link rel="match" href="flexbox-baseline-multi-item-horiz-001-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.flexContainer {
|
||||
display: inline-flex;
|
||||
background: lightblue;
|
||||
}
|
||||
.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="bigFont">c</div
|
||||
><div class="smallFont smallOrder">b</div>
|
||||
</div>
|
||||
<div class="flexContainer">
|
||||
<div class="smallFont bigOrder">e</div
|
||||
><div class="bigFont">d</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!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 "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>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines">
|
||||
<link rel="match" href="flexbox-baseline-multi-item-vert-001-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" type="text/css" href="support/ahem.css" />
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
font: 20px Ahem;
|
||||
line-height: 20px;
|
||||
/* Baseline is 0.8em = 16px from top */
|
||||
}
|
||||
.flexContainer {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
background: lightblue;
|
||||
}
|
||||
.smallFont {
|
||||
font-size: 10px;
|
||||
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="bigFont">c</div
|
||||
><div class="smallFont smallOrder">b</div>
|
||||
</div>
|
||||
<div class="flexContainer">
|
||||
<div class="smallFont bigOrder">e</div
|
||||
><div class="bigFont">d</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -45,8 +45,10 @@
|
|||
== 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
|
||||
|
|
|
|||
|
|
@ -46,8 +46,10 @@ fuzzy-if(Android,158,32) == flexbox-align-self-vert-rtl-001.xhtml flexbox-align
|
|||
== 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
|
||||
|
|
|
|||
|
|
@ -189,6 +189,7 @@ skip-if = toolkit == 'android' #bug 536603
|
|||
[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]
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Загрузка…
Ссылка в новой задаче