1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Display: reading-order-items with value grid-order</title>
<link rel="help" href="https://drafts.csswg.org/css-display-4/#reading-order-items">
<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src='../../resources/shadow-dom.js'></script>
<script src="../../resources/focus-utils.js"></script>
<style>
.wrapper {
display: grid;
reading-order-items: grid-order;
}
</style>
<div class="test-case" data-expect="a1,b1,c1,d1,e1"
data-description="Grid items without `order` property">
<div class="wrapper">
<button id="a1">Item A</button>
<button id="b1">Item B</button>
<button id="c1">Item C</button>
</div>
<div class="wrapper">
<button id="d1">Item D</button>
<button id="e1">Item E</button>
</div>
</div>
<div class="test-case" data-expect="b2,c2,a2,e2,d2"
data-description="Grid items with `order` property">
<div class="wrapper">
<button id="a2" style="order: 2">Item A</button>
<button id="b2">Item B</button>
<button id="c2">Item C</button>
</div>
<div class="wrapper">
<button id="d2">Item D</button>
<button id="e2" style="order: -1">Item E</button>
</div>
</div>
<div class="test-case" data-expect="c3,a3,b3,d3,f3,e3"
data-description="Grid items with `order` property and tabindex">
<div class="wrapper">
<button id="a3" style="order: -1">Item A</button>
<button id="b3" style="order: 0">Item B</button>
<button id="c3" tabindex="1" style="order: -1">Item C</button>
</div>
<div class="wrapper">
<button id="d3" tabindex="1" style="order: 1">Item D</button>
<button id="e3" tabindex="2" style="order: 0">Item E</button>
<button id="f3" tabindex="2" style="order: -1">Item F</button>
</div>
</div>
<div class="test-case" data-expect="order1,order2,order3,order4"
data-description="Items in display contents are sorted in same grid container.">
<div class="wrapper">
<div style="display: contents">
<button id="order3" style="order: 3">Order 3</button>
<button id="order1" style="order: 1">Order 1</button>
<div style="display: contents">
<button id="order4" style="order: 4">Order 4</button>
<button id="order2" style="order: 2">Order 2</button>
</div>
</div>
</div>
</div>
<div class="test-case" data-expect="d4,b4,c4,a4"
data-description="Items in display block are not in parent grid container.">
<div class="wrapper">
<button id="a4" style="order: 3">A</button>
<div style="order: 1" style="display: block">
<button id="b4" style="order: 2">B</button>
<button id="c4" style="order: -1">C</button>
</div>
<button id="d4">D</button>
</div>
</div>
<script>
runFocusTestCases();
</script>
|
