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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Box Alignment Test: grid-column-gap parsing</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
.columnGapPx { grid-column-gap: 12px; }
#columnGapEm { grid-column-gap: 2em; font: 10px/1 Monospace; }
#columnGapVw { grid-column-gap: 2vw; }
#columnGapPercent { grid-column-gap: 15%; }
#columnGapCalc { grid-column-gap: calc(10px + 4px); }
#columnGapCalcFixedPercent { grid-column-gap: calc(5px + 10%); }
.columnGapInitial { grid-column-gap: initial; }
.columnGapInherit { grid-column-gap: inherit; }
#invalidColumnGapNegative { grid-column-gap: -10px; }
#invalidColumnGapMaxContent { grid-column-gap: max-content; }
#invalidColumnGapNone { grid-column-gap: none; }
#invalidColumnGapMultiple { grid-column-gap: 10px 1px; }
#invalidColumnGapAngle { grid-column-gap: 3rad; }
#invalidColumnGapResolution { grid-column-gap: 2dpi; }
#invalidColumnGapTime { grid-column-gap: 200ms; }
</style>
<body>
<div id="log"></div>
<div id="default"></div>
<div id="columnGapPx" class="columnGapPx"></div>
<div id="columnGapEm"></div>
<div id="columnGapVw"></div>
<div id="columnGapPercent"></div>
<div id="columnGapCalc"></div>
<div id="columnGapCalcFixedPercent"></div>
<div id="columnGapInitial" class="columnGapInitial"></div>
<div class="columnGapPx">
<div id="columnGapInitialPx" class="columnGapInitial"></div>
</div>
<div id="columnGapInherit" class="columnGapInherit"></div>
<div class="columnGapPx">
<div id="columnGapInheritPx" class="columnGapInherit"></div>
</div>
<div id="invalidColumnGapNegative"></div>
<div id="invalidColumnGapMaxContent"></div>
<div id="invalidColumnGapNone"></div>
<div id="invalidColumnGapMultiple"></div>
<div id="invalidColumnGapAngle"></div>
<div id="invalidColumnGapResolution"></div>
<div id="invalidColumnGapTime"></div>
<script>
test(
function(){
var target = document.getElementById("default");
assert_equals(getComputedStyle(target).columnGap, "normal");
}, "Default grid-column-gap is 'normal'");
test(
function(){
var target = document.getElementById("columnGapPx");
assert_equals(getComputedStyle(target).columnGap, "12px");
}, "grid-column-gap accepts pixels");
test(
function(){
var target = document.getElementById("columnGapEm");
assert_equals(getComputedStyle(target).columnGap, "20px");
}, "grid-column-gap accepts em");
test(
function(){
var target = document.getElementById("columnGapVw");
// The columnGap size would depend on the viewport width, so to make the test pass
// in any window size we just check it's not "normal".
assert_not_equals(getComputedStyle(target).columnGap, "normal");
}, "grid-column-gap accepts vw");
test(
function(){
var target = document.getElementById("columnGapPercent");
assert_equals(getComputedStyle(target).columnGap, "15%");
}, "grid-column-gap accepts percentage");
test(
function(){
var target = document.getElementById("columnGapCalc");
assert_equals(getComputedStyle(target).columnGap, "14px");
}, "grid-column-gap accepts calc()");
test(
function(){
var target = document.getElementById("columnGapCalcFixedPercent");
assert_equals(getComputedStyle(target).columnGap, "calc(10% + 5px)");
}, "grid-column-gap accepts calc() mixing fixed and percentage values");
test(
function(){
var target = document.getElementById("columnGapInitial");
assert_equals(getComputedStyle(target).columnGap, "normal");
}, "Initial grid-column-gap is 'normal'");
test(
function(){
var target = document.getElementById("columnGapInitialPx");
assert_equals(getComputedStyle(target).columnGap, "normal");
}, "Initial grid-column-gap is 'normal' 2");
test(
function(){
var target = document.getElementById("columnGapInherit");
assert_equals(getComputedStyle(target).columnGap, "normal");
}, "Initial inherited grid-column-gap is 'normal'");
test(
function(){
var target = document.getElementById("columnGapInheritPx");
assert_equals(getComputedStyle(target).columnGap, "12px");
}, "grid-column-gap is inheritable");
test(
function(){
var target = document.getElementById("invalidColumnGapNegative");
assert_equals(getComputedStyle(target).columnGap, "normal");
}, "Negative grid-column-gap is invalid");
test(
function(){
var target = document.getElementById("invalidColumnGapMaxContent");
assert_equals(getComputedStyle(target).columnGap, "normal");
}, "'max-content' grid-column-gap is invalid");
test(
function(){
var target = document.getElementById("invalidColumnGapNone");
assert_equals(getComputedStyle(target).columnGap, "normal");
}, "'none' grid-column-gap is invalid");
test(
function(){
var target = document.getElementById("invalidColumnGapMultiple");
assert_equals(getComputedStyle(target).columnGap, "normal");
}, "grid-column-gap with multiple values is invalid");
test(
function(){
var target = document.getElementById("invalidColumnGapAngle");
assert_equals(getComputedStyle(target).columnGap, "normal");
}, "Angle grid-column-gap is invalid");
test(
function(){
var target = document.getElementById("invalidColumnGapResolution");
assert_equals(getComputedStyle(target).columnGap, "normal");
}, "Resolution grid-column-gap is invalid");
test(
function(){
var target = document.getElementById("invalidColumnGapTime");
assert_equals(getComputedStyle(target).columnGap, "normal");
}, "Time grid-column-gap is invalid");
</script>
</body>
|
