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
|
<!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">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel='stylesheet' href='/resources/testharness.css'>
</head>
<body>
<script>
var initial_values = {
alignContent: "normal",
alignItems: "normal",
alignSelf: "auto",
justifyContent: "normal",
justifyItems: "auto",
justifySelf: "auto",
};
var place_content_test_cases = [
{
alignContent: "center",
shorthand: "center normal",
},
{
alignContent: "baseline right safe",
shorthand: "",
},
{
justifyContent: "start safe",
shorthand: "",
},
{
justifyContent: "space-evenly start",
shorthand: "",
},
{
alignContent: "start",
justifyContent: "end",
shorthand: "start end",
},
];
var place_items_test_cases = [
{
alignItems: "center",
shorthand: "center auto",
},
{
alignItems: "baseline",
shorthand: "baseline auto",
},
{
justifyItems: "start safe",
shorthand: "",
},
{
justifyItems: "stretch",
shorthand: "normal stretch",
},
{
justifyItems: "left legacy",
shorthand: "",
},
{
alignItems: "stretch",
justifyItems: "end",
shorthand: "stretch end",
},
];
var place_self_test_cases = [
{
alignSelf: "right",
shorthand: "right auto",
},
{
alignSelf: "self-end safe",
shorthand: "",
},
{
justifySelf: "unsafe start",
shorthand: "",
},
{
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];
});
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>
|
