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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Test serialization of CSS Align shorthand properties</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css-align/">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<script>
var initial_values = {
alignContent: "normal",
alignItems: "normal",
alignSelf: "auto",
justifyContent: "normal",
justifyItems: "legacy",
justifySelf: "auto",
};
var place_content_test_cases = [
{
alignContent: "center",
shorthand: "center normal",
},
{
alignContent: "baseline safe right",
shorthand: "",
},
{
justifyContent: "safe start",
shorthand: "normal safe start",
},
{
justifyContent: "unsafe start",
shorthand: ["normal unsafe start"],
},
{
justifyContent: "space-evenly start",
shorthand: "",
},
{
alignContent: "start",
justifyContent: "end",
shorthand: "start end",
},
];
var place_items_test_cases = [
{
alignItems: "center",
shorthand: "center legacy",
},
{
alignItems: "baseline",
shorthand: "baseline legacy",
},
{
justifyItems: "safe start",
shorthand: "normal safe start",
},
{
justifyItems: "unsafe start",
shorthand: ["normal unsafe start"],
},
{
justifyItems: "stretch",
shorthand: "normal stretch",
},
{
justifyItems: "left legacy",
shorthand: "normal legacy left",
},
{
alignItems: "stretch",
justifyItems: "end",
shorthand: "stretch end",
},
];
var place_self_test_cases = [
{
alignSelf: "self-end safe",
shorthand: "",
},
{
justifySelf: "unsafe start",
shorthand: ["auto start", "auto unsafe start"],
},
{
justifySelf: "last baseline start",
shorthand: "",
},
{
alignSelf: "baseline",
justifySelf: "last baseline",
shorthand: "baseline last baseline",
},
];
function run_tests(test_cases, shorthand, subproperties) {
test_cases.forEach(function(test_case) {
test(function() {
var element = document.createElement('div');
document.body.appendChild(element);
subproperties.forEach(function(longhand) {
element.style[longhand] = test_case[longhand] ||
initial_values[longhand];
});
if (Array.isArray(test_case.shorthand)) {
assert_in_array(element.style[shorthand], test_case.shorthand);
} else {
assert_equals(element.style[shorthand], test_case.shorthand);
}
}, "test shorthand serialization " + JSON.stringify(test_case));
});
}
run_tests(place_content_test_cases, "placeContent", [
"alignContent", "justifyContent"]);
run_tests(place_items_test_cases, "placeItems", [
"alignItems", "justifyItems"]);
run_tests(place_self_test_cases, "placeSelf", [
"alignSelf", "justifySelf"]);
</script>
</body>
</html>
|
