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 PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script>
if (window.testRunner)
testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
</script>
<link href="resources/grid.css" rel="stylesheet">
<style>
.gridAutoFlowInherit {
grid-auto-flow: inherit;
}
/* Bad values. */
.gridAutoFlowRows {
grid-auto-flow: rows;
}
.gridAutoFlowColumns {
grid-auto-flow: columns;
}
</style>
<script src="../js/resources/js-test-pre.js"></script>
</head>
<body>
<div class="grid" id="gridInitial"></div>
<div class="grid gridAutoFlowNone" id="gridAutoFlowNone"></div>
<div class="grid gridAutoFlowColumn" id="gridAutoFlowColumn"></div>
<div class="grid gridAutoFlowRow" id="gridAutoFlowRow"></div>
<div class="grid gridAutoFlowColumn">
<div class="grid gridAutoFlowInherit" id="gridAutoFlowInherit"></div>
</div>
<div class="grid gridAutoFlowColumn">
<div><div class="grid gridAutoFlowInherit" id="gridAutoFlowNoInherit"></div><div>
</div>
<div class="grid gridAutoFlowColumns" id="gridAutoFlowColumns"></div>
<div class="grid gridAutoFlowRows" id="gridAutoFlowRows"></div>
<script>
description('Test that setting and getting grid-auto-flow works as expected');
debug("Test getting auto-flow set through CSS");
var gridAutoFlowNone = document.getElementById("gridAutoFlowNone");
shouldBe("window.getComputedStyle(gridAutoFlowNone, '').getPropertyValue('grid-auto-flow')", "'none'");
var gridAutoFlowColumn = document.getElementById("gridAutoFlowColumn");
shouldBe("window.getComputedStyle(gridAutoFlowColumn, '').getPropertyValue('grid-auto-flow')", "'column'");
var gridAutoFlowRow = document.getElementById("gridAutoFlowRow");
shouldBe("window.getComputedStyle(gridAutoFlowRow, '').getPropertyValue('grid-auto-flow')", "'row'");
var gridAutoFlowColumns = document.getElementById("gridAutoFlowColumns");
shouldBe("window.getComputedStyle(gridAutoFlowColumns, '').getPropertyValue('grid-auto-flow')", "'none'");
var gridAutoFlowRows = document.getElementById("gridAutoFlowRows");
shouldBe("window.getComputedStyle(gridAutoFlowRows, '').getPropertyValue('grid-auto-flow')", "'none'");
var gridAutoFlowInherit = document.getElementById("gridAutoFlowInherit");
shouldBe("window.getComputedStyle(gridAutoFlowInherit, '').getPropertyValue('grid-auto-flow')", "'column'");
var gridAutoFlowNoInherit = document.getElementById("gridAutoFlowNoInherit");
shouldBe("window.getComputedStyle(gridAutoFlowNoInherit, '').getPropertyValue('grid-auto-flow')", "'none'");
debug("");
debug("Test the initial value");
element = document.createElement("div");
document.body.appendChild(element);
shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'none'");
debug("");
debug("Test getting and setting grid-auto-flow through JS");
element.style.gridAutoFlow = "column";
shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'column'");
element = document.createElement("div");
document.body.appendChild(element);
element.style.gridAutoFlow = "row";
shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'row'");
debug("");
debug("Test getting and setting bad values for grid-auto-flow through JS");
element.style.gridAutoFlow = "noone";
shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'row'");
debug("");
debug("Test setting grid-auto-flow to 'initial' through JS");
// Reusing the value so that we can check that it is set back to its initial value.
element.style.gridAutoFlow = "initial";
shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'none'");
</script>
</body>
</html>
|
