| Differences between
and this patch
- a/LayoutTests/ChangeLog +10 lines
Lines 1-3 a/LayoutTests/ChangeLog_sec1
1
2021-03-16  Cathie Chen  <cathiechen@igalia.com>
2
3
        Import css/css-contain test from WPT
4
        https://bugs.webkit.org/show_bug.cgi?id=223254
5
6
        Reviewed by NOBODY (OOPS!).
7
8
        * TestExpectations:
9
        * tests-options.json:
10
1
2021-03-15  Imanol Fernandez  <ifernandez@igalia.com>
11
2021-03-15  Imanol Fernandez  <ifernandez@igalia.com>
2
12
3
        Split WebXR features into enabledFeatures, supportedFeatures and requestedFeatures
13
        Split WebXR features into enabledFeatures, supportedFeatures and requestedFeatures
- a/LayoutTests/imported/w3c/ChangeLog +671 lines
Lines 1-3 a/LayoutTests/imported/w3c/ChangeLog_sec1
1
2021-03-16  Cathie Chen  <cathiechen@igalia.com>
2
3
        Import css/css-contain test from WPT
4
        https://bugs.webkit.org/show_bug.cgi?id=223254
5
6
        Reviewed by NOBODY (OOPS!).
7
8
        Import web-platform-tests/css/css-contain from upstream 868fe4c01aef5e27fedc51ea7d938cf556cffec2.
9
10
        * resources/import-expectations.json:
11
        * resources/resource-files.json:
12
        * web-platform-tests/css/css-contain/META.yml: Added.
13
        * web-platform-tests/css/css-contain/contain-animation-001-expected.xht: Added.
14
        * web-platform-tests/css/css-contain/contain-animation-001.html: Added.
15
        * web-platform-tests/css/css-contain/contain-chrome-thcrash-001-expected.txt: Added.
16
        * web-platform-tests/css/css-contain/contain-chrome-thcrash-001.html: Added.
17
        * web-platform-tests/css/css-contain/contain-content-001-expected.html: Added.
18
        * web-platform-tests/css/css-contain/contain-content-001.html: Added.
19
        * web-platform-tests/css/css-contain/contain-content-002-expected.html: Added.
20
        * web-platform-tests/css/css-contain/contain-content-002.html: Added.
21
        * web-platform-tests/css/css-contain/contain-content-003-expected.xht: Added.
22
        * web-platform-tests/css/css-contain/contain-content-003.html: Added.
23
        * web-platform-tests/css/css-contain/contain-content-004-expected.html: Added.
24
        * web-platform-tests/css/css-contain/contain-content-004.html: Added.
25
        * web-platform-tests/css/css-contain/contain-content-011-expected.html: Added.
26
        * web-platform-tests/css/css-contain/contain-content-011.html: Added.
27
        * web-platform-tests/css/css-contain/contain-crash.html: Added.
28
        * web-platform-tests/css/css-contain/contain-flexbox-outline-expected.txt: Added.
29
        * web-platform-tests/css/css-contain/contain-flexbox-outline.html: Added.
30
        * web-platform-tests/css/css-contain/contain-layout-001-expected.html: Added.
31
        * web-platform-tests/css/css-contain/contain-layout-001.html: Added.
32
        * web-platform-tests/css/css-contain/contain-layout-002-expected.xht: Added.
33
        * web-platform-tests/css/css-contain/contain-layout-002.html: Added.
34
        * web-platform-tests/css/css-contain/contain-layout-003-expected.xht: Added.
35
        * web-platform-tests/css/css-contain/contain-layout-003.html: Added.
36
        * web-platform-tests/css/css-contain/contain-layout-004-expected.xht: Added.
37
        * web-platform-tests/css/css-contain/contain-layout-004.html: Added.
38
        * web-platform-tests/css/css-contain/contain-layout-005-expected.xht: Added.
39
        * web-platform-tests/css/css-contain/contain-layout-005.html: Added.
40
        * web-platform-tests/css/css-contain/contain-layout-006-expected.xht: Added.
41
        * web-platform-tests/css/css-contain/contain-layout-006.html: Added.
42
        * web-platform-tests/css/css-contain/contain-layout-007-expected.xht: Added.
43
        * web-platform-tests/css/css-contain/contain-layout-007.html: Added.
44
        * web-platform-tests/css/css-contain/contain-layout-009-expected.xht: Added.
45
        * web-platform-tests/css/css-contain/contain-layout-009.html: Added.
46
        * web-platform-tests/css/css-contain/contain-layout-010-expected.xht: Added.
47
        * web-platform-tests/css/css-contain/contain-layout-010.html: Added.
48
        * web-platform-tests/css/css-contain/contain-layout-011-expected.xht: Added.
49
        * web-platform-tests/css/css-contain/contain-layout-011.html: Added.
50
        * web-platform-tests/css/css-contain/contain-layout-012-expected.xht: Added.
51
        * web-platform-tests/css/css-contain/contain-layout-012.html: Added.
52
        * web-platform-tests/css/css-contain/contain-layout-013-expected.xht: Added.
53
        * web-platform-tests/css/css-contain/contain-layout-013.html: Added.
54
        * web-platform-tests/css/css-contain/contain-layout-014-expected.xht: Added.
55
        * web-platform-tests/css/css-contain/contain-layout-014.html: Added.
56
        * web-platform-tests/css/css-contain/contain-layout-016-expected.html: Added.
57
        * web-platform-tests/css/css-contain/contain-layout-016.html: Added.
58
        * web-platform-tests/css/css-contain/contain-layout-017-expected.html: Added.
59
        * web-platform-tests/css/css-contain/contain-layout-017.html: Added.
60
        * web-platform-tests/css/css-contain/contain-layout-018-expected.html: Added.
61
        * web-platform-tests/css/css-contain/contain-layout-018.html: Added.
62
        * web-platform-tests/css/css-contain/contain-layout-baseline-001-expected.xht: Added.
63
        * web-platform-tests/css/css-contain/contain-layout-baseline-001.html: Added.
64
        * web-platform-tests/css/css-contain/contain-layout-baseline-002-expected.xht: Added.
65
        * web-platform-tests/css/css-contain/contain-layout-baseline-002.html: Added.
66
        * web-platform-tests/css/css-contain/contain-layout-baseline-003-expected.xht: Added.
67
        * web-platform-tests/css/css-contain/contain-layout-baseline-003.html: Added.
68
        * web-platform-tests/css/css-contain/contain-layout-baseline-004-expected.html: Added.
69
        * web-platform-tests/css/css-contain/contain-layout-baseline-004.html: Added.
70
        * web-platform-tests/css/css-contain/contain-layout-baseline-005-expected.html: Added.
71
        * web-platform-tests/css/css-contain/contain-layout-baseline-005.html: Added.
72
        * web-platform-tests/css/css-contain/contain-layout-breaks-001-expected.html: Added.
73
        * web-platform-tests/css/css-contain/contain-layout-breaks-001.html: Added.
74
        * web-platform-tests/css/css-contain/contain-layout-breaks-002-expected.html: Added.
75
        * web-platform-tests/css/css-contain/contain-layout-breaks-002.html: Added.
76
        * web-platform-tests/css/css-contain/contain-layout-button-001-expected.html: Added.
77
        * web-platform-tests/css/css-contain/contain-layout-button-001.html: Added.
78
        * web-platform-tests/css/css-contain/contain-layout-cell-001-expected.html: Added.
79
        * web-platform-tests/css/css-contain/contain-layout-cell-001.html: Added.
80
        * web-platform-tests/css/css-contain/contain-layout-cell-002-expected.html: Added.
81
        * web-platform-tests/css/css-contain/contain-layout-cell-002.html: Added.
82
        * web-platform-tests/css/css-contain/contain-layout-containing-block-absolute-001-expected.html: Added.
83
        * web-platform-tests/css/css-contain/contain-layout-containing-block-absolute-001.html: Added.
84
        * web-platform-tests/css/css-contain/contain-layout-containing-block-fixed-001-expected.html: Added.
85
        * web-platform-tests/css/css-contain/contain-layout-containing-block-fixed-001.html: Added.
86
        * web-platform-tests/css/css-contain/contain-layout-flexbox-001-expected.html: Added.
87
        * web-platform-tests/css/css-contain/contain-layout-flexbox-001.html: Added.
88
        * web-platform-tests/css/css-contain/contain-layout-formatting-context-float-001-expected.html: Added.
89
        * web-platform-tests/css/css-contain/contain-layout-formatting-context-float-001.html: Added.
90
        * web-platform-tests/css/css-contain/contain-layout-formatting-context-margin-001-expected.html: Added.
91
        * web-platform-tests/css/css-contain/contain-layout-formatting-context-margin-001.html: Added.
92
        * web-platform-tests/css/css-contain/contain-layout-grid-001-expected.html: Added.
93
        * web-platform-tests/css/css-contain/contain-layout-grid-001.html: Added.
94
        * web-platform-tests/css/css-contain/contain-layout-ifc-022-expected.html: Added.
95
        * web-platform-tests/css/css-contain/contain-layout-ifc-022.html: Added.
96
        * web-platform-tests/css/css-contain/contain-layout-ignored-cases-ib-split-001-expected.html: Added.
97
        * web-platform-tests/css/css-contain/contain-layout-ignored-cases-ib-split-001.html: Added.
98
        * web-platform-tests/css/css-contain/contain-layout-ignored-cases-no-principal-box-001-expected.html: Added.
99
        * web-platform-tests/css/css-contain/contain-layout-ignored-cases-no-principal-box-001.html: Added.
100
        * web-platform-tests/css/css-contain/contain-layout-ignored-cases-no-principal-box-002-expected.html: Added.
101
        * web-platform-tests/css/css-contain/contain-layout-ignored-cases-no-principal-box-002.html: Added.
102
        * web-platform-tests/css/css-contain/contain-layout-ignored-cases-no-principal-box-003-expected.html: Added.
103
        * web-platform-tests/css/css-contain/contain-layout-ignored-cases-no-principal-box-003.html: Added.
104
        * web-platform-tests/css/css-contain/contain-layout-independent-formatting-context-001-expected.html: Added.
105
        * web-platform-tests/css/css-contain/contain-layout-independent-formatting-context-001.html: Added.
106
        * web-platform-tests/css/css-contain/contain-layout-independent-formatting-context-002-expected.html: Added.
107
        * web-platform-tests/css/css-contain/contain-layout-independent-formatting-context-002.html: Added.
108
        * web-platform-tests/css/css-contain/contain-layout-independent-formatting-context-003-expected.html: Added.
109
        * web-platform-tests/css/css-contain/contain-layout-independent-formatting-context-003.html: Added.
110
        * web-platform-tests/css/css-contain/contain-layout-ink-overflow-013-expected.html: Added.
111
        * web-platform-tests/css/css-contain/contain-layout-ink-overflow-013.html: Added.
112
        * web-platform-tests/css/css-contain/contain-layout-ink-overflow-014-expected.html: Added.
113
        * web-platform-tests/css/css-contain/contain-layout-ink-overflow-014.html: Added.
114
        * web-platform-tests/css/css-contain/contain-layout-ink-overflow-015-expected.html: Added.
115
        * web-platform-tests/css/css-contain/contain-layout-ink-overflow-015.html: Added.
116
        * web-platform-tests/css/css-contain/contain-layout-ink-overflow-016-expected.html: Added.
117
        * web-platform-tests/css/css-contain/contain-layout-ink-overflow-016.html: Added.
118
        * web-platform-tests/css/css-contain/contain-layout-ink-overflow-017-expected.html: Added.
119
        * web-platform-tests/css/css-contain/contain-layout-ink-overflow-017.html: Added.
120
        * web-platform-tests/css/css-contain/contain-layout-ink-overflow-018-expected.html: Added.
121
        * web-platform-tests/css/css-contain/contain-layout-ink-overflow-018.html: Added.
122
        * web-platform-tests/css/css-contain/contain-layout-ink-overflow-019-expected.html: Added.
123
        * web-platform-tests/css/css-contain/contain-layout-ink-overflow-019.html: Added.
124
        * web-platform-tests/css/css-contain/contain-layout-ink-overflow-020-expected.html: Added.
125
        * web-platform-tests/css/css-contain/contain-layout-ink-overflow-020.html: Added.
126
        * web-platform-tests/css/css-contain/contain-layout-overflow-001-expected.html: Added.
127
        * web-platform-tests/css/css-contain/contain-layout-overflow-001.html: Added.
128
        * web-platform-tests/css/css-contain/contain-layout-overflow-002-expected.html: Added.
129
        * web-platform-tests/css/css-contain/contain-layout-overflow-002.html: Added.
130
        * web-platform-tests/css/css-contain/contain-layout-size-003-expected.html: Added.
131
        * web-platform-tests/css/css-contain/contain-layout-size-003.html: Added.
132
        * web-platform-tests/css/css-contain/contain-layout-stacking-context-001-expected.html: Added.
133
        * web-platform-tests/css/css-contain/contain-layout-stacking-context-001.html: Added.
134
        * web-platform-tests/css/css-contain/contain-layout-suppress-baseline-001-expected.html: Added.
135
        * web-platform-tests/css/css-contain/contain-layout-suppress-baseline-001.html: Added.
136
        * web-platform-tests/css/css-contain/contain-layout-suppress-baseline-002-expected.html: Added.
137
        * web-platform-tests/css/css-contain/contain-layout-suppress-baseline-002.html: Added.
138
        * web-platform-tests/css/css-contain/contain-paint-001-expected.html: Added.
139
        * web-platform-tests/css/css-contain/contain-paint-001.html: Added.
140
        * web-platform-tests/css/css-contain/contain-paint-002-expected.html: Added.
141
        * web-platform-tests/css/css-contain/contain-paint-002.html: Added.
142
        * web-platform-tests/css/css-contain/contain-paint-004-expected.html: Added.
143
        * web-platform-tests/css/css-contain/contain-paint-004.html: Added.
144
        * web-platform-tests/css/css-contain/contain-paint-005-expected.html: Added.
145
        * web-platform-tests/css/css-contain/contain-paint-005.html: Added.
146
        * web-platform-tests/css/css-contain/contain-paint-006-expected.html: Added.
147
        * web-platform-tests/css/css-contain/contain-paint-006.html: Added.
148
        * web-platform-tests/css/css-contain/contain-paint-007-expected.html: Added.
149
        * web-platform-tests/css/css-contain/contain-paint-007.html: Added.
150
        * web-platform-tests/css/css-contain/contain-paint-008-expected.html: Added.
151
        * web-platform-tests/css/css-contain/contain-paint-008.html: Added.
152
        * web-platform-tests/css/css-contain/contain-paint-009-expected.xht: Added.
153
        * web-platform-tests/css/css-contain/contain-paint-009.html: Added.
154
        * web-platform-tests/css/css-contain/contain-paint-010-expected.xht: Added.
155
        * web-platform-tests/css/css-contain/contain-paint-010.html: Added.
156
        * web-platform-tests/css/css-contain/contain-paint-011-expected.xht: Added.
157
        * web-platform-tests/css/css-contain/contain-paint-011.html: Added.
158
        * web-platform-tests/css/css-contain/contain-paint-012-expected.xht: Added.
159
        * web-platform-tests/css/css-contain/contain-paint-012.html: Added.
160
        * web-platform-tests/css/css-contain/contain-paint-014-expected.html: Added.
161
        * web-platform-tests/css/css-contain/contain-paint-014.html: Added.
162
        * web-platform-tests/css/css-contain/contain-paint-015-expected.html: Added.
163
        * web-platform-tests/css/css-contain/contain-paint-015.html: Added.
164
        * web-platform-tests/css/css-contain/contain-paint-016-expected.html: Added.
165
        * web-platform-tests/css/css-contain/contain-paint-016.html: Added.
166
        * web-platform-tests/css/css-contain/contain-paint-017-expected.html: Added.
167
        * web-platform-tests/css/css-contain/contain-paint-017.html: Added.
168
        * web-platform-tests/css/css-contain/contain-paint-018-expected.html: Added.
169
        * web-platform-tests/css/css-contain/contain-paint-018.html: Added.
170
        * web-platform-tests/css/css-contain/contain-paint-019-expected.html: Added.
171
        * web-platform-tests/css/css-contain/contain-paint-019.html: Added.
172
        * web-platform-tests/css/css-contain/contain-paint-020-expected.html: Added.
173
        * web-platform-tests/css/css-contain/contain-paint-020.html: Added.
174
        * web-platform-tests/css/css-contain/contain-paint-021-expected.html: Added.
175
        * web-platform-tests/css/css-contain/contain-paint-021.html: Added.
176
        * web-platform-tests/css/css-contain/contain-paint-022-expected.html: Added.
177
        * web-platform-tests/css/css-contain/contain-paint-022.html: Added.
178
        * web-platform-tests/css/css-contain/contain-paint-023-expected.xht: Added.
179
        * web-platform-tests/css/css-contain/contain-paint-023.html: Added.
180
        * web-platform-tests/css/css-contain/contain-paint-024-expected.xht: Added.
181
        * web-platform-tests/css/css-contain/contain-paint-024.html: Added.
182
        * web-platform-tests/css/css-contain/contain-paint-025-expected.html: Added.
183
        * web-platform-tests/css/css-contain/contain-paint-025.html: Added.
184
        * web-platform-tests/css/css-contain/contain-paint-047-expected.html: Added.
185
        * web-platform-tests/css/css-contain/contain-paint-047.html: Added.
186
        * web-platform-tests/css/css-contain/contain-paint-048-expected.xht: Added.
187
        * web-platform-tests/css/css-contain/contain-paint-048.html: Added.
188
        * web-platform-tests/css/css-contain/contain-paint-baseline-001-expected.html: Added.
189
        * web-platform-tests/css/css-contain/contain-paint-baseline-001.html: Added.
190
        * web-platform-tests/css/css-contain/contain-paint-cell-001-expected.html: Added.
191
        * web-platform-tests/css/css-contain/contain-paint-cell-001.html: Added.
192
        * web-platform-tests/css/css-contain/contain-paint-cell-002-expected.html: Added.
193
        * web-platform-tests/css/css-contain/contain-paint-cell-002.html: Added.
194
        * web-platform-tests/css/css-contain/contain-paint-clip-001-expected.html: Added.
195
        * web-platform-tests/css/css-contain/contain-paint-clip-001.html: Added.
196
        * web-platform-tests/css/css-contain/contain-paint-clip-002-expected.html: Added.
197
        * web-platform-tests/css/css-contain/contain-paint-clip-002.html: Added.
198
        * web-platform-tests/css/css-contain/contain-paint-clip-003-expected.html: Added.
199
        * web-platform-tests/css/css-contain/contain-paint-clip-003.html: Added.
200
        * web-platform-tests/css/css-contain/contain-paint-clip-004-expected.html: Added.
201
        * web-platform-tests/css/css-contain/contain-paint-clip-004.html: Added.
202
        * web-platform-tests/css/css-contain/contain-paint-clip-005-expected.html: Added.
203
        * web-platform-tests/css/css-contain/contain-paint-clip-005.html: Added.
204
        * web-platform-tests/css/css-contain/contain-paint-clip-006-expected.html: Added.
205
        * web-platform-tests/css/css-contain/contain-paint-clip-006.html: Added.
206
        * web-platform-tests/css/css-contain/contain-paint-clip-011-expected.xht: Added.
207
        * web-platform-tests/css/css-contain/contain-paint-clip-011.html: Added.
208
        * web-platform-tests/css/css-contain/contain-paint-clip-012-expected.xht: Added.
209
        * web-platform-tests/css/css-contain/contain-paint-clip-012.html: Added.
210
        * web-platform-tests/css/css-contain/contain-paint-clip-013-expected.xht: Added.
211
        * web-platform-tests/css/css-contain/contain-paint-clip-013.html: Added.
212
        * web-platform-tests/css/css-contain/contain-paint-clip-014-expected.xht: Added.
213
        * web-platform-tests/css/css-contain/contain-paint-clip-014.html: Added.
214
        * web-platform-tests/css/css-contain/contain-paint-clip-015-expected.html: Added.
215
        * web-platform-tests/css/css-contain/contain-paint-clip-015.html: Added.
216
        * web-platform-tests/css/css-contain/contain-paint-clip-016-expected.html: Added.
217
        * web-platform-tests/css/css-contain/contain-paint-clip-016.html: Added.
218
        * web-platform-tests/css/css-contain/contain-paint-clip-017-expected.html: Added.
219
        * web-platform-tests/css/css-contain/contain-paint-clip-017.html: Added.
220
        * web-platform-tests/css/css-contain/contain-paint-clip-018-expected.html: Added.
221
        * web-platform-tests/css/css-contain/contain-paint-clip-018.html: Added.
222
        * web-platform-tests/css/css-contain/contain-paint-clip-019-expected.html: Added.
223
        * web-platform-tests/css/css-contain/contain-paint-clip-019.html: Added.
224
        * web-platform-tests/css/css-contain/contain-paint-containing-block-absolute-001-expected.html: Added.
225
        * web-platform-tests/css/css-contain/contain-paint-containing-block-absolute-001.html: Added.
226
        * web-platform-tests/css/css-contain/contain-paint-containing-block-fixed-001-expected.html: Added.
227
        * web-platform-tests/css/css-contain/contain-paint-containing-block-fixed-001.html: Added.
228
        * web-platform-tests/css/css-contain/contain-paint-formatting-context-float-001-expected.html: Added.
229
        * web-platform-tests/css/css-contain/contain-paint-formatting-context-float-001.html: Added.
230
        * web-platform-tests/css/css-contain/contain-paint-formatting-context-margin-001-expected.html: Added.
231
        * web-platform-tests/css/css-contain/contain-paint-formatting-context-margin-001.html: Added.
232
        * web-platform-tests/css/css-contain/contain-paint-ifc-011-expected.html: Added.
233
        * web-platform-tests/css/css-contain/contain-paint-ifc-011.html: Added.
234
        * web-platform-tests/css/css-contain/contain-paint-ignored-cases-ib-split-001-expected.html: Added.
235
        * web-platform-tests/css/css-contain/contain-paint-ignored-cases-ib-split-001.html: Added.
236
        * web-platform-tests/css/css-contain/contain-paint-ignored-cases-internal-table-001a-expected.html: Added.
237
        * web-platform-tests/css/css-contain/contain-paint-ignored-cases-internal-table-001a.html: Added.
238
        * web-platform-tests/css/css-contain/contain-paint-ignored-cases-internal-table-001b-expected.html: Added.
239
        * web-platform-tests/css/css-contain/contain-paint-ignored-cases-internal-table-001b.html: Added.
240
        * web-platform-tests/css/css-contain/contain-paint-ignored-cases-no-principal-box-001-expected.html: Added.
241
        * web-platform-tests/css/css-contain/contain-paint-ignored-cases-no-principal-box-001.html: Added.
242
        * web-platform-tests/css/css-contain/contain-paint-ignored-cases-ruby-containing-block-001-expected.html: Added.
243
        * web-platform-tests/css/css-contain/contain-paint-ignored-cases-ruby-containing-block-001.html: Added.
244
        * web-platform-tests/css/css-contain/contain-paint-ignored-cases-ruby-stacking-and-clipping-001-expected.html: Added.
245
        * web-platform-tests/css/css-contain/contain-paint-ignored-cases-ruby-stacking-and-clipping-001.html: Added.
246
        * web-platform-tests/css/css-contain/contain-paint-independent-formatting-context-001-expected.html: Added.
247
        * web-platform-tests/css/css-contain/contain-paint-independent-formatting-context-001.html: Added.
248
        * web-platform-tests/css/css-contain/contain-paint-independent-formatting-context-002-expected.html: Added.
249
        * web-platform-tests/css/css-contain/contain-paint-independent-formatting-context-002.html: Added.
250
        * web-platform-tests/css/css-contain/contain-paint-independent-formatting-context-003-expected.html: Added.
251
        * web-platform-tests/css/css-contain/contain-paint-independent-formatting-context-003.html: Added.
252
        * web-platform-tests/css/css-contain/contain-paint-size-001-expected.html: Added.
253
        * web-platform-tests/css/css-contain/contain-paint-size-001.html: Added.
254
        * web-platform-tests/css/css-contain/contain-paint-size-002-expected.html: Added.
255
        * web-platform-tests/css/css-contain/contain-paint-size-002.html: Added.
256
        * web-platform-tests/css/css-contain/contain-paint-size-003-expected.html: Added.
257
        * web-platform-tests/css/css-contain/contain-paint-size-003.html: Added.
258
        * web-platform-tests/css/css-contain/contain-paint-stacking-context-001a-expected.html: Added.
259
        * web-platform-tests/css/css-contain/contain-paint-stacking-context-001a.html: Added.
260
        * web-platform-tests/css/css-contain/contain-paint-stacking-context-001b-expected.html: Added.
261
        * web-platform-tests/css/css-contain/contain-paint-stacking-context-001b.html: Added.
262
        * web-platform-tests/css/css-contain/contain-paint-table-001-expected.html: Added.
263
        * web-platform-tests/css/css-contain/contain-paint-table-001.html: Added.
264
        * web-platform-tests/css/css-contain/contain-paint-table-002-expected.html: Added.
265
        * web-platform-tests/css/css-contain/contain-paint-table-002.html: Added.
266
        * web-platform-tests/css/css-contain/contain-size-001-expected.html: Added.
267
        * web-platform-tests/css/css-contain/contain-size-001.html: Added.
268
        * web-platform-tests/css/css-contain/contain-size-002-expected.html: Added.
269
        * web-platform-tests/css/css-contain/contain-size-002.html: Added.
270
        * web-platform-tests/css/css-contain/contain-size-003-expected.html: Added.
271
        * web-platform-tests/css/css-contain/contain-size-003.html: Added.
272
        * web-platform-tests/css/css-contain/contain-size-004-expected.html: Added.
273
        * web-platform-tests/css/css-contain/contain-size-004.html: Added.
274
        * web-platform-tests/css/css-contain/contain-size-005-expected.html: Added.
275
        * web-platform-tests/css/css-contain/contain-size-005.html: Added.
276
        * web-platform-tests/css/css-contain/contain-size-006-expected.html: Added.
277
        * web-platform-tests/css/css-contain/contain-size-006.html: Added.
278
        * web-platform-tests/css/css-contain/contain-size-007-expected.html: Added.
279
        * web-platform-tests/css/css-contain/contain-size-007.html: Added.
280
        * web-platform-tests/css/css-contain/contain-size-008-expected.html: Added.
281
        * web-platform-tests/css/css-contain/contain-size-008.html: Added.
282
        * web-platform-tests/css/css-contain/contain-size-009-expected.html: Added.
283
        * web-platform-tests/css/css-contain/contain-size-009.html: Added.
284
        * web-platform-tests/css/css-contain/contain-size-010-expected.html: Added.
285
        * web-platform-tests/css/css-contain/contain-size-010.html: Added.
286
        * web-platform-tests/css/css-contain/contain-size-011-expected.html: Added.
287
        * web-platform-tests/css/css-contain/contain-size-011.html: Added.
288
        * web-platform-tests/css/css-contain/contain-size-012-expected.html: Added.
289
        * web-platform-tests/css/css-contain/contain-size-012.html: Added.
290
        * web-platform-tests/css/css-contain/contain-size-012b-expected.html: Added.
291
        * web-platform-tests/css/css-contain/contain-size-012b.html: Added.
292
        * web-platform-tests/css/css-contain/contain-size-013-expected.xht: Added.
293
        * web-platform-tests/css/css-contain/contain-size-013.html: Added.
294
        * web-platform-tests/css/css-contain/contain-size-021-expected.html: Added.
295
        * web-platform-tests/css/css-contain/contain-size-021.html: Added.
296
        * web-platform-tests/css/css-contain/contain-size-023-expected.html: Added.
297
        * web-platform-tests/css/css-contain/contain-size-023.html: Added.
298
        * web-platform-tests/css/css-contain/contain-size-025-expected.html: Added.
299
        * web-platform-tests/css/css-contain/contain-size-025.html: Added.
300
        * web-platform-tests/css/css-contain/contain-size-027-expected.html: Added.
301
        * web-platform-tests/css/css-contain/contain-size-027.html: Added.
302
        * web-platform-tests/css/css-contain/contain-size-041-expected.html: Added.
303
        * web-platform-tests/css/css-contain/contain-size-041.html: Added.
304
        * web-platform-tests/css/css-contain/contain-size-042-expected.html: Added.
305
        * web-platform-tests/css/css-contain/contain-size-042.html: Added.
306
        * web-platform-tests/css/css-contain/contain-size-051-expected.html: Added.
307
        * web-platform-tests/css/css-contain/contain-size-051.html: Added.
308
        * web-platform-tests/css/css-contain/contain-size-052-expected.html: Added.
309
        * web-platform-tests/css/css-contain/contain-size-052.html: Added.
310
        * web-platform-tests/css/css-contain/contain-size-056-expected.html: Added.
311
        * web-platform-tests/css/css-contain/contain-size-056.html: Added.
312
        * web-platform-tests/css/css-contain/contain-size-061-expected.html: Added.
313
        * web-platform-tests/css/css-contain/contain-size-061.html: Added.
314
        * web-platform-tests/css/css-contain/contain-size-062-expected.html: Added.
315
        * web-platform-tests/css/css-contain/contain-size-062.html: Added.
316
        * web-platform-tests/css/css-contain/contain-size-063-expected.html: Added.
317
        * web-platform-tests/css/css-contain/contain-size-063.html: Added.
318
        * web-platform-tests/css/css-contain/contain-size-064-expected.html: Added.
319
        * web-platform-tests/css/css-contain/contain-size-064.html: Added.
320
        * web-platform-tests/css/css-contain/contain-size-baseline-001-expected.html: Added.
321
        * web-platform-tests/css/css-contain/contain-size-baseline-001.html: Added.
322
        * web-platform-tests/css/css-contain/contain-size-block-001-expected.html: Added.
323
        * web-platform-tests/css/css-contain/contain-size-block-001.html: Added.
324
        * web-platform-tests/css/css-contain/contain-size-block-002-expected.html: Added.
325
        * web-platform-tests/css/css-contain/contain-size-block-002.html: Added.
326
        * web-platform-tests/css/css-contain/contain-size-block-003-expected.html: Added.
327
        * web-platform-tests/css/css-contain/contain-size-block-003.html: Added.
328
        * web-platform-tests/css/css-contain/contain-size-block-004-expected.html: Added.
329
        * web-platform-tests/css/css-contain/contain-size-block-004.html: Added.
330
        * web-platform-tests/css/css-contain/contain-size-borders-expected.xht: Added.
331
        * web-platform-tests/css/css-contain/contain-size-borders.html: Added.
332
        * web-platform-tests/css/css-contain/contain-size-breaks-001-expected.html: Added.
333
        * web-platform-tests/css/css-contain/contain-size-breaks-001.html: Added.
334
        * web-platform-tests/css/css-contain/contain-size-button-001-expected.html: Added.
335
        * web-platform-tests/css/css-contain/contain-size-button-001.html: Added.
336
        * web-platform-tests/css/css-contain/contain-size-button-002-expected.html: Added.
337
        * web-platform-tests/css/css-contain/contain-size-button-002.html: Added.
338
        * web-platform-tests/css/css-contain/contain-size-fieldset-001-expected.html: Added.
339
        * web-platform-tests/css/css-contain/contain-size-fieldset-001.html: Added.
340
        * web-platform-tests/css/css-contain/contain-size-fieldset-002-expected.html: Added.
341
        * web-platform-tests/css/css-contain/contain-size-fieldset-002.html: Added.
342
        * web-platform-tests/css/css-contain/contain-size-fieldset-003-expected.html: Added.
343
        * web-platform-tests/css/css-contain/contain-size-fieldset-003.html: Added.
344
        * web-platform-tests/css/css-contain/contain-size-fieldset-004-expected.html: Added.
345
        * web-platform-tests/css/css-contain/contain-size-fieldset-004.html: Added.
346
        * web-platform-tests/css/css-contain/contain-size-flex-001-expected.html: Added.
347
        * web-platform-tests/css/css-contain/contain-size-flex-001.html: Added.
348
        * web-platform-tests/css/css-contain/contain-size-flexbox-001-expected.html: Added.
349
        * web-platform-tests/css/css-contain/contain-size-flexbox-001.html: Added.
350
        * web-platform-tests/css/css-contain/contain-size-flexbox-002-expected.html: Added.
351
        * web-platform-tests/css/css-contain/contain-size-flexbox-002.html: Added.
352
        * web-platform-tests/css/css-contain/contain-size-grid-001-expected.html: Added.
353
        * web-platform-tests/css/css-contain/contain-size-grid-001.html: Added.
354
        * web-platform-tests/css/css-contain/contain-size-grid-002-expected.xht: Added.
355
        * web-platform-tests/css/css-contain/contain-size-grid-002.html: Added.
356
        * web-platform-tests/css/css-contain/contain-size-grid-003-expected.txt: Added.
357
        * web-platform-tests/css/css-contain/contain-size-grid-003.html: Added.
358
        * web-platform-tests/css/css-contain/contain-size-grid-004-expected.txt: Added.
359
        * web-platform-tests/css/css-contain/contain-size-grid-004.html: Added.
360
        * web-platform-tests/css/css-contain/contain-size-grid-005-expected.html: Added.
361
        * web-platform-tests/css/css-contain/contain-size-grid-005.html: Added.
362
        * web-platform-tests/css/css-contain/contain-size-inline-block-001-expected.html: Added.
363
        * web-platform-tests/css/css-contain/contain-size-inline-block-001.html: Added.
364
        * web-platform-tests/css/css-contain/contain-size-inline-block-002-expected.html: Added.
365
        * web-platform-tests/css/css-contain/contain-size-inline-block-002.html: Added.
366
        * web-platform-tests/css/css-contain/contain-size-inline-block-003-expected.html: Added.
367
        * web-platform-tests/css/css-contain/contain-size-inline-block-003.html: Added.
368
        * web-platform-tests/css/css-contain/contain-size-inline-block-004-expected.html: Added.
369
        * web-platform-tests/css/css-contain/contain-size-inline-block-004.html: Added.
370
        * web-platform-tests/css/css-contain/contain-size-inline-flex-001-expected.html: Added.
371
        * web-platform-tests/css/css-contain/contain-size-inline-flex-001.html: Added.
372
        * web-platform-tests/css/css-contain/contain-size-monolithic-001-expected.html: Added.
373
        * web-platform-tests/css/css-contain/contain-size-monolithic-001.html: Added.
374
        * web-platform-tests/css/css-contain/contain-size-monolithic-002-expected.html: Added.
375
        * web-platform-tests/css/css-contain/contain-size-monolithic-002.html: Added.
376
        * web-platform-tests/css/css-contain/contain-size-multicol-001-expected.xht: Added.
377
        * web-platform-tests/css/css-contain/contain-size-multicol-001.html: Added.
378
        * web-platform-tests/css/css-contain/contain-size-multicol-002-expected.html: Added.
379
        * web-platform-tests/css/css-contain/contain-size-multicol-002.html: Added.
380
        * web-platform-tests/css/css-contain/contain-size-multicol-003-expected.html: Added.
381
        * web-platform-tests/css/css-contain/contain-size-multicol-003.html: Added.
382
        * web-platform-tests/css/css-contain/contain-size-multicol-004-expected.html: Added.
383
        * web-platform-tests/css/css-contain/contain-size-multicol-004.html: Added.
384
        * web-platform-tests/css/css-contain/contain-size-multicol-as-flex-item-expected.txt: Added.
385
        * web-platform-tests/css/css-contain/contain-size-multicol-as-flex-item.html: Added.
386
        * web-platform-tests/css/css-contain/contain-size-replaced-001-expected.xht: Added.
387
        * web-platform-tests/css/css-contain/contain-size-replaced-001.html: Added.
388
        * web-platform-tests/css/css-contain/contain-size-replaced-002-expected.xht: Added.
389
        * web-platform-tests/css/css-contain/contain-size-replaced-002.html: Added.
390
        * web-platform-tests/css/css-contain/contain-size-replaced-003a-expected.html: Added.
391
        * web-platform-tests/css/css-contain/contain-size-replaced-003a.html: Added.
392
        * web-platform-tests/css/css-contain/contain-size-replaced-003b-expected.html: Added.
393
        * web-platform-tests/css/css-contain/contain-size-replaced-003b.html: Added.
394
        * web-platform-tests/css/css-contain/contain-size-replaced-003c-expected.html: Added.
395
        * web-platform-tests/css/css-contain/contain-size-replaced-003c.html: Added.
396
        * web-platform-tests/css/css-contain/contain-size-replaced-004-expected.html: Added.
397
        * web-platform-tests/css/css-contain/contain-size-replaced-004.html: Added.
398
        * web-platform-tests/css/css-contain/contain-size-replaced-005-expected.html: Added.
399
        * web-platform-tests/css/css-contain/contain-size-replaced-005.html: Added.
400
        * web-platform-tests/css/css-contain/contain-size-replaced-006-expected.html: Added.
401
        * web-platform-tests/css/css-contain/contain-size-replaced-006.html: Added.
402
        * web-platform-tests/css/css-contain/contain-size-replaced-007-expected.xht: Added.
403
        * web-platform-tests/css/css-contain/contain-size-replaced-007.html: Added.
404
        * web-platform-tests/css/css-contain/contain-size-scrollbars-001-expected.html: Added.
405
        * web-platform-tests/css/css-contain/contain-size-scrollbars-001.html: Added.
406
        * web-platform-tests/css/css-contain/contain-size-scrollbars-002-expected.html: Added.
407
        * web-platform-tests/css/css-contain/contain-size-scrollbars-002.html: Added.
408
        * web-platform-tests/css/css-contain/contain-size-scrollbars-003-expected.html: Added.
409
        * web-platform-tests/css/css-contain/contain-size-scrollbars-003.html: Added.
410
        * web-platform-tests/css/css-contain/contain-size-scrollbars-004-expected.html: Added.
411
        * web-platform-tests/css/css-contain/contain-size-scrollbars-004.html: Added.
412
        * web-platform-tests/css/css-contain/contain-size-select-001-expected.html: Added.
413
        * web-platform-tests/css/css-contain/contain-size-select-001.html: Added.
414
        * web-platform-tests/css/css-contain/contain-size-select-002-expected.html: Added.
415
        * web-platform-tests/css/css-contain/contain-size-select-002.html: Added.
416
        * web-platform-tests/css/css-contain/contain-size-select-elem-001-expected.html: Added.
417
        * web-platform-tests/css/css-contain/contain-size-select-elem-001.html: Added.
418
        * web-platform-tests/css/css-contain/contain-size-select-elem-002-expected.html: Added.
419
        * web-platform-tests/css/css-contain/contain-size-select-elem-002.html: Added.
420
        * web-platform-tests/css/css-contain/contain-size-select-elem-003-expected.html: Added.
421
        * web-platform-tests/css/css-contain/contain-size-select-elem-003.html: Added.
422
        * web-platform-tests/css/css-contain/contain-size-select-elem-004-expected.html: Added.
423
        * web-platform-tests/css/css-contain/contain-size-select-elem-004.html: Added.
424
        * web-platform-tests/css/css-contain/contain-size-select-elem-005-expected.html: Added.
425
        * web-platform-tests/css/css-contain/contain-size-select-elem-005.html: Added.
426
        * web-platform-tests/css/css-contain/contain-size-table-caption-001-expected.html: Added.
427
        * web-platform-tests/css/css-contain/contain-size-table-caption-001.html: Added.
428
        * web-platform-tests/css/css-contain/contain-strict-001-expected.html: Added.
429
        * web-platform-tests/css/css-contain/contain-strict-001.html: Added.
430
        * web-platform-tests/css/css-contain/contain-strict-002-expected.html: Added.
431
        * web-platform-tests/css/css-contain/contain-strict-002.html: Added.
432
        * web-platform-tests/css/css-contain/contain-strict-003-expected.html: Added.
433
        * web-platform-tests/css/css-contain/contain-strict-003.html: Added.
434
        * web-platform-tests/css/css-contain/contain-strict-011-expected.html: Added.
435
        * web-platform-tests/css/css-contain/contain-strict-011.html: Added.
436
        * web-platform-tests/css/css-contain/contain-style-baseline-001-expected.html: Added.
437
        * web-platform-tests/css/css-contain/contain-style-baseline-001.html: Added.
438
        * web-platform-tests/css/css-contain/contain-style-breaks-001-expected.html: Added.
439
        * web-platform-tests/css/css-contain/contain-style-breaks-001.html: Added.
440
        * web-platform-tests/css/css-contain/contain-style-breaks-002-expected.html: Added.
441
        * web-platform-tests/css/css-contain/contain-style-breaks-002.html: Added.
442
        * web-platform-tests/css/css-contain/contain-style-breaks-003-expected.html: Added.
443
        * web-platform-tests/css/css-contain/contain-style-breaks-003.html: Added.
444
        * web-platform-tests/css/css-contain/contain-style-breaks-004-expected.html: Added.
445
        * web-platform-tests/css/css-contain/contain-style-breaks-004.html: Added.
446
        * web-platform-tests/css/css-contain/contain-style-breaks-005-expected.html: Added.
447
        * web-platform-tests/css/css-contain/contain-style-breaks-005.html: Added.
448
        * web-platform-tests/css/css-contain/contain-style-counters-001-expected.html: Added.
449
        * web-platform-tests/css/css-contain/contain-style-counters-001.html: Added.
450
        * web-platform-tests/css/css-contain/contain-style-counters-002-expected.html: Added.
451
        * web-platform-tests/css/css-contain/contain-style-counters-002.html: Added.
452
        * web-platform-tests/css/css-contain/contain-style-counters-003-expected.html: Added.
453
        * web-platform-tests/css/css-contain/contain-style-counters-003.html: Added.
454
        * web-platform-tests/css/css-contain/contain-style-counters-004-expected.html: Added.
455
        * web-platform-tests/css/css-contain/contain-style-counters-004.html: Added.
456
        * web-platform-tests/css/css-contain/contain-subgrid-001-expected.html: Added.
457
        * web-platform-tests/css/css-contain/contain-subgrid-001.html: Added.
458
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-001-expected.html: Added.
459
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-001.html: Added.
460
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-002-expected.html: Added.
461
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-002.html: Added.
462
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-003-expected.html: Added.
463
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-003.html: Added.
464
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-004-expected.html: Added.
465
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-004.html: Added.
466
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-005-expected.html: Added.
467
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-005.html: Added.
468
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-006-expected.html: Added.
469
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-006.html: Added.
470
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-007-expected.html: Added.
471
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-007.html: Added.
472
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-008-expected.html: Added.
473
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-008.html: Added.
474
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-009-expected.html: Added.
475
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-009.html: Added.
476
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-010-expected.html: Added.
477
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-010.html: Added.
478
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-011-expected.html: Added.
479
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-011.html: Added.
480
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-012-expected.html: Added.
481
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-012.html: Added.
482
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-013-expected.html: Added.
483
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-013.html: Added.
484
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-014-expected.html: Added.
485
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-014.html: Added.
486
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-015-expected.txt: Added.
487
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-015.html: Added.
488
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-016-expected.txt: Added.
489
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-016.html: Added.
490
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-017-expected.txt: Added.
491
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-017.html: Added.
492
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-018-expected.txt: Added.
493
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-018.html: Added.
494
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-019.sub.https-expected.html: Added.
495
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-019.sub.https.html: Added.
496
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-020-expected.html: Added.
497
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-020.html: Added.
498
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-021-expected.html: Added.
499
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-021.html: Added.
500
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-022-expected.html: Added.
501
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-022.html: Added.
502
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-023-expected.html: Added.
503
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-023.html: Added.
504
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-024-expected.html: Added.
505
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-024.html: Added.
506
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-025-expected.html: Added.
507
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-025.html: Added.
508
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-026-expected.txt: Added.
509
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-026.html: Added.
510
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-027-expected.html: Added.
511
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-027.html: Added.
512
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-028-expected.html: Added.
513
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-028.html: Added.
514
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-029-expected.txt: Added.
515
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-029.html: Added.
516
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-030-expected.txt: Added.
517
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-030.html: Added.
518
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-031-expected.txt: Added.
519
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-031.html: Added.
520
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-032-expected.html: Added.
521
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-032.html: Added.
522
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-033.sub.https-expected.html: Added.
523
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-033.sub.https.html: Added.
524
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-034-expected.html: Added.
525
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-034.html: Added.
526
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-035-expected.txt: Added.
527
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-035.html: Added.
528
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-036-expected.txt: Added.
529
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-036.html: Added.
530
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-037-expected.html: Added.
531
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-037.html: Added.
532
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-038-expected.txt: Added.
533
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-038.html: Added.
534
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-039-expected.txt: Added.
535
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-039.html: Added.
536
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-040-expected.html: Added.
537
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-040.html: Added.
538
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-041-expected.html: Added.
539
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-041.html: Added.
540
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-042-expected.html: Added.
541
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-042.html: Added.
542
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-043-expected.html: Added.
543
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-043.html: Added.
544
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-044-expected.txt: Added.
545
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-044.html: Added.
546
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-045-expected.html: Added.
547
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-045.html: Added.
548
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-046-expected.html: Added.
549
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-046.html: Added.
550
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-047-expected.txt: Added.
551
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-047.html: Added.
552
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-048-expected.txt: Added.
553
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-048.html: Added.
554
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-049-expected.html: Added.
555
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-049.html: Added.
556
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-050-expected.txt: Added.
557
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-050.html: Added.
558
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-051-expected.html: Added.
559
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-051.html: Added.
560
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-052-expected.html: Added.
561
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-052.html: Added.
562
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-053-expected.txt: Added.
563
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-053.html: Added.
564
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-054-expected.txt: Added.
565
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-054.html: Added.
566
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-055-expected.html: Added.
567
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-055.html: Added.
568
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-056-expected.html: Added.
569
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-056.html: Added.
570
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-057-expected.html: Added.
571
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-057.html: Added.
572
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-058-expected.html: Added.
573
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-058.html: Added.
574
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-059-expected.html: Added.
575
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-059.html: Added.
576
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-060-expected.html: Added.
577
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-060.html: Added.
578
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-061-expected.html: Added.
579
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-061.html: Added.
580
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-062-expected.html: Added.
581
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-062.html: Added.
582
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-063-expected.html: Added.
583
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-063.html: Added.
584
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-064-expected.html: Added.
585
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-064.html: Added.
586
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-065-expected.html: Added.
587
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-065.html: Added.
588
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-066-expected.html: Added.
589
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-066.html: Added.
590
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-067-expected.html: Added.
591
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-067.html: Added.
592
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-068-expected.txt: Added.
593
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-068.html: Added.
594
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-069-expected.txt: Added.
595
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-069.html: Added.
596
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-070-expected.txt: Added.
597
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-070.html: Added.
598
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-071-expected.txt: Added.
599
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-071.html: Added.
600
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-072-expected.txt: Added.
601
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-072.html: Added.
602
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-073-expected.html: Added.
603
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-073.html: Added.
604
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-074-expected.html: Added.
605
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-074.html: Added.
606
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-075-expected.html: Added.
607
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-075.html: Added.
608
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-076-expected.html: Added.
609
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-076.html: Added.
610
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-077-expected.txt: Added.
611
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-077.html: Added.
612
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-078-expected.html: Added.
613
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-078.html: Added.
614
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-079-expected.html: Added.
615
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-079.html: Added.
616
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-080-expected.txt: Added.
617
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-080.html: Added.
618
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-081-expected.txt: Added.
619
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-081.html: Added.
620
        * web-platform-tests/css/css-contain/content-visibility/content-visibility-form-controls-crash.html: Added.
621
        * web-platform-tests/css/css-contain/content-visibility/inheritance-expected.txt: Added.
622
        * web-platform-tests/css/css-contain/content-visibility/inheritance.html: Added.
623
        * web-platform-tests/css/css-contain/content-visibility/parsing/content-visibility-computed-expected.txt: Added.
624
        * web-platform-tests/css/css-contain/content-visibility/parsing/content-visibility-computed.html: Added.
625
        * web-platform-tests/css/css-contain/content-visibility/parsing/content-visibility-invalid-expected.txt: Added.
626
        * web-platform-tests/css/css-contain/content-visibility/parsing/content-visibility-invalid.html: Added.
627
        * web-platform-tests/css/css-contain/content-visibility/parsing/content-visibility-valid-expected.txt: Added.
628
        * web-platform-tests/css/css-contain/content-visibility/parsing/content-visibility-valid.html: Added.
629
        * web-platform-tests/css/css-contain/content-visibility/parsing/w3c-import.log: Added.
630
        * web-platform-tests/css/css-contain/content-visibility/resources/circles.svg: Added.
631
        * web-platform-tests/css/css-contain/content-visibility/resources/dice.png: Added.
632
        * web-platform-tests/css/css-contain/content-visibility/resources/frame.html: Added.
633
        * web-platform-tests/css/css-contain/content-visibility/resources/text-fragment-target-auto.html: Added.
634
        * web-platform-tests/css/css-contain/content-visibility/resources/w3c-import.log: Added.
635
        * web-platform-tests/css/css-contain/content-visibility/w3c-import.log: Added.
636
        * web-platform-tests/css/css-contain/counter-scoping-001-expected.html: Added.
637
        * web-platform-tests/css/css-contain/counter-scoping-001.html: Added.
638
        * web-platform-tests/css/css-contain/counter-scoping-002-expected.html: Added.
639
        * web-platform-tests/css/css-contain/counter-scoping-002.html: Added.
640
        * web-platform-tests/css/css-contain/counter-scoping-003-expected.html: Added.
641
        * web-platform-tests/css/css-contain/counter-scoping-003.html: Added.
642
        * web-platform-tests/css/css-contain/inheritance-expected.txt: Added.
643
        * web-platform-tests/css/css-contain/inheritance.html: Added.
644
        * web-platform-tests/css/css-contain/parsing/contain-computed-expected.txt: Added.
645
        * web-platform-tests/css/css-contain/parsing/contain-computed.html: Added.
646
        * web-platform-tests/css/css-contain/parsing/contain-invalid-expected.txt: Added.
647
        * web-platform-tests/css/css-contain/parsing/contain-invalid.html: Added.
648
        * web-platform-tests/css/css-contain/parsing/contain-valid-expected.txt: Added.
649
        * web-platform-tests/css/css-contain/parsing/contain-valid.html: Added.
650
        * web-platform-tests/css/css-contain/parsing/w3c-import.log: Added.
651
        * web-platform-tests/css/css-contain/quote-scoping-001-expected.html: Added.
652
        * web-platform-tests/css/css-contain/quote-scoping-001.html: Added.
653
        * web-platform-tests/css/css-contain/quote-scoping-002-expected.html: Added.
654
        * web-platform-tests/css/css-contain/quote-scoping-002.html: Added.
655
        * web-platform-tests/css/css-contain/quote-scoping-003-expected.html: Added.
656
        * web-platform-tests/css/css-contain/quote-scoping-003.html: Added.
657
        * web-platform-tests/css/css-contain/quote-scoping-004-expected.html: Added.
658
        * web-platform-tests/css/css-contain/quote-scoping-004.html: Added.
659
        * web-platform-tests/css/css-contain/support/60x60-green.png: Added.
660
        * web-platform-tests/css/css-contain/support/blue-100x100.png: Added.
661
        * web-platform-tests/css/css-contain/support/blue50wBy25h.png: Added.
662
        * web-platform-tests/css/css-contain/support/blue50wBy46h.png: Added.
663
        * web-platform-tests/css/css-contain/support/pattern-gg-gr-100x100.png: Added.
664
        * web-platform-tests/css/css-contain/support/swatch-blue.png: Added.
665
        * web-platform-tests/css/css-contain/support/swatch-orange.png: Added.
666
        * web-platform-tests/css/css-contain/support/swatch-red.png: Added.
667
        * web-platform-tests/css/css-contain/support/swatch-yellow.png: Added.
668
        * web-platform-tests/css/css-contain/support/w3c-import.log: Added.
669
        * web-platform-tests/css/css-contain/support/white.webm: Added.
670
        * web-platform-tests/css/css-contain/w3c-import.log: Added.
671
1
2021-03-15  Imanol Fernandez  <ifernandez@igalia.com>
672
2021-03-15  Imanol Fernandez  <ifernandez@igalia.com>
2
673
3
        Split WebXR features into enabledFeatures, supportedFeatures and requestedFeatures
674
        Split WebXR features into enabledFeatures, supportedFeatures and requestedFeatures
- a/LayoutTests/TestExpectations +62 lines
Lines 4705-4710 webanimations/translate-property-and-translate-animation-with-delay-on-forced-la a/LayoutTests/TestExpectations_sec1
4705
webkit.org/b/220928 imported/w3c/web-platform-tests/css/css-color/predefined-014.html [ ImageOnlyFailure ] # Requires fallback (at parse time) support
4705
webkit.org/b/220928 imported/w3c/web-platform-tests/css/css-color/predefined-014.html [ ImageOnlyFailure ] # Requires fallback (at parse time) support
4706
webkit.org/b/220928 imported/w3c/web-platform-tests/css/css-color/predefined-015.html [ ImageOnlyFailure ] # Requires fallback (at parse time) support (unclear if this makes sense)
4706
webkit.org/b/220928 imported/w3c/web-platform-tests/css/css-color/predefined-015.html [ ImageOnlyFailure ] # Requires fallback (at parse time) support (unclear if this makes sense)
4707
4707
4708
# CSS containment tests that fail
4709
imported/w3c/web-platform-tests/css/css-contain/contain-animation-001.html [ ImageOnlyFailure ]
4710
imported/w3c/web-platform-tests/css/css-contain/contain-content-001.html [ ImageOnlyFailure ]
4711
imported/w3c/web-platform-tests/css/css-contain/contain-content-002.html [ ImageOnlyFailure ]
4712
imported/w3c/web-platform-tests/css/css-contain/contain-content-003.html [ ImageOnlyFailure ]
4713
imported/w3c/web-platform-tests/css/css-contain/contain-content-004.html [ ImageOnlyFailure ]
4714
imported/w3c/web-platform-tests/css/css-contain/contain-content-011.html [ ImageOnlyFailure ]
4715
imported/w3c/web-platform-tests/css/css-contain/contain-layout-006.html [ ImageOnlyFailure ]
4716
imported/w3c/web-platform-tests/css/css-contain/contain-layout-007.html [ ImageOnlyFailure ]
4717
imported/w3c/web-platform-tests/css/css-contain/contain-layout-013.html [ ImageOnlyFailure ]
4718
imported/w3c/web-platform-tests/css/css-contain/contain-layout-014.html [ ImageOnlyFailure ]
4719
imported/w3c/web-platform-tests/css/css-contain/contain-layout-016.html [ ImageOnlyFailure ]
4720
imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-001.html [ ImageOnlyFailure ]
4721
imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-002.html [ ImageOnlyFailure ]
4722
imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-003.html [ ImageOnlyFailure ]
4723
imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-004.html [ ImageOnlyFailure ]
4724
imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-005.html [ ImageOnlyFailure ]
4725
imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-001.html [ ImageOnlyFailure ]
4726
imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-003.html [ ImageOnlyFailure ]
4727
imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-004.html [ ImageOnlyFailure ]
4728
imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-005.html [ ImageOnlyFailure ]
4729
imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-006.html [ ImageOnlyFailure ]
4730
imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-007.html [ ImageOnlyFailure ]
4731
imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-008.html [ ImageOnlyFailure ]
4732
imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-009.html [ ImageOnlyFailure ]
4733
imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-010.html [ ImageOnlyFailure ]
4734
imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-011.html [ ImageOnlyFailure ]
4735
imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-019.sub.https.html [ ImageOnlyFailure ]
4736
imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-020.html [ ImageOnlyFailure ]
4737
imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-021.html [ ImageOnlyFailure ]
4738
imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-022.html [ ImageOnlyFailure ]
4739
imported/w3c/web-platform-tests/css/css-contain/contain-layout-button-001.html [ ImageOnlyFailure ]
4740
imported/w3c/web-platform-tests/css/css-contain/contain-layout-cell-001.html [ ImageOnlyFailure ]
4741
imported/w3c/web-platform-tests/css/css-contain/contain-layout-cell-002.html [ ImageOnlyFailure ]
4742
imported/w3c/web-platform-tests/css/css-contain/contain-layout-containing-block-absolute-001.html [ ImageOnlyFailure ]
4743
imported/w3c/web-platform-tests/css/css-contain/contain-layout-containing-block-fixed-001.html [ ImageOnlyFailure ]
4744
imported/w3c/web-platform-tests/css/css-contain/contain-layout-flexbox-001.html [ ImageOnlyFailure ]
4745
imported/w3c/web-platform-tests/css/css-contain/contain-layout-formatting-context-float-001.html [ ImageOnlyFailure ]
4746
imported/w3c/web-platform-tests/css/css-contain/contain-layout-formatting-context-margin-001.html [ ImageOnlyFailure ]
4747
imported/w3c/web-platform-tests/css/css-contain/contain-layout-grid-001.html [ ImageOnlyFailure ]
4748
imported/w3c/web-platform-tests/css/css-contain/contain-layout-ifc-022.html [ ImageOnlyFailure ]
4749
imported/w3c/web-platform-tests/css/css-contain/contain-layout-independent-formatting-context-001.html [ ImageOnlyFailure ]
4750
imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-013.html [ ImageOnlyFailure ]
4751
imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-014.html [ ImageOnlyFailure ]
4752
imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-015.html [ ImageOnlyFailure ]
4753
imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-016.html [ ImageOnlyFailure ]
4754
imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-017.html [ ImageOnlyFailure ]
4755
imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-018.html [ ImageOnlyFailure ]
4756
imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-019.html [ ImageOnlyFailure ]
4757
imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-020.html [ ImageOnlyFailure ]
4758
imported/w3c/web-platform-tests/css/css-contain/contain-layout-overflow-001.html [ ImageOnlyFailure ]
4759
imported/w3c/web-platform-tests/css/css-contain/contain-layout-overflow-002.html [ ImageOnlyFailure ]
4760
imported/w3c/web-platform-tests/css/css-contain/contain-layout-size-003.html [ ImageOnlyFailure ]
4761
imported/w3c/web-platform-tests/css/css-contain/contain-layout-stacking-context-001.html [ ImageOnlyFailure ]
4762
imported/w3c/web-platform-tests/css/css-contain/contain-layout-suppress-baseline-001.html [ ImageOnlyFailure ]
4763
imported/w3c/web-platform-tests/css/css-contain/contain-layout-suppress-baseline-002.html [ ImageOnlyFailure ]
4764
imported/w3c/web-platform-tests/css/css-contain/contain-paint-001.html [ ImageOnlyFailure ]
4765
imported/w3c/web-platform-tests/css/css-contain/contain-paint-004.html [ ImageOnlyFailure ]
4766
imported/w3c/web-platform-tests/css/css-contain/contain-paint-005.html [ ImageOnlyFailure ]
4767
imported/w3c/web-platform-tests/css/css-contain/contain-paint-006.html [ ImageOnlyFailure ]
4768
imported/w3c/web-platform-tests/css/css-contain/contain-paint-008.html [ ImageOnlyFailure ]
4769
4708
# @counter-style ref tests that currently fail
4770
# @counter-style ref tests that currently fail
4709
imported/w3c/web-platform-tests/css/css-counter-styles/armenian/css3-counter-styles-006.html [ ImageOnlyFailure ]
4771
imported/w3c/web-platform-tests/css/css-counter-styles/armenian/css3-counter-styles-006.html [ ImageOnlyFailure ]
4710
imported/w3c/web-platform-tests/css/css-counter-styles/armenian/css3-counter-styles-007.html [ ImageOnlyFailure ]
4772
imported/w3c/web-platform-tests/css/css-counter-styles/armenian/css3-counter-styles-007.html [ ImageOnlyFailure ]
- a/LayoutTests/imported/w3c/resources/import-expectations.json +1 lines
Lines 94-99 a/LayoutTests/imported/w3c/resources/import-expectations.json_sec1
94
    "web-platform-tests/css/css-backgrounds": "import", 
94
    "web-platform-tests/css/css-backgrounds": "import", 
95
    "web-platform-tests/css/css-cascade": "import", 
95
    "web-platform-tests/css/css-cascade": "import", 
96
    "web-platform-tests/css/css-color": "import", 
96
    "web-platform-tests/css/css-color": "import", 
97
    "web-platform-tests/css/css-contain": "import", 
97
    "web-platform-tests/css/css-content": "import", 
98
    "web-platform-tests/css/css-content": "import", 
98
    "web-platform-tests/css/css-counter-styles": "import", 
99
    "web-platform-tests/css/css-counter-styles": "import", 
99
    "web-platform-tests/css/css-display": "import", 
100
    "web-platform-tests/css/css-display": "import", 
- a/LayoutTests/imported/w3c/resources/resource-files.json +2 lines
Lines 293-298 a/LayoutTests/imported/w3c/resources/resource-files.json_sec1
293
        "web-platform-tests/css/css-color/t421-rgb-hex3-expand-b.xht",
293
        "web-platform-tests/css/css-color/t421-rgb-hex3-expand-b.xht",
294
        "web-platform-tests/css/css-color/t422-rgba-a0.6-a.xht",
294
        "web-platform-tests/css/css-color/t422-rgba-a0.6-a.xht",
295
        "web-platform-tests/css/css-color/t425-hsla-basic-a.xht",
295
        "web-platform-tests/css/css-color/t425-hsla-basic-a.xht",
296
        "web-platform-tests/css/css-contain/contain-crash.html",
297
        "web-platform-tests/css/css-contain/content-visibility/content-visibility-form-controls-crash.html",
296
        "web-platform-tests/css/css-display/run-in/after-content-display-004.xht",
298
        "web-platform-tests/css/css-display/run-in/after-content-display-004.xht",
297
        "web-platform-tests/css/css-display/run-in/anonymous-box-generation-002.xht",
299
        "web-platform-tests/css/css-display/run-in/anonymous-box-generation-002.xht",
298
        "web-platform-tests/css/css-display/run-in/background-applies-to-011.xht",
300
        "web-platform-tests/css/css-display/run-in/background-applies-to-011.xht",
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/META.yml +4 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/META.yml_sec1
1
spec: https://drafts.csswg.org/css-contain/
2
suggested_reviewers:
3
  - tabatkins
4
  - frivoal
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-animation-001-expected.xht +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-animation-001-expected.xht_sec1
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
 <head>
4
  <title>CSS Reftest Reference</title>
5
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
6
  <style type="text/css"><![CDATA[
7
  div
8
  {
9
  background-color: green;
10
  height: 100px;
11
  width: 100px;
12
  }
13
  ]]></style>
14
 </head>
15
 <body>
16
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17
  <div></div>
18
 </body>
19
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-animation-001.html +31 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-animation-001.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: contain is not animatable</title>
4
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
5
<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
6
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
7
<meta name=assert content="the contain property is not animatable">
8
<style>
9
div {
10
  border: 50px solid green;
11
  background: red;
12
  position: absolute; /* for shrinkwrap */
13
  contain: strict;
14
15
  animation-duration: 1s;
16
  animation-name: bad;
17
  animation-play-state: paused;
18
19
  font-size: 100px;
20
}
21
22
@keyframes bad {
23
  from {
24
    contain: none;
25
  }
26
}
27
</style>
28
29
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
30
<div>&nbsp;</div>
31
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-chrome-thcrash-001-expected.txt +4 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-chrome-thcrash-001-expected.txt_sec1
1
2
3
PASS chrome does not crash with contain
4
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-chrome-thcrash-001.html +28 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-chrome-thcrash-001.html_sec1
1
<!DOCTYPE html>
2
<title>CSS Overflow and Transforms: css-overflow-3</title>
3
<link rel="author" href="mailto:atotic@google.com">
4
<script src="/resources/testharness.js"></script>
5
<script src="/resources/testharnessreport.js"></script>
6
<link rel="help" href="https://crbug.com/964924">
7
<meta name="assert" content="chrome does not crash with css contain edge case">
8
<style>
9
  * {
10
    contain: size layout;
11
  }
12
  html {
13
    outline-style: auto;
14
    margin-bottom: 39%;
15
  }
16
  #target {
17
    -webkit-appearance: push-button;
18
  }
19
</style>
20
<output id="target">text</output>
21
<script>
22
test(() => {
23
  document.body.offsetTop;
24
  document.querySelector("#target").value = "";
25
  document.body.offsetTop;
26
  assert_equals(document.querySelector("#target").value, "");
27
}, 'chrome does not crash with contain');
28
</script>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-001-expected.html +36 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-001-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  div
11
    {
12
      color: transparent;
13
      float: left;
14
      font-size: 16px;
15
      padding: 8px;
16
    }
17
18
  div#blue-rectangle
19
    {
20
      background-color: blue;
21
      margin: 8px;
22
      width: 6em;
23
    }
24
25
  div#orange-rectangle
26
    {
27
      background-color: orange;
28
      width: 12em;
29
    }
30
  </style>
31
32
  <p>Test passes if the orange rectangle and blue rectangle do not overlap.
33
34
  <div id="blue-rectangle">Some text in a blue rectangle.</div>
35
36
  <div id="orange-rectangle">Some text in an orange rectangle. Some text in an orange rectangle. Some text in an orange rectangle.</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-001.html +43 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-001.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: a block with 'contain: content' alongside a float</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#contain-property">
9
  <link rel="match" href="reference/contain-layout-ifc-022-ref.html">
10
11
  <meta content="" name="flags">
12
13
  <style>
14
  div
15
    {
16
      color: transparent;
17
      font-size: 16px;
18
      padding: 8px;
19
    }
20
21
  div#floated-left
22
    {
23
      background-color: blue;
24
      float: left;
25
      margin: 8px;
26
      width: 6em;
27
    }
28
29
  div#with-contain-content
30
    {
31
      background-color: orange;
32
      width: 12em;
33
34
      contain: content;
35
    }
36
  </style>
37
38
39
  <p>Test passes if the orange rectangle and blue rectangle do not overlap.
40
41
  <div id="floated-left">Some text in a blue rectangle.</div>
42
43
  <div id="with-contain-content">Some text in an orange rectangle. Some text in an orange rectangle. Some text in an orange rectangle.</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-002-expected.html +46 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-002-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  p
11
    {
12
      margin-bottom: 30px;
13
    }
14
15
  div
16
    {
17
      height: 30px;
18
    }
19
20
  div.orange
21
    {
22
      background-color: orange;
23
    }
24
25
  div.blue
26
    {
27
      background-color: blue;
28
    }
29
30
  div#lime
31
    {
32
      background-color: lime;
33
    }
34
  </style>
35
36
  <p>Test passes if there are 5 horizontal stripes across the page in this order (from top to bottom): an orange stripe, a blue stripe, a bright green stripe, a blue stripe and then an orange stripe.
37
38
  <div class="orange"></div>
39
40
  <div class="blue"></div>
41
42
  <div id="lime"></div>
43
44
  <div class="blue"></div>
45
46
  <div class="orange"></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-002.html +56 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-002.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: content' and margin collapsing</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#contain-property">
9
  <link rel="match" href="reference/contain-paint-ifc-011-ref.html">
10
11
  <meta content="This test checks that a block element with 'contain: content' establishes a new block formatting context which is independent and separate from others. This causes margin collapsing to be ineffective among vertically-adjacent boxes. In this test, the top margin of parent boxes and top margin of their respective first in-flow child do not collapse. Also, in this test, the bottom margin of the last in-flow child of boxes and bottom margin of their respective parent boxes do not collapse." name="assert">
12
  <meta name="flags" content="">
13
14
  <style>
15
  div
16
    {
17
      contain: content;
18
      margin: 30px 0px;
19
    }
20
21
  div#grand-grand-parent-orange
22
    {
23
      background-color: orange;
24
    }
25
26
  div#grand-parent-blue
27
    {
28
      background-color: blue;
29
    }
30
31
  div#parent-lime
32
    {
33
      background-color: lime;
34
    }
35
36
  div#collapse-through-child  /* margin collapsing through element */
37
    {
38
      contain: none;
39
    }
40
  </style>
41
42
  <p>Test passes if there are 5 horizontal stripes across the page in this order (from top to bottom): an orange stripe, a blue stripe, a bright green stripe, a blue stripe and then an orange stripe.
43
44
  <div id="grand-grand-parent-orange">
45
46
    <div id="grand-parent-blue">
47
48
      <div id="parent-lime">
49
50
        <div id="collapse-through-child"></div>
51
52
      </div>
53
54
    </div>
55
56
  </div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-003-expected.xht +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-003-expected.xht_sec1
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
 <head>
4
  <title>CSS Reftest Reference</title>
5
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
6
  <style type="text/css"><![CDATA[
7
  div
8
  {
9
  background-color: green;
10
  height: 100px;
11
  width: 100px;
12
  }
13
  ]]></style>
14
 </head>
15
 <body>
16
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17
  <div></div>
18
 </body>
19
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-003.html +53 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-003.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: element with 'contain: content' and absolutely positioned descendants</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
9
  <link rel="match" href="../reference/ref-filled-green-100px-square.xht">
10
11
  <meta name="flags" content="">
12
  <meta name="assert" content="This test checks that an element with 'contain: content' acts as containing block for its absolutely positioned descendants.">
13
14
  <style>
15
  div
16
    {
17
      width: 100px;
18
    }
19
20
  div#contain-content
21
    {
22
      background-color: red;
23
      contain: content;
24
      height: 100px;
25
    }
26
27
  div.abspos
28
    {
29
      background-color: green;
30
      height: 50px;
31
      position: absolute;
32
      right: 0;
33
    }
34
35
  div#first-abspos
36
    {
37
      top: 0px;
38
    }
39
40
  div#second-abspos
41
    {
42
      bottom: 0px;
43
    }
44
  </style>
45
46
  <body>
47
48
  <p>Test passes if there is a filled green square and <strong>no red</strong>.
49
50
  <div id="contain-content">
51
    <div id="first-abspos" class="abspos"></div>
52
    <div id="second-abspos" class="abspos"></div>
53
  </div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-004-expected.html +43 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-004-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  table
11
    {
12
      background-color: blue;
13
      border-spacing: 2px;
14
      height: 206px;
15
      table-layout: fixed;
16
      width: 206px;
17
    }
18
19
  td
20
    {
21
      background-color: white;
22
      padding: 0px;
23
      vertical-align: baseline;
24
    }
25
26
  span
27
    {
28
      background-color: green;
29
      color: white;
30
      font-family: monospace;
31
      vertical-align: top;
32
    }
33
  </style>
34
35
  <p>Test passes if there is the word PASS and if there is <strong>no red</strong>.
36
37
  <table>
38
39
    <tr><td>&nbsp;<td>&nbsp;
40
41
    <tr><td>&nbsp;<td><span>PASS</span>
42
43
  </table>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-004.html +63 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-004.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: content' applies to 'table-cell' elements</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-layout">
9
  <link rel="match" href="reference/contain-layout-cell-001-ref.html">
10
11
  <meta content="In this test, the td#contain should act as the containing block for div#abs-pos ." name="assert">
12
  <meta name="flags" content="">
13
14
  <style>
15
  table
16
    {
17
      background-color: blue;
18
      border-spacing: 2px;
19
      height: 206px;
20
      table-layout: fixed;
21
      width: 206px;
22
    }
23
24
  td
25
    {
26
      background-color: white;
27
      padding: 0px;
28
      vertical-align: top;
29
    }
30
31
  td#contain
32
    {
33
      contain: content;
34
    }
35
36
  span
37
    {
38
      background-color: red;
39
      color: yellow;
40
      font-family: monospace;
41
      vertical-align: top;
42
    }
43
44
  div#abs-pos
45
    {
46
      background-color: green;
47
      color: white;
48
      font-family: monospace;
49
      left: 0px;
50
      position: absolute;
51
      top: 0px;
52
    }
53
  </style>
54
55
  <p>Test passes if there is the word PASS and if there is <strong>no red</strong>.
56
57
  <table>
58
59
    <tr><td>&nbsp;<td>&nbsp;
60
61
    <tr><td>&nbsp;<td id="contain"><span>FAIL</span><div id="abs-pos">PASS</div>
62
63
  </table>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-011-expected.html +27 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-011-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  div#green-square
11
    {
12
      background-color: green;
13
      height: 100px;
14
      width: 100px;
15
    }
16
17
  div#result
18
    {
19
      font-size: 3em;
20
    }
21
  </style>
22
23
  <p>Test passes if there is a filled green square, no red and the number 25.
24
25
  <div id="green-square"></div>
26
27
  <div id="result">25</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-011.html +94 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-011.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: content' does not turn on style containment</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
9
  <link rel="match" href="reference/contain-content-011-ref.html">
10
11
  <meta name="flags" content="">
12
  <meta name="assert" content="'contain: content' does not turn on style containment. So, in this test, the counter of div.abspos child should not be reset and must not be reset.">
13
14
  <style>
15
  body
16
    {
17
      counter-reset: counter-of-abspos-div 17;
18
    }
19
20
    /*
21
    This creates a new counter identified as
22
    "counter-of-abspos-div" and initially sets
23
    such counter to 17 (an entirely arbitrary
24
    number)
25
    */
26
27
  div
28
    {
29
      width: 100px;
30
    }
31
32
33
  div#contain-content
34
    {
35
      background-color: red;
36
      contain: content;
37
      height: 100px;
38
    }
39
40
  div.abspos
41
    {
42
      background-color: green;
43
      height: 50px;
44
      position: absolute;
45
      right: 0;
46
    }
47
48
  div#contain-content > div.abspos
49
    {
50
      counter-increment: counter-of-abspos-div 4;
51
    }
52
53
    /*
54
    This increments the counter identified as
55
    "counter-of-abspos-div" of the step value
56
    of 4 (an entirely arbitrary number) each and
57
    every time there is a div.abspos child
58
    within the subtree of div#contain-content
59
    */
60
61
  div#first-abspos
62
    {
63
      top: 0px;
64
    }
65
66
  div#second-abspos
67
    {
68
      bottom: 0px;
69
    }
70
71
  div#result::after
72
    {
73
      content: counter(counter-of-abspos-div);
74
      font-size: 3em;
75
    }
76
77
    /*
78
    Now, the generated content is set to the
79
    current value of the counter identified
80
    as "counter-of-abspos-div":
81
    17 + 4 * 2 == 25
82
    */
83
  </style>
84
85
  <body>
86
87
  <p>Test passes if there is a filled green square, no red and the number 25.
88
89
  <div id="contain-content">
90
    <div id="first-abspos" class="abspos"></div>
91
    <div id="second-abspos" class="abspos"></div>
92
  </div>
93
94
  <div id="result"></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-crash.html +12 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-crash.html_sec1
1
<!DOCTYPE html>
2
<link rel="help" href="https://crbug.com/1129563">
3
<body style="contain: size layout;">
4
  <div id="target" style="contain: size layout;"></div>
5
  <div id="child"></div>
6
</body>
7
<script>
8
document.body.offsetTop;
9
const target = document.getElementById('target');
10
const child = document.getElementById('child');
11
target.appendChild(child);
12
</script>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-flexbox-outline-expected.txt +3 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-flexbox-outline-expected.txt_sec1
1
2
PASS Pass if no crash
3
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-flexbox-outline.html +24 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-flexbox-outline.html_sec1
1
<!doctype html>
2
<title>Test `contain: strict` to Flexbox does not crash</title>
3
<link rel="help" href="https://www.w3.org/TR/css-contain-1/#contain-property">
4
<link rel="author" href="mailto:kojii@chromium.org">
5
<style>
6
body {
7
  contain: strict;
8
  display: flex;
9
}
10
html {
11
  outline: 1px auto;
12
}
13
</style>
14
<script src="/resources/testharness.js"></script>
15
<script src="/resources/testharnessreport.js"></script>
16
<div id="target"></div>
17
<div id="log"></div>
18
<script>
19
test(() => {
20
  document.body.offsetTop;
21
  target.style.width = '100px';
22
  document.body.offsetTop;
23
}, "Pass if no crash");
24
</script>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-001-expected.html +11 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-001-expected.html_sec1
1
<!doctype html>
2
<html>
3
<head>
4
   <title>Reference rendering - passes if there is the word "PASS" below</title>
5
   <link rel="author" title="Opera" href="https://www.opera.com/">
6
</head>
7
<body>
8
   <p>Test passes if there is the word "PASS" below.</p>
9
   <div>PASS</div>
10
</body>
11
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-001.html +23 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-001.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test: layout containment on non-atomic inlines</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
  <meta name=flags content="">
7
  <meta name=assert content="layout containment does not apply to non atomic inlines">
8
  <link rel="match" href="../reference/pass_if_pass_below.html">
9
  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-layout">
10
11
<style>
12
#pa {
13
  contain: layout;
14
  height: 100vh; /*If layout containment applies, the span becomes a BFC, height applies, and knocks SS off the page */
15
}
16
17
#ss {
18
  vertical-align: bottom;
19
}
20
</style>
21
22
<p>Test passes if there is the word "PASS" below.</p>
23
<div><span id="pa">PA</span><span id="ss">SS</span></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-002-expected.xht +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-002-expected.xht_sec1
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
 <head>
4
  <title>CSS Reftest Reference</title>
5
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
6
  <style type="text/css"><![CDATA[
7
  div
8
  {
9
  background-color: green;
10
  height: 100px;
11
  width: 100px;
12
  }
13
  ]]></style>
14
 </head>
15
 <body>
16
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17
  <div></div>
18
 </body>
19
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-002.html +37 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-002.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test: layout containment on ruby-base</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
  <meta name=flags content="ahem">
7
  <meta name=assert content="layout containment does not apply to ruby-base">
8
  <link rel="match" href="../reference/ref-filled-green-100px-square.xht">
9
  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-layout">
10
11
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
12
<style>
13
div {
14
  position: relative;
15
  background: red;
16
  width: 100px;
17
  height: 100px;
18
  padding: 25px;
19
  box-sizing: border-box;
20
}
21
rb {
22
  contain: layout;
23
  display: ruby-base;
24
  font-family: Ahem;
25
  font-size: 100px;
26
  line-height: 1;
27
}
28
rb::after {
29
  content: "X";
30
  color: green;
31
  position: absolute;
32
  top:0; left: 0;
33
}
34
</style>
35
36
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
37
<div><ruby><rb></rb></ruby></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-003-expected.xht +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-003-expected.xht_sec1
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
 <head>
4
  <title>CSS Reftest Reference</title>
5
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
6
  <style type="text/css"><![CDATA[
7
  div
8
  {
9
  background-color: green;
10
  height: 100px;
11
  width: 100px;
12
  }
13
  ]]></style>
14
 </head>
15
 <body>
16
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17
  <div></div>
18
 </body>
19
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-003.html +37 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-003.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test: layout containment on ruby-base-container</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
  <meta name=flags content="ahem">
7
  <meta name=assert content="layout containment does not apply to ruby-base-container">
8
  <link rel="match" href="../reference/ref-filled-green-100px-square.xht">
9
  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-layout">
10
11
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
12
<style>
13
div {
14
  position: relative;
15
  background: red;
16
  width: 100px;
17
  height: 100px;
18
  padding: 25px;
19
  box-sizing: border-box;
20
}
21
rbc {
22
  contain: layout;
23
  display: ruby-base-container;
24
  font-family: Ahem;
25
  font-size: 100px;
26
  line-height: 1;
27
}
28
rbc::after {
29
  content: "X";
30
  color: green;
31
  position: absolute;
32
  top:0; left: 0;
33
}
34
</style>
35
36
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
37
<div><ruby><rbc></rbc></ruby></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-004-expected.xht +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-004-expected.xht_sec1
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
 <head>
4
  <title>CSS Reftest Reference</title>
5
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
6
  <style type="text/css"><![CDATA[
7
  div
8
  {
9
  background-color: green;
10
  height: 100px;
11
  width: 100px;
12
  }
13
  ]]></style>
14
 </head>
15
 <body>
16
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17
  <div></div>
18
 </body>
19
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-004.html +37 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-004.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test: layout containment on ruby-text-container</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
  <meta name=flags content="ahem">
7
  <meta name=assert content="layout containment does not apply to ruby-text-container">
8
  <link rel="match" href="../reference/ref-filled-green-100px-square.xht">
9
  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-layout">
10
11
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
12
<style>
13
div {
14
  position: relative;
15
  background: red;
16
  width: 100px;
17
  height: 100px;
18
  padding: 25px;
19
  box-sizing: border-box;
20
}
21
rtc {
22
  contain: layout;
23
  display: ruby-text-container;
24
  font-family: Ahem;
25
  font-size: 100px;
26
  line-height: 1;
27
}
28
rtc::after {
29
  content: "X";
30
  color: green;
31
  position: absolute;
32
  top:0; left: 0;
33
}
34
</style>
35
36
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
37
<div><ruby><rtc></rtc></ruby></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-005-expected.xht +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-005-expected.xht_sec1
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
 <head>
4
  <title>CSS Reftest Reference</title>
5
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
6
  <style type="text/css"><![CDATA[
7
  div
8
  {
9
  background-color: green;
10
  height: 100px;
11
  width: 100px;
12
  }
13
  ]]></style>
14
 </head>
15
 <body>
16
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17
  <div></div>
18
 </body>
19
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-005.html +37 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-005.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test: layout containment on ruby-text</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
  <meta name=flags content="ahem">
7
  <meta name=assert content="layout containment does not apply to ruby-text">
8
  <link rel="match" href="../reference/ref-filled-green-100px-square.xht">
9
  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-layout">
10
11
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
12
<style>
13
div {
14
  position: relative;
15
  background: red;
16
  width: 100px;
17
  height: 100px;
18
  padding: 25px;
19
  box-sizing: border-box;
20
}
21
rt {
22
  contain: layout;
23
  display: -webkit-ruby-text;
24
  font-family: Ahem;
25
  font-size: 100px;
26
  line-height: 1;
27
}
28
rt::after {
29
  content: "X";
30
  color: green;
31
  position: absolute;
32
  top:0; left: 0;
33
}
34
</style>
35
36
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
37
<div><ruby><rt></rt></ruby></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-006-expected.xht +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-006-expected.xht_sec1
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
 <head>
4
  <title>CSS Reftest Reference</title>
5
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
6
  <style type="text/css"><![CDATA[
7
  div
8
  {
9
  background-color: green;
10
  height: 100px;
11
  width: 100px;
12
  }
13
  ]]></style>
14
 </head>
15
 <body>
16
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17
  <div></div>
18
 </body>
19
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-006.html +28 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-006.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Layout containment absolutely positioned descendants</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
6
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
7
<meta name=assert content="Layout containment makes an element to act as containing block for absolutely positioned descendants.">
8
<style>
9
#contain-layout {
10
  contain: layout;
11
  width: 100px;
12
  height: 100px;
13
  background: red;
14
}
15
16
#abspos {
17
  position: absolute;
18
  bottom: 0;
19
  right: 0;
20
  background: green;
21
  width: 100px;
22
  height: 100px;
23
}
24
</style>
25
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
26
<div id="contain-layout">
27
  <div id="abspos"></div>
28
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-007-expected.xht +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-007-expected.xht_sec1
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
 <head>
4
  <title>CSS Reftest Reference</title>
5
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
6
  <style type="text/css"><![CDATA[
7
  div
8
  {
9
  background-color: green;
10
  height: 100px;
11
  width: 100px;
12
  }
13
  ]]></style>
14
 </head>
15
 <body>
16
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17
  <div></div>
18
 </body>
19
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-007.html +28 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-007.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Layout containment fixed positioned descendants</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
6
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
7
<meta name=assert content="Layout containment makes an element to act as containing block for fixed positioned descendants.">
8
<style>
9
#contain-layout {
10
  contain: layout;
11
  width: 100px;
12
  height: 100px;
13
  background: red;
14
}
15
16
#fixed {
17
  position: fixed;
18
  bottom: 0;
19
  right: 0;
20
  background: green;
21
  width: 100px;
22
  height: 100px;
23
}
24
</style>
25
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
26
<div id="contain-layout">
27
  <div id="fixed"></div>
28
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-009-expected.xht +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-009-expected.xht_sec1
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
 <head>
4
  <title>CSS Reftest Reference</title>
5
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
6
  <style type="text/css"><![CDATA[
7
  div
8
  {
9
  background-color: green;
10
  height: 100px;
11
  width: 100px;
12
  }
13
  ]]></style>
14
 </head>
15
 <body>
16
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17
  <div></div>
18
 </body>
19
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-009.html +38 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-009.html_sec1
1
<!DOCTYPE html>
2
<meta charset=utf-8>
3
<title>CSS Containment Test: Layout containment on table-row-group</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
6
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
7
<meta name=flags content="ahem">
8
<meta name=assert content="Layout containment doesn't apply to table-row-group elements.">
9
10
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
11
<style>
12
#wrapper {
13
  position: relative;
14
  background: red;
15
  width: 100px;
16
  height: 100px;
17
  padding: 25px;
18
  box-sizing: border-box;
19
}
20
#table-row-group {
21
  display: table-row-group;
22
  contain: layout;
23
}
24
#abspos {
25
  position: absolute;
26
  font: 100px/1 Ahem;
27
  color: green;
28
  top: 0;
29
  left: 0;
30
}
31
</style>
32
33
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
34
<div id="wrapper">
35
  <div id="table-row-group">
36
    <div id="abspos">X</div>
37
  </div>
38
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-010-expected.xht +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-010-expected.xht_sec1
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
 <head>
4
  <title>CSS Reftest Reference</title>
5
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
6
  <style type="text/css"><![CDATA[
7
  div
8
  {
9
  background-color: green;
10
  height: 100px;
11
  width: 100px;
12
  }
13
  ]]></style>
14
 </head>
15
 <body>
16
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17
  <div></div>
18
 </body>
19
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-010.html +38 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-010.html_sec1
1
<!DOCTYPE html>
2
<meta charset=utf-8>
3
<title>CSS Containment Test: Layout containment on table-header-group</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
6
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
7
<meta name=flags content="ahem">
8
<meta name=assert content="Layout containment doesn't apply to table-header-group elements.">
9
10
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
11
<style>
12
#wrapper {
13
  position: relative;
14
  background: red;
15
  width: 100px;
16
  height: 100px;
17
  padding: 25px;
18
  box-sizing: border-box;
19
}
20
#table-header-group {
21
  display: table-header-group;
22
  contain: layout;
23
}
24
#abspos {
25
  position: absolute;
26
  font: 100px/1 Ahem;
27
  color: green;
28
  top: 0;
29
  left: 0;
30
}
31
</style>
32
33
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
34
<div id="wrapper">
35
  <div id="table-header-group">
36
    <div id="abspos">X</div>
37
  </div>
38
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-011-expected.xht +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-011-expected.xht_sec1
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
 <head>
4
  <title>CSS Reftest Reference</title>
5
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
6
  <style type="text/css"><![CDATA[
7
  div
8
  {
9
  background-color: green;
10
  height: 100px;
11
  width: 100px;
12
  }
13
  ]]></style>
14
 </head>
15
 <body>
16
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17
  <div></div>
18
 </body>
19
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-011.html +38 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-011.html_sec1
1
<!DOCTYPE html>
2
<meta charset=utf-8>
3
<title>CSS Containment Test: Layout containment on table-footer-group</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
6
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
7
<meta name=flags content="ahem">
8
<meta name=assert content="Layout containment doesn't apply to table-footer-group elements.">
9
10
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
11
<style>
12
#wrapper {
13
  position: relative;
14
  background: red;
15
  width: 100px;
16
  height: 100px;
17
  padding: 25px;
18
  box-sizing: border-box;
19
}
20
#table-footer-group {
21
  display: table-footer-group;
22
  contain: layout;
23
}
24
#abspos {
25
  position: absolute;
26
  font: 100px/1 Ahem;
27
  color: green;
28
  top: 0;
29
  left: 0;
30
}
31
</style>
32
33
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
34
<div id="wrapper">
35
  <div id="table-footer-group">
36
    <div id="abspos">X</div>
37
  </div>
38
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-012-expected.xht +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-012-expected.xht_sec1
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
 <head>
4
  <title>CSS Reftest Reference</title>
5
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
6
  <style type="text/css"><![CDATA[
7
  div
8
  {
9
  background-color: green;
10
  height: 100px;
11
  width: 100px;
12
  }
13
  ]]></style>
14
 </head>
15
 <body>
16
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17
  <div></div>
18
 </body>
19
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-012.html +38 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-012.html_sec1
1
<!DOCTYPE html>
2
<meta charset=utf-8>
3
<title>CSS Containment Test: Layout containment on table-row</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
6
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
7
<meta name=flags content="ahem">
8
<meta name=assert content="Layout containment doesn't apply to table-row elements.">
9
10
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
11
<style>
12
#wrapper {
13
  position: relative;
14
  background: red;
15
  width: 100px;
16
  height: 100px;
17
  padding: 25px;
18
  box-sizing: border-box;
19
}
20
#table-row {
21
  display: table-row;
22
  contain: layout;
23
}
24
#abspos {
25
  position: absolute;
26
  font: 100px/1 Ahem;
27
  color: green;
28
  top: 0;
29
  left: 0;
30
}
31
</style>
32
33
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
34
<div id="wrapper">
35
  <div id="table-row">
36
    <div id="abspos">X</div>
37
  </div>
38
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-013-expected.xht +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-013-expected.xht_sec1
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
 <head>
4
  <title>CSS Reftest Reference</title>
5
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
6
  <style type="text/css"><![CDATA[
7
  div
8
  {
9
  background-color: green;
10
  height: 100px;
11
  width: 100px;
12
  }
13
  ]]></style>
14
 </head>
15
 <body>
16
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17
  <div></div>
18
 </body>
19
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-013.html +30 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-013.html_sec1
1
<!DOCTYPE html>
2
<meta charset=utf-8>
3
<title>CSS Containment Test: Layout containment on table-cell</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
6
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
7
<meta name=assert content="Layout containment does apply to table-cell elements.">
8
9
<style>
10
#table-cell {
11
  display: table-cell;
12
  contain: layout;
13
  width: 100px;
14
  height: 100px;
15
  background: red;
16
}
17
#abspos {
18
  position: absolute;
19
  bottom: 0;
20
  right: 0;
21
  background: green;
22
  width: 100px;
23
  height: 100px;
24
}
25
</style>
26
27
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
28
<div id="table-cell">
29
  <div id="abspos"></div>
30
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-014-expected.xht +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-014-expected.xht_sec1
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
 <head>
4
  <title>CSS Reftest Reference</title>
5
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
6
  <style type="text/css"><![CDATA[
7
  div
8
  {
9
  background-color: green;
10
  height: 100px;
11
  width: 100px;
12
  }
13
  ]]></style>
14
 </head>
15
 <body>
16
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17
  <div></div>
18
 </body>
19
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-014.html +30 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-014.html_sec1
1
<!DOCTYPE html>
2
<meta charset=utf-8>
3
<title>CSS Containment Test: Layout containment on table-caption</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
6
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
7
<meta name=assert content="Layout containment does apply to table-caption elements.">
8
9
<style>
10
#table-caption {
11
  display: table-caption;
12
  contain: layout;
13
  width: 100px;
14
  height: 100px;
15
  background: red;
16
}
17
#abspos {
18
  position: absolute;
19
  bottom: 0;
20
  right: 0;
21
  background: green;
22
  width: 100px;
23
  height: 100px;
24
}
25
</style>
26
27
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
28
<div id="table-caption">
29
  <div id="abspos"></div>
30
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-016-expected.html +11 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-016-expected.html_sec1
1
<!doctype html>
2
<html>
3
<head>
4
   <title>Reference rendering - passes if there is the word "PASS" below</title>
5
   <link rel="author" title="Opera" href="https://www.opera.com/">
6
</head>
7
<body>
8
   <p>Test passes if there is the word "PASS" below.</p>
9
   <div>PASS</div>
10
</body>
11
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-016.html +20 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-016.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Layout containment stacking context</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
6
<link rel="match" href="../reference/pass_if_pass_below.html">
7
<meta name=assert content="Layout containment elements create a stacking context.">
8
<style>
9
div {
10
  contain: layout;
11
  background: white;
12
}
13
span {
14
  position: relative;
15
  z-index: -1;
16
}
17
</style>
18
19
<p>Test passes if there is the word "PASS" below.</p>
20
<div><span>PASS</span></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-017-expected.html +4 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-017-expected.html_sec1
1
<!DOCTYPE html>
2
<title>CSS Reftest Reference</title>
3
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
4
<p>There should be nothing below.</p>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-017.html +21 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-017.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Layout containment stacking context</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
6
<link rel="match" href="../reference/nothing.html">
7
<meta name=assert content="Elements in which layout containment doesn't apply, do not create a stacking context.">
8
<style>
9
div {
10
  display: -webkit-ruby-text;
11
  contain: layout;
12
  background: white;
13
}
14
span {
15
  position: relative;
16
  z-index: -1;
17
}
18
</style>
19
20
<p>There should be nothing below.</p>
21
<div><span>FAIL</span></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-018-expected.html +4 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-018-expected.html_sec1
1
<!DOCTYPE html>
2
<title>CSS Reftest Reference</title>
3
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
4
<p>There should be nothing below.</p>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-018.html +21 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-018.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Layout containment stacking context</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
6
<link rel="match" href="../reference/nothing.html">
7
<meta name=assert content="Elements in which layout containment doesn't apply, do not create a stacking context.">
8
<style>
9
div {
10
  display: inline;
11
  contain: layout;
12
  background: white;
13
}
14
span {
15
  position: relative;
16
  z-index: -1;
17
}
18
</style>
19
20
<p>There should be nothing below.</p>
21
<div><span>FAIL</span></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-001-expected.xht +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-001-expected.xht_sec1
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
 <head>
4
  <title>CSS Reftest Reference</title>
5
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
6
  <style type="text/css"><![CDATA[
7
  div
8
  {
9
  background-color: green;
10
  height: 100px;
11
  width: 100px;
12
  }
13
  ]]></style>
14
 </head>
15
 <body>
16
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17
  <div></div>
18
 </body>
19
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-001.html +31 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-001.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test: layout containment and baselines</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
  <meta name=assert content="With contain:layout, for the purpose of the vertical-align property, the containing element is treated as having no baseline.">
7
  <link rel="match" href="../reference/ref-filled-green-100px-square.xht">
8
  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-layout">
9
  <meta name="flags" content="">
10
11
<style>
12
#red {
13
  position: absolute;
14
  background: red;
15
  width: 100px;
16
  height: 100px;
17
  z-index: -1;
18
}
19
.green {
20
  display: inline-block;
21
  height: 100px;
22
  background: green;
23
  width: 50px;
24
  contain: layout;
25
  color: transparent;
26
}
27
</style>
28
29
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
30
<div id=red></div>
31
<div class=green></div><div class=green>a</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-002-expected.xht +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-002-expected.xht_sec1
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
 <head>
4
  <title>CSS Reftest Reference</title>
5
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
6
  <style type="text/css"><![CDATA[
7
  div
8
  {
9
  background-color: green;
10
  height: 100px;
11
  width: 100px;
12
  }
13
  ]]></style>
14
 </head>
15
 <body>
16
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17
  <div></div>
18
 </body>
19
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-002.html +34 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-002.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Layout containment supress baseline in flex items</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
6
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#valdef-align-items-baseline">
7
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
8
<meta name=assert content="Flex items with layout containment are treated as having no baseline, for that reason their baseline is synthesized from the flex item's border box when they're baseline aligned.">
9
<style>
10
#flex {
11
  display: inline-flex;
12
  align-items: baseline;
13
  background: red;
14
}
15
16
canvas {
17
  background: green;
18
  width: 50px;
19
  height: 100px;
20
}
21
22
#item {
23
  contain: layout;
24
  color: transparent;
25
  background: green;
26
  width: 50px;
27
  height: 100px;
28
}
29
</style>
30
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
31
<div id="flex">
32
  <canvas></canvas>
33
  <div id="item">item</div>
34
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-003-expected.xht +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-003-expected.xht_sec1
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
 <head>
4
  <title>CSS Reftest Reference</title>
5
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
6
  <style type="text/css"><![CDATA[
7
  div
8
  {
9
  background-color: green;
10
  height: 100px;
11
  width: 100px;
12
  }
13
  ]]></style>
14
 </head>
15
 <body>
16
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17
  <div></div>
18
 </body>
19
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-003.html +35 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-003.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Layout containment supress baseline in grid items</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
6
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-baselines">
7
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
8
<meta name=assert content="Grid items with layout containment are treated as having no baseline, for that reason their baseline is synthesized from the grid item's border box when they're baseline aligned.">
9
<style>
10
#grid {
11
  display: inline-grid;
12
  align-items: baseline;
13
  background: red;
14
  grid-auto-flow: column;
15
}
16
17
canvas {
18
  background: green;
19
  width: 50px;
20
  height: 100px;
21
}
22
23
#item {
24
  contain: layout;
25
  color: transparent;
26
  background: green;
27
  width: 50px;
28
  height: 100px;
29
}
30
</style>
31
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
32
<div id="grid">
33
  <canvas></canvas>
34
  <div id="item">item</div>
35
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-004-expected.html +23 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-004-expected.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Reference file</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
6
<style>
7
div {
8
  display: inline-block;
9
  font: 100px/1 Ahem;
10
  width: 100px;
11
  height: 100px;
12
}
13
#first {
14
  color: blue;
15
  position: relative;
16
  top: 20px;
17
}
18
#second {
19
  color: green;
20
}
21
</style>
22
<p>Test passes if there is not a rectangle as the two boxes ("blue" and "green") are not baseline aligned.</p>
23
<div id="first">X</div><div id="second">X</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-004.html +32 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-004.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Layout containment supress baseline in table cells</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
6
<link rel="match" href="reference/contain-layout-baseline-004-ref.html">
7
<meta name=assert content="Table cells with layout containment are treated as having no baseline, for that reason their baseline is synthesized from the cell's border box when they're baseline aligned.">
8
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
9
<style>
10
#table {
11
  display: table;
12
  font: 100px/1 Ahem;
13
}
14
15
#table > * {
16
  display: table-cell;
17
}
18
19
#first {
20
  color: blue;
21
}
22
23
#second {
24
  color: green;
25
  contain: layout;
26
}
27
</style>
28
<p>Test passes if there is not a rectangle as the two boxes ("blue" and "green") are not baseline aligned.</p>
29
<div id="table">
30
  <div id="first">X</div>
31
  <div id="second">X</div>
32
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-005-expected.html +61 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-005-expected.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Reference file</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<style>
6
.wrapper {
7
  height: 110px;
8
}
9
.wrapper > * {
10
  vertical-align: bottom;
11
  background: cyan;
12
  font-size: 20px;
13
}
14
.wrapper > :nth-child(1) {
15
  background: magenta;
16
}
17
.inline-block {
18
  display: inline-block;
19
}
20
canvas {
21
  width: 100px;
22
  height: 100px;
23
}
24
fieldset, details {
25
  display: inline-block;
26
  width: max-content;
27
}
28
</style>
29
<p>Test passes if it has the same output than the reference (all elements are aligned on the bottom edge).</p>
30
<div class="wrapper">
31
  <div class="inline-block" style="font-size: 80px;">foo</div>
32
  <div class="inline-block">foo</div>
33
  <div class="inline-block" style="border: solid thick; padding: 2px;">foo</div>
34
  <div style="display: inline-flex;">foo</div>
35
  <div style="display: inline-flex; border: solid thick; padding: 2px;">foo</div>
36
  <div style="display: inline-grid;">foo</div>
37
  <div style="display: inline-grid; border: solid thick; padding: 2px;">foo</div>
38
</div>
39
<div class="wrapper">
40
  <canvas></canvas>
41
  <div class="inline-block">foo</div>
42
  <button>foo</button>
43
  <select><option>foo</option></select>
44
  <select multiple style="height: 40px;"><option>foo</option></select>
45
  <textarea style="height: 40px;"></textarea>
46
</div>
47
<div class="wrapper">
48
  <canvas></canvas>
49
  <input value="foo" size="3"></input>
50
  <input type="file"></input>
51
</div>
52
<div class="wrapper">
53
  <canvas></canvas>
54
  <table style="display: inline-table;"><tr><td>foo</td></tr></table>
55
  <canvas></canvas>
56
  <fieldset></fieldset>
57
  <fieldset><legend>foo</legend></fieldset>
58
  <fieldset><legend>foo</legend>foo</fieldset>
59
  <details></details>
60
  <details><summary>foo</summary>foo</details> <details open="true"><summary>foo</summary>foo</details>
61
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-005.html +65 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-005.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Layout containment supress baseline</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
6
<link rel="match" href="reference/contain-layout-baseline-005-ref.html">
7
<meta name=assert content="This test checks that baseline is suppressed for elements with 'contain: layout', so they are treated as having no baseline (thus its baseline is synthetized).">
8
<style>
9
.wrapper {
10
  height: 110px;
11
}
12
.wrapper > * {
13
  contain: layout;
14
  background: cyan;
15
  font-size: 20px;
16
  vertical-align: baseline;
17
}
18
.wrapper > :nth-child(1) {
19
  background: magenta;
20
}
21
.inline-block {
22
  display: inline-block;
23
}
24
canvas {
25
  width: 100px;
26
  height: 100px;
27
}
28
fieldset, details {
29
  display: inline-block;
30
  width: max-content;
31
}
32
</style>
33
<p>Test passes if it has the same output than the reference (all elements are aligned on the bottom edge).</p>
34
<div class="wrapper">
35
  <div class="inline-block" style="font-size: 80px;">foo</div>
36
  <div class="inline-block">foo</div>
37
  <div class="inline-block" style="border: solid thick; padding: 2px;">foo</div>
38
  <div style="display: inline-flex;">foo</div>
39
  <div style="display: inline-flex; border: solid thick; padding: 2px;">foo</div>
40
  <div style="display: inline-grid;">foo</div>
41
  <div style="display: inline-grid; border: solid thick; padding: 2px;">foo</div>
42
</div>
43
<div class="wrapper">
44
  <canvas></canvas>
45
  <div class="inline-block">foo</div>
46
  <button>foo</button>
47
  <select><option>foo</option></select>
48
  <select multiple style="height: 40px;"><option>foo</option></select>
49
  <textarea style="height: 40px;"></textarea>
50
</div>
51
<div class="wrapper">
52
  <canvas></canvas>
53
  <input value="foo" size="3"></input>
54
  <input type="file"></input>
55
</div>
56
<div class="wrapper">
57
  <canvas></canvas>
58
  <table style="display: inline-table;"><tr><td>foo</td></tr></table>
59
  <canvas></canvas>
60
  <fieldset></fieldset>
61
  <fieldset><legend>foo</legend></fieldset>
62
  <fieldset><legend>foo</legend>foo</fieldset>
63
  <details></details>
64
  <details><summary>foo</summary>foo</details> <details open="true"><summary>foo</summary>foo</details>
65
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-breaks-001-expected.html +30 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-breaks-001-expected.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test reference</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
<style>
7
article {
8
  columns: 2 1ch;
9
  column-gap: 0;
10
  float: left;
11
  font-family: monospace;
12
  margin-right: 3em;
13
  line-height: 1;
14
  height: 4em;
15
  column-fill: auto;
16
}
17
div:last-of-type {
18
  break-before: column;
19
}
20
</style>
21
22
<p>Test passes if there are two identical blocks “A” letters below.
23
<article>
24
  <div>A<br>A</div>
25
  <div>A<br>A</div>
26
</article>
27
<article>
28
  <div>A<br>A</div>
29
  <div>A<br>A</div>
30
</article>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-breaks-001.html +47 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-breaks-001.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test: layout containment and forced breaks</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
  <meta name=flags content="">
7
  <meta name=assert content="layout containment allows forced breaks.">
8
  <link rel="match" href="reference/contain-style-breaks-004-ref.html">
9
  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-layout">
10
  <link rel=help href="https://drafts.csswg.org/css-break-3/#forced-break">
11
12
<style>
13
article {
14
  columns: 2 1ch;
15
  column-gap: 0;
16
  float: left;
17
  font-family: monospace;
18
  margin-right: 3em;
19
  line-height: 1;
20
  height: 4em;
21
  column-fill: auto;
22
}
23
div > div:last-of-type {
24
  break-before: column;
25
}
26
#test > div {
27
  contain: layout;
28
}
29
</style>
30
31
<p>Test passes if there are two identical blocks “A” letters below.
32
<article id=ref>
33
  <div>
34
    <div>A<br>A</div>
35
    <div>A<br>A</div>
36
  </div>
37
</article>
38
<article id=test>
39
  <div>
40
    <div>A<br>A</div>
41
    <div>A<br>A</div>
42
  </div>
43
</article>
44
<!--
45
Having two blocks to avoid making browsers that don't support forced break at all fail.
46
Since containment is supposed to have no effect, failing such browsers would not be useful.
47
-->
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-breaks-002-expected.html +25 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-breaks-002-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  div
11
    {
12
      float: left;
13
    }
14
15
  img
16
    {
17
      vertical-align: top;
18
    }
19
  </style>
20
21
  <p>Test passes if there is a) a blue square below a yellow square and b) an orange square on the righthand side of the yellow square.
22
23
  <div><img src="support/swatch-yellow.png" width="100" height="100" alt="Image download support must be enabled"><br><img src="support/swatch-blue.png" width="100" height="100" alt="Image download support must be enabled"></div>
24
25
  <div><img src="support/swatch-orange.png" width="100" height="100" alt="Image download support must be enabled"></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-breaks-002.html +54 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-breaks-002.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS-contain test: layout containment and forced breaks</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <meta content="" name="flags">
9
  <meta content="forced breaks within layout containment do not propagate to the parent." name="assert">
10
11
  <link href="reference/contain-layout-breaks-002-ref.html" rel="match">
12
13
  <link href="https://drafts.csswg.org/css-contain-1/#containment-layout" rel="help">
14
  <link href="https://drafts.csswg.org/css-break-3/#forced-break" rel="help">
15
16
  <style>
17
  article
18
    {
19
      column-fill: auto; /* columns are filled sequentially */
20
      column-gap: 0em;
21
      columns: 2 100px; /* 2 columns each 100px wide */
22
      float: left; /* to make multi-column element shrink-wrap */
23
      height: 400px; /* give more than enough to go wrong */
24
    }
25
26
  div#yellow-normal
27
    {
28
      border-top: yellow solid 100px;
29
    }
30
31
  div#blue-parent
32
    {
33
      border-top: blue solid 100px;
34
      contain: layout;
35
    }
36
37
  div#orange-child
38
    {
39
      border-top: orange solid 100px;
40
      break-before: column;
41
    }
42
  </style>
43
44
  <p>Test passes if there is a) a blue square below a yellow square and b) an orange square on the righthand side of the yellow square.
45
46
  <article>
47
48
    <div id="yellow-normal"></div>
49
50
    <div id="blue-parent">
51
      <div id="orange-child"></div>
52
    </div>
53
54
  </article>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-button-001-expected.html +21 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-button-001-expected.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Reference file</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<style>
6
div.fakeButton {
7
  display: inline-block;
8
  border: 5px solid green;
9
  padding: 0;
10
  margin-bottom: 2px;
11
  color: transparent;
12
  width: 0;
13
  height: 0px;
14
  /* Layout containment creates a stacking context, the following lines simuluate the same in the reference file. */
15
  position: relative;
16
  z-index: 1;
17
}
18
</style>
19
20
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square aligned 2px above the text's baseline, and then the word "after".</p>
21
before<div class="fakeButton"></div>after
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-button-001.html +24 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-button-001.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Layout containment on button</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
6
<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#propdef-vertical-align">
7
<link rel="match" href="reference/contain-layout-button-001-ref.html">
8
<meta name=assert content="Layout containment does apply to buttons, thus their baseline is their margin-bottom edge.">
9
<style>
10
button {
11
  border: 5px solid green;
12
  padding: 0;
13
  /* We use a nonzero margin-bottom to be sure we're synthesizing a baseline
14
     from the margin-box rather than from the border-box: */
15
  margin-bottom: 2px;
16
  contain: layout;
17
  color: transparent;
18
  width: 0;
19
  height: 0;
20
}
21
</style>
22
23
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square aligned 2px above the text's baseline, and then the word "after".</p>
24
before<button>b</button>after
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-cell-001-expected.html +43 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-cell-001-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  table
11
    {
12
      background-color: blue;
13
      border-spacing: 2px;
14
      height: 206px;
15
      table-layout: fixed;
16
      width: 206px;
17
    }
18
19
  td
20
    {
21
      background-color: white;
22
      padding: 0px;
23
      vertical-align: baseline;
24
    }
25
26
  span
27
    {
28
      background-color: green;
29
      color: white;
30
      font-family: monospace;
31
      vertical-align: top;
32
    }
33
  </style>
34
35
  <p>Test passes if there is the word PASS and if there is <strong>no red</strong>.
36
37
  <table>
38
39
    <tr><td>&nbsp;<td>&nbsp;
40
41
    <tr><td>&nbsp;<td><span>PASS</span>
42
43
  </table>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-cell-001.html +69 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-cell-001.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: layout' applies to 'table-cell' elements</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-layout">
9
  <link rel="match" href="reference/contain-layout-cell-001-ref.html">
10
11
  <meta content="In this test, the div#contain should act as the containing block for div#abs-pos ." name="assert">
12
  <meta name="flags" content="">
13
14
  <style>
15
  div#table
16
    {
17
      background-color: blue;
18
      border-spacing: 2px;
19
      display: table;
20
      height: 206px;
21
      table-layout: fixed;
22
      width: 206px;
23
    }
24
25
  div.row
26
    {
27
      display: table-row;
28
    }
29
30
  div.cell
31
    {
32
      background-color: white;
33
      display: table-cell;
34
      vertical-align: top;
35
    }
36
37
  div#contain
38
    {
39
      contain: layout;
40
    }
41
42
  span
43
    {
44
      background-color: red;
45
      color: yellow;
46
      font-family: monospace;
47
      vertical-align: top;
48
    }
49
50
  div#abs-pos
51
    {
52
      background-color: green;
53
      color: white;
54
      font-family: monospace;
55
      left: 0px;
56
      position: absolute;
57
      top: 0px;
58
    }
59
  </style>
60
61
  <p>Test passes if there is the word PASS and if there is <strong>no red</strong>.
62
63
  <div id="table">
64
65
    <div class="row"><div class="cell">&nbsp;</div><div class="cell">&nbsp;</div></div>
66
67
    <div class="row"><div class="cell">&nbsp;</div><div class="cell" id="contain"><span>FAIL</span><div id="abs-pos">PASS</div></div></div>
68
69
  </div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-cell-002-expected.html +43 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-cell-002-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  table
11
    {
12
      background-color: blue;
13
      border-spacing: 2px;
14
      height: 206px;
15
      table-layout: fixed;
16
      width: 206px;
17
    }
18
19
  td
20
    {
21
      background-color: white;
22
      padding: 0px;
23
      vertical-align: baseline;
24
    }
25
26
  span
27
    {
28
      background-color: green;
29
      color: white;
30
      font-family: monospace;
31
      vertical-align: top;
32
    }
33
  </style>
34
35
  <p>Test passes if there is the word PASS and if there is <strong>no red</strong>.
36
37
  <table>
38
39
    <tr><td>&nbsp;<td>&nbsp;
40
41
    <tr><td>&nbsp;<td><span>PASS</span>
42
43
  </table>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-cell-002.html +63 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-cell-002.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: layout' applies to 'table-cell' elements</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-layout">
9
  <link rel="match" href="reference/contain-layout-cell-001-ref.html">
10
11
  <meta content="In this test, the td#contain should act as the containing block for div#abs-pos ." name="assert">
12
  <meta name="flags" content="">
13
14
  <style>
15
  table
16
    {
17
      background-color: blue;
18
      border-spacing: 2px;
19
      height: 206px;
20
      table-layout: fixed;
21
      width: 206px;
22
    }
23
24
  td
25
    {
26
      background-color: white;
27
      padding: 0px;
28
      vertical-align: top;
29
    }
30
31
  td#contain
32
    {
33
      contain: layout;
34
    }
35
36
  span
37
    {
38
      background-color: red;
39
      color: yellow;
40
      font-family: monospace;
41
      vertical-align: top;
42
    }
43
44
  div#abs-pos
45
    {
46
      background-color: green;
47
      color: white;
48
      font-family: monospace;
49
      left: 0px;
50
      position: absolute;
51
      top: 0px;
52
    }
53
  </style>
54
55
  <p>Test passes if there is the word PASS and if there is <strong>no red</strong>.
56
57
  <table>
58
59
    <tr><td>&nbsp;<td>&nbsp;
60
61
    <tr><td>&nbsp;<td id="contain"><span>FAIL</span><div id="abs-pos">PASS</div>
62
63
  </table>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-containing-block-absolute-001-expected.html +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-containing-block-absolute-001-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
7
  <style>
8
  #a {
9
      width: 100px;
10
      height: 100px;
11
      background: green;
12
      margin: 50px;
13
  }
14
  </style>
15
</head>
16
<body>
17
  <div id="a"></div>
18
</body>
19
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-containing-block-absolute-001.html +35 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-containing-block-absolute-001.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: layout' element should contain absolute position elements.</title>
6
  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
7
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
8
  <link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
9
  <link rel="match" href="contain-paint-containing-block-absolute-001-ref.html">
10
  <style>
11
  #a {
12
      contain: layout;
13
      width: 100px;
14
      height: 100px;
15
      background: red;
16
      margin: 50px;
17
  }
18
  #b {
19
      position: absolute;
20
      top: 0;
21
      left: 0;
22
      width: 100px;
23
      height: 100px;
24
      background: green;
25
  }
26
  </style>
27
</head>
28
<body>
29
  <div id="a">
30
    <div>
31
      <div id="b"></div>
32
    </div>
33
  </div>
34
</body>
35
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-containing-block-fixed-001-expected.html +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-containing-block-fixed-001-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
7
  <style>
8
  #a {
9
      width: 100px;
10
      height: 100px;
11
      background: green;
12
      margin: 50px;
13
  }
14
  </style>
15
</head>
16
<body>
17
  <div id="a"></div>
18
</body>
19
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-containing-block-fixed-001.html +35 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-containing-block-fixed-001.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: layout' element should contain fixed position elements.</title>
6
  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
7
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
8
  <link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
9
  <link rel="match" href="contain-paint-containing-block-fixed-001-ref.html">
10
  <style>
11
  #a {
12
      contain: layout;
13
      width: 100px;
14
      height: 100px;
15
      background: red;
16
      margin: 50px;
17
  }
18
  #b {
19
      position: fixed;
20
      top: 0;
21
      left: 0;
22
      width: 100px;
23
      height: 100px;
24
      background: green;
25
  }
26
  </style>
27
</head>
28
<body>
29
  <div id="a">
30
    <div>
31
      <div id="b"></div>
32
    </div>
33
  </div>
34
</body>
35
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-flexbox-001-expected.html +16 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-flexbox-001-expected.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Reference file</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<style>
6
div {
7
  display: inline-flex;
8
  border: 5px solid green;
9
  /* Layout containment creates a stacking context, the following lines simuluate the same in the reference file. */
10
  position: relative;
11
  z-index: 1;
12
}
13
</style>
14
15
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the bottom, and then the word "after".</p>
16
before<div></div>after
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-flexbox-001.html +20 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-flexbox-001.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Layout containment on flexbox container</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
6
<link rel="match" href="reference/contain-layout-flexbox-001-ref.html">
7
<meta name=assert content="Layout containment does apply to flexbox containers, thus their baseline is the same than if they don't have contents.">
8
<style>
9
div {
10
  display: inline-flex;
11
  border: 5px solid green;
12
  contain: layout;
13
  color: transparent;
14
  width: 0;
15
  height: 0;
16
}
17
</style>
18
19
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the bottom, and then the word "after".</p>
20
before<div>f</div>after
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-formatting-context-float-001-expected.html +26 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-formatting-context-float-001-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
7
  <style>
8
  #left {
9
    float: left;
10
    height: 50px;
11
    width: 10px;
12
    background: blue;
13
  }
14
  #a {
15
    background: green;
16
    margin: 10px;
17
    width: 50px;
18
    height: 50px;
19
  }
20
  </style>
21
</head>
22
<body>
23
  <div id="left"></div>
24
  <div id="a"></div>
25
</body>
26
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-formatting-context-float-001.html +38 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-formatting-context-float-001.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: layout' should contain floats as a formatting context.</title>
6
  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
7
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
8
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout">
9
  <link rel="match" href="contain-paint-formatting-context-float-001-ref.html">
10
  <style>
11
  #left {
12
    float: left;
13
    height: 50px;
14
    width: 10px;
15
    background: blue;
16
  }
17
  #a {
18
    contain: layout;
19
    background: red;
20
    margin: 10px;
21
    width: 50px;
22
    height: 50px;
23
  }
24
  #b {
25
    clear: left;
26
    width: 50px;
27
    height: 50px;
28
    background: green;
29
  }
30
  </style>
31
</head>
32
<body>
33
  <div id="left"></div>
34
  <div id="a">
35
    <div id="b"></div>
36
  </div>
37
</body>
38
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-formatting-context-margin-001-expected.html +37 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-formatting-context-margin-001-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Test</title>
6
  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
7
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
8
  <style>
9
  #a {
10
      background: blue;
11
      margin: 10px;
12
      width: 50px;
13
      height: 50px;
14
  }
15
  #b {
16
      width: 50px;
17
      height: 40px;
18
      background: green;
19
  }
20
  #b-padding {
21
      height: 10px;
22
  }
23
  #c {
24
    width: 50px;
25
    height: 10px;
26
    background: lightblue;
27
  }
28
  </style>
29
</head>
30
<body>
31
  <div id="a">
32
    <div id="b-padding"></div>
33
    <div id="b"></div>
34
    <div id="c"></div>
35
  </div>
36
</body>
37
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-formatting-context-margin-001.html +37 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-formatting-context-margin-001.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: layout' with a vertical margin child. Margin collapse should not occur, and neither should overflow clipping.</title>
6
  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
7
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
8
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout">
9
  <link rel="match" href="contain-layout-formatting-context-margin-001-ref.html">
10
  <style>
11
  #a {
12
      contain:layout;
13
      background: blue;
14
      margin: 10px;
15
      width: 50px;
16
      height: 50px;
17
  }
18
  #b {
19
      width: 50px;
20
      height: 40px;
21
      background: green;
22
      margin-top: 10px;
23
  }
24
  #c {
25
      background: lightblue;
26
      width: 50px;
27
      height: 10px;
28
  }
29
  </style>
30
</head>
31
<body>
32
  <div id="a">
33
    <div id="b"></div>
34
    <div id="c"></div>
35
  </div>
36
</body>
37
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-grid-001-expected.html +16 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-grid-001-expected.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Reference file</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<style>
6
div {
7
  display: inline-grid;
8
  border: 5px solid green;
9
  /* Layout containment creates a stacking context, the following lines simuluate the same in the reference file. */
10
  position: relative;
11
  z-index: 1;
12
}
13
</style>
14
15
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the bottom, and then the word "after".</p>
16
before<div></div>after
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-grid-001.html +20 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-grid-001.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Layout containment on grid container</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
6
<link rel="match" href="reference/contain-layout-grid-001-ref.html">
7
<meta name=assert content="Layout containment does apply to grid containers, thus their baseline is the same than if they don't have contents.">
8
<style>
9
div {
10
  display: inline-grid;
11
  border: 5px solid green;
12
  contain: layout;
13
  color: transparent;
14
  width: 0;
15
  height: 0;
16
}
17
</style>
18
19
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the bottom, and then the word "after".</p>
20
before<div>g</div>after
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ifc-022-expected.html +36 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ifc-022-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  div
11
    {
12
      color: transparent;
13
      float: left;
14
      font-size: 16px;
15
      padding: 8px;
16
    }
17
18
  div#blue-rectangle
19
    {
20
      background-color: blue;
21
      margin: 8px;
22
      width: 6em;
23
    }
24
25
  div#orange-rectangle
26
    {
27
      background-color: orange;
28
      width: 12em;
29
    }
30
  </style>
31
32
  <p>Test passes if the orange rectangle and blue rectangle do not overlap.
33
34
  <div id="blue-rectangle">Some text in a blue rectangle.</div>
35
36
  <div id="orange-rectangle">Some text in an orange rectangle. Some text in an orange rectangle. Some text in an orange rectangle.</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ifc-022.html +54 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ifc-022.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: layout' and creation of an independent formating context: text no longer flowing around a float</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-layout">
9
  <link rel="match" href="reference/contain-layout-ifc-022-ref.html">
10
11
  <meta content="This test checks that an element with 'contain: layout' will make such element create its own formatting context. In this test, the element with 'contain: layout' acts as if it has its own formatting context independent from div#floated-left element. In other words, the div#with-contain-layout is no longer required to flow its content around the div#floated-left element and current line boxes next to the float are no longer shortened to make room for the margin box of the float." name="assert">
12
  <meta name="flags" content="">
13
14
  <style>
15
  div
16
    {
17
      color: transparent;
18
      font-size: 16px;
19
      padding: 8px;
20
    }
21
22
  div#floated-left
23
    {
24
      background-color: blue;
25
      float: left;
26
      margin: 8px;
27
      width: 6em;
28
    }
29
30
  div#with-contain-layout
31
    {
32
      background-color: orange;
33
      contain: layout;
34
      width: 12em;
35
    }
36
  </style>
37
38
  <p>Test passes if the orange rectangle and blue rectangle do not overlap.
39
40
  <!--
41
42
  or
43
44
  <p>Test passes if the orange rectangle and blue rectangle are side by side.
45
46
  or
47
48
  <p>Test passes if the orange rectangle and blue rectangle are apart from each other.
49
50
  -->
51
52
  <div id="floated-left">Some text in a blue rectangle.</div>
53
54
  <div id="with-contain-layout">Some text in an orange rectangle. Some text in an orange rectangle. Some text in an orange rectangle.</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-ib-split-001-expected.html +76 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-ib-split-001-expected.html_sec1
1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
7
  <style>
8
    .abspos-box {
9
      position: absolute;
10
      width: 200px;
11
      height: 200px;
12
    }
13
14
    /* The boxes should stack in the order that I've listed their CSS classes
15
       here.  The class names' first word (outside/before/inside/after) refers
16
       to the boxes' DOM position, and "background"/"midground"/"foreground"
17
       refers to their z-index values. */
18
19
    .before-IB-background {
20
      background: darkmagenta;
21
      z-index: -1;
22
      top: 50px;
23
      left: 50px;
24
    }
25
    .after-IB-background {
26
      background: magenta;
27
      z-index: -1;
28
      top: 70px;
29
      left: 70px;
30
    }
31
    .outside-span-midground {
32
      background: darkkhaki;
33
      top: 90px;
34
      left: 90px;
35
    }
36
    .inside-IB-midground {
37
      background: khaki;
38
      top: 110px;
39
      left: 110px;
40
    }
41
    .before-IB-foreground {
42
      background: darkcyan;
43
      z-index: 1;
44
      top: 130px;
45
      left: 130px;
46
    }
47
    .after-IB-foreground {
48
      background: cyan;
49
      z-index: 1;
50
      top: 150px;
51
      left: 150px;
52
    }
53
  </style>
54
</head>
55
<body>
56
  <!-- The expectation here is that 'abspos-box' elements will all interact in
57
       the same top-level stacking context. That means the box ordering should
58
       be (back to front): darkmagenta/magenta/darkkhaki/khaki/darkcyan/cyan,
59
       with the boxes stacked (visually) from top-left to bottom-right. -->
60
61
  <div class="abspos-box outside-span-midground"></div>
62
63
  <!-- Note: this file is identical to the testcase,
64
       except for the lack of "contain: layout" on this span. -->
65
  <span>
66
    <div class="abspos-box before-IB-background"></div>
67
    <div class="abspos-box before-IB-foreground"></div>
68
    <!-- This unstyled div crates the IB split: -->
69
    <div>
70
      <div class="abspos-box inside-IB-midground"></div>
71
    </div>
72
    <div class="abspos-box after-IB-background"></div>
73
    <div class="abspos-box after-IB-foreground"></div>
74
  </span>
75
</body>
76
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-ib-split-001.html +77 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-ib-split-001.html_sec1
1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: layout' should have no effect on non-atomic inline
6
         (including its block part, if there's a block-in-inline split)</title>
7
  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
8
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout">
9
  <link rel="match" href="contain-layout-ignored-cases-ib-split-001-ref.html">
10
  <style>
11
    .abspos-box {
12
      position: absolute;
13
      width: 200px;
14
      height: 200px;
15
    }
16
17
    /* The boxes should stack in the order that I've listed their CSS classes
18
       here.  The class names' first word (outside/before/inside/after) refers
19
       to the boxes' DOM position, and "background"/"midground"/"foreground"
20
       refers to their z-index values. */
21
22
    .before-IB-background {
23
      background: darkmagenta;
24
      z-index: -1;
25
      top: 50px;
26
      left: 50px;
27
    }
28
    .after-IB-background {
29
      background: magenta;
30
      z-index: -1;
31
      top: 70px;
32
      left: 70px;
33
    }
34
    .outside-span-midground {
35
      background: darkkhaki;
36
      top: 90px;
37
      left: 90px;
38
    }
39
    .inside-IB-midground {
40
      background: khaki;
41
      top: 110px;
42
      left: 110px;
43
    }
44
    .before-IB-foreground {
45
      background: darkcyan;
46
      z-index: 1;
47
      top: 130px;
48
      left: 130px;
49
    }
50
    .after-IB-foreground {
51
      background: cyan;
52
      z-index: 1;
53
      top: 150px;
54
      left: 150px;
55
    }
56
  </style>
57
</head>
58
<body>
59
  <!-- The expectation here is that 'abspos-box' elements will all interact in
60
       the same top-level stacking context. That means the box ordering should
61
       be (back to front): darkmagenta/magenta/darkkhaki/khaki/darkcyan/cyan,
62
       with the boxes stacked (visually) from top-left to bottom-right. -->
63
64
  <div class="abspos-box outside-span-midground"></div>
65
66
  <span style="contain: layout">
67
    <div class="abspos-box before-IB-background"></div>
68
    <div class="abspos-box before-IB-foreground"></div>
69
    <!-- This unstyled div crates the IB split: -->
70
    <div>
71
      <div class="abspos-box inside-IB-midground"></div>
72
    </div>
73
    <div class="abspos-box after-IB-background"></div>
74
    <div class="abspos-box after-IB-foreground"></div>
75
  </span>
76
</body>
77
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-no-principal-box-001-expected.html +57 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-no-principal-box-001-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
7
  <style>
8
    div {
9
      position: relative;
10
      width: 100px;
11
    }
12
    #div1,
13
    #div3 {
14
      background-color: #cfc;
15
      height: 100px;
16
    }
17
    #div1 {
18
      z-index: 5;
19
    }
20
    #div2 {
21
      display: contents;
22
      background-color: #fdd;
23
      height: 100px;
24
      top: -20px;
25
    }
26
    #div2_1 {
27
      background-color: #ffc;
28
      z-index: 6;
29
      top: -10px;
30
      height: 100px;
31
    }
32
    #div2_2 {
33
      z-index: 3;
34
      position: absolute;
35
      top: -15px;
36
      width: 40px;
37
      height: 300px;
38
      background-color: #ddf;
39
    }
40
    #div3 {
41
      z-index: 2;
42
      top: -50px;
43
    }
44
  </style>
45
</head>
46
<body>
47
  <div id="div1"></div>
48
49
  <div id="div2">
50
    <div id="div2_1"></div>
51
52
    <div id="div2_2"></div>
53
  </div>
54
55
  <div id="div3"></div>
56
</body>
57
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-no-principal-box-001.html +61 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-no-principal-box-001.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: layout' should not create a stacking context when no principle box is generated.</title>
6
  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
7
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
8
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout">
9
  <link rel="match" href="contain-paint-ignored-cases-no-principal-box-001-ref.html">
10
  <style>
11
    div {
12
      position: relative;
13
      width: 100px;
14
    }
15
    #div1,
16
    #div3 {
17
      background-color: #cfc;
18
      height: 100px;
19
    }
20
    #div1 {
21
      z-index: 5;
22
    }
23
    #div2 {
24
      display: contents;
25
      contain: layout;
26
      background-color: #fdd;
27
      height: 100px;
28
      top: -20px;
29
    }
30
    #div2_1 {
31
      background-color: #ffc;
32
      z-index: 6;
33
      top: -10px;
34
      height: 100px;
35
    }
36
    #div2_2 {
37
      z-index: 3;
38
      position: absolute;
39
      top: -15px;
40
      width: 40px;
41
      height: 300px;
42
      background-color: #ddf;
43
    }
44
    #div3 {
45
      z-index: 2;
46
      top: -50px;
47
    }
48
  </style>
49
</head>
50
<body>
51
  <div id="div1"></div>
52
53
  <div id="div2">
54
    <div id="div2_1"></div>
55
56
    <div id="div2_2"></div>
57
  </div>
58
59
  <div id="div3"></div>
60
</body>
61
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-no-principal-box-002-expected.html +33 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-no-principal-box-002-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
7
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
8
  <style>
9
  #a {
10
      display: contents;
11
      width: 100px;
12
      height: 100px;
13
      background: green;
14
      margin: 50px;
15
  }
16
 #b {
17
      position: absolute;
18
      top: 0;
19
      left: 0;
20
      width: 100px;
21
      height: 100px;
22
      background: green;
23
  }
24
  </style>
25
</head>
26
<body>
27
  <div id="a">
28
    <div>
29
      <div id="b"></div>
30
    </div>
31
  </div>
32
</body>
33
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-no-principal-box-002.html +36 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-no-principal-box-002.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: layout' element should not contain absolute/fixed position elements when no principal box is generated.</title>
6
  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
7
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
8
  <link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
9
  <link rel="match" href="contain-layout-ignored-cases-no-principal-box-002-ref.html">
10
  <style>
11
  #a {
12
      contain: layout;
13
      display: contents;
14
      width: 100px;
15
      height: 100px;
16
      background: red;
17
      margin: 50px;
18
  }
19
  #b {
20
      position: absolute;
21
      top: 0;
22
      left: 0;
23
      width: 100px;
24
      height: 100px;
25
      background: green;
26
  }
27
  </style>
28
</head>
29
<body>
30
  <div id="a">
31
    <div>
32
      <div id="b"></div>
33
    </div>
34
  </div>
35
</body>
36
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-no-principal-box-003-expected.html +33 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-no-principal-box-003-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
7
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
8
  <style>
9
  #a {
10
    display: contents;
11
    width: 100px;
12
    height: 100px;
13
    background: red;
14
    margin: 50px;
15
  }
16
  #b {
17
    position: fixed;
18
    top: 0;
19
    left: 0;
20
    width: 100px;
21
    height: 100px;
22
    background: green;
23
  }
24
  </style>
25
</head>
26
<body>
27
  <div id="a">
28
    <div>
29
      <div id="b"></div>
30
    </div>
31
  </div>
32
</body>
33
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-no-principal-box-003.html +36 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-no-principal-box-003.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: layout' element should not contain absolute/fixed position elements when no principal box is generated.</title>
6
  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
7
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
8
  <link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
9
  <link rel="match" href="contain-layout-ignored-cases-no-principal-box-003-ref.html">
10
  <style>
11
  #a {
12
    contain: layout;
13
    display: contents;
14
    width: 100px;
15
    height: 100px;
16
    background: red;
17
    margin: 50px;
18
  }
19
  #b {
20
    position: fixed;
21
    top: 0;
22
    left: 0;
23
    width: 100px;
24
    height: 100px;
25
    background: green;
26
  }
27
  </style>
28
</head>
29
<body>
30
  <div id="a">
31
    <div>
32
      <div id="b"></div>
33
    </div>
34
  </div>
35
</body>
36
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-independent-formatting-context-001-expected.html +14 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-independent-formatting-context-001-expected.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Reference file</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<style>
6
.wrapper {
7
  border: solid thick;
8
  margin: 1em;
9
}
10
</style>
11
<p>Test passes if it has the same output than the reference.</p>
12
<div class="wrapper">
13
  <div style="margin: 2em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>
14
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-independent-formatting-context-001.html +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-independent-formatting-context-001.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Layout containment independent formatting context</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
6
<link rel="match" href="reference/contain-paint-independent-formatting-context-001-ref.html">
7
<meta name=assert content="Layout containment elements establish an independent formatting context. The test checks that this feature of layout containment applies to blocks.">
8
<style>
9
.wrapper {
10
  border: solid thick;
11
  margin: 1em;
12
}
13
</style>
14
<p>Test passes if it has the same output than the reference.</p>
15
<div class="wrapper">
16
  <div style="margin: 1em 0; contain: layout;">
17
    <div style="margin: 1em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>
18
  </div>
19
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-independent-formatting-context-002-expected.html +14 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-independent-formatting-context-002-expected.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Reference file</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<style>
6
.wrapper {
7
  border: solid thick;
8
  margin: 1em;
9
}
10
</style>
11
<p>Test passes if it has the same output than the reference.</p>
12
<div class="wrapper">
13
  <div style="margin: 2em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>
14
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-independent-formatting-context-002.html +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-independent-formatting-context-002.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Layout containment independent formatting context</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
6
<link rel="match" href="reference/contain-paint-independent-formatting-context-001-ref.html">
7
<meta name=assert content="Layout containment elements establish an independent formatting context. The test checks that this feature of layout containment applies to inline blocks.">
8
<style>
9
.wrapper {
10
  border: solid thick;
11
  margin: 1em;
12
}
13
</style>
14
<p>Test passes if it has the same output than the reference.</p>
15
<div class="wrapper">
16
  <span style="display: inline-block; margin: 1em 0; vertical-align: top; contain: layout;">
17
    <div style="margin: 1em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>
18
  </span>
19
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-independent-formatting-context-003-expected.html +14 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-independent-formatting-context-003-expected.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Reference file</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<style>
6
.wrapper {
7
  border: solid thick;
8
  margin: 1em;
9
}
10
</style>
11
<p>Test passes if it has the same output than the reference.</p>
12
<div class="wrapper">
13
  <div style="margin: 1em 0;">This text should have 1em top and bottom margins.</div>
14
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-independent-formatting-context-003.html +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-independent-formatting-context-003.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Layout containment independent formatting context</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
6
<link rel="match" href="reference/contain-paint-independent-formatting-context-003-ref.html">
7
<meta name=assert content="Layout containment elements establish an independent formatting context. The test checks that this feature of paint containment does not appliy to inline elements.">
8
<style>
9
.wrapper {
10
  border: solid thick;
11
  margin: 1em;
12
}
13
</style>
14
<p>Test passes if it has the same output than the reference.</p>
15
<div class="wrapper">
16
  <span style="margin: 1em 0; contain: layout;">
17
    <div style="margin: 1em 0;">This text should have 1em top and bottom margins.</div>
18
  </span>
19
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-013-expected.html +24 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-013-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  div
11
    {
12
      font-family: monospace;
13
      font-size: 100px;
14
      height: 2.8ch;
15
      overflow: scroll;
16
      width: 4ch;
17
    }
18
  </style>
19
20
 <body>
21
22
  <p>Test passes if there is no red.
23
24
  <div></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-013.html +40 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-013.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: layout' and ink overflow</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-overflow-3/#ink-overflow">
9
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-layout">
10
  <link rel="match" href="reference/contain-layout-ink-overflow-013-ref.html">
11
12
  <meta content="This test checks that when the contents of an element with 'contain: layout' overflows, its contents must be treated as ink overflow. In this test, the content overflows the div#inner. If such content was treated as 'overflow: visible', then the div#outer would 'pick up' such content and would make it reachable and accessible via its own generated scrollbar. But the overflowed content must be treated as ink overflow and is therefore treated as a graphical effect that is beyond the scrolling mechanism and outside the scrolling mechanism." name="assert">
13
14
  <style>
15
  div#outer
16
    {
17
      font-family: monospace;
18
      font-size: 100px;
19
      height: 2.8ch;
20
      line-height: 1.5; /* computes to 150px */
21
      width: 4ch;
22
23
      overflow: scroll;
24
    }
25
26
  div#inner
27
    {
28
      color: red;
29
      contain: layout;
30
      width: 0;
31
    }
32
  </style>
33
34
 <body onload="document.getElementById('outer').scrollLeft = 4000;">
35
36
  <p>Test passes if there is no red.
37
38
  <div id="outer">
39
    <div id="inner">&nbsp;&nbsp;&nbsp;&nbsp;FAIL</div>
40
  </div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-014-expected.html +24 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-014-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  div
11
    {
12
      font-family: monospace;
13
      font-size: 100px;
14
      height: 2.8ch;
15
      overflow: scroll;
16
      width: 4ch;
17
    }
18
  </style>
19
20
 <body>
21
22
  <p>Test passes if there is no red.
23
24
  <div></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-014.html +46 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-014.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: layout' and ink overflow</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-overflow-3/#ink-overflow">
9
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-layout">
10
  <link rel="match" href="reference/contain-layout-ink-overflow-013-ref.html">
11
12
  <meta content="This test checks that when the contents of an element with 'contain: layout' overflows, its contents must be treated as ink overflow. In this test, the content overflows the div#inner. If such content was treated as 'overflow: visible', then the div#outer would 'pick up' such content and would make it reachable and accessible via its own generated scrollbar. But the overflowed content must be treated as ink overflow and is therefore treated as a graphical effect that is beyond the scrolling mechanism and outside the scrolling mechanism." name="assert">
13
14
  <style>
15
  div#outer
16
    {
17
      font-family: monospace;
18
      font-size: 100px;
19
      height: 2.8ch;
20
      line-height: 1.5; /* computes to 150px */
21
      width: 4ch;
22
23
      overflow: scroll;
24
    }
25
26
  div#inner
27
    {
28
      color: red;
29
      contain: layout;
30
      height: 0;
31
    }
32
  </style>
33
34
  <!--
35
36
  150px : height of 1 line box
37
38
  -->
39
40
 <body onload="document.getElementById('outer').scrollLeft = 250; document.getElementById('outer').scrollTop = 150;">
41
42
  <p>Test passes if there is no red.
43
44
  <div id="outer">
45
    <div id="inner">&nbsp;<br>FAIL</div>
46
  </div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-015-expected.html +11 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-015-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
 <body>
10
11
  <p>Test passes if there is no red.
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-015.html +40 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-015.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: layout' and ink overflow</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-overflow-3/#ink-overflow">
9
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-layout">
10
  <link rel="match" href="reference/contain-layout-ink-overflow-015-ref.html">
11
12
  <meta content="This test checks that when the contents of an element with 'contain: layout' overflows, its contents must be treated as ink overflow. In this test, the content overflows the div#inner. If such content was treated as 'overflow: visible', then the div#outer would 'pick up' such content and would make it reachable and accessible via its own generated scrollbar. But the overflowed content must be treated as ink overflow and is therefore treated as a graphical effect that is beyond the scrolling mechanism and outside the scrolling mechanism." name="assert">
13
14
  <style>
15
  div#outer
16
    {
17
      font-family: monospace;
18
      font-size: 100px;
19
      height: 2.8ch;
20
      line-height: 1.5; /* computes to 150px */
21
      width: 4ch;
22
23
      overflow: auto;
24
    }
25
26
  div#inner
27
    {
28
      color: red;
29
      contain: layout;
30
      width: 0;
31
    }
32
  </style>
33
34
 <body onload="document.getElementById('outer').scrollLeft = 4000;">
35
36
  <p>Test passes if there is no red.
37
38
  <div id="outer">
39
    <div id="inner">&nbsp;&nbsp;&nbsp;&nbsp;FAIL</div>
40
  </div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-016-expected.html +11 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-016-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
 <body>
10
11
  <p>Test passes if there is no red.
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-016.html +46 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-016.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: layout' and ink overflow</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-overflow-3/#ink-overflow">
9
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-layout">
10
  <link rel="match" href="reference/contain-layout-ink-overflow-015-ref.html">
11
12
  <meta content="This test checks that when the contents of an element with 'contain: layout' overflows, its contents must be treated as ink overflow. In this test, the content overflows the div#inner. If such content was treated as 'overflow: visible', then the div#outer would 'pick up' such content and would make it reachable and accessible via its own generated scrollbar. But the overflowed content must be treated as ink overflow and is therefore treated as a graphical effect that is beyond the scrolling mechanism and outside the scrolling mechanism." name="assert">
13
14
  <style>
15
  div#outer
16
    {
17
      font-family: monospace;
18
      font-size: 100px;
19
      height: 2.8ch;
20
      line-height: 1.5; /* computes to 150px */
21
      width: 4ch;
22
23
      overflow: auto;
24
    }
25
26
  div#inner
27
    {
28
      color: red;
29
      contain: layout;
30
      height: 0;
31
    }
32
  </style>
33
34
  <!--
35
36
  150px : height of 1 line box
37
38
  -->
39
40
 <body onload="document.getElementById('outer').scrollLeft = 250; document.getElementById('outer').scrollTop = 150;">
41
42
  <p>Test passes if there is no red.
43
44
  <div id="outer">
45
    <div id="inner">&nbsp;<br>FAIL</div>
46
  </div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-017-expected.html +24 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-017-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  div
11
    {
12
      font-family: monospace;
13
      font-size: 100px;
14
      height: 2.8ch;
15
      overflow: scroll;
16
      width: 4ch;
17
    }
18
  </style>
19
20
 <body>
21
22
  <p>Test passes if there is no red.
23
24
  <div></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-017.html +47 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-017.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: layout' and ink overflow</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-overflow-3/#ink-overflow">
9
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-layout">
10
  <link rel="match" href="reference/contain-layout-ink-overflow-013-ref.html">
11
12
  <meta content="This test checks that when the contents of an element with 'contain: layout' overflows, its contents must be treated as ink overflow. In this test, the content overflows the div#inner. If such content was treated as 'overflow: visible', then the div#outer would 'pick up' such content and would make it reachable and accessible via its own generated scrollbar. But the overflowed content must be treated as ink overflow and is therefore treated as a graphical effect that is beyond the scrolling mechanism and outside the scrolling mechanism." name="assert">
13
14
  <style>
15
  div#outer
16
    {
17
      font-family: monospace;
18
      font-size: 100px;
19
      height: 2.8ch;
20
      line-height: 1.5; /* computes to 150px */
21
      width: 4ch;
22
23
      overflow: scroll;
24
    }
25
26
  div#inner
27
    {
28
      color: red;
29
      contain: layout;
30
      height: 0;
31
      width: 0;
32
    }
33
  </style>
34
35
  <!--
36
37
  150px : height of 1 line box
38
39
  -->
40
41
 <body onload="document.getElementById('outer').scrollLeft = 4000; document.getElementById('outer').scrollTop = 150;">
42
43
  <p>Test passes if there is no red.
44
45
  <div id="outer">
46
    <div id="inner"><br>FAIL</div>
47
  </div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-018-expected.html +11 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-018-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
 <body>
10
11
  <p>Test passes if there is no red.
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-018.html +47 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-018.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: layout' and ink overflow</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-overflow-3/#ink-overflow">
9
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-layout">
10
  <link rel="match" href="reference/contain-layout-ink-overflow-015-ref.html">
11
12
  <meta content="This test checks that when the contents of an element with 'contain: layout' overflows, its contents must be treated as ink overflow. In this test, the content overflows the div#inner. If such content was treated as 'overflow: visible', then the div#outer would 'pick up' such content and would make it reachable and accessible via its own generated scrollbar. But the overflowed content must be treated as ink overflow and is therefore treated as a graphical effect that is beyond the scrolling mechanism and outside the scrolling mechanism." name="assert">
13
14
  <style>
15
  div#outer
16
    {
17
      font-family: monospace;
18
      font-size: 100px;
19
      height: 2.8ch;
20
      line-height: 1.5; /* computes to 150px */
21
      width: 4ch;
22
23
      overflow: auto;
24
    }
25
26
  div#inner
27
    {
28
      color: red;
29
      contain: layout;
30
      height: 0;
31
      width: 0;
32
    }
33
  </style>
34
35
  <!--
36
37
  150px : height of 1 line box
38
39
  -->
40
41
 <body onload="document.getElementById('outer').scrollLeft = 4000; document.getElementById('outer').scrollTop = 150;">
42
43
  <p>Test passes if there is no red.
44
45
  <div id="outer">
46
    <div id="inner"><br>FAIL</div>
47
  </div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-019-expected.html +31 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-019-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  div#parent
11
    {
12
      height: 100px;
13
      width: 100px;
14
      overflow: scroll;
15
    }
16
17
  div#child
18
    {
19
      background-color: green;
20
      height: 100px;
21
      width: 100px;
22
    }
23
  </style>
24
25
  <body onload="document.getElementById('parent').scrollLeft = 100; document.getElementById('parent').scrollTop = 125;">
26
27
  <p>Test passes if there is a filled green square <strong>with 2 scroll bars</strong> and if there is <strong>no red</strong>.
28
29
  <div id="parent">
30
    <div id="child"></div>
31
  </div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-019.html +69 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-019.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Test: 'contain: layout' on element that overflows and its parent has 'overflow: scroll'</title>
6
7
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
8
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
9
  <link rel="help" href="https://www.w3.org/TR/css-overflow-3/#ink-overflow">
10
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-layout">
11
  <link rel="match" href="reference/contain-layout-ink-overflow-019-ref.html">
12
13
  <meta content="This test checks that when the contents of an element with 'contain: layout' overflows, its overflowing content must be treated as ink overflow. Such overflowing content therefore can not be reached and can not be accessed by the scrollbars or by the scrolling mechanism of the parent of such element. In this test, the parent has 'overflow: scroll'." name="assert">
14
15
  <style>
16
  div
17
    {
18
      height: 100px;
19
      width: 100px;
20
    }
21
22
    /* this means that each and all 4 div's use the same definite height and width */
23
24
  div#parent-with-overflow-scroll
25
    {
26
      overflow: scroll;
27
    }
28
29
  div#contain
30
    {
31
      contain: layout;
32
    }
33
34
  div#pass
35
    {
36
      background-color: green;
37
    }
38
39
  div#fail
40
    {
41
      background-color: red;
42
    }
43
  </style>
44
45
  <!--
46
47
    25px  : height of a very tall horizontal scrollbar
48
 +
49
   100px  : height of div#fail
50
  =======
51
   125px
52
53
  -->
54
55
  <body onload="document.getElementById('parent-with-overflow-scroll').scrollLeft = 100; document.getElementById('parent-with-overflow-scroll').scrollTop = 125;">
56
57
  <p>Test passes if there is a filled green square <strong>with 2 scroll bars</strong> and if there is <strong>no red</strong>.
58
59
  <div id="parent-with-overflow-scroll">
60
61
    <div id="contain">
62
63
      <div id="pass"></div>
64
65
      <div id="fail"></div>
66
67
    </div>
68
69
  </div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-020-expected.html +20 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-020-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  div
11
    {
12
      background-color: green;
13
      height: 100px;
14
      width: 100px;
15
    }
16
  </style>
17
18
  <p>Test passes if there is a filled green square, <strong>no scrollbar around it</strong> and <strong>no red</strong>.
19
20
  <div></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-020.html +69 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-020.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Test: 'contain: layout' on element that overflows and its parent has 'overflow: auto'</title>
6
7
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
8
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
9
  <link rel="help" href="https://www.w3.org/TR/css-overflow-3/#ink-overflow">
10
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-layout">
11
  <link rel="match" href="reference/contain-layout-ink-overflow-020-ref.html">
12
13
  <meta content="This test checks that when the contents of an element with 'contain: layout' overflows, its overflowing content must be treated as ink overflow. Such overflowing content therefore can not be reached and can not be accessed by the scrollbars or by the scrolling mechanism of the parent of such element. In this test, the parent has 'overflow: auto' and therefore will not create scrollbars or a scrolling mechanism because the ink overflow is not a scrollable region for the parent." name="assert">
14
15
  <style>
16
  div
17
    {
18
      height: 100px;
19
      width: 100px;
20
    }
21
22
    /* this means that each and all 4 div's use the same definite height and width */
23
24
  div#parent-with-overflow-auto
25
    {
26
      overflow: auto;
27
    }
28
29
  div#contain
30
    {
31
      contain: layout;
32
    }
33
34
  div#pass
35
    {
36
      background-color: green;
37
    }
38
39
  div#fail
40
    {
41
      background-color: red;
42
    }
43
  </style>
44
45
  <!--
46
47
    25px  : height of a very tall horizontal scrollbar
48
 +
49
   100px  : height of div#fail
50
  =======
51
   125px
52
53
  -->
54
55
  <body onload="document.getElementById('parent-with-overflow-auto').scrollLeft = 100; document.getElementById('parent-with-overflow-auto').scrollTop = 125;">
56
57
  <p>Test passes if there is a filled green square, <strong>no scrollbar around it</strong> and <strong>no red</strong>.
58
59
  <div id="parent-with-overflow-auto">
60
61
    <div id="contain">
62
63
      <div id="pass"></div>
64
65
      <div id="fail"></div>
66
67
    </div>
68
69
  </div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-overflow-001-expected.html +55 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-overflow-001-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
7
  <style>
8
  .outer {
9
    height: 100px;
10
    width: 100px;
11
  }
12
  .auto {
13
    overflow: auto;
14
  }
15
  .inner-sm {
16
    height: 50px;
17
    width: 50px;
18
    background: lightblue;
19
  }
20
  .inner-lg-1 {
21
    height: 95px;
22
    width: 95px;
23
    background: lightblue;
24
  }
25
  .inner-lg-2 {
26
    height: 200px;
27
    width: 200px;
28
  }
29
  .pass {
30
    background: green;
31
  }
32
  .border {
33
    border: 5px solid green;
34
  }
35
36
  </style>
37
</head>
38
<body>
39
  <div class="outer">
40
    <div class="inner-sm"></div>
41
  </div>
42
  <br>
43
44
  <div class="outer auto">
45
    <div class="inner-lg-2 pass">
46
    </div>
47
  </div>
48
  <br>
49
50
  <div class="inner-sm border">
51
    <div class="inner-lg-1">
52
    </div>
53
  </div>
54
</body>
55
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-overflow-001.html +66 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-overflow-001.html_sec1
1
2
<!DOCTYPE HTML>
3
<html>
4
<head>
5
  <meta charset="utf-8">
6
  <title>CSS Test: 'contain: layout' should force all overflow to be ink overflow.</title>
7
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
8
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout">
9
  <link rel="match" href="contain-layout-overflow-001-ref.html">
10
  <style>
11
  .contain {
12
    contain: layout;
13
  }
14
  .outer {
15
    height: 100px;
16
    width: 100px;
17
  }
18
  .auto {
19
    overflow: auto;
20
  }
21
  .inner-sm {
22
    height: 50px;
23
    width: 50px;
24
    background: lightblue;
25
  }
26
  .inner-lg {
27
    height: 200px;
28
    width: 200px;
29
    background: lightblue;
30
  }
31
  .pass {
32
    background: green;
33
  }
34
  .fail {
35
    background: red;
36
  }
37
  .border {
38
    border: 5px solid green;
39
  }
40
  </style>
41
</head>
42
<body>
43
  <!--CSS Test: Elements with contain:layout that do not produce scrollable overflow should paint as if containment were not applied. -->
44
  <div class="outer">
45
    <div class="inner-sm contain"></div>
46
  </div>
47
  <br>
48
49
  <!--CSS Test: Layout-contained elements that overflow their container and have children who overflow should produce the same amount of scrollable overflow as if there were no children. -->
50
  <div class="outer auto">
51
    <div class="inner-lg contain">
52
      <div class="inner-lg pass"></div>
53
      <div class="inner-lg fail"></div>
54
    </div>
55
  </div>
56
  <br>
57
58
  <!--CSS Test: Layout-contained elements that do not overflow their container, but have children who overflow, should not allow their children to affect the scrollable overflow regions of their parent. -->
59
  <div class="outer auto">
60
    <div class="inner-sm contain border">
61
      <div class="inner-lg">
62
      </div>
63
    </div>
64
  </div>
65
</body>
66
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-overflow-002-expected.html +57 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-overflow-002-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
7
  <style>
8
  .outer {
9
    height: 100px;
10
    width: 100px;
11
  }
12
  .auto {
13
    overflow: auto;
14
  }
15
  .inner-sm {
16
    height: 50px;
17
    width: 50px;
18
    background: lightblue;
19
  }
20
  .inner-lg-1 {
21
    height: 95px;
22
    width: 95px;
23
    float:left;
24
    background: lightblue;
25
  }
26
  .inner-lg-2 {
27
    height: 200px;
28
    width: 200px;
29
    float:left;
30
  }
31
  .pass {
32
    background: green;
33
  }
34
  .border {
35
    border: 5px solid green;
36
  }
37
38
  </style>
39
</head>
40
<body>
41
  <div class="outer">
42
    <div class="inner-sm" style="float:left;"></div>
43
  </div>
44
  <br>
45
46
  <div class="outer auto">
47
    <div class="inner-lg-2 pass">
48
    </div>
49
  </div>
50
  <br>
51
52
  <div class="inner-sm border">
53
    <div class="inner-lg-1">
54
    </div>
55
  </div>
56
</body>
57
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-overflow-002.html +67 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-overflow-002.html_sec1
1
2
<!DOCTYPE HTML>
3
<html>
4
<head>
5
  <meta charset="utf-8">
6
  <title>CSS Test: 'contain: layout' should force all overflow to be ink overflow (including when the overflow comes from floated descendants)</title>
7
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
8
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout">
9
  <link rel="match" href="contain-layout-overflow-002-ref.html">
10
  <style>
11
  .contain {
12
    contain: layout;
13
  }
14
  .float { float: left; }
15
  .outer {
16
    height: 100px;
17
    width: 100px;
18
  }
19
  .auto {
20
    overflow: auto;
21
  }
22
  .inner-sm {
23
    height: 50px;
24
    width: 50px;
25
    background: lightblue;
26
  }
27
  .inner-lg {
28
    height: 200px;
29
    width: 200px;
30
    background: lightblue;
31
  }
32
  .pass {
33
    background: green;
34
  }
35
  .fail {
36
    background: red;
37
  }
38
  .border {
39
    border: 5px solid green;
40
  }
41
  </style>
42
</head>
43
<body>
44
  <!--CSS Test: Elements with contain:layout that do not produce scrollable overflow should paint as if containment were not applied. -->
45
  <div class="outer">
46
    <div class="inner-sm contain float"></div>
47
  </div>
48
  <br>
49
50
  <!--CSS Test: Layout-contained elements that overflow their container and have children who overflow should produce the same amount of scrollable overflow as if there were no children. -->
51
  <div class="outer auto">
52
    <div class="inner-lg contain">
53
      <div class="inner-lg pass float"></div>
54
      <div class="inner-lg fail float"></div>
55
    </div>
56
  </div>
57
  <br>
58
59
  <!--CSS Test: Layout-contained elements that do not overflow their container, but have children who overflow, should not allow their children to affect the scrollable overflow regions of their parent. -->
60
  <div class="outer auto">
61
    <div class="inner-sm contain border">
62
      <div class="inner-lg float">
63
      </div>
64
    </div>
65
  </div>
66
</body>
67
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-size-003-expected.html +37 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-size-003-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  div
11
    {
12
      color: transparent;
13
      float: left;
14
      font-size: 16px;
15
      padding: 8px;
16
    }
17
18
  div#blue-rectangle
19
    {
20
      background-color: blue;
21
      margin: 8px;
22
      width: 6em;
23
    }
24
25
  div#orange-rectangle
26
    {
27
      background-color: orange;
28
      height: 0px;
29
      width: 12em;
30
    }
31
  </style>
32
33
  <p>Test passes if the orange rectangle and blue rectangle do not overlap.
34
35
  <div id="blue-rectangle">Some text in a blue rectangle.</div>
36
37
  <div id="orange-rectangle">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-size-003.html +42 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-size-003.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: a block with 'contain: layout size' alongside a float</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#contain-property">
9
  <link rel="match" href="reference/contain-layout-size-003-ref.html">
10
11
  <meta name="flags" content="">
12
13
  <style>
14
  div
15
    {
16
      color: transparent;
17
      font-size: 16px;
18
      padding: 8px;
19
    }
20
21
  div#floated-left
22
    {
23
      background-color: blue;
24
      float: left;
25
      margin: 8px;
26
      width: 6em;
27
    }
28
29
  div#with-contain-layout-size
30
    {
31
      background-color: orange;
32
      width: 12em;
33
34
      contain: layout size;
35
    }
36
  </style>
37
38
  <p>Test passes if the orange rectangle and blue rectangle do not overlap.
39
40
  <div id="floated-left">Some text in a blue rectangle.</div>
41
42
  <div id="with-contain-layout-size">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-stacking-context-001-expected.html +62 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-stacking-context-001-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
7
  <style>
8
    div {
9
      position: relative;
10
      width: 100px;
11
    }
12
    #div1,
13
    #div3 {
14
      background-color: #cfc;
15
    }
16
    #div1 {
17
      z-index: 5;
18
    }
19
    #div2 {
20
      z-index: 1;
21
      background-color: #fdd;
22
      height: 100px;
23
      top: -20px;
24
    }
25
    #div2_1 {
26
      background-color: #ffc;
27
      z-index: 6;
28
      top: -10px;
29
    }
30
    #div2_2 {
31
      z-index: 3;
32
      position: absolute;
33
      top: -15px;
34
      width: 40px;
35
      height: 100px;
36
      background-color: #ddf;
37
    }
38
    #div3 {
39
      z-index: 2;
40
      top: -50px;
41
    }
42
  </style>
43
</head>
44
<body>
45
  <div id="div1">
46
    <br/><br/>
47
  </div>
48
49
  <div id="div2">
50
    <div id="div2_1">
51
      <br/><br/>
52
    </div>
53
54
    <div id="div2_2">
55
    </div>
56
  </div>
57
58
  <div id="div3">
59
    <br/><br/>
60
  </div>
61
</body>
62
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-stacking-context-001.html +66 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-stacking-context-001.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: layout' with stacking contents. Z-index is defined only for siblings and children.</title>
6
  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
7
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
8
  <link rel="help" href="https://drafts.csswg.org/css2/visuren.html#x43">
9
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout">
10
  <link rel="match" href="contain-paint-stacking-context-001-ref.html">
11
  <style>
12
    div {
13
      position: relative;
14
      width: 100px;
15
    }
16
    #div1,
17
    #div3 {
18
      background-color: #cfc;
19
    }
20
    #div1 {
21
      z-index: 5;
22
    }
23
    #div2 {
24
      contain: layout;
25
      background-color: #fdd;
26
      height: 100px;
27
      top: -20px;
28
    }
29
    #div2_1 {
30
      background-color: #ffc;
31
      z-index: 6;
32
      top: -10px;
33
    }
34
    #div2_2 {
35
      z-index: 3;
36
      position: absolute;
37
      top: -15px;
38
      width: 40px;
39
      height: 100px;
40
      background-color: #ddf;
41
    }
42
    #div3 {
43
      z-index: 2;
44
      top: -50px;
45
    }
46
  </style>
47
</head>
48
<body>
49
  <div id="div1">
50
    <br/><br/>
51
  </div>
52
53
  <div id="div2">
54
    <div id="div2_1">
55
      <br/><br/>
56
    </div>
57
58
    <div id="div2_2">
59
    </div>
60
  </div>
61
62
  <div id="div3">
63
    <br/><br/>
64
  </div>
65
</body>
66
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-suppress-baseline-001-expected.html +53 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-suppress-baseline-001-expected.html_sec1
1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
7
  <style>
8
  .flexBaselineCheck {
9
    display: flex;
10
    border: 1px solid black;
11
    height: 100px;
12
  }
13
  .flexBaselineCheck > * {
14
    border: 2px solid teal;
15
16
    /* In the testcase, the (baseline-aligned) items should all have their
17
       bottom borders aligned with the 80px-tall canvas.  In other words, their
18
       bottom borders should all be 20px away from the bottom of their flex
19
       container.  Here in the reference case, we just use "flex-end" alignment
20
       plus a hardcoded 20px margin-bottom to produce a precise reference
21
       for what that should look like. */
22
    align-self: flex-end;
23
    margin-bottom: 20px;
24
  }
25
  canvas {
26
    background: purple;
27
    width: 20px;
28
    height: 80px;
29
    box-sizing: border-box;
30
  }
31
  .flex {
32
    display: flex;
33
  }
34
  .grid {
35
    display: grid;
36
  }
37
  .multicol {
38
    column-count: 2;
39
  }
40
  </style>
41
</head>
42
<body>
43
  <div class="flexBaselineCheck">
44
    <canvas></canvas>
45
    <div>block</div>
46
    <fieldset><legend>leg</legend>fieldset</fieldset>
47
    <div class="flex">flex</div>
48
    <div class="grid">grid</div>
49
    <div class="multicol">multi<br>col</div>
50
    <details open><summary>summary</summary>details</details>
51
  </div>
52
</body>
53
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-suppress-baseline-001.html +57 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-suppress-baseline-001.html_sec1
1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: layout' should make elements behave as if they have no baseline</title>
6
  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
7
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout">
8
  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#valdef-align-items-baseline">
9
  <link rel="match" href="contain-layout-suppress-baseline-001-ref.html">
10
  <style>
11
  .flexBaselineCheck {
12
    display: flex;
13
    border: 1px solid black;
14
    height: 100px;
15
  }
16
  .flexBaselineCheck > * {
17
    contain: layout;
18
    border: 2px solid teal;
19
    align-self: baseline;
20
  }
21
  canvas {
22
    background: purple;
23
    width: 20px;
24
    height: 80px;
25
    box-sizing: border-box;
26
  }
27
  .flex {
28
    display: flex;
29
  }
30
  .grid {
31
    display: grid;
32
  }
33
  .multicol {
34
    column-count: 2;
35
  }
36
  </style>
37
</head>
38
<body>
39
  <div class="flexBaselineCheck">
40
    <!-- This canvas just exists to establish a precise, far-down baseline
41
         alignment position: -->
42
    <canvas></canvas>
43
    <!-- "contain:layout" should force all the elements below to behave as if
44
         they have no baseline. That means they all should *synthesize* a
45
         baseline from their border-box edge, in order to participate in flex
46
         item baseline alignment (to honor the outer flex container's
47
         "align-items:baseline"). So, the expectation here is that all of these
48
         elements' border-bottom edges should be aligned. -->
49
    <div>block</div>
50
    <fieldset><legend>leg</legend>fieldset</fieldset>
51
    <div class="flex">flex</div>
52
    <div class="grid">grid</div>
53
    <div class="multicol">multi<br>col</div>
54
    <details open><summary>summary</summary>details</details>
55
  </div>
56
</body>
57
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-suppress-baseline-002-expected.html +64 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-suppress-baseline-002-expected.html_sec1
1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
7
  <style>
8
  .flexBaselineCheck {
9
    display: flex;
10
    border: 1px solid black;
11
  }
12
  .flexBaselineCheck > * {
13
    border: 2px solid teal;
14
    /* In the testcase, the (baseline-aligned) items should all have their
15
       bottom borders aligned with the 50px-tall canvas.  In other words, their
16
       bottom borders should all be aligned at the bottom of their flex
17
       container, separated from the bottom by only by their margin-end
18
       distance.  Here in the reference case, we just use "flex-end" alignment
19
       (plus the same amount of margin) to produce a precise reference for what
20
       that should look like. */
21
    align-self: flex-end;
22
    margin: 2px;
23
  }
24
  canvas {
25
    background: purple;
26
    width: 20px;
27
    height: 50px;
28
    box-sizing: border-box;
29
  }
30
  </style>
31
</head>
32
<body>
33
  <div class="flexBaselineCheck">
34
    <canvas></canvas>
35
    <button>btn</button>
36
    <input type="button" value="i-btn">
37
    <input type="submit" value="i-sub">
38
  </div>
39
40
  <div class="flexBaselineCheck">
41
    <canvas></canvas>
42
    <input type="text" value="text">
43
    <input type="number" value="0">
44
  </div>
45
46
  <div class="flexBaselineCheck">
47
    <canvas></canvas>
48
    <input type="date">
49
    <input type="time">
50
  </div>
51
52
  <div class="flexBaselineCheck">
53
    <canvas></canvas>
54
    <input type="file">
55
    <textarea>textarea</textarea>
56
  </div>
57
58
  <div class="flexBaselineCheck">
59
    <canvas></canvas>
60
    <select><option>dropdown</option></select>
61
    <select multiple style="max-height:40px"><option>multi</option></select>
62
  </div>
63
</body>
64
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-suppress-baseline-002.html +71 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-suppress-baseline-002.html_sec1
1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: layout' should make elements behave as if they have no baseline</title>
6
  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
7
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout">
8
  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#valdef-align-items-baseline">
9
  <link rel="match" href="contain-layout-suppress-baseline-002-ref.html">
10
  <style>
11
  .flexBaselineCheck {
12
    display: flex;
13
    border: 1px solid black;
14
  }
15
  .flexBaselineCheck > * {
16
    contain: layout;
17
    border: 2px solid teal;
18
    align-self: baseline;
19
    margin: 2px;
20
  }
21
  canvas {
22
    background: purple;
23
    width: 20px;
24
    height: 50px;
25
    box-sizing: border-box;
26
  }
27
  </style>
28
</head>
29
<body>
30
  <div class="flexBaselineCheck">
31
    <!-- This canvas just exists to establish a precise, far-down baseline
32
         alignment position: -->
33
    <canvas></canvas>
34
    <!-- "contain:layout" should force all the elements below to behave as if
35
         they have no baseline. That means they all should *synthesize* a
36
         baseline from their border-box edge, in order to participate in flex
37
         item baseline alignment (to honor the outer flex container's
38
         "align-items:baseline"). So, the expectation here is that all of these
39
         elements' border-bottom edges should be aligned. -->
40
    <button>btn</button>
41
    <input type="button" value="i-btn">
42
    <input type="submit" value="i-sub">
43
  </div>
44
45
  <!-- Same as above, but with different form controls:
46
       (split into multiple flex containers so as not to be too wide): -->
47
  <div class="flexBaselineCheck">
48
    <canvas></canvas>
49
    <input type="text" value="text">
50
    <input type="number" value="0">
51
  </div>
52
53
  <div class="flexBaselineCheck">
54
    <canvas></canvas>
55
    <input type="date">
56
    <input type="time">
57
  </div>
58
59
  <div class="flexBaselineCheck">
60
    <canvas></canvas>
61
    <input type="file">
62
    <textarea>textarea</textarea>
63
  </div>
64
65
  <div class="flexBaselineCheck">
66
    <canvas></canvas>
67
    <select><option>dropdown</option></select>
68
    <select multiple style="max-height:40px"><option>multi</option></select>
69
  </div>
70
</body>
71
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-001-expected.html +26 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-001-expected.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test: paint containment use the padding edge</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
7
<style>
8
div {
9
  width: 100px;
10
  height: 100px;
11
  background: blue;
12
  padding: 50px;
13
  border-radius: 100px;
14
  overflow: hidden
15
}
16
div::before {
17
  content:"";
18
  display: block;
19
  background: green;
20
  width: 100px;
21
  height: 100px;
22
}
23
</style>
24
25
<p>Test passes if there is a green square in a rounded blue box, and no red.
26
<div></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-001.html +39 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-001.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test: paint containment use the padding edge</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
  <meta name=flags content="">
7
  <meta name=assert content="paint containment clips at the padding edge, not content edge, and takes corner clipping into account">
8
  <link rel="match" href="reference/contain-paint-001-ref.html">
9
  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-paint">
10
11
<style>
12
div {
13
  width: 100px;
14
  height: 100px;
15
  background: blue;
16
  padding: 50px;
17
  border-radius: 100px;
18
  contain: paint;
19
}
20
div::before {
21
 content:"";
22
 display: block;
23
 background: green;
24
 width: 100px;
25
 height: 100px;
26
}
27
div::after {
28
  content:"";
29
  display: block;
30
  background: red;
31
  width: 50px;
32
  height: 50px;
33
  margin-top: 38px;
34
  margin-left: -50px;
35
}
36
</style>
37
38
<p>Test passes if there is a green square in a rounded blue box, and no red.
39
<div></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-002-expected.html +11 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-002-expected.html_sec1
1
<!doctype html>
2
<html>
3
<head>
4
   <title>Reference rendering - passes if there is the word "PASS" below</title>
5
   <link rel="author" title="Opera" href="https://www.opera.com/">
6
</head>
7
<body>
8
   <p>Test passes if there is the word "PASS" below.</p>
9
   <div>PASS</div>
10
</body>
11
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-002.html +23 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-002.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test: paint containment on non-atomic inlines</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
  <meta name=flags content="">
7
  <meta name=assert content="paint containment does not apply to non atomic inlines">
8
  <link rel="match" href="../reference/pass_if_pass_below.html">
9
  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-paint">
10
11
<style>
12
span {
13
  contain: paint;
14
  width: 0; /* Because if the test fails, the span may get blockified, and which would make wide enough to hold the PASS */
15
}
16
span::after {
17
  content: "PASS";
18
  position: absolute;
19
}
20
</style>
21
22
<p>Test passes if there is the word "PASS" below.</p>
23
<div><span></span></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-004-expected.html +4 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-004-expected.html_sec1
1
<!DOCTYPE html>
2
<title>CSS Reftest Reference</title>
3
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
4
<p>There should be nothing below.</p>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-004.html +23 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-004.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test: paint containment applies to the principal box for list items</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
  <meta name=flags content="">
7
  <meta name=assert content="paint containment applies to the principal box, which for list items excludes the list marker">
8
  <link rel="match" href="../reference/nothing.html">
9
  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-paint">
10
11
<style>
12
li { contain: paint; }
13
</style>
14
15
<p>There should be nothing below.</p>
16
<ol>
17
  <li>
18
  <li>
19
  <li>
20
  <li>
21
  <li>
22
  <li>
23
</ol>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-005-expected.html +11 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-005-expected.html_sec1
1
<!doctype html>
2
<html>
3
<head>
4
   <title>Reference rendering - passes if there is the word "PASS" below</title>
5
   <link rel="author" title="Opera" href="https://www.opera.com/">
6
</head>
7
<body>
8
   <p>Test passes if there is the word "PASS" below.</p>
9
   <div>PASS</div>
10
</body>
11
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-005.html +24 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-005.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test: paint containment on ruby-base</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
  <meta name=flags content="">
7
  <meta name=assert content="paint containment does not apply to ruby-base">
8
  <link rel="match" href="../reference/pass_if_pass_below.html">
9
  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-paint">
10
11
<style>
12
rb {
13
  contain: paint;
14
  display: ruby-base;
15
  width: 0; /* Because if the test fails, this may get blockified, and which could make wide enough to hold the PASS */
16
}
17
rb::after {
18
  content: "PASS";
19
  position: absolute;
20
}
21
</style>
22
23
<p>Test passes if there is the word "PASS" below.</p>
24
<div><ruby><rb></rb></ruby></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-006-expected.html +11 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-006-expected.html_sec1
1
<!doctype html>
2
<html>
3
<head>
4
   <title>Reference rendering - passes if there is the word "PASS" below</title>
5
   <link rel="author" title="Opera" href="https://www.opera.com/">
6
</head>
7
<body>
8
   <p>Test passes if there is the word "PASS" below.</p>
9
   <div>PASS</div>
10
</body>
11
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-006.html +24 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-006.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test: paint containment on ruby-base-container</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
  <meta name=flags content="">
7
  <meta name=assert content="paint containment does not apply to ruby-base-container">
8
  <link rel="match" href="../reference/pass_if_pass_below.html">
9
  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-paint">
10
11
<style>
12
rbc {
13
  contain: paint;
14
  display: ruby-base-container;
15
  width: 0; /* Because if the test fails, this may get blockified, and which could make wide enough to hold the PASS */
16
}
17
rbc::after {
18
  content: "PASS";
19
  position: absolute;
20
}
21
</style>
22
23
<p>Test passes if there is the word "PASS" below.</p>
24
<div><ruby><rbc></rbc></ruby></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-007-expected.html +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-007-expected.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test reference</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
7
<style>
8
rtc {
9
  display: ruby-text-container;
10
  font-size: 1rem;
11
}
12
rtc::after {
13
  content: "PASS";
14
  position: absolute;
15
}
16
</style>
17
18
<p>This test passes if you can see the word PASS below.
19
<div><ruby><rtc></rtc></ruby></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-007.html +25 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-007.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test: paint containment on ruby-text-container</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
  <meta name=flags content="">
7
  <meta name=assert content="paint containment does not apply to ruby-text-container">
8
  <link rel="match" href="reference/contain-paint-007-ref.html">
9
  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-paint">
10
11
<style>
12
rtc {
13
  contain: paint;
14
  display: ruby-text-container;
15
  width: 0; /* Because if the test fails, this may get blockified, and which could make wide enough to hold the PASS */
16
  font-size: 1rem;
17
}
18
rtc::after {
19
  content: "PASS";
20
  position: absolute;
21
}
22
</style>
23
24
<p>This test passes if you can see the word PASS below.
25
<div><ruby><rtc></rtc></ruby></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-008-expected.html +16 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-008-expected.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test: paint containment on ruby-text</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
7
<style>
8
rt {
9
  display: -webkit-ruby-text;
10
  font-size: 1rem;
11
  font-family: monospace;
12
}
13
</style>
14
15
<p>This test passes if you can see the word PASS below.
16
<div><ruby><rt><span style="margin-left: 4ch;"></span>PASS</rt></ruby></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-008.html +32 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-008.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test: paint containment on ruby-text</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
  <meta name=flags content="">
7
  <meta name=assert content="paint containment does not apply to ruby-text">
8
  <link rel="match" href="reference/contain-paint-008-ref.html">
9
  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-paint">
10
11
<style>
12
rt {
13
  contain: paint;
14
  display: -webkit-ruby-text;
15
  font-size: 1rem;
16
  font-family: monospace;
17
}
18
rt::after {
19
  content: "PASS";
20
21
  /* Doing the following instead of position:absolute to move it out into the area that would be
22
     clipped because Firefox clips absolutely positioned content of rt even in builds without
23
     support for css containment.
24
     Since this technique works also, there's no need to trigger a false negative.
25
   */
26
  position: relative;
27
  left: 4ch;
28
}
29
</style>
30
31
<p>This test passes if you can see the word PASS below.
32
<div><ruby><rt></rt></ruby></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-009-expected.xht +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-009-expected.xht_sec1
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
 <head>
4
  <title>CSS Reftest Reference</title>
5
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
6
  <style type="text/css"><![CDATA[
7
  div
8
  {
9
  background-color: green;
10
  height: 100px;
11
  width: 100px;
12
  }
13
  ]]></style>
14
 </head>
15
 <body>
16
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17
  <div></div>
18
 </body>
19
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-009.html +28 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-009.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Paint containment absolutely positioned descendants</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">
6
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
7
<meta name=assert content="Paint containment makes an element to act as containing block for absolutely positioned descendants.">
8
<style>
9
#contain-paint {
10
  contain: paint;
11
  width: 100px;
12
  height: 100px;
13
  background: red;
14
}
15
16
#abspos {
17
  position: absolute;
18
  bottom: 0;
19
  right: 0;
20
  background: green;
21
  width: 100px;
22
  height: 100px;
23
}
24
</style>
25
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
26
<div id="contain-paint">
27
  <div id="abspos"></div>
28
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-010-expected.xht +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-010-expected.xht_sec1
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
 <head>
4
  <title>CSS Reftest Reference</title>
5
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
6
  <style type="text/css"><![CDATA[
7
  div
8
  {
9
  background-color: green;
10
  height: 100px;
11
  width: 100px;
12
  }
13
  ]]></style>
14
 </head>
15
 <body>
16
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17
  <div></div>
18
 </body>
19
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-010.html +28 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-010.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Paint containment fixed positioned descendants</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">
6
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
7
<meta name=assert content="Paint containment makes an element to act as containing block for fixed positioned descendants.">
8
<style>
9
#contain-paint {
10
  contain: paint;
11
  width: 100px;
12
  height: 100px;
13
  background: red;
14
}
15
16
#fixed {
17
  position: fixed;
18
  bottom: 0;
19
  right: 0;
20
  background: green;
21
  width: 100px;
22
  height: 100px;
23
}
24
</style>
25
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
26
<div id="contain-paint">
27
  <div id="fixed"></div>
28
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-011-expected.xht +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-011-expected.xht_sec1
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
 <head>
4
  <title>CSS Reftest Reference</title>
5
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
6
  <style type="text/css"><![CDATA[
7
  div
8
  {
9
  background-color: green;
10
  height: 100px;
11
  width: 100px;
12
  }
13
  ]]></style>
14
 </head>
15
 <body>
16
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17
  <div></div>
18
 </body>
19
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-011.html +34 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-011.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Paint containment absolutely positioned descendants</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">
6
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
7
<meta name=assert content="Paint containment doesn't apply to non-atomic inline elements so they don't act as containing block for absolutely positioned descendants.">
8
<style>
9
#containing-block {
10
  position: relative;
11
  background: red;
12
  width: 100px;
13
  height: 100px;
14
}
15
16
#contain-paint {
17
  contain: paint;
18
}
19
20
#abspos {
21
  position: absolute;
22
  bottom: 0;
23
  right: 0;
24
  background: green;
25
  width: 100%;
26
  height: 100%;
27
}
28
</style>
29
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
30
<div id="containing-block">
31
  <span id="contain-paint">
32
    <div id="abspos"></div>
33
  </span>
34
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-012-expected.xht +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-012-expected.xht_sec1
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
 <head>
4
  <title>CSS Reftest Reference</title>
5
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
6
  <style type="text/css"><![CDATA[
7
  div
8
  {
9
  background-color: green;
10
  height: 100px;
11
  width: 100px;
12
  }
13
  ]]></style>
14
 </head>
15
 <body>
16
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17
  <div></div>
18
 </body>
19
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-012.html +34 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-012.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Paint containment fixed positioned descendants</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">
6
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
7
<meta name=assert content="Paint containment doesn't apply to non-atomic inline elements so they don't act as containing block for fixed positioned descendants.">
8
<style>
9
#containing-block {
10
  transform: translateX(0);
11
  background: red;
12
  width: 100px;
13
  height: 100px;
14
}
15
16
#contain-paint {
17
  contain: paint;
18
}
19
20
#fixed {
21
  position: fixed;
22
  bottom: 0;
23
  right: 0;
24
  background: green;
25
  width: 100%;
26
  height: 100%;
27
}
28
</style>
29
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
30
<div id="containing-block">
31
  <span id="contain-paint">
32
    <div id="fixed"></div>
33
  </span>
34
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-014-expected.html +4 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-014-expected.html_sec1
1
<!DOCTYPE html>
2
<title>CSS Reftest Reference</title>
3
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
4
<p>There should be nothing below.</p>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-014.html +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-014.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Paint containment on table-cell</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">
6
<link rel="match" href="../reference/nothing.html">
7
<meta name=assert content="Paint containment does apply to table-cell elements.">
8
<style>
9
div {
10
  display: table-cell;
11
  contain: paint;
12
}
13
span {
14
  position: absolute;
15
}
16
</style>
17
18
<p>There should be nothing below.</p>
19
<div><span>FAIL</span></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-015-expected.html +11 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-015-expected.html_sec1
1
<!doctype html>
2
<html>
3
<head>
4
   <title>Reference rendering - passes if there is the word "PASS" below</title>
5
   <link rel="author" title="Opera" href="https://www.opera.com/">
6
</head>
7
<body>
8
   <p>Test passes if there is the word "PASS" below.</p>
9
   <div>PASS</div>
10
</body>
11
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-015.html +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-015.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Paint containment on table-row-group</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">
6
<link rel="match" href="../reference/pass_if_pass_below.html">
7
<meta name=assert content="Paint containment doesn't apply to table-row-group elements.">
8
<style>
9
div {
10
  display: table-row-group;
11
  contain: paint;
12
}
13
span {
14
  position: absolute;
15
}
16
</style>
17
18
<p>Test passes if there is the word "PASS" below.</p>
19
<div><span>PASS</span></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-016-expected.html +11 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-016-expected.html_sec1
1
<!doctype html>
2
<html>
3
<head>
4
   <title>Reference rendering - passes if there is the word "PASS" below</title>
5
   <link rel="author" title="Opera" href="https://www.opera.com/">
6
</head>
7
<body>
8
   <p>Test passes if there is the word "PASS" below.</p>
9
   <div>PASS</div>
10
</body>
11
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-016.html +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-016.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Paint containment on table-header-group</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">
6
<link rel="match" href="../reference/pass_if_pass_below.html">
7
<meta name=assert content="Paint containment doesn't apply to table-header-group elements.">
8
<style>
9
div {
10
  display: table-header-group;
11
  contain: paint;
12
}
13
span {
14
  position: absolute;
15
}
16
</style>
17
18
<p>Test passes if there is the word "PASS" below.</p>
19
<div><span>PASS</span></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-017-expected.html +11 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-017-expected.html_sec1
1
<!doctype html>
2
<html>
3
<head>
4
   <title>Reference rendering - passes if there is the word "PASS" below</title>
5
   <link rel="author" title="Opera" href="https://www.opera.com/">
6
</head>
7
<body>
8
   <p>Test passes if there is the word "PASS" below.</p>
9
   <div>PASS</div>
10
</body>
11
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-017.html +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-017.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Paint containment on table-footer-group</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">
6
<link rel="match" href="../reference/pass_if_pass_below.html">
7
<meta name=assert content="Paint containment doesn't apply to table-footer-group elements.">
8
<style>
9
div {
10
  display: table-footer-group;
11
  contain: paint;
12
}
13
span {
14
  position: absolute;
15
}
16
</style>
17
18
<p>Test passes if there is the word "PASS" below.</p>
19
<div><span>PASS</span></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-018-expected.html +11 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-018-expected.html_sec1
1
<!doctype html>
2
<html>
3
<head>
4
   <title>Reference rendering - passes if there is the word "PASS" below</title>
5
   <link rel="author" title="Opera" href="https://www.opera.com/">
6
</head>
7
<body>
8
   <p>Test passes if there is the word "PASS" below.</p>
9
   <div>PASS</div>
10
</body>
11
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-018.html +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-018.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Paint containment on table-row</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">
6
<link rel="match" href="../reference/pass_if_pass_below.html">
7
<meta name=assert content="Paint containment doesn't apply to table-row elements.">
8
<style>
9
div {
10
  display: table-row;
11
  contain: paint;
12
}
13
span {
14
  position: absolute;
15
}
16
</style>
17
18
<p>Test passes if there is the word "PASS" below.</p>
19
<div><span>PASS</span></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-019-expected.html +4 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-019-expected.html_sec1
1
<!DOCTYPE html>
2
<title>CSS Reftest Reference</title>
3
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
4
<p>There should be nothing below.</p>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-019.html +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-019.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Paint containment on table-caption</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">
6
<link rel="match" href="../reference/nothing.html">
7
<meta name=assert content="Paint containment does apply to table-caption elements.">
8
<style>
9
div {
10
  display: table-caption;
11
  contain: paint;
12
}
13
span {
14
  position: absolute;
15
}
16
</style>
17
18
<p>There should be nothing below.</p>
19
<div><span>FAIL</span></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-020-expected.html +11 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-020-expected.html_sec1
1
<!doctype html>
2
<html>
3
<head>
4
   <title>Reference rendering - passes if there is the word "PASS" below</title>
5
   <link rel="author" title="Opera" href="https://www.opera.com/">
6
</head>
7
<body>
8
   <p>Test passes if there is the word "PASS" below.</p>
9
   <div>PASS</div>
10
</body>
11
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-020.html +20 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-020.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Paint containment stacking context</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">
6
<link rel="match" href="../reference/pass_if_pass_below.html">
7
<meta name=assert content="Paint containment elements create a stacking context.">
8
<style>
9
div {
10
  contain: paint;
11
  background: white;
12
}
13
span {
14
  position: relative;
15
  z-index: -1;
16
}
17
</style>
18
19
<p>Test passes if there is the word "PASS" below.</p>
20
<div><span>PASS</span></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-021-expected.html +4 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-021-expected.html_sec1
1
<!DOCTYPE html>
2
<title>CSS Reftest Reference</title>
3
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
4
<p>There should be nothing below.</p>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-021.html +21 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-021.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Paint containment stacking context</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">
6
<link rel="match" href="../reference/nothing.html">
7
<meta name=assert content="Elements in which paint containment doesn't apply, do not create a stacking context.">
8
<style>
9
div {
10
  display: -webkit-ruby-text;
11
  contain: paint;
12
  background: white;
13
}
14
span {
15
  position: relative;
16
  z-index: -1;
17
}
18
</style>
19
20
<p>There should be nothing below.</p>
21
<div><span>FAIL</span></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-022-expected.html +24 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-022-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  div
11
    {
12
      background-color: green;
13
      height: 100px;
14
      left: 100px;
15
      position: relative;
16
      top: 100px;
17
      width: 100px;
18
    }
19
20
  </style>
21
22
  <p>Test passes if there is a filled green square and <strong>no red</strong>.
23
24
  <div></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-022.html +57 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-022.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: paint' and absolutely positioned descendants</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-paint">
9
  <link rel="match" href="reference/contain-paint-022-ref.html">
10
11
  <meta content="This test checks that paint containment applies to atomic inline elements and then they act as containing block for absolutely positioned descendants." name="assert">
12
  <meta name="flags" content="">
13
14
  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
15
  <style>
16
  div#incorrect-containing-block
17
    {
18
      color: transparent;
19
      font-family: Ahem;
20
      font-size: 100px;
21
      height: 2em;
22
      line-height: 1;
23
      position: relative;
24
      width: 2em;
25
    }
26
27
  div#correct-containing-block
28
    {
29
      background-color: red;
30
      contain: paint;
31
      display: inline-block;
32
      height: 1em;
33
      width: 1em;
34
    }
35
36
  div#abspos
37
    {
38
      background-color: green;
39
      height: 1em;
40
      left: 0;
41
      position: absolute;
42
      top: 0;
43
      width: 1em;
44
    }
45
  </style>
46
47
  <p>Test passes if there is a filled green square and <strong>no red</strong>.
48
49
  <div id="incorrect-containing-block">
50
51
  AB C<div id="correct-containing-block">
52
53
      <div id="abspos"></div>
54
55
    </div>
56
57
  </div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-023-expected.xht +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-023-expected.xht_sec1
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
 <head>
4
  <title>CSS Reftest Reference</title>
5
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
6
  <style type="text/css"><![CDATA[
7
  div
8
  {
9
  background-color: green;
10
  height: 100px;
11
  width: 100px;
12
  }
13
  ]]></style>
14
 </head>
15
 <body>
16
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17
  <div></div>
18
 </body>
19
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-023.html +67 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-023.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: paint' and absolutely positioned descendants</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-paint">
9
  <link rel="match" href="../reference/ref-filled-green-100px-square.xht">
10
11
  <meta content="This test checks that paint containment applies to atomic inline elements so that they can act as containing block for absolutely positioned descendants." name="assert">
12
  <meta name="flags" content="">
13
14
  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
15
  <style>
16
  div#rel-pos-red
17
    {
18
      background-image: url("support/pattern-gg-gr-100x100.png");
19
      color: green;
20
      font-family: Ahem;
21
      font-size: 50px;
22
      height: 2em;
23
      line-height: 1;
24
      position: relative;
25
      width: 2em;
26
    }
27
28
  div#containing-block
29
    {
30
      contain: paint;
31
      display: inline-block;
32
      height: 50%;
33
      vertical-align: top;
34
      width: 50%;
35
    }
36
37
  div#abspos
38
    {
39
      background-color: green;
40
      height: 50px;
41
      position: absolute;
42
      left: 0px;
43
      width: 50px;
44
    }
45
  </style>
46
47
  <p>Test passes if there is a filled green square and <strong>no red</strong>.
48
49
  <div id="rel-pos-red">
50
51
    AB C<div id="containing-block">
52
53
      <div id="abspos"></div>
54
55
    </div>
56
57
  </div>
58
59
  <!--
60
61
    |--------|
62
    |  A  B  |
63
    |    .---|
64
    |  C |c-b|
65
    |----|---|
66
67
  -->
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-024-expected.xht +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-024-expected.xht_sec1
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
 <head>
4
  <title>CSS Reftest Reference</title>
5
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
6
  <style type="text/css"><![CDATA[
7
  div
8
  {
9
  background-color: green;
10
  height: 100px;
11
  width: 100px;
12
  }
13
  ]]></style>
14
 </head>
15
 <body>
16
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17
  <div></div>
18
 </body>
19
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-024.html +50 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-024.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: paint' and absolutely positioned descendants</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-paint">
9
  <link rel="match" href="../reference/ref-filled-green-100px-square.xht">
10
11
  <meta content="This test checks that paint containment does not apply to non-atomic inline elements so they do not act as containing block for absolutely positioned descendants." name="assert">
12
  <meta name="flags" content="">
13
14
  <style>
15
  div#correct-containing-block
16
    {
17
      background-color: red;
18
      height: 100px;
19
      position: relative;
20
      width: 100px;
21
    }
22
23
  div#incorrect-containing-block
24
    {
25
      contain: paint;
26
      display: inline;
27
    }
28
29
  div#abspos
30
    {
31
      background-color: green;
32
      bottom: 0;
33
      height: 100%;
34
      position: absolute;
35
      right: 0;
36
      width: 100%;
37
    }
38
  </style>
39
40
  <p>Test passes if there is a filled green square and <strong>no red</strong>.
41
42
  <div id="correct-containing-block">
43
44
    <div id="incorrect-containing-block">
45
46
      <div id="abspos"></div>
47
48
    </div>
49
50
  </div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-025-expected.html +4 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-025-expected.html_sec1
1
<!DOCTYPE html>
2
<title>CSS Reftest Reference</title>
3
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
4
<p>There should be nothing below.</p>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-025.html +21 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-025.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Paint containment stacking context</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">
6
<link rel="match" href="../reference/nothing.html">
7
<meta name=assert content="Elements in which paint containment doesn't apply, do not create a stacking context.">
8
<style>
9
div {
10
  display: inline;
11
  contain: paint;
12
  background: white;
13
}
14
span {
15
  position: relative;
16
  z-index: -1;
17
}
18
</style>
19
20
<p>There should be nothing below.</p>
21
<div><span>FAIL</span></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-047-expected.html +20 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-047-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  div
11
    {
12
      color: green;
13
      font-family: monospace;
14
      font-size: 100px;
15
  }
16
  </style>
17
18
  <p>Test passes if there is <strong>no red</strong>.
19
20
  <div>PASS</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-047.html +35 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-047.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: paint' and clipping at padding edge</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-paint">
9
  <link rel="match" href="reference/contain-paint-047-ref.html">
10
11
  <meta content="This test checks that an element with 'contain: paint' that has its content overflowing will clip at padding edge." name="assert">
12
13
  <meta name="flags" content="">
14
15
  <style>
16
  div
17
    {
18
      color: green;
19
      contain: paint;
20
      font-family: monospace;
21
      font-size: 100px;
22
      width: 4ch;
23
    }
24
25
  span
26
    {
27
      background-color: red;
28
      color: yellow;
29
    }
30
  </style>
31
32
  <p>Test passes if there is <strong>no red</strong>.
33
34
  <div>PASS<span>FAIL</span></div>
35
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-048-expected.xht +18 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-048-expected.xht_sec1
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
3
<html xmlns="http://www.w3.org/1999/xhtml">
4
5
 <head>
6
7
  <title>CSS Reftest Reference</title>
8
9
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
10
11
 </head>
12
13
 <body>
14
15
  <p>Test passes if there is <strong>no red</strong>.</p>
16
17
 </body>
18
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-048.html +27 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-048.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: paint' and clipping at padding edge</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-paint">
9
  <link rel="match" href="reference/ref-if-there-is-no-red.xht">
10
11
  <meta content="This test checks that an element with 'contain: paint' that has its content overflowing will clip at padding edge." name="assert">
12
  <meta name="flags" content="">
13
14
  <style>
15
  div
16
    {
17
      color: red;
18
      contain: paint;
19
      font-size: 100px;
20
      width: 0;
21
    }
22
23
  </style>
24
25
  <p>Test passes if there is <strong>no red</strong>.
26
27
  <div>FAIL</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-baseline-001-expected.html +18 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-baseline-001-expected.html_sec1
1
<!doctype html>
2
<html lang=en>
3
<meta charset=utf-8>
4
<title>CSS test reference</title>
5
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
<style>
7
div {
8
  display: inline-block;
9
  height: 5px;
10
  background: blue;
11
  width: 50px;
12
  color: transparent;
13
  font-size: 100px;
14
}
15
</style>
16
17
<p>Test passes if there are two, not one, blue lines below.</p>
18
<div></div><div>a</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-baseline-001.html +24 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-baseline-001.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test: paint containment and baselines</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
  <meta name=assert content="contain:paint does not suppress baseline alignment">
7
  <link rel="match" href="reference/contain-baseline-ref.html">
8
  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-paint">
9
  <meta name="flags" content="">
10
11
<style>
12
div {
13
  display: inline-block;
14
  height: 5px;
15
  background: blue;
16
  width: 50px;
17
  contain: paint;
18
  color: transparent;
19
  font-size: 100px;
20
}
21
</style>
22
23
<p>Test passes if there are two, not one, blue lines below.</p>
24
<div></div><div>a</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-cell-001-expected.html +20 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-cell-001-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  div
11
    {
12
      color: green;
13
      font-family: monospace;
14
      font-size: 100px;
15
  }
16
  </style>
17
18
  <p>Test passes if there is <strong>no red</strong>.
19
20
  <div>PASS</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-cell-001.html +70 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-cell-001.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: paint' applies to 'table-cell' elements</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-paint">
9
  <link rel="match" href="reference/contain-paint-047-ref.html">
10
11
  <meta content="This test checks that the paint containment applies to table-cell elements. Therefore the content of the table-cell element should be clipped to the padding edge of its principal box." name="assert">
12
  <meta name="flags" content="">
13
14
  <style>
15
  div#table
16
    {
17
      display: table;
18
      font-family: monospace;
19
      font-size: 100px;
20
      table-layout: fixed;
21
      width: 4ch;
22
    }
23
24
  div.column
25
    {
26
      display: table-column;
27
    }
28
29
  div#middle-column
30
    {
31
      width: 4ch;
32
    }
33
34
  div.row
35
    {
36
      display: table-row;
37
    }
38
39
  div.cell
40
    {
41
      background-color: white;
42
      display: table-cell;
43
    }
44
45
  div#contain
46
    {
47
      color: green;
48
      contain: paint;
49
    }
50
51
  span
52
    {
53
      background-color: red;
54
      color: yellow;
55
    }
56
  </style>
57
58
  <p>Test passes if there is <strong>no red</strong>.
59
60
  <div id="table">
61
62
    <div class="column"></div><div class="column" id="middle-column"></div><div class="column"></div>
63
64
    <div class="row"><div class="cell"></div><div class="cell"></div><div class="cell"></div></div>
65
66
    <div class="row"><div class="cell"></div><div class="cell" id="contain">PASS<span>FAIL</span></div><div class="cell"></div></div>
67
68
    <div class="row"><div class="cell"></div><div class="cell"></div><div class="cell"></div></div>
69
70
  </div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-cell-002-expected.html +20 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-cell-002-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  div
11
    {
12
      color: green;
13
      font-family: monospace;
14
      font-size: 100px;
15
  }
16
  </style>
17
18
  <p>Test passes if there is <strong>no red</strong>.
19
20
  <div>PASS</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-cell-002.html +61 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-cell-002.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: paint' and table-cell elements</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-paint">
9
  <link rel="match" href="reference/contain-paint-047-ref.html">
10
11
  <meta content="This test checks that the paint containment applies to table-cell elements. Therefore the content of the table-cell element should be clipped to the padding edge of its principal box." name="assert">
12
  <meta name="flags" content="">
13
14
  <style>
15
  table
16
    {
17
      border-spacing: 0px;
18
      /* to help reuse an already created reference file */
19
      font-family: monospace;
20
      font-size: 100px;
21
      table-layout: fixed;
22
      width: 4ch;
23
    }
24
25
  td
26
    {
27
      padding: 0px;
28
      /* to help reuse an already created reference file */
29
    }
30
31
  col#middle-column
32
    {
33
      width: 4ch;
34
    }
35
36
  td#test
37
    {
38
      color: green;
39
      contain: paint;
40
  }
41
42
  span
43
    {
44
      background-color: red;
45
      color: yellow;
46
    }
47
  </style>
48
49
  <p>Test passes if there is <strong>no red</strong>.
50
51
  <table>
52
53
    <col><col id="middle-column"><col>
54
55
    <tr><td><td><td>
56
57
    <tr><td><td id="test">PASS<span>FAIL</span><td>
58
59
    <tr><td><td><td>
60
61
  </table>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-001-expected.html +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-001-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
7
  <style>
8
  #a {
9
      width: 150px;
10
      height: 150px;
11
      background: green;
12
      margin: 25px;
13
  }
14
  </style>
15
</head>
16
<body>
17
  <div id="a"></div>
18
</body>
19
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-001.html +63 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-001.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: paint' with various overflowing block descendants.</title>
6
  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
7
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
8
  <link rel="match" href="contain-paint-clip-001-ref.html">
9
  <style>
10
  .root {
11
    contain: paint;
12
    width: 100px;
13
    height: 100px;
14
    background: blue;
15
    margin: 25px;
16
    padding: 25px;
17
  }
18
  .a {
19
    width: 100px;
20
    height: 200px;
21
    background: red;
22
  }
23
  .b {
24
    width: 150px;
25
    height: 150px;
26
    background: green;
27
    position: relative;
28
    top: -25px;
29
    left: -25px;
30
  }
31
  .background {
32
    position: absolute;
33
    top: 0;
34
    left: 0;
35
    width: 200px;
36
    height: 200px;
37
    background: red;
38
    z-index: -1;
39
  }
40
  .foreground {
41
    position: absolute;
42
    top: -25px;
43
    left: -25px;
44
    width: 150px;
45
    height: 150px;
46
    border: 25px solid red;
47
    z-index: 1;
48
  }
49
  </style>
50
</head>
51
<body>
52
  <div class="root">
53
    <div class="a">
54
      <div class="b"></div>
55
      <!--These two absolutely positioned elements are checking that all sides are-->
56
      <!--clipped.  They also test that clipping is done correctly on absolutely-->
57
      <!--positioned elements.-->
58
      <div class="background"></div>
59
      <div class="foreground"></div>
60
    </div>
61
  </div>
62
</body>
63
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-002-expected.html +32 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-002-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
7
  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
8
  <style>
9
  .root {
10
    overflow: hidden;
11
    width: 100px;
12
    height: 100px;
13
    background: green;
14
    margin: 25px;
15
    padding: 10px;
16
    border-radius: 4em;
17
  }
18
  </style>
19
</head>
20
<body>
21
  <div class="root">
22
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA This text should
23
    be clipped to the box. Lorem ipsum dolor sit amet, consectetur adipiscing
24
    elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
25
    nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
26
    Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
27
    Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora
28
    torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales
29
    ligula in libero.
30
  </div>
31
</body>
32
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-002.html +34 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-002.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: paint' with overflowing text contents inside a rounded rectangle box.</title>
6
  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
7
  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
8
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
9
  <link rel="match" href="contain-paint-clip-002-ref.html">
10
  <style>
11
  .root {
12
    contain: paint;
13
    width: 100px;
14
    height: 100px;
15
    background: green;
16
    margin: 25px;
17
    padding: 10px;
18
    border-radius: 4em;
19
  }
20
  </style>
21
</head>
22
<body>
23
  <div class="root">
24
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA This text should
25
    be clipped to the box. Lorem ipsum dolor sit amet, consectetur adipiscing
26
    elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
27
    nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
28
    Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
29
    Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora
30
    torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales
31
    ligula in libero.
32
  </div>
33
</body>
34
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-003-expected.html +31 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-003-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
7
  <style>
8
  .root {
9
    overflow-x: scroll;
10
    overflow-y: scroll;
11
    width: 100px;
12
    height: 100px;
13
    background: green;
14
    margin: 25px;
15
    padding: 25px;
16
  }
17
  </style>
18
</head>
19
<body>
20
  <div class="root">
21
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA This text should
22
    be clipped to the box. Lorem ipsum dolor sit amet, consectetur adipiscing
23
    elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
24
    nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
25
    Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
26
    Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora
27
    torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales
28
    ligula in libero.
29
  </div>
30
</body>
31
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-003.html +33 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-003.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: paint' with overflowing text contents, and 'overflow-y: scroll'.</title>
6
  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
7
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
8
  <link rel="match" href="contain-paint-clip-003-ref.html">
9
  <style>
10
  .root {
11
    contain: paint;
12
    overflow-y: scroll;
13
    width: 100px;
14
    height: 100px;
15
    background: green;
16
    margin: 25px;
17
    padding: 25px;
18
  }
19
  </style>
20
</head>
21
<body>
22
  <div class="root">
23
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA This text should
24
    be clipped to the box. Lorem ipsum dolor sit amet, consectetur adipiscing
25
    elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
26
    nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
27
    Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
28
    Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora
29
    torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales
30
    ligula in libero.
31
  </div>
32
</body>
33
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-004-expected.html +31 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-004-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
7
  <style>
8
  .root {
9
    overflow-y: scroll;
10
    overflow-x: scroll;
11
    width: 100px;
12
    height: 100px;
13
    background: green;
14
    margin: 25px;
15
    padding: 25px;
16
  }
17
  </style>
18
</head>
19
<body>
20
  <div class="root">
21
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA This text should
22
    be clipped to the box. Lorem ipsum dolor sit amet, consectetur adipiscing
23
    elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
24
    nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
25
    Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
26
    Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora
27
    torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales
28
    ligula in libero.
29
  </div>
30
</body>
31
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-004.html +33 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-004.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: paint' with overflowing text contents, and 'overflow-x: scroll'.</title>
6
  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
7
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
8
  <link rel="match" href="contain-paint-clip-004-ref.html">
9
  <style>
10
  .root {
11
    contain: paint;
12
    overflow-x: scroll;
13
    width: 100px;
14
    height: 100px;
15
    background: green;
16
    margin: 25px;
17
    padding: 25px;
18
  }
19
  </style>
20
</head>
21
<body>
22
  <div class="root">
23
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA This text should
24
    be clipped to the box. Lorem ipsum dolor sit amet, consectetur adipiscing
25
    elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
26
    nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
27
    Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
28
    Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora
29
    torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales
30
    ligula in libero.
31
  </div>
32
</body>
33
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-005-expected.html +31 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-005-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
7
  <style>
8
  .root {
9
    overflow-x: scroll;
10
    overflow-y: scroll;
11
    width: 100px;
12
    height: 100px;
13
    background: green;
14
    margin: 25px;
15
    padding: 25px;
16
  }
17
  </style>
18
</head>
19
<body>
20
  <div class="root">
21
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA This text should
22
    be clipped to the box. Lorem ipsum dolor sit amet, consectetur adipiscing
23
    elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
24
    nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
25
    Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
26
    Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora
27
    torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales
28
    ligula in libero.
29
  </div>
30
</body>
31
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-005.html +40 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-005.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: paint' on li with overflowing text contents and
6
    bullet, and 'overflow-y: scroll'.</title>
7
  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
8
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
9
  <link rel="match" href="contain-paint-clip-003-ref.html">
10
  <style>
11
  ul {
12
    padding: 0;
13
    margin: 0;
14
  }
15
  .root {
16
    contain: paint;
17
    overflow-y: scroll;
18
    width: 100px;
19
    height: 100px;
20
    background: green;
21
    margin: 25px;
22
    padding: 25px;
23
  }
24
  </style>
25
</head>
26
<body>
27
  <ul>
28
    <li class="root">
29
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA This text should
30
      be clipped to the box. Lorem ipsum dolor sit amet, consectetur adipiscing
31
      elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
32
      Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis
33
      ipsum.  Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris
34
      massa.  Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu
35
      ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur
36
      sodales ligula in libero.
37
    </li>
38
  </ul>
39
</body>
40
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-006-expected.html +32 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-006-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
7
  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
8
  <style>
9
  .root {
10
    width: 100px;
11
    height: 100px;
12
    background: green;
13
    margin: 25px;
14
    padding: 25px;
15
    overflow: hidden;
16
    overflow-clip-box: content-box;
17
  }
18
  </style>
19
</head>
20
<body>
21
  <div class="root">
22
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA This text should
23
    be clipped to the content box. Lorem ipsum dolor sit amet, consectetur adipiscing
24
    elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
25
    nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
26
    Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
27
    Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora
28
    torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales
29
    ligula in libero.
30
  </div>
31
</body>
32
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-006.html +34 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-006.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: paint' with overflowing text contents while "overflow-clip-box: content-box" enabled.</title>
6
  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
7
  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
8
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
9
  <link rel="match" href="contain-paint-clip-006-ref.html">
10
  <style>
11
  .root {
12
    contain: paint;
13
    width: 100px;
14
    height: 100px;
15
    background: green;
16
    margin: 25px;
17
    padding: 25px;
18
    overflow-clip-box: content-box;
19
  }
20
  </style>
21
</head>
22
<body>
23
  <div class="root">
24
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA This text should
25
    be clipped to the content box. Lorem ipsum dolor sit amet, consectetur adipiscing
26
    elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
27
    nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
28
    Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
29
    Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora
30
    torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales
31
    ligula in libero.
32
  </div>
33
</body>
34
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-011-expected.xht +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-011-expected.xht_sec1
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
 <head>
4
  <title>CSS Reftest Reference</title>
5
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
6
  <style type="text/css"><![CDATA[
7
  div
8
  {
9
  background-color: green;
10
  height: 100px;
11
  width: 100px;
12
  }
13
  ]]></style>
14
 </head>
15
 <body>
16
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17
  <div></div>
18
 </body>
19
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-011.html +65 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-011.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: paint' and clipping descendants at padding edge</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-paint">
9
  <link rel="match" href="../reference/ref-filled-green-100px-square.xht">
10
11
  <meta content="This test checks that the paint of the descendant (a red square image) and its geometry is clipped to the padding edge of the element's principal box." name="assert">
12
13
  <!--
14
15
  contain-paint-clip-011: content overflows horizontally, principal box has no padding
16
17
  contain-paint-clip-012: content overflows vertically, principal box has no padding
18
19
  contain-paint-clip-013: content overflows horizontally, principal box has horizontal padding
20
21
  contain-paint-clip-014: content overflows vertically, principal box has vertical padding
22
23
  contain-paint-clip-015: content overflow horizontally, principal box has horizontal padding and corner clipping is involved
24
25
  contain-paint-clip-016: content overflow vertically, principal box has vertical padding and corner clipping is involved
26
27
  contain-paint-clip-017: principal box has horizontal and vertical padding, generated ::before content is inside top-right corner
28
29
  contain-paint-clip-018: principal box has horizontal and vertical padding, generated ::after content is inside top-left corner
30
31
  -->
32
33
  <meta name="flags" content="">
34
35
  <style>
36
  div
37
    {
38
      width: 100px;
39
    }
40
41
  div#red-overlapped-test
42
    {
43
      background-color: red;
44
      contain: paint;
45
    }
46
47
  img
48
    {
49
      vertical-align: bottom;
50
    }
51
52
  div#green-overlapping-reference
53
    {
54
      background-color: green;
55
      bottom: 100px;
56
      height: 100px;
57
      position: relative;
58
    }
59
  </style>
60
61
  <p>Test passes if there is a filled green square and <strong>no red</strong>.
62
63
  <div id="red-overlapped-test"><img src="support/swatch-red.png" width="200" height="100" alt="Image download support must be enabled"></div>
64
65
  <div id="green-overlapping-reference"></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-012-expected.xht +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-012-expected.xht_sec1
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
 <head>
4
  <title>CSS Reftest Reference</title>
5
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
6
  <style type="text/css"><![CDATA[
7
  div
8
  {
9
  background-color: green;
10
  height: 100px;
11
  width: 100px;
12
  }
13
  ]]></style>
14
 </head>
15
 <body>
16
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17
  <div></div>
18
 </body>
19
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-012.html +65 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-012.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: paint' and clipping descendants at padding edge</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-paint">
9
  <link rel="match" href="../reference/ref-filled-green-100px-square.xht">
10
11
  <meta content="This test checks that the paint of the descendant (a red square image) and its geometry is clipped to the padding edge of the element's principal box." name="assert">
12
13
  <!--
14
15
  contain-paint-clip-011: content overflows horizontally, principal box has no padding
16
17
  contain-paint-clip-012: content overflows vertically, principal box has no padding
18
19
  contain-paint-clip-013: content overflows horizontally, principal box has horizontal padding
20
21
  contain-paint-clip-014: content overflows vertically, principal box has vertical padding
22
23
  contain-paint-clip-015: content overflow horizontally, principal box has horizontal padding and corner clipping is involved
24
25
  contain-paint-clip-016: content overflow vertically, principal box has vertical padding and corner clipping is involved
26
27
  contain-paint-clip-017: principal box has horizontal and vertical padding, generated ::before content is inside top-right corner
28
29
  contain-paint-clip-018: principal box has horizontal and vertical padding, generated ::after content is inside top-left corner
30
31
  -->
32
33
  <meta name="flags" content="">
34
35
  <style>
36
  div
37
    {
38
      height: 100px;
39
      width: 100px;
40
    }
41
42
  div#red-overlapped-test
43
    {
44
      background-color: red;
45
      contain: paint;
46
    }
47
48
  img
49
    {
50
      vertical-align: bottom;
51
    }
52
53
  div#green-overlapping-reference
54
    {
55
      background-color: green;
56
      bottom: 100px;
57
      position: relative;
58
    }
59
  </style>
60
61
  <p>Test passes if there is a filled green square and <strong>no red</strong>.
62
63
  <div id="red-overlapped-test"><img src="support/swatch-red.png" width="100" height="200" alt="Image download support must be enabled"></div>
64
65
  <div id="green-overlapping-reference"></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-013-expected.xht +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-013-expected.xht_sec1
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
 <head>
4
  <title>CSS Reftest Reference</title>
5
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
6
  <style type="text/css"><![CDATA[
7
  div
8
  {
9
  background-color: green;
10
  height: 100px;
11
  width: 100px;
12
  }
13
  ]]></style>
14
 </head>
15
 <body>
16
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17
  <div></div>
18
 </body>
19
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-013.html +63 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-013.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: paint' and clipping descendants at padding edge</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-paint">
9
  <link rel="match" href="../reference/ref-filled-green-100px-square.xht">
10
11
  <meta content="This test checks that the paint of the descendant (a red square image) and its geometry is clipped to the padding edge of the element's principal box." name="assert">
12
13
  <!--
14
15
  contain-paint-clip-011: content overflows horizontally, principal box has no padding
16
17
  contain-paint-clip-012: content overflows vertically, principal box has no padding
18
19
  contain-paint-clip-013: content overflows horizontally, principal box has horizontal padding
20
21
  contain-paint-clip-014: content overflows vertically, principal box has vertical padding
22
23
  contain-paint-clip-015: content overflow horizontally, principal box has horizontal padding and corner clipping is involved
24
25
  contain-paint-clip-016: content overflow vertically, principal box has vertical padding and corner clipping is involved
26
27
  contain-paint-clip-017: principal box has horizontal and vertical padding, generated ::before content is inside top-right corner
28
29
  contain-paint-clip-018: principal box has horizontal and vertical padding, generated ::after content is inside top-left corner
30
31
  -->
32
33
  <meta name="flags" content="">
34
35
  <style>
36
  div#red-overlapped-test
37
    {
38
      background-color: red;
39
      contain: paint;
40
      padding: 0px 25px;
41
      width: 50px;
42
    }
43
44
  img
45
    {
46
      vertical-align: bottom;
47
    }
48
49
  div#green-overlapping-reference
50
    {
51
      background-color: green;
52
      bottom: 100px;
53
      height: 100px;
54
      position: relative;
55
      width: 100px;
56
    }
57
  </style>
58
59
  <p>Test passes if there is a filled green square and <strong>no red</strong>.
60
61
  <div id="red-overlapped-test"><img src="support/swatch-red.png" width="175" height="100" alt="Image download support must be enabled"></div>
62
63
  <div id="green-overlapping-reference"></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-014-expected.xht +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-014-expected.xht_sec1
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
 <head>
4
  <title>CSS Reftest Reference</title>
5
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
6
  <style type="text/css"><![CDATA[
7
  div
8
  {
9
  background-color: green;
10
  height: 100px;
11
  width: 100px;
12
  }
13
  ]]></style>
14
 </head>
15
 <body>
16
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17
  <div></div>
18
 </body>
19
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-014.html +64 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-014.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: paint' and clipping descendants at padding edge</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-paint">
9
  <link rel="match" href="../reference/ref-filled-green-100px-square.xht">
10
11
  <meta content="This test checks that the paint of the descendant (a red square image) and its geometry is clipped to the padding edge of the element's principal box." name="assert">
12
13
  <!--
14
15
  contain-paint-clip-011: content overflows horizontally, principal box has no padding
16
17
  contain-paint-clip-012: content overflows vertically, principal box has no padding
18
19
  contain-paint-clip-013: content overflows horizontally, principal box has horizontal padding
20
21
  contain-paint-clip-014: content overflows vertically, principal box has vertical padding
22
23
  contain-paint-clip-015: content overflow horizontally, principal box has horizontal padding and corner clipping is involved
24
25
  contain-paint-clip-016: content overflow vertically, principal box has vertical padding and corner clipping is involved
26
27
  contain-paint-clip-017: principal box has horizontal and vertical padding, generated ::before content is inside top-right corner
28
29
  contain-paint-clip-018: principal box has horizontal and vertical padding, generated ::after content is inside top-left corner
30
31
  -->
32
33
  <meta name="flags" content="">
34
35
  <style>
36
  div#red-overlapped-test
37
    {
38
      background-color: red;
39
      contain: paint;
40
      height: 50px;
41
      padding: 25px 0px;
42
      width: 100px;
43
    }
44
45
  img
46
    {
47
      vertical-align: bottom;
48
    }
49
50
  div#green-overlapping-reference
51
    {
52
      background-color: green;
53
      bottom: 100px;
54
      height: 100px;
55
      position: relative;
56
      width: 100px;
57
    }
58
  </style>
59
60
  <p>Test passes if there is a filled green square and <strong>no red</strong>.
61
62
  <div id="red-overlapped-test"><img src="support/swatch-red.png" width="100" height="175" alt="Image download support must be enabled"></div>
63
64
  <div id="green-overlapping-reference"></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-015-expected.html +21 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-015-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  div
11
    {
12
      background-color: green;
13
      border-radius: 50%;
14
      height: 100px;
15
      width: 100px;
16
    }
17
  </style>
18
19
  <p>Test passes if there is a filled green circle and <strong>no red</strong>.
20
21
  <div></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-015.html +72 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-015.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: paint' and clipping descendants at padding edge</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-paint">
9
  <link rel="match" href="reference/contain-paint-clip-015-ref.html">
10
  <!--
11
  This test fails in Chromium 66.0.3359.117
12
  -->
13
14
  <meta content="This test checks that the paint of the descendant (a red square image) and its geometry is clipped to the padding edge of the element's principal box, taking corner clipping into account." name="assert">
15
16
  <!--
17
18
  contain-paint-clip-011: content overflows horizontally, principal box has no padding
19
20
  contain-paint-clip-012: content overflows vertically, principal box has no padding
21
22
  contain-paint-clip-013: content overflows horizontally, principal box has horizontal padding
23
24
  contain-paint-clip-014: content overflows vertically, principal box has vertical padding
25
26
  contain-paint-clip-015: content overflow horizontally, principal box has horizontal padding and corner clipping is involved
27
28
  contain-paint-clip-016: content overflow vertically, principal box has vertical padding and corner clipping is involved
29
30
  contain-paint-clip-017: principal box has horizontal and vertical padding, generated ::before content is inside top-right corner
31
32
  contain-paint-clip-018: principal box has horizontal and vertical padding, generated ::after content is inside top-left corner
33
34
  -->
35
36
  <meta name="flags" content="">
37
38
  <style>
39
  div
40
    {
41
      border-radius: 50%;
42
      height: 50px;
43
      width: 50px;
44
    }
45
46
  div#red-container-circle
47
    {
48
      background-color: red;
49
      contain: paint;
50
      padding: 25px;
51
    }
52
53
  img
54
    {
55
      vertical-align: bottom;
56
    }
57
58
  div#green-overlapping-reference
59
    {
60
      background-color: green;
61
      bottom: 100px;
62
      height: 100px;
63
      position: relative;
64
      width: 100px;
65
    }
66
  </style>
67
68
  <p>Test passes if there is a filled green circle and <strong>no red</strong>.
69
70
  <div id="red-container-circle"><img src="support/swatch-red.png" width="175" height="100" alt="Image download support must be enabled"></div>
71
72
  <div id="green-overlapping-reference"></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-016-expected.html +21 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-016-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  div
11
    {
12
      background-color: green;
13
      border-radius: 50%;
14
      height: 100px;
15
      width: 100px;
16
    }
17
  </style>
18
19
  <p>Test passes if there is a filled green circle and <strong>no red</strong>.
20
21
  <div></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-016.html +69 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-016.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: paint' and clipping descendants at padding edge</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-paint">
9
  <link rel="match" href="reference/contain-paint-clip-015-ref.html">
10
  <!--
11
  This test fails in Chromium 66.0.3359.117
12
  -->
13
14
  <meta content="This test checks that the paint of the descendant (a red square image) and its geometry is clipped to the padding edge of the element's principal box, taking corner clipping into account." name="assert">
15
16
  <!--
17
18
  contain-paint-clip-011: content overflows horizontally, principal box has no padding
19
20
  contain-paint-clip-012: content overflows vertically, principal box has no padding
21
22
  contain-paint-clip-013: content overflows horizontally, principal box has horizontal padding
23
24
  contain-paint-clip-014: content overflows vertically, principal box has vertical padding
25
26
  contain-paint-clip-015: content overflow horizontally, principal box has horizontal padding and corner clipping is involved
27
28
  contain-paint-clip-016: content overflow vertically, principal box has vertical padding and corner clipping is involved
29
30
  contain-paint-clip-017: principal box has horizontal and vertical padding, generated ::before content is inside top-right corner
31
32
  contain-paint-clip-018: principal box has horizontal and vertical padding, generated ::after content is inside top-left corner
33
34
  -->
35
36
  <meta name="flags" content="">
37
38
  <style>
39
  div#red-container-circle
40
    {
41
      background-color: red;
42
      border-radius: 50%;
43
      contain: paint;
44
      height: 50px;
45
      padding: 25px 0px;
46
      width: 100px;
47
    }
48
49
  img
50
    {
51
      vertical-align: bottom;
52
    }
53
54
  div#green-overlapping-reference
55
    {
56
      background-color: green;
57
      border-radius: 50%;
58
      bottom: 100px;
59
      height: 100px;
60
      position: relative;
61
      width: 100px;
62
    }
63
  </style>
64
65
  <p>Test passes if there is a filled green circle and <strong>no red</strong>.
66
67
  <div id="red-container-circle"><img src="support/swatch-red.png" width="100" height="175" alt="Image download support must be enabled"></div>
68
69
  <div id="green-overlapping-reference"></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-017-expected.html +21 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-017-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  div
11
    {
12
      background-color: green;
13
      border-radius: 50%;
14
      height: 100px;
15
      width: 100px;
16
    }
17
  </style>
18
19
  <p>Test passes if there is a filled green circle and <strong>no red</strong>.
20
21
  <div></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-017.html +60 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-017.html_sec1
1
<!DOCTYPE html>
2
3
 <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: paint' and clipping at padding edge (generated ::before content)</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-paint">
9
  <link rel="match" href="reference/contain-paint-clip-015-ref.html">
10
11
  <meta content="This test checks that the paint containment of an element clips at its padding edge. In this test, the generated element (a red square image) is located outside the content edge, into what would have been the padding belt of the element." name="assert">
12
13
  <!--
14
15
  contain-paint-clip-011: content overflows horizontally, principal box has no padding
16
17
  contain-paint-clip-012: content overflows vertically, principal box has no padding
18
19
  contain-paint-clip-013: content overflows horizontally, principal box has horizontal padding
20
21
  contain-paint-clip-014: content overflows vertically, principal box has vertical padding
22
23
  contain-paint-clip-015: content overflow horizontally, principal box has horizontal padding and corner clipping is involved
24
25
  contain-paint-clip-016: content overflow vertically, principal box has vertical padding and corner clipping is involved
26
27
  contain-paint-clip-017: principal box has horizontal and vertical padding, generated ::before content is inside top-right corner
28
29
  contain-paint-clip-018: principal box has horizontal and vertical padding, generated ::after content is inside top-left corner
30
31
  -->
32
33
  <meta content="" name="flags">
34
35
  <style>
36
  div
37
    {
38
      background-color: green;
39
      border-radius: 100px;
40
      contain: paint;
41
      height: 50px;
42
      padding: 25px;
43
      width: 50px;
44
    }
45
46
  div::before
47
    {
48
      background-color: red;
49
      content: "";
50
      display: block;
51
      height: 18px;
52
      margin-left: 61px;
53
      margin-top: -28px;
54
      width: 18px;
55
    }
56
  </style>
57
58
  <p>Test passes if there is a filled green circle and <strong>no red</strong>.
59
60
  <div></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-018-expected.html +21 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-018-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  div
11
    {
12
      background-color: green;
13
      border-radius: 50%;
14
      height: 100px;
15
      width: 100px;
16
    }
17
  </style>
18
19
  <p>Test passes if there is a filled green circle and <strong>no red</strong>.
20
21
  <div></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-018.html +60 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-018.html_sec1
1
<!DOCTYPE html>
2
3
 <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: paint' and clipping at padding edge (generated ::after content)</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-paint">
9
  <link rel="match" href="reference/contain-paint-clip-015-ref.html">
10
11
  <meta content="This test checks that the paint containment of an element clips at its padding edge. In this test, the generated element (a red square image) is located outside the content edge, into what would have been the padding belt of the element." name="assert">
12
13
  <!--
14
15
  contain-paint-clip-011: content overflows horizontally, principal box has no padding
16
17
  contain-paint-clip-012: content overflows vertically, principal box has no padding
18
19
  contain-paint-clip-013: content overflows horizontally, principal box has horizontal padding
20
21
  contain-paint-clip-014: content overflows vertically, principal box has vertical padding
22
23
  contain-paint-clip-015: content overflow horizontally, principal box has horizontal padding and corner clipping is involved
24
25
  contain-paint-clip-016: content overflow vertically, principal box has vertical padding and corner clipping is involved
26
27
  contain-paint-clip-017: principal box has horizontal and vertical padding, generated ::before content is inside top-right corner
28
29
  contain-paint-clip-018: principal box has horizontal and vertical padding, generated ::after content is inside top-left corner
30
31
  -->
32
33
  <meta content="" name="flags">
34
35
  <style>
36
  div
37
    {
38
      background-color: green;
39
      border-radius: 100px;
40
      contain: paint;
41
      height: 50px;
42
      padding: 25px;
43
      width: 50px;
44
    }
45
46
  div::after
47
    {
48
      background-color: red;
49
      content: "";
50
      display: block;
51
      height: 18px;
52
      margin-left: -29px;
53
      margin-top: -28px;
54
      width: 18px;
55
    }
56
  </style>
57
58
  <p>Test passes if there is a filled green circle and <strong>no red</strong>.
59
60
  <div></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-019-expected.html +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-019-expected.html_sec1
1
<!DOCTYPE html>
2
3
<meta charset="UTF-8">
4
5
<title>CSS Reference Test</title>
6
7
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
8
9
<style>
10
  #green {
11
    background-color: green;
12
    width: 100px;
13
    height: 100px;
14
  }
15
</style>
16
17
<p>Test passes if there there is a green square. No red and no scrollbars should be visible.</p>
18
19
<div id="green"></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-019.html +38 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-019.html_sec1
1
<!DOCTYPE html>
2
3
<meta charset="UTF-8">
4
5
<title>CSS Containment Test: 'contain: paint' and clipping prevents scrollbars</title>
6
7
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
8
<link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-paint">
9
<link rel="match" href="reference/contain-paint-clip-019-ref.html">
10
11
<meta content="This test checks that the paint containment of an element clips contents.
12
  It should also prevent layout overflow from being propagated to ancestors." name="assert">
13
<meta content="" name="flags">
14
15
<style>
16
  #container {
17
    contain: paint;
18
    width: 100px;
19
    height: 100px;
20
  }
21
  #green {
22
    background-color: green;
23
    width: 100px;
24
    height: 100px;
25
  }
26
  #red {
27
    background-color: red;
28
    width: 100px;
29
    height: 10000px;
30
  }
31
</style>
32
33
<p>Test passes if there there is a green square. No red and no scrollbars should be visible.</p>
34
35
<div id="container">
36
  <div id="green"></div>
37
  <div id="red"></div>
38
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-containing-block-absolute-001-expected.html +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-containing-block-absolute-001-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
7
  <style>
8
  #a {
9
      width: 100px;
10
      height: 100px;
11
      background: green;
12
      margin: 50px;
13
  }
14
  </style>
15
</head>
16
<body>
17
  <div id="a"></div>
18
</body>
19
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-containing-block-absolute-001.html +34 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-containing-block-absolute-001.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: paint' element should contain absolute position elements.</title>
6
  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
7
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
8
  <link rel="match" href="contain-paint-containing-block-absolute-001-ref.html">
9
  <style>
10
  #a {
11
      contain: paint;
12
      width: 100px;
13
      height: 100px;
14
      background: red;
15
      margin: 50px;
16
  }
17
  #b {
18
      position: absolute;
19
      top: 0;
20
      left: 0;
21
      width: 100px;
22
      height: 100px;
23
      background: green;
24
  }
25
  </style>
26
</head>
27
<body>
28
  <div id="a">
29
    <div>
30
      <div id="b"></div>
31
    </div>
32
  </div>
33
</body>
34
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-containing-block-fixed-001-expected.html +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-containing-block-fixed-001-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
7
  <style>
8
  #a {
9
      width: 100px;
10
      height: 100px;
11
      background: green;
12
      margin: 50px;
13
  }
14
  </style>
15
</head>
16
<body>
17
  <div id="a"></div>
18
</body>
19
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-containing-block-fixed-001.html +34 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-containing-block-fixed-001.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: paint' element should contain fixed position elements.</title>
6
  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
7
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
8
  <link rel="match" href="contain-paint-containing-block-fixed-001-ref.html">
9
  <style>
10
  #a {
11
      contain: paint;
12
      width: 100px;
13
      height: 100px;
14
      background: red;
15
      margin: 50px;
16
  }
17
  #b {
18
      position: fixed;
19
      top: 0;
20
      left: 0;
21
      width: 100px;
22
      height: 100px;
23
      background: green;
24
  }
25
  </style>
26
</head>
27
<body>
28
  <div id="a">
29
    <div>
30
      <div id="b"></div>
31
    </div>
32
  </div>
33
</body>
34
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-formatting-context-float-001-expected.html +26 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-formatting-context-float-001-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
7
  <style>
8
  #left {
9
    float: left;
10
    height: 50px;
11
    width: 10px;
12
    background: blue;
13
  }
14
  #a {
15
    background: green;
16
    margin: 10px;
17
    width: 50px;
18
    height: 50px;
19
  }
20
  </style>
21
</head>
22
<body>
23
  <div id="left"></div>
24
  <div id="a"></div>
25
</body>
26
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-formatting-context-float-001.html +37 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-formatting-context-float-001.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: paint' should contain floats as a formatting context.</title>
6
  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
7
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
8
  <link rel="match" href="contain-paint-formatting-context-float-001-ref.html">
9
  <style>
10
  #left {
11
    float: left;
12
    height: 50px;
13
    width: 10px;
14
    background: blue;
15
  }
16
  #a {
17
    contain: paint;
18
    background: red;
19
    margin: 10px;
20
    width: 50px;
21
    height: 50px;
22
  }
23
  #b {
24
    clear: left;
25
    width: 50px;
26
    height: 50px;
27
    background: green;
28
  }
29
  </style>
30
</head>
31
<body>
32
  <div id="left"></div>
33
  <div id="a">
34
    <div id="b"></div>
35
  </div>
36
</body>
37
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-formatting-context-margin-001-expected.html +30 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-formatting-context-margin-001-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Test</title>
6
  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
7
  <style>
8
  #a {
9
      background: blue;
10
      margin: 10px;
11
      width: 50px;
12
      height: 50px;
13
  }
14
  #b {
15
      width: 50px;
16
      height: 40px;
17
      background: green;
18
  }
19
  #b-padding {
20
      height: 10px;
21
  }
22
  </style>
23
</head>
24
<body>
25
  <div id="a">
26
    <div id="b-padding"></div>
27
    <div id="b"></div>
28
  </div>
29
</body>
30
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-formatting-context-margin-001.html +36 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-formatting-context-margin-001.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: paint' with a vertical margin child. Margin collapse should not occur.</title>
6
  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
7
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
8
  <link rel="match" href="contain-paint-formatting-context-margin-001-ref.html">
9
  <style>
10
  #a {
11
      contain: paint;
12
      background: blue;
13
      margin: 10px;
14
      width: 50px;
15
      height: 50px;
16
  }
17
  #b {
18
      width: 50px;
19
      height: 40px;
20
      background: green;
21
      margin-top: 10px;
22
  }
23
  #c {
24
      background: red;
25
      width: 50px;
26
      height: 10px;
27
  }
28
  </style>
29
</head>
30
<body>
31
  <div id="a">
32
    <div id="b"></div>
33
    <div id="c"></div>
34
  </div>
35
</body>
36
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ifc-011-expected.html +46 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ifc-011-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  p
11
    {
12
      margin-bottom: 30px;
13
    }
14
15
  div
16
    {
17
      height: 30px;
18
    }
19
20
  div.orange
21
    {
22
      background-color: orange;
23
    }
24
25
  div.blue
26
    {
27
      background-color: blue;
28
    }
29
30
  div#lime
31
    {
32
      background-color: lime;
33
    }
34
  </style>
35
36
  <p>Test passes if there are 5 horizontal stripes across the page in this order (from top to bottom): an orange stripe, a blue stripe, a bright green stripe, a blue stripe and then an orange stripe.
37
38
  <div class="orange"></div>
39
40
  <div class="blue"></div>
41
42
  <div id="lime"></div>
43
44
  <div class="blue"></div>
45
46
  <div class="orange"></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ifc-011.html +56 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ifc-011.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: paint' and margin collapsing</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-paint">
9
  <link rel="match" href="reference/contain-paint-ifc-011-ref.html">
10
11
  <meta content="This test checks that a block element with 'contain: paint' establishes a new block formatting context which is independent and separate from others. This causes margin collapsing to be ineffective among vertically-adjacent boxes. In this test, the top margin of parent boxes and top margin of their respective first in-flow child do not collapse. Also, in this test, the bottom margin of the last in-flow child of boxes and bottom margin of their respective parent boxes do not collapse." name="assert">
12
  <meta name="flags" content="">
13
14
  <style>
15
  div
16
    {
17
      contain: paint;
18
      margin: 30px 0px;
19
    }
20
21
  div#grand-grand-parent-orange
22
    {
23
      background-color: orange;
24
    }
25
26
  div#grand-parent-blue
27
    {
28
      background-color: blue;
29
    }
30
31
  div#parent-lime
32
    {
33
      background-color: lime;
34
    }
35
36
  div#collapse-through-child  /* margin collapsing through element */
37
    {
38
      contain: none;
39
    }
40
  </style>
41
42
  <p>Test passes if there are 5 horizontal stripes across the page in this order (from top to bottom): an orange stripe, a blue stripe, a bright green stripe, a blue stripe and then an orange stripe.
43
44
  <div id="grand-grand-parent-orange">
45
46
    <div id="grand-parent-blue">
47
48
      <div id="parent-lime">
49
50
        <div id="collapse-through-child"></div>
51
52
      </div>
53
54
    </div>
55
56
  </div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-ib-split-001-expected.html +76 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-ib-split-001-expected.html_sec1
1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
7
  <style>
8
    .abspos-box {
9
      position: absolute;
10
      width: 200px;
11
      height: 200px;
12
    }
13
14
    /* The boxes should stack in the order that I've listed their CSS classes
15
       here.  The class names' first word (outside/before/inside/after) refers
16
       to the boxes' DOM position, and "background"/"midground"/"foreground"
17
       refers to their z-index values. */
18
19
    .before-IB-background {
20
      background: darkmagenta;
21
      z-index: -1;
22
      top: 50px;
23
      left: 50px;
24
    }
25
    .after-IB-background {
26
      background: magenta;
27
      z-index: -1;
28
      top: 70px;
29
      left: 70px;
30
    }
31
    .outside-span-midground {
32
      background: darkkhaki;
33
      top: 90px;
34
      left: 90px;
35
    }
36
    .inside-IB-midground {
37
      background: khaki;
38
      top: 110px;
39
      left: 110px;
40
    }
41
    .before-IB-foreground {
42
      background: darkcyan;
43
      z-index: 1;
44
      top: 130px;
45
      left: 130px;
46
    }
47
    .after-IB-foreground {
48
      background: cyan;
49
      z-index: 1;
50
      top: 150px;
51
      left: 150px;
52
    }
53
  </style>
54
</head>
55
<body>
56
  <!-- The expectation here is that 'abspos-box' elements will all interact in
57
       the same top-level stacking context. That means the box ordering should
58
       be (back to front): darkmagenta/magenta/darkkhaki/khaki/darkcyan/cyan,
59
       with the boxes stacked (visually) from top-left to bottom-right. -->
60
61
  <div class="abspos-box outside-span-midground"></div>
62
63
  <!-- Note: this file is identical to the testcase,
64
       except for the lack of "contain: paint" on this span. -->
65
  <span>
66
    <div class="abspos-box before-IB-background"></div>
67
    <div class="abspos-box before-IB-foreground"></div>
68
    <!-- This unstyled div crates the IB split: -->
69
    <div>
70
      <div class="abspos-box inside-IB-midground"></div>
71
    </div>
72
    <div class="abspos-box after-IB-background"></div>
73
    <div class="abspos-box after-IB-foreground"></div>
74
  </span>
75
</body>
76
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-ib-split-001.html +77 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-ib-split-001.html_sec1
1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: paint' should have no effect on non-atomic inline
6
         (including its block part, if there's a block-in-inline split)</title>
7
  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
8
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
9
  <link rel="match" href="contain-paint-ignored-cases-ib-split-001-ref.html">
10
  <style>
11
    .abspos-box {
12
      position: absolute;
13
      width: 200px;
14
      height: 200px;
15
    }
16
17
    /* The boxes should stack in the order that I've listed their CSS classes
18
       here.  The class names' first word (outside/before/inside/after) refers
19
       to the boxes' DOM position, and "background"/"midground"/"foreground"
20
       refers to their z-index values. */
21
22
    .before-IB-background {
23
      background: darkmagenta;
24
      z-index: -1;
25
      top: 50px;
26
      left: 50px;
27
    }
28
    .after-IB-background {
29
      background: magenta;
30
      z-index: -1;
31
      top: 70px;
32
      left: 70px;
33
    }
34
    .outside-span-midground {
35
      background: darkkhaki;
36
      top: 90px;
37
      left: 90px;
38
    }
39
    .inside-IB-midground {
40
      background: khaki;
41
      top: 110px;
42
      left: 110px;
43
    }
44
    .before-IB-foreground {
45
      background: darkcyan;
46
      z-index: 1;
47
      top: 130px;
48
      left: 130px;
49
    }
50
    .after-IB-foreground {
51
      background: cyan;
52
      z-index: 1;
53
      top: 150px;
54
      left: 150px;
55
    }
56
  </style>
57
</head>
58
<body>
59
  <!-- The expectation here is that 'abspos-box' elements will all interact in
60
       the same top-level stacking context. That means the box ordering should
61
       be (back to front): darkmagenta/magenta/darkkhaki/khaki/darkcyan/cyan,
62
       with the boxes stacked (visually) from top-left to bottom-right. -->
63
64
  <div class="abspos-box outside-span-midground"></div>
65
66
  <span style="contain: paint">
67
    <div class="abspos-box before-IB-background"></div>
68
    <div class="abspos-box before-IB-foreground"></div>
69
    <!-- This unstyled div crates the IB split: -->
70
    <div>
71
      <div class="abspos-box inside-IB-midground"></div>
72
    </div>
73
    <div class="abspos-box after-IB-background"></div>
74
    <div class="abspos-box after-IB-foreground"></div>
75
  </span>
76
</body>
77
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-internal-table-001a-expected.html +30 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-internal-table-001a-expected.html_sec1
1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset=utf-8>
5
    <title>CSS Reftest Reference</title>
6
    <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
7
    <style>
8
      tr {
9
        z-index: 10;
10
      }
11
      th {
12
        background-color: blue;
13
        padding-left: 50px;
14
      }
15
      caption {
16
        position: fixed;
17
        background-color: yellow;
18
        z-index: 2;
19
      }
20
    </style>
21
  </head>
22
  <body>
23
    <table>
24
      <caption>PASS</caption>
25
      <tr>
26
        <th>&emsp;</th>
27
      </tr>
28
    </table>
29
  </body>
30
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-internal-table-001a.html +34 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-internal-table-001a.html_sec1
1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset=utf-8>
5
    <title>CSS-contain test: paint containment on internal table elements except table-cell.</title>
6
    <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
7
    <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
8
    <link rel="match" href="contain-paint-ignored-cases-internal-table-001-ref.html">
9
    <meta name="assert" content="Paint containment should not apply to internal table elements except table-cell. This test testes only the tr element, and confirms contain:paint does not create a stacking context.">
10
    <style>
11
      tr {
12
        contain: paint;
13
        z-index: 10;
14
      }
15
      th {
16
        background-color: blue;
17
        padding-left: 50px;
18
      }
19
      caption {
20
        position: fixed;
21
        background-color: yellow;
22
        z-index: 2;
23
      }
24
    </style>
25
  </head>
26
  <body>
27
    <table>
28
      <caption>PASS</caption>
29
      <tr>
30
        <th>&emsp;</th>
31
      </tr>
32
    </table>
33
  </body>
34
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-internal-table-001b-expected.html +30 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-internal-table-001b-expected.html_sec1
1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset=utf-8>
5
    <title>CSS Reftest Reference</title>
6
    <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
7
    <style>
8
      tr {
9
        z-index: 10;
10
      }
11
      th {
12
        background-color: blue;
13
        padding-left: 50px;
14
      }
15
      caption {
16
        position: fixed;
17
        background-color: yellow;
18
        z-index: 2;
19
      }
20
    </style>
21
  </head>
22
  <body>
23
    <table>
24
      <caption>PASS</caption>
25
      <tr>
26
        <th>&emsp;</th>
27
      </tr>
28
    </table>
29
  </body>
30
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-internal-table-001b.html +36 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-internal-table-001b.html_sec1
1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset=utf-8>
5
    <title>CSS-contain test: paint containment on internal table elements except table-cell.</title>
6
    <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
7
    <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
8
    <link rel="match" href="contain-paint-ignored-cases-internal-table-001-ref.html">
9
    <meta name="assert" content="Paint containment should not apply to internal table elements except table-cell. This test testes only the tbody element, and confirms contain:paint does not create a stacking context.">
10
    <style>
11
      tbody {
12
        contain: paint;
13
        z-index: 10;
14
      }
15
      th {
16
        background-color: blue;
17
        padding-left: 50px;
18
      }
19
      caption {
20
        position: fixed;
21
        background-color: yellow;
22
        z-index: 2;
23
      }
24
    </style>
25
  </head>
26
  <body>
27
    <table>
28
      <caption>PASS</caption>
29
      <tbody>
30
        <tr>
31
          <th>&emsp;</th>
32
        </tr>
33
      </tbody>
34
    </table>
35
  </body>
36
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-no-principal-box-001-expected.html +57 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-no-principal-box-001-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
7
  <style>
8
    div {
9
      position: relative;
10
      width: 100px;
11
    }
12
    #div1,
13
    #div3 {
14
      background-color: #cfc;
15
      height: 100px;
16
    }
17
    #div1 {
18
      z-index: 5;
19
    }
20
    #div2 {
21
      display: contents;
22
      background-color: #fdd;
23
      height: 100px;
24
      top: -20px;
25
    }
26
    #div2_1 {
27
      background-color: #ffc;
28
      z-index: 6;
29
      top: -10px;
30
      height: 100px;
31
    }
32
    #div2_2 {
33
      z-index: 3;
34
      position: absolute;
35
      top: -15px;
36
      width: 40px;
37
      height: 300px;
38
      background-color: #ddf;
39
    }
40
    #div3 {
41
      z-index: 2;
42
      top: -50px;
43
    }
44
  </style>
45
</head>
46
<body>
47
  <div id="div1"></div>
48
49
  <div id="div2">
50
    <div id="div2_1"></div>
51
52
    <div id="div2_2"></div>
53
  </div>
54
55
  <div id="div3"></div>
56
</body>
57
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-no-principal-box-001.html +61 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-no-principal-box-001.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: paint' with 'display: contents'.</title>
6
  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
7
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
8
  <link rel="match" href="contain-paint-ignored-cases-no-principal-box-001-ref.html">
9
  <meta name="assert" content="Contain:paint should have no effect when no principle box is generated.">
10
  <style>
11
    div {
12
      position: relative;
13
      width: 100px;
14
    }
15
    #div1,
16
    #div3 {
17
      background-color: #cfc;
18
      height: 100px;
19
    }
20
    #div1 {
21
      z-index: 5;
22
    }
23
    #div2 {
24
      display: contents;
25
      contain: paint;
26
      background-color: #fdd;
27
      height: 100px;
28
      top: -20px;
29
    }
30
    #div2_1 {
31
      background-color: #ffc;
32
      z-index: 6;
33
      top: -10px;
34
      height: 100px;
35
    }
36
    #div2_2 {
37
      z-index: 3;
38
      position: absolute;
39
      top: -15px;
40
      width: 40px;
41
      height: 300px;
42
      background-color: #ddf;
43
    }
44
    #div3 {
45
      z-index: 2;
46
      top: -50px;
47
    }
48
  </style>
49
</head>
50
<body>
51
  <div id="div1"></div>
52
53
  <div id="div2">
54
    <div id="div2_1"></div>
55
56
    <div id="div2_2"></div>
57
  </div>
58
59
  <div id="div3"></div>
60
</body>
61
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-ruby-containing-block-001-expected.html +37 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-ruby-containing-block-001-expected.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <head>
4
    <meta charset=utf-8>
5
    <title>CSS Reftest Reference</title>
6
    <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
7
    <style>
8
      rb,
9
      rbc,
10
      rt,
11
      rtc {
12
        background-color: yellow;
13
        font-size: 2em;
14
      }
15
      rbc {
16
        display: ruby-base-container;
17
      }
18
      .contained {
19
        width: 50px;
20
        height: 10px;
21
        background-color: blue;
22
        top: 0;
23
        left: 0;
24
        position: fixed;
25
      }
26
      .wrapper {
27
        display: inline-block;
28
      }
29
    </style>
30
  </head>
31
  <body>
32
    <div class="wrapper"><ruby><rt>&emsp;<div class="contained"></div></rt></ruby></div>
33
    <div class="wrapper"><ruby><rtc>&emsp;<div class="contained"></div></rtc></ruby></div>
34
    <div class="wrapper"><ruby><rb>&emsp;<div class="contained"></div></rb></ruby></div>
35
    <div class="wrapper"><ruby><rbc>&emsp;<div class="contained"></div></rbc></ruby></div>
36
  </body>
37
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-ruby-containing-block-001.html +41 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-ruby-containing-block-001.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <head>
4
    <meta charset=utf-8>
5
    <title>CSS-contain test: paint containment on internal ruby elements.</title>
6
    <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
7
    <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
8
    <link rel="match" href="contain-paint-ignored-cases-ruby-containing-block-001-ref.html">
9
    <meta name="assert" content="Paint containment should not apply to ruby base, ruby base container, ruby text, and ruby text container. This test confirms contain:paint does not act as a containing block for fixed positioned descendants.">
10
    <style>
11
      rb,
12
      rbc,
13
      rt,
14
      rtc {
15
        contain: paint;
16
        background-color: yellow;
17
        font-size: 2em;
18
      }
19
      rbc {
20
        display: ruby-base-container;
21
      }
22
      .contained {
23
        width: 50px;
24
        height: 10px;
25
        background-color: blue;
26
        top: 0;
27
        left: 0;
28
        position: fixed;
29
      }
30
      .wrapper {
31
        display: inline-block;
32
      }
33
    </style>
34
  </head>
35
  <body>
36
    <div class="wrapper"><ruby><rt>&emsp;<div class="contained"></div></rt></ruby></div>
37
    <div class="wrapper"><ruby><rtc>&emsp;<div class="contained"></div></rtc></ruby></div>
38
    <div class="wrapper"><ruby><rb>&emsp;<div class="contained"></div></rb></ruby></div>
39
    <div class="wrapper"><ruby><rbc>&emsp;<div class="contained"></div></rbc></ruby></div>
40
  </body>
41
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-ruby-stacking-and-clipping-001-expected.html +52 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-ruby-stacking-and-clipping-001-expected.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <head>
4
    <meta charset=utf-8>
5
    <title>CSS Reftest Reference</title>
6
    <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
7
    <style>
8
      div {
9
        position: relative;
10
      }
11
      rbc {
12
        display: ruby-base-container;
13
      }
14
      .contained {
15
        z-index: 5;
16
        width: 70px;
17
        height: 10px;
18
        background-color: blue;
19
        margin-left: -25px;
20
      }
21
      .background {
22
        display: inline-block;
23
        background-color: yellow;
24
        height: 50px;
25
        width: 50px;
26
        position: fixed;
27
        z-index: 2;
28
      }
29
      .group {
30
        display: inline-block;
31
      }
32
    </style>
33
  </head>
34
  <body>
35
    <div class="group">
36
      <div class="background"></div>
37
      <ruby><rb>&emsp;<div class="contained"></div></rb></ruby>
38
    </div>
39
    <div class="group">
40
      <div class="background"></div>
41
      <ruby><rbc>&emsp;<div class="contained"></div></rbc></ruby>
42
    </div>
43
    <div class="group">
44
      <div class="background"></div>
45
      <ruby><rt>&emsp;<div class="contained"></div></rt></ruby>
46
    </div>
47
    <div class="group">
48
      <div class="background"></div>
49
      <ruby><rtc>&emsp;<div class="contained"></div></rtc></ruby>
50
    </div>
51
  </body>
52
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-ruby-stacking-and-clipping-001.html +60 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-ruby-stacking-and-clipping-001.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <head>
4
    <meta charset=utf-8>
5
    <title>CSS-contain test: paint containment on internal ruby elements.</title>
6
    <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
7
    <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
8
    <link rel="match" href="contain-paint-ignored-cases-ruby-stacking-and-clipping-001-ref.html">
9
    <meta name="assert" content="Paint containment should not apply to ruby base, ruby base container, ruby text, and ruby text container. This test confirms that contain:paint does not create a stacking context and does not apply overflow clipping.">
10
    <style>
11
      div {
12
        position: relative;
13
      }
14
      rb,
15
      rbc,
16
      rt,
17
      rtc {
18
        contain: paint;
19
      }
20
      rbc {
21
        display: ruby-base-container;
22
      }
23
      .contained {
24
        z-index: 5;
25
        width: 70px;
26
        height: 10px;
27
        background-color: blue;
28
        margin-left: -25px;
29
      }
30
      .background {
31
        background-color: yellow;
32
        height: 50px;
33
        width: 50px;
34
        position: fixed;
35
        z-index: 2;
36
      }
37
      .group {
38
        display: inline-block;
39
      }
40
    </style>
41
  </head>
42
  <body>
43
    <div class="group">
44
      <div class="background"></div>
45
      <ruby><rb>&emsp;<div class="contained"></div></rb></ruby>
46
    </div>
47
    <div class="group">
48
      <div class="background"></div>
49
      <ruby><rbc>&emsp;<div class="contained"></div></rbc></ruby>
50
    </div>
51
    <div class="group">
52
      <div class="background"></div>
53
      <ruby><rt>&emsp;<div class="contained"></div></rt></ruby>
54
    </div>
55
    <div class="group">
56
      <div class="background"></div>
57
      <ruby><rtc>&emsp;<div class="contained"></div></rtc></ruby>
58
    </div>
59
  </body>
60
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-independent-formatting-context-001-expected.html +14 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-independent-formatting-context-001-expected.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Reference file</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<style>
6
.wrapper {
7
  border: solid thick;
8
  margin: 1em;
9
}
10
</style>
11
<p>Test passes if it has the same output than the reference.</p>
12
<div class="wrapper">
13
  <div style="margin: 2em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>
14
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-independent-formatting-context-001.html +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-independent-formatting-context-001.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Paint containment independent formatting context</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">
6
<link rel="match" href="reference/contain-paint-independent-formatting-context-001-ref.html">
7
<meta name=assert content="Paint containment elements establish an independent formatting context. The test checks that this feature of paint containment applies to blocks.">
8
<style>
9
.wrapper {
10
  border: solid thick;
11
  margin: 1em;
12
}
13
</style>
14
<p>Test passes if it has the same output than the reference.</p>
15
<div class="wrapper">
16
  <div style="margin: 1em 0; contain: paint;">
17
    <div style="margin: 1em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>
18
  </div>
19
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-independent-formatting-context-002-expected.html +14 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-independent-formatting-context-002-expected.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Reference file</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<style>
6
.wrapper {
7
  border: solid thick;
8
  margin: 1em;
9
}
10
</style>
11
<p>Test passes if it has the same output than the reference.</p>
12
<div class="wrapper">
13
  <div style="margin: 2em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>
14
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-independent-formatting-context-002.html +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-independent-formatting-context-002.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Paint containment independent formatting context</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">
6
<link rel="match" href="reference/contain-paint-independent-formatting-context-001-ref.html">
7
<meta name=assert content="Paint containment elements establish an independent formatting context. The test checks that this feature of paint containment applies to inline blocks.">
8
<style>
9
.wrapper {
10
  border: solid thick;
11
  margin: 1em;
12
}
13
</style>
14
<p>Test passes if it has the same output than the reference.</p>
15
<div class="wrapper">
16
  <span style="display: inline-block; margin: 1em 0; contain: paint;">
17
    <div style="margin: 1em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>
18
  </span>
19
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-independent-formatting-context-003-expected.html +14 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-independent-formatting-context-003-expected.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Reference file</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<style>
6
.wrapper {
7
  border: solid thick;
8
  margin: 1em;
9
}
10
</style>
11
<p>Test passes if it has the same output than the reference.</p>
12
<div class="wrapper">
13
  <div style="margin: 1em 0;">This text should have 1em top and bottom margins.</div>
14
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-independent-formatting-context-003.html +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-independent-formatting-context-003.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Paint containment independent formatting context</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">
6
<link rel="match" href="reference/contain-paint-independent-formatting-context-003-ref.html">
7
<meta name=assert content="Paint containment elements establish an independent formatting context. The test checks that this feature of paint containment does not appliy to inline elements.">
8
<style>
9
.wrapper {
10
  border: solid thick;
11
  margin: 1em;
12
}
13
</style>
14
<p>Test passes if it has the same output than the reference.</p>
15
<div class="wrapper">
16
  <span style="margin: 1em 0; contain: paint;">
17
    <div style="margin: 1em 0;">This text should have 1em top and bottom margins.</div>
18
  </span>
19
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-size-001-expected.html +20 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-size-001-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  div
11
    {
12
      background-color: green;
13
      height: 40px;
14
      width: 206px;
15
    }
16
  </style>
17
18
  <p>Test passes if there is a short horizontal green stripe and <strong>no red</strong>.
19
20
  <div></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-size-001.html +40 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-size-001.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: paint size' and table caption</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#contain-property">
9
  <link rel="match" href="reference/contain-paint-size-001-ref.html">
10
11
  <meta name="flags" content="">
12
13
  <style>
14
  table
15
    {
16
      table-layout: fixed;
17
      width: 206px;
18
    }
19
20
  caption
21
    {
22
      background-color: red;
23
      border: green solid 1em;
24
      color: red;
25
      contain: paint size;
26
      font-size: 20px;
27
    }
28
  </style>
29
30
  <p>Test passes if there is a short horizontal green stripe and <strong>no red</strong>.
31
32
  <table>
33
34
  <caption>FAIL FAIL FAIL FAIL FAIL FAIL</caption>
35
36
    <tr><td>&nbsp;<td>&nbsp;
37
38
    <tr><td>&nbsp;<td>&nbsp;
39
40
  </table>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-size-002-expected.html +20 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-size-002-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  div
11
    {
12
      background-color: green;
13
      height: 40px;
14
      width: 206px;
15
    }
16
  </style>
17
18
  <p>Test passes if there is a short horizontal green stripe and <strong>no red</strong>.
19
20
  <div></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-size-002.html +27 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-size-002.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: paint size' and block box</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#contain-property">
9
  <link rel="match" href="reference/contain-paint-size-001-ref.html">
10
11
  <meta name="flags" content="">
12
13
  <style>
14
  div
15
    {
16
      background-color: red;
17
      border: green solid 1em;
18
      color: red;
19
      contain: paint size;
20
      font-size: 20px;
21
      width: 166px;
22
    }
23
  </style>
24
25
  <p>Test passes if there is a short horizontal green stripe and <strong>no red</strong>.
26
27
  <div>FAIL FAIL FAIL FAIL FAIL FAIL</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-size-003-expected.html +37 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-size-003-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  div
11
    {
12
      color: transparent;
13
      float: left;
14
      font-size: 16px;
15
      padding: 8px;
16
    }
17
18
  div#blue-rectangle
19
    {
20
      background-color: blue;
21
      margin: 8px;
22
      width: 6em;
23
    }
24
25
  div#orange-rectangle
26
    {
27
      background-color: orange;
28
      height: 0px;
29
      width: 12em;
30
    }
31
  </style>
32
33
  <p>Test passes if the orange rectangle and blue rectangle do not overlap.
34
35
  <div id="blue-rectangle">Some text in a blue rectangle.</div>
36
37
  <div id="orange-rectangle">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-size-003.html +42 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-size-003.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: a block with 'contain: paint size' alongside a float</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#contain-property">
9
  <link rel="match" href="reference/contain-layout-size-003-ref.html">
10
11
  <meta name="flags" content="">
12
13
  <style>
14
  div
15
    {
16
      color: transparent;
17
      font-size: 16px;
18
      padding: 8px;
19
    }
20
21
  div#floated-left
22
    {
23
      background-color: blue;
24
      float: left;
25
      margin: 8px;
26
      width: 6em;
27
    }
28
29
  div#with-contain-paint-size
30
    {
31
      background-color: orange;
32
      width: 12em;
33
34
      contain: paint size;
35
    }
36
  </style>
37
38
  <p>Test passes if the orange rectangle and blue rectangle do not overlap.
39
40
  <div id="floated-left">Some text in a blue rectangle.</div>
41
42
  <div id="with-contain-paint-size">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-stacking-context-001a-expected.html +62 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-stacking-context-001a-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
7
  <style>
8
    div {
9
      position: relative;
10
      width: 100px;
11
    }
12
    #div1,
13
    #div3 {
14
      background-color: #cfc;
15
    }
16
    #div1 {
17
      z-index: 5;
18
    }
19
    #div2 {
20
      z-index: 1;
21
      background-color: #fdd;
22
      height: 100px;
23
      top: -20px;
24
    }
25
    #div2_1 {
26
      background-color: #ffc;
27
      z-index: 6;
28
      top: -10px;
29
    }
30
    #div2_2 {
31
      z-index: 3;
32
      position: absolute;
33
      top: -15px;
34
      width: 40px;
35
      height: 100px;
36
      background-color: #ddf;
37
    }
38
    #div3 {
39
      z-index: 2;
40
      top: -50px;
41
    }
42
  </style>
43
</head>
44
<body>
45
  <div id="div1">
46
    <br/><br/>
47
  </div>
48
49
  <div id="div2">
50
    <div id="div2_1">
51
      <br/><br/>
52
    </div>
53
54
    <div id="div2_2">
55
    </div>
56
  </div>
57
58
  <div id="div3">
59
    <br/><br/>
60
  </div>
61
</body>
62
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-stacking-context-001a.html +66 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-stacking-context-001a.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: paint' with stacking contents. Z-index is defined only for siblings and children.</title>
6
  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
7
8
  <link rel="help" href="https://drafts.csswg.org/css2/visuren.html#x43">
9
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
10
  <link rel="match" href="contain-paint-stacking-context-001-ref.html">
11
  <style>
12
    div {
13
      position: relative;
14
      width: 100px;
15
    }
16
    #div1,
17
    #div3 {
18
      background-color: #cfc;
19
    }
20
    #div1 {
21
      z-index: 5;
22
    }
23
    #div2 {
24
      contain: paint;
25
      background-color: #fdd;
26
      height: 100px;
27
      top: -20px;
28
    }
29
    #div2_1 {
30
      background-color: #ffc;
31
      z-index: 6;
32
      top: -10px;
33
    }
34
    #div2_2 {
35
      z-index: 3;
36
      position: absolute;
37
      top: -15px;
38
      width: 40px;
39
      height: 100px;
40
      background-color: #ddf;
41
    }
42
    #div3 {
43
      z-index: 2;
44
      top: -50px;
45
    }
46
  </style>
47
</head>
48
<body>
49
  <div id="div1">
50
    <br/><br/>
51
  </div>
52
53
  <div id="div2">
54
    <div id="div2_1">
55
      <br/><br/>
56
    </div>
57
58
    <div id="div2_2">
59
    </div>
60
  </div>
61
62
  <div id="div3">
63
    <br/><br/>
64
  </div>
65
</body>
66
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-stacking-context-001b-expected.html +62 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-stacking-context-001b-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
7
  <style>
8
    div {
9
      position: relative;
10
      width: 100px;
11
    }
12
    #div1,
13
    #div3 {
14
      background-color: #cfc;
15
    }
16
    #div1 {
17
      z-index: 5;
18
    }
19
    #div2 {
20
      z-index: 1;
21
      background-color: #fdd;
22
      height: 100px;
23
      top: -20px;
24
    }
25
    #div2_1 {
26
      background-color: #ffc;
27
      z-index: 6;
28
      top: -10px;
29
    }
30
    #div2_2 {
31
      z-index: 3;
32
      position: absolute;
33
      top: -15px;
34
      width: 40px;
35
      height: 100px;
36
      background-color: #ddf;
37
    }
38
    #div3 {
39
      z-index: 2;
40
      top: -50px;
41
    }
42
  </style>
43
</head>
44
<body>
45
  <div id="div1">
46
    <br/><br/>
47
  </div>
48
49
  <div id="div2">
50
    <div id="div2_1">
51
      <br/><br/>
52
    </div>
53
54
    <div id="div2_2">
55
    </div>
56
  </div>
57
58
  <div id="div3">
59
    <br/><br/>
60
  </div>
61
</body>
62
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-stacking-context-001b.html +66 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-stacking-context-001b.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'will-change: contain' with stacking contents. Z-index is defined only for siblings and children.</title>
6
  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
7
8
  <link rel="help" href="https://drafts.csswg.org/css2/visuren.html#x43">
9
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
10
  <link rel="match" href="contain-paint-stacking-context-001-ref.html">
11
  <style>
12
    div {
13
      position: relative;
14
      width: 100px;
15
    }
16
    #div1,
17
    #div3 {
18
      background-color: #cfc;
19
    }
20
    #div1 {
21
      z-index: 5;
22
    }
23
    #div2 {
24
      will-change: contain;
25
      background-color: #fdd;
26
      height: 100px;
27
      top: -20px;
28
    }
29
    #div2_1 {
30
      background-color: #ffc;
31
      z-index: 6;
32
      top: -10px;
33
    }
34
    #div2_2 {
35
      z-index: 3;
36
      position: absolute;
37
      top: -15px;
38
      width: 40px;
39
      height: 100px;
40
      background-color: #ddf;
41
    }
42
    #div3 {
43
      z-index: 2;
44
      top: -50px;
45
    }
46
  </style>
47
</head>
48
<body>
49
  <div id="div1">
50
    <br/><br/>
51
  </div>
52
53
  <div id="div2">
54
    <div id="div2_1">
55
      <br/><br/>
56
    </div>
57
58
    <div id="div2_2">
59
    </div>
60
  </div>
61
62
  <div id="div3">
63
    <br/><br/>
64
  </div>
65
</body>
66
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-table-001-expected.html +20 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-table-001-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  div
11
    {
12
      color: green;
13
      font-family: monospace;
14
      font-size: 100px;
15
  }
16
  </style>
17
18
  <p>Test passes if there is <strong>no red</strong>.
19
20
  <div>PASS</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-table-001.html +42 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-table-001.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: paint' applies to 'table' elements</title>
6
7
  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
8
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
9
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-paint">
10
  <link rel="match" href="reference/contain-paint-047-ref.html">
11
12
  <meta content="This test checks that paint containment applies to table elements. Therefore the content of the table element should be clipped to the padding edge of its principal box." name="assert">
13
  <meta name="flags" content="">
14
15
  <style>
16
  div#table
17
    {
18
      display: table;
19
      font-family: monospace;
20
      font-size: 100px;
21
      table-layout: fixed;
22
      width: 4ch;
23
      contain: paint;
24
    }
25
26
  div.cell
27
    {
28
      display: table-cell;
29
      color: green;
30
    }
31
  span
32
    {
33
      background-color: red;
34
      color: yellow;
35
    }
36
  </style>
37
38
  <p>Test passes if there is <strong>no red</strong>.
39
40
  <div id="table">
41
    <div class="cell">PASS<span>FAIL</span></div>
42
  </div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-table-002-expected.html +20 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-table-002-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  div
11
    {
12
      color: green;
13
      font-family: monospace;
14
      font-size: 100px;
15
  }
16
  </style>
17
18
  <p>Test passes if there is <strong>no red</strong>.
19
20
  <div>PASS</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-table-002.html +50 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-table-002.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: paint' applies to 'table' elements</title>
6
7
  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
8
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
9
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-paint">
10
  <link rel="match" href="reference/contain-paint-047-ref.html">
11
12
  <meta content="This test checks that paint containment applies to table elements. Therefore the content of the table element (including its caption) should be clipped to the padding edge of its principal box." name="assert">
13
  <meta name="flags" content="">
14
15
  <style>
16
  div#table
17
    {
18
      display: table;
19
      font-family: monospace;
20
      font-size: 100px;
21
      table-layout: fixed;
22
      width: 4ch;
23
      contain: paint;
24
    }
25
  div.caption
26
    {
27
      display: table-caption;
28
      color: green;
29
      /* We have to limit the width of the caption here, or else the caption's
30
         intrinsic width (including the "FAIL" span) would "prop up" the width
31
         of the table to be a size that'd be larger than its specified width.
32
         Really, we want the table to be *only* 4 characters wide (as wide as
33
         the text "PASS"), with "FAIL" overflowing and getting clipped by
34
         "contain:paint" on the table wrapper box. */
35
      width: 4ch;
36
    }
37
  span
38
    {
39
      background-color: red;
40
      color: yellow;
41
    }
42
  </style>
43
44
  <p>Test passes if there is <strong>no red</strong>.
45
46
  <div id="table">
47
    <div class="caption">
48
      PASS<span>FAIL</span>
49
    </div>
50
  </div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-001-expected.html +13 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-001-expected.html_sec1
1
<!doctype html>
2
<html>
3
<head>
4
   <title>Reference rendering - passes if there is the word "PASS" below</title>
5
<style>
6
div { overflow: hidden; }
7
</style>
8
</head>
9
<body>
10
   <p>Test passes if there is the word "PASS" below.</p>
11
   <div>PASS</div>
12
</body>
13
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-001.html +17 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-001.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test: size containment on non-atomic inlines</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
  <meta name=flags content="">
7
  <meta name=assert content="size containment does not apply to non atomic inlines">
8
  <link rel="match" href="reference/pass_if_pass_below_clipped.html">
9
  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-size">
10
11
<style>
12
div { overflow: hidden; }
13
span { contain: size; }
14
</style>
15
16
<p>Test passes if there is the word "PASS" below.</p>
17
<div><span>PASS</span></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-002-expected.html +13 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-002-expected.html_sec1
1
<!doctype html>
2
<html>
3
<head>
4
   <title>Reference rendering - passes if there is the word "PASS" below</title>
5
<style>
6
div { overflow: hidden; }
7
</style>
8
</head>
9
<body>
10
   <p>Test passes if there is the word "PASS" below.</p>
11
   <div>PASS</div>
12
</body>
13
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-002.html +24 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-002.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test: size containment on ruby-base</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
  <meta name=flags content="">
7
  <meta name=assert content="size containment does not to apply ruby-base, which is an internal ruby element">
8
  <link rel="match" href="reference/pass_if_pass_below_clipped.html">
9
  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-size">
10
  <link rel=help href="https://drafts.csswg.org/css-display-3/#internal-ruby-element">
11
12
<style>
13
div {
14
  overflow: hidden;
15
  position: absolute;
16
}
17
rb {
18
  contain: size;
19
  display: ruby-base;
20
}
21
</style>
22
23
<p>Test passes if there is the word "PASS" below.</p>
24
<div><ruby><rb>PASS</rb></ruby></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-003-expected.html +13 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-003-expected.html_sec1
1
<!doctype html>
2
<html>
3
<head>
4
   <title>Reference rendering - passes if there is the word "PASS" below</title>
5
<style>
6
div { overflow: hidden; }
7
</style>
8
</head>
9
<body>
10
   <p>Test passes if there is the word "PASS" below.</p>
11
   <div>PASS</div>
12
</body>
13
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-003.html +24 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-003.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test: size containment on ruby-base-container</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
  <meta name=flags content="">
7
  <meta name=assert content="size containment does not to apply ruby-base-container, which is an internal ruby element">
8
  <link rel="match" href="reference/pass_if_pass_below_clipped.html">
9
  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-size">
10
  <link rel=help href="https://drafts.csswg.org/css-display-3/#internal-ruby-element">
11
12
<style>
13
div {
14
  overflow: hidden;
15
  position: absolute;
16
}
17
rbc {
18
  contain: size;
19
  display: ruby-base-container;
20
}
21
</style>
22
23
<p>Test passes if there is the word "PASS" below.</p>
24
<div><ruby><rbc>PASS</rbc></ruby></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-004-expected.html +18 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-004-expected.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test reference</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
7
<style>
8
rtc {
9
  display: ruby-text-container;
10
  font-size: 1rem;
11
}
12
div {
13
  overflow: hidden;
14
}
15
</style>
16
17
<p>This test passes if you can see the word PASS below.
18
<div><ruby><rtc>PASS</rtc></ruby></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-004.html +25 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-004.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test: size containment on ruby-text-container</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
  <meta name=flags content="">
7
  <meta name=assert content="size containment does not to apply ruby-text-container, which is an internal ruby element">
8
  <link rel="match" href="reference/contain-size-004-ref.html">
9
  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-size">
10
  <link rel=help href="https://drafts.csswg.org/css-display-3/#internal-ruby-element">
11
12
<style>
13
div {
14
  overflow: hidden;
15
  position: absolute;
16
}
17
rtc {
18
  contain: size;
19
  display: ruby-text-container;
20
  font-size: 1rem;
21
}
22
</style>
23
24
<p>This test passes if you can see the word PASS below.
25
<div><ruby><rtc>PASS</rtc></ruby></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-005-expected.html +16 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-005-expected.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test reference</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
7
<style>
8
div { overflow: hidden; }
9
rt {
10
  display: -webkit-ruby-text;
11
  font-size: 1rem;
12
}
13
</style>
14
15
<p>This test passes if you can see the word PASS below.
16
<div><ruby><rt>PASS</rt></ruby></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-005.html +25 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-005.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test: size containment on ruby-text</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
  <meta name=flags content="">
7
  <meta name=assert content="size containment does not to apply ruby-text, which is an internal ruby element">
8
  <link rel="match" href="reference/contain-size-005-ref.html">
9
  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-size">
10
  <link rel=help href="https://drafts.csswg.org/css-display-3/#internal-ruby-element">
11
12
<style>
13
div {
14
  overflow: hidden;
15
  position: absolute;
16
}
17
rt {
18
  contain: size;
19
  display: -webkit-ruby-text;
20
  font-size: 1rem;
21
}
22
</style>
23
24
<p>This test passes if you can see the word PASS below.
25
<div><ruby><rt>PASS</rt></ruby></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-006-expected.html +13 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-006-expected.html_sec1
1
<!doctype html>
2
<html>
3
<head>
4
   <title>Reference rendering - passes if there is the word "PASS" below</title>
5
<style>
6
div { overflow: hidden; }
7
</style>
8
</head>
9
<body>
10
   <p>Test passes if there is the word "PASS" below.</p>
11
   <div>PASS</div>
12
</body>
13
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-006.html +17 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-006.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Size containment on table-cell</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
6
<link rel="match" href="reference/pass_if_pass_below_clipped.html">
7
<meta name=assert content="Size containment doesn't apply to table-cell elements.">
8
<style>
9
div {
10
  display: table-cell;
11
  contain: size;
12
  overflow: hidden;
13
}
14
</style>
15
16
<p>Test passes if there is the word "PASS" below.</p>
17
<div>PASS</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-007-expected.html +13 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-007-expected.html_sec1
1
<!doctype html>
2
<html>
3
<head>
4
   <title>Reference rendering - passes if there is the word "PASS" below</title>
5
<style>
6
div { overflow: hidden; }
7
</style>
8
</head>
9
<body>
10
   <p>Test passes if there is the word "PASS" below.</p>
11
   <div>PASS</div>
12
</body>
13
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-007.html +21 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-007.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Size containment on table-row-group</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
6
<link rel="match" href="reference/pass_if_pass_below_clipped.html">
7
<meta name=assert content="Size containment doesn't apply to table-row-group elements.">
8
<style>
9
div {
10
  display: table-row-group;
11
  contain: size;
12
}
13
section {
14
  overflow: hidden;
15
}
16
</style>
17
18
<p>Test passes if there is the word "PASS" below.</p>
19
<section>
20
<div>PASS</div>
21
<section>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-008-expected.html +13 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-008-expected.html_sec1
1
<!doctype html>
2
<html>
3
<head>
4
   <title>Reference rendering - passes if there is the word "PASS" below</title>
5
<style>
6
div { overflow: hidden; }
7
</style>
8
</head>
9
<body>
10
   <p>Test passes if there is the word "PASS" below.</p>
11
   <div>PASS</div>
12
</body>
13
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-008.html +21 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-008.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Size containment on table-header-group</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
6
<link rel="match" href="reference/pass_if_pass_below_clipped.html">
7
<meta name=assert content="Size containment doesn't apply to table-header-group elements.">
8
<style>
9
div {
10
  display: table-header-group;
11
  contain: size;
12
}
13
section {
14
  overflow: hidden;
15
}
16
</style>
17
18
<p>Test passes if there is the word "PASS" below.</p>
19
<section>
20
<div>PASS</div>
21
</section>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-009-expected.html +13 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-009-expected.html_sec1
1
<!doctype html>
2
<html>
3
<head>
4
   <title>Reference rendering - passes if there is the word "PASS" below</title>
5
<style>
6
div { overflow: hidden; }
7
</style>
8
</head>
9
<body>
10
   <p>Test passes if there is the word "PASS" below.</p>
11
   <div>PASS</div>
12
</body>
13
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-009.html +21 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-009.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Size containment on table-footer-group</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
6
<link rel="match" href="reference/pass_if_pass_below_clipped.html">
7
<meta name=assert content="Size containment doesn't apply to table-footer-group elements.">
8
<style>
9
div {
10
  display: table-footer-group;
11
  contain: size;
12
}
13
section {
14
  overflow: hidden;
15
}
16
</style>
17
18
<p>Test passes if there is the word "PASS" below.</p>
19
<section>
20
<div>PASS</div>
21
</section>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-010-expected.html +13 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-010-expected.html_sec1
1
<!doctype html>
2
<html>
3
<head>
4
   <title>Reference rendering - passes if there is the word "PASS" below</title>
5
<style>
6
div { overflow: hidden; }
7
</style>
8
</head>
9
<body>
10
   <p>Test passes if there is the word "PASS" below.</p>
11
   <div>PASS</div>
12
</body>
13
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-010.html +21 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-010.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Size containment on table-row</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
6
<link rel="match" href="reference/pass_if_pass_below_clipped.html">
7
<meta name=assert content="Size containment doesn't apply to table-row elements.">
8
<style>
9
div {
10
  display: table-row;
11
  contain: size;
12
}
13
section {
14
  overflow: hidden;
15
}
16
</style>
17
18
<p>Test passes if there is the word "PASS" below.</p>
19
<section>
20
<div>PASS</div>
21
</section>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-011-expected.html +4 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-011-expected.html_sec1
1
<!DOCTYPE html>
2
<title>CSS Reftest Reference</title>
3
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
4
<p>There should be nothing below.</p>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-011.html +17 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-011.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Size containment on table-caption</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
6
<link rel="match" href="../reference/nothing.html">
7
<meta name=assert content="Size containment does apply to table-caption elements.">
8
<style>
9
div {
10
  display: table-caption;
11
  contain: size;
12
  overflow: hidden;
13
}
14
</style>
15
16
<p>There should be nothing below.</p>
17
<div>FAIL</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-012-expected.html +13 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-012-expected.html_sec1
1
<!doctype html>
2
<html>
3
<head>
4
   <title>Reference rendering - passes if there is the word "PASS" below</title>
5
<style>
6
div { overflow: hidden; }
7
</style>
8
</head>
9
<body>
10
   <p>Test passes if there is the word "PASS" below.</p>
11
   <div>PASS</div>
12
</body>
13
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-012.html +17 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-012.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Size containment on display:table</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
6
<link rel="match" href="reference/pass_if_pass_below_clipped.html">
7
<meta name=assert content="Size containment doesn't apply to table boxes.">
8
<style>
9
div {
10
  display: table;
11
  contain: size;
12
  overflow: hidden;
13
}
14
</style>
15
16
<p>Test passes if there is the word "PASS" below.</p>
17
<div>PASS</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-012b-expected.html +13 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-012b-expected.html_sec1
1
<!doctype html>
2
<html>
3
<head>
4
   <title>Reference rendering - passes if there is the word "PASS" below</title>
5
<style>
6
div { overflow: hidden; }
7
</style>
8
</head>
9
<body>
10
   <p>Test passes if there is the word "PASS" below.</p>
11
   <div>PASS</div>
12
</body>
13
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-012b.html +18 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-012b.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Size containment on display:inline-table</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
6
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
7
<link rel="match" href="reference/pass_if_pass_below_clipped.html">
8
<meta name=assert content="Size containment doesn't apply to inline-table boxes.">
9
<style>
10
div {
11
  display: inline-table;
12
  contain: size;
13
  overflow: hidden;
14
}
15
</style>
16
17
<p>Test passes if there is the word "PASS" below.</p>
18
<div>PASS</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-013-expected.xht +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-013-expected.xht_sec1
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
 <head>
4
  <title>CSS Reftest Reference</title>
5
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
6
  <style type="text/css"><![CDATA[
7
  div
8
  {
9
  background-color: green;
10
  height: 100px;
11
  width: 100px;
12
  }
13
  ]]></style>
14
 </head>
15
 <body>
16
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17
  <div></div>
18
 </body>
19
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-013.html +17 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-013.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Size containment replaced elements intrinsic size</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
6
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
7
<meta name=assert content="This test checks that intrinsic size of replaced elements with 'contain: size' is zero.">
8
<style>
9
img {
10
  background: green;
11
  padding: 50px;
12
  contain: size;
13
}
14
</style>
15
16
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17
<img src="/css/support/60x60-red.png" alt="Image download support must be enabled" />
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-021-expected.html +31 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-021-expected.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Reference file</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<style>
6
  div.inline-block {
7
    display: inline-block;
8
    height: 100px;
9
    width: 100px;
10
  }
11
12
  div#blue-test {
13
    background-color: blue;
14
    padding: 50px;
15
    box-sizing: border-box;
16
  }
17
18
  div#orange-reference {
19
    background-color: orange;
20
  }
21
</style>
22
23
<p>This test passes if the painted blue area is <strong>exactly as wide as</strong> the orange square.
24
25
<div>
26
  <div id="blue-test" class="inline-block"><img src="support/blue50wBy46h.png" alt="Image download support must be enabled"></div>
27
</div>
28
29
<div>
30
  <div id="orange-reference" class="inline-block"></div>
31
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-021.html +57 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-021.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: size' applies to inline-block (basic)</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-size">
9
  <link rel="match" href="reference/contain-size-021-ref.html">
10
11
  <meta content="This test checks that when laying out an inline-block element with 'contain: size', the inline-block element must be treated as if it would have no contents. In this test, the inline-block element has 1 image and no in-flow block descendant." name="assert">
12
  <meta name="flags" content="">
13
14
  <!--
15
16
  contain-size-021: inline-block with 1 image and no in-flow block descendant: width comparison
17
18
  contain-size-022: inline-block with 1 image and no in-flow block descendant: height comparison
19
20
  contain-size-023: inline-block with text and no in-flow block descendant: width comparison
21
22
  contain-size-024: inline-block with text and no in-flow block descendant: height comparison
23
24
  contain-size-025: inline-block and 2 in-flow block descendants made of images: width comparison
25
26
  contain-size-026: inline-block and 2 in-flow block descendants made of images: height comparison
27
28
  contain-size-027: inline-block and 2 in-flow block descendants made of text: width comparison
29
30
  contain-size-028: inline-block and 2 in-flow block descendants made of text: height comparison
31
32
  -->
33
34
  <style>
35
  div#inline-block-blue-test
36
    {
37
      background-color: blue;
38
      contain: size;
39
      display: inline-block;
40
      padding: 50px;
41
    }
42
43
  div#orange-reference
44
    {
45
      background-color: orange;
46
      height: 100px;
47
      width: 100px;
48
    }
49
  </style>
50
51
  <p>This test passes if the painted blue area is <strong>exactly as wide as</strong> the orange square.
52
53
  <div>
54
    <div id="inline-block-blue-test"><img src="support/blue50wBy46h.png" alt="Image download support must be enabled"></div>
55
  </div>
56
57
  <div id="orange-reference"></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-023-expected.html +33 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-023-expected.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Reference file</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<style>
6
  div.inline-block {
7
    display: inline-block;
8
    height: 100px;
9
    width: 100px;
10
  }
11
12
  div#blue-test {
13
    background-color: blue;
14
    color: transparent;
15
    font-size: 100px;
16
    padding: 50px;
17
    box-sizing: border-box;
18
  }
19
20
  div#orange-reference {
21
    background-color: orange;
22
  }
23
</style>
24
25
<p>This test passes if the painted blue area is <strong>exactly as wide as</strong> the orange square.
26
27
<div>
28
  <div id="blue-test" class="inline-block">B</div>
29
</div>
30
31
<div>
32
  <div id="orange-reference" class="inline-block"></div>
33
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-023.html +65 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-023.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: size' applies to inline-block (basic)</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-size">
9
  <link rel="match" href="reference/contain-size-023-ref.html">
10
11
  <meta content="This test checks that when laying out an inline-block element with 'contain: size', the inline-block element must be treated as if it would have no contents. In this test, the inline-block element has text and no in-flow block descendant." name="assert">
12
  <meta name="flags" content="">
13
14
  <!--
15
16
  contain-size-021: inline-block with 1 image and no in-flow block descendant: width comparison
17
18
  contain-size-022: inline-block with 1 image and no in-flow block descendant: height comparison
19
20
  contain-size-023: inline-block with text and no in-flow block descendant: width comparison
21
22
  contain-size-024: inline-block with text and no in-flow block descendant: height comparison
23
24
  contain-size-025: inline-block and 2 in-flow block descendants made of images: width comparison
25
26
  contain-size-026: inline-block and 2 in-flow block descendants made of images: height comparison
27
28
  contain-size-027: inline-block and 2 in-flow block descendants made of text: width comparison
29
30
  contain-size-028: inline-block and 2 in-flow block descendants made of text: height comparison
31
32
  -->
33
34
  <style>
35
  div.inline-block
36
    {
37
      display: inline-block;
38
    }
39
40
  div#blue-test
41
    {
42
      background-color: blue;
43
      color: transparent;
44
      contain: size;
45
      font-size: 100px;
46
      padding: 50px;
47
    }
48
49
  div#orange-reference
50
    {
51
      background-color: orange;
52
      height: 100px;
53
      width: 100px;
54
    }
55
  </style>
56
57
  <p>This test passes if the painted blue area is <strong>exactly as wide as</strong> the orange square.
58
59
  <div>
60
    <div id="blue-test" class="inline-block">B</div>
61
  </div>
62
63
  <div>
64
    <div id="orange-reference" class="inline-block"></div>
65
  </div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-025-expected.html +13 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-025-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <p>This test passes if the painted blue area is <strong>exactly as wide as</strong> the orange square.
10
11
  <div><img src="support/swatch-blue.png" width="100" height="100" alt="Image download support must be enabled"></div>
12
13
  <div><img src="support/swatch-orange.png" width="100" height="100" alt="Image download support must be enabled"></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-025.html +69 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-025.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: size' applies to inline-block</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-size">
9
  <link rel="match" href="reference/contain-size-025-ref.html">
10
11
  <meta content="This test checks that when laying out an inline-block element with 'contain: size', the inline-block element must be treated as if it would have no contents. In this test, the inline-block element has 2 in-flow block descendants made of images." name="assert">
12
  <meta name="flags" content="">
13
14
  <!--
15
16
  contain-size-021: inline-block with 1 image and no in-flow block descendant: width comparison
17
18
  contain-size-022: inline-block with 1 image and no in-flow block descendant: height comparison
19
20
  contain-size-023: inline-block with text and no in-flow block descendant: width comparison
21
22
  contain-size-024: inline-block with text and no in-flow block descendant: height comparison
23
24
  contain-size-025: inline-block and 2 in-flow block descendants made of images: width comparison
25
26
  contain-size-026: inline-block and 2 in-flow block descendants made of images: height comparison
27
28
  contain-size-027: inline-block and 2 in-flow block descendants made of text: width comparison
29
30
  contain-size-028: inline-block and 2 in-flow block descendants made of text: height comparison
31
32
  -->
33
34
  <style>
35
  div.inline-block
36
    {
37
      display: inline-block;
38
    }
39
40
  div#blue-test
41
    {
42
      background-color: blue;
43
      contain: size;
44
      padding: 50px;
45
    }
46
47
  span.block-descendant, img
48
    {
49
      display: block;
50
    }
51
52
  div#orange-reference
53
    {
54
      background-color: orange;
55
      height: 100px;
56
      width: 100px;
57
    }
58
  </style>
59
60
  <p>This test passes if the painted blue area is <strong>exactly as wide as</strong> the orange square.
61
62
  <div>
63
    <div id="blue-test" class="inline-block">
64
      <span class="block-descendant"><img src="support/blue50wBy25h.png" alt="Image download support must be enabled"></span>
65
      <span id="last-line-box" class="block-descendant"><img src="support/blue50wBy25h.png" alt="Image download support must be enabled"></span>
66
    </div>
67
  </div>
68
69
  <div id="orange-reference" class="inline-block"></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-027-expected.html +41 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-027-expected.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Reference file</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<style>
6
  div.inline-block {
7
    display: inline-block;
8
    height: 100px;
9
    width: 100px;
10
  }
11
12
  div#blue-test {
13
    background-color: blue;
14
    color: transparent;
15
    font-size: 50px;
16
    line-height: 1;
17
    padding: 50px;
18
    box-sizing: border-box;
19
  }
20
21
  div#orange-reference {
22
    background-color: orange;
23
  }
24
25
  span {
26
    display: block;
27
  }
28
</style>
29
30
<p>This test passes if the painted blue area is <strong>exactly as wide as</strong> the orange square.
31
32
<div>
33
  <div id="blue-test" class="inline-block">
34
    <span>B</span>
35
    <span>L</span>
36
  </div>
37
</div>
38
39
<div>
40
  <div id="orange-reference" class="inline-block"></div>
41
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-027.html +74 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-027.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: size' applies to inline-block</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-size">
9
  <link rel="match" href="reference/contain-size-027-ref.html">
10
11
  <meta content="This test checks that when laying out an inline-block element with 'contain: size', the inline-block element must be treated as if it would have no contents. In this test, the inline-block element has 2 in-flow block descendants made of text." name="assert">
12
  <meta name="flags" content="">
13
14
  <!--
15
16
  contain-size-021: inline-block with 1 image and no in-flow block descendant: width comparison
17
18
  contain-size-022: inline-block with 1 image and no in-flow block descendant: height comparison
19
20
  contain-size-023: inline-block with text and no in-flow block descendant: width comparison
21
22
  contain-size-024: inline-block with text and no in-flow block descendant: height comparison
23
24
  contain-size-025: inline-block and 2 in-flow block descendants made of images: width comparison
25
26
  contain-size-026: inline-block and 2 in-flow block descendants made of images: height comparison
27
28
  contain-size-027: inline-block and 2 in-flow block descendants made of text: width comparison
29
30
  contain-size-028: inline-block and 2 in-flow block descendants made of text: height comparison
31
32
  -->
33
34
  <style>
35
  div.inline-block
36
    {
37
      display: inline-block;
38
    }
39
40
  div#blue-test
41
    {
42
      background-color: blue;
43
      color: transparent;
44
      contain: size;
45
      font-size: 50px;
46
      line-height: 1;
47
      padding: 50px;
48
    }
49
50
  span.block-descendant
51
    {
52
      display: block;
53
    }
54
55
  div#orange-reference
56
    {
57
      background-color: orange;
58
      height: 100px;
59
      width: 100px;
60
    }
61
  </style>
62
63
  <p>This test passes if the painted blue area is <strong>exactly as wide as</strong> the orange square.
64
65
  <div>
66
    <div id="blue-test" class="inline-block">
67
      <span class="block-descendant">B</span>
68
      <span id="last-line-box" class="block-descendant">L</span>
69
    </div>
70
  </div>
71
72
  <div>
73
    <div id="orange-reference" class="inline-block"></div>
74
  </div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-041-expected.html +13 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-041-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <p>This test passes if the painted blue area is <strong>exactly as wide as</strong> the orange square.
10
11
  <div><img src="support/swatch-blue.png" width="100" height="100" alt="Image download support must be enabled"></div>
12
13
  <div><img src="support/swatch-orange.png" width="100" height="100" alt="Image download support must be enabled"></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-041.html +34 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-041.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: size' applies to inline replaced element (basic)</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-size">
9
  <link rel="match" href="reference/contain-size-025-ref.html">
10
11
  <meta content="This test checks that when laying out an inline replaced element with 'contain: size', the inline replaced element must be treated as having an intrinsic width and height of 0." name="assert">
12
  <meta name="flags" content="">
13
14
  <style>
15
  img#blue-test
16
    {
17
      background-color: blue;
18
      contain: size;
19
      padding: 50px;
20
    }
21
22
  div#orange-reference
23
    {
24
      background-color: orange;
25
      height: 100px;
26
      width: 100px;
27
    }
28
  </style>
29
30
  <p>This test passes if the painted blue area is <strong>exactly as wide as</strong> the orange square.
31
32
  <div><img id="blue-test" src="support/blue-100x100.png" alt="Image download support must be enabled"></div>
33
34
  <div id="orange-reference"></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-042-expected.html +11 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-042-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <p>This test passes if the painted blue area is <strong>exactly as tall as</strong> the orange square.
10
11
  <div><img src="support/swatch-blue.png" width="100" height="100" alt="Image download support must be enabled"> <img src="support/swatch-orange.png" width="100" height="100" alt="Image download support must be enabled"></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-042.html +25 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-042.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: size' applies to inline replaced element (basic)</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-size">
9
  <link rel="match" href="reference/contain-size-022-ref.html">
10
11
  <meta content="This test checks that when laying out an inline replaced element with 'contain: size', the inline replaced element must be treated as having an intrinsic width and height of 0." name="assert">
12
  <meta name="flags" content="">
13
14
  <style>
15
  img#blue-test
16
    {
17
      background-color: blue;
18
      contain: size;
19
      padding: 50px;
20
    }
21
  </style>
22
23
  <p>This test passes if the painted blue area is <strong>exactly as tall as</strong> the orange square.
24
25
  <div><img id="blue-test" src="support/blue-100x100.png" alt="Image download support must be enabled"> <img id="orange-reference" src="support/swatch-orange.png" width="100" height="100" alt="Image download support must be enabled"></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-051-expected.html +21 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-051-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  td
11
    {
12
      font-size: 50px;
13
    }
14
  </style>
15
16
  <p>Test passes if "5678" (without quotes) is readable and if the digits do not overlap each other.
17
18
  <table>
19
    <tr>
20
      <td>5<td>6<td>7<td>8
21
  </table>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-051.html +26 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-051.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: size' does not apply to table-cell element</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-size">
9
  <link rel="match" href="reference/contain-size-051-ref.html">
10
11
  <meta name="flags" content="">
12
13
  <style>
14
  td
15
    {
16
      contain: size;
17
      font-size: 50px;
18
    }
19
  </style>
20
21
  <p>Test passes if "5678" (without quotes) is readable and if the digits do not overlap each other.
22
23
  <table>
24
    <tr>
25
      <td>5<td>6<td>7<td>8
26
  </table>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-052-expected.html +21 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-052-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  td
11
    {
12
      font-size: 50px;
13
    }
14
  </style>
15
16
  <p>Test passes if "5678" (without quotes) is readable and if the digits do not overlap each other.
17
18
  <table>
19
    <tr>
20
      <td>5<td>6<td>7<td>8
21
  </table>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-052.html +40 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-052.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: size' does not apply to table-cell element</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-size">
9
  <link rel="match" href="reference/contain-size-051-ref.html">
10
11
  <meta name="flags" content="">
12
13
  <style>
14
  div#table
15
    {
16
      border-spacing: 2px;
17
      display: table;
18
    }
19
20
  div#table-row
21
    {
22
      display: table-row;
23
    }
24
25
  div.table-cell
26
    {
27
      contain: size;
28
      display: table-cell;
29
      font-size: 50px;
30
      padding: 1px;
31
    }
32
  </style>
33
34
  <p>Test passes if "5678" (without quotes) is readable and if the digits do not overlap each other.
35
36
  <div id="table">
37
    <div id="table-row">
38
      <div class="table-cell">5</div><div class="table-cell">6</div><div class="table-cell">7</div><div class="table-cell">8</div>
39
    </div>
40
  </div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-056-expected.html +33 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-056-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  table
11
    {
12
      width: 400px;
13
    }
14
15
  caption
16
    {
17
      border-top: orange solid 6px;
18
      color: blue;
19
      font-size: 32px;
20
    }
21
22
  span
23
    {
24
      bottom: 3px;
25
      position: relative;
26
    }
27
  </style>
28
29
  <p>Test passes if the words "Table caption" are below a thick orange line. Test fails if, instead of a thick orange line, there is an orange rectangle with the words "Table caption" in it.
30
31
  <table>
32
    <caption><span>Table caption</span></caption>
33
  </table>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-056.html +32 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-056.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: size' applies to caption element</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-size">
9
  <link rel="match" href="reference/contain-size-056-ref.html">
10
11
  <meta name="flags" content="">
12
13
  <style>
14
  table
15
    {
16
      width: 400px;
17
    }
18
19
  caption
20
    {
21
      border: orange solid 3px;
22
      color: blue;
23
      contain: size;
24
      font-size: 32px;
25
    }
26
  </style>
27
28
  <p>Test passes if the words "Table caption" are below a thick orange line. Test fails if, instead of a thick orange line, there is an orange rectangle with the words "Table caption" in it.
29
30
  <table>
31
    <caption>Table caption</caption>
32
  </table>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-061-expected.html +9 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-061-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <p>Test passes if the word FAIL is absent.
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-061.html +24 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-061.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: size' applies to block box (basic)</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-size">
9
  <link rel="match" href="reference/contain-size-061-ref.html">
10
11
  <meta name="flags" content="">
12
13
  <style>
14
  div
15
    {
16
      contain: size;
17
      font-size: 100px;
18
      overflow: hidden;
19
    }
20
  </style>
21
22
  <p>Test passes if the word FAIL is absent.
23
24
  <div>FAIL</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-062-expected.html +22 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-062-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  div
11
    {
12
      border: orange solid 3px;
13
      color: blue;
14
      font-size: 32px;
15
      height: 0px;
16
      width: 400px;
17
    }
18
  </style>
19
20
  <p>Test passes if the words "Text sample" are below a thick orange line. Test fails if, instead of a thick orange line, there is an orange rectangle with the words "Text sample" in it.
21
22
  <div>Text sample</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-062.html +26 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-062.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: size' applies to block box (basic)</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-size">
9
  <link rel="match" href="reference/contain-size-062-ref.html">
10
11
  <meta name="flags" content="">
12
13
  <style>
14
  div
15
    {
16
      border: orange solid 3px;
17
      color: blue;
18
      contain: size;
19
      font-size: 32px;
20
      width: 400px;
21
    }
22
  </style>
23
24
  <p>Test passes if the words "Text sample" are below a thick orange line. Test fails if, instead of a thick orange line, there is an orange rectangle with the words "Text sample" in it.
25
26
  <div>Text sample</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-063-expected.html +6 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-063-expected.html_sec1
1
<!DOCTYPE html>
2
<meta charset="UTF-8">
3
<title>Test reference</title>
4
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
5
6
<p>Test passes if there is no red below.
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-063.html +62 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-063.html_sec1
1
<!DOCTYPE html>
2
<meta charset="UTF-8">
3
<title>CSS Containment Test: 'contain: size' affects intrinsic size</title>
4
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
5
<link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-size">
6
<link rel="match" href="reference/contain-size-063-ref.html">
7
<meta name="flags" content="">
8
<meta name="asserts" content="the intrinsic size of a size-contained element is treated as 0 in various scenarios involving intrinsic sizing.">
9
10
<style>
11
.red {
12
    background: red;
13
}
14
.abs {
15
    position: absolute;
16
}
17
.float {
18
    float: left;
19
}
20
.zero {
21
    width: 0;
22
}
23
.contained {
24
    contain: size;
25
    color: transparent;
26
}
27
.grid {
28
    display: grid;
29
    grid: max-content auto / min-content auto;
30
}
31
table {
32
    border-collapse: collapse;
33
}
34
td {
35
    padding: 0;
36
}
37
</style>
38
39
<p>Test passes if there is no red below.
40
41
<!-- max content sized-->
42
<div class="red abs"><div class="contained">Arbitrary content content<br>that takes up size.<br>Block Layout</div></div>
43
44
<!-- max content sized-->
45
<div class="red float"><div class="contained">Arbitrary content content<br>that takes up size.<br>Float</div></div>
46
47
<!-- min content sized-->
48
<div class=zero><div class="red float"><div class="contained">Arbitrary content content<br>that takes up size.<br>Float in narrow wrapper</div></div></div>
49
50
<div class="grid red">
51
    <div class="red"></div>
52
    <div class="contained">Arbitrary content content<br>that takes up size.<br>Grid item giving the first row it's height</div>
53
    <div class="contained">Arbitrary content content<br>that takes up size.<br>Grid item giving the first column its width</div>
54
</div>
55
56
<table class=red>
57
    <tr>
58
        <td class=red>
59
        <td><div class="contained">Arbitrary content content<br>that takes up size.<br>content of a table cell giving the fist row it's height</div>
60
    <tr>
61
        <td><div class="contained">Arbitrary content content<br>that takes up size.<br>content of a table cell giving the first column it's width</div>
62
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-064-expected.html +28 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-064-expected.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>test reference</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
<style>
7
div { font-size: 50px; }
8
.green { background: green; }
9
.grid {
10
    display: grid;
11
    grid-template-columns: min-content max-content;
12
}
13
</style>
14
15
<p>This test passes if there are two green rectangles and no red.
16
17
<div class=grid>
18
    <div style="grid-area: 1/1">&nbsp;</div>
19
    <div style="grid-area: 2/2"id=test class="grid">
20
        <div>&nbsp;</div>
21
        <div class=green></div>
22
        <div class=green></div>
23
        <div>&nbsp;</div>
24
    </div>
25
</div>
26
27
28
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-064.html +39 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-064.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test: size containment: layout in place</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
  <meta name=flags content="">
7
  <meta name=assert content="The size containment box's content (including any pseudo-elements) must be laid out into the now fixed-size size containment box normally.">
8
  <link rel="match" href="reference/contain-size-064-ref.html">
9
  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-size">
10
11
<style>
12
div { font-size: 50px; }
13
.red { background: red; }
14
.green { background: green; }
15
.grid {
16
    display: grid;
17
    grid-template-columns: min-content max-content;
18
}
19
#test { contain: size; }
20
#test::after { content: "\a0" ; }
21
</style>
22
23
<p>This test passes if there are two green rectangles and no red.
24
25
<div class=grid>
26
    <div style="grid-area: 1/1">&nbsp;</div>
27
    <div style="grid-area: 1/2"class=red></div><!-- will show if the size containment doesn't result in 0x0-->
28
    <div style="grid-area: 1/3"></div>
29
30
    <div class=red></div><!-- will show if the size containment doesn't result in 0x0-->
31
    <div id=test class="grid red"><!-- will show if the size containment doesn't result in 0x0-->
32
        <div>&nbsp;</div>
33
        <div class=green></div><!-- won't show unless ::after is inserted and grid tracks are properly sized-->
34
        <div class=green></div><!-- won't show unless ::after is inserted and grid tracks are properly sized-->
35
    </div>
36
</div>
37
38
39
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-baseline-001-expected.html +18 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-baseline-001-expected.html_sec1
1
<!doctype html>
2
<html lang=en>
3
<meta charset=utf-8>
4
<title>CSS test reference</title>
5
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
<style>
7
div {
8
  display: inline-block;
9
  height: 5px;
10
  background: blue;
11
  width: 50px;
12
  color: transparent;
13
  font-size: 100px;
14
}
15
</style>
16
17
<p>Test passes if there are two, not one, blue lines below.</p>
18
<div></div><div>a</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-baseline-001.html +24 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-baseline-001.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test: size containment and baselines</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
  <meta name=assert content="contain:size does not suppress baseline alignment">
7
  <link rel="match" href="reference/contain-baseline-ref.html">
8
  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-size">
9
  <meta name="flags" content="">
10
11
<style>
12
div {
13
  display: inline-block;
14
  height: 5px;
15
  background: blue;
16
  width: 50px;
17
  contain: size;
18
  color: transparent;
19
  font-size: 100px;
20
}
21
</style>
22
23
<p>Test passes if there are two, not one, blue lines below.</p>
24
<div></div><div>a</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-001-expected.html +62 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-001-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
7
  <style>
8
  .basic {
9
    border: 1em solid green;
10
  }
11
  .height-ref {
12
    height: 50px;
13
    background: lightblue;
14
  }
15
  .width-ref {
16
    width: 50px;
17
  }
18
  .floatLBasic-ref {
19
    float: left;
20
  }
21
  .floatLWidth-ref {
22
    float: left;
23
    width: 50px;
24
  }
25
  .flexBaselineCheck {
26
    display: flex;
27
    align-items: baseline;
28
  }
29
  .innerContents {
30
    color: transparent;
31
    width: 0;
32
    height: 0;
33
  }
34
  </style>
35
</head>
36
<body>
37
  <div class="basic"></div>
38
  <br>
39
40
  <div class="basic height-ref"></div>
41
  <br>
42
43
  <div class="basic height-ref"></div>
44
  <br>
45
46
  <div class="basic width-ref"></div>
47
  <br>
48
49
  <div class="basic width-ref"></div>
50
  <br>
51
52
  <div class="basic floatLBasic-ref"></div>
53
  <br>
54
55
  <div class="basic floatLWidth-ref"></div>
56
  <br>
57
58
  <div class="flexBaselineCheck">
59
  outside before<div class="basic innerContents">i</div>outside after
60
  </div>
61
</body>
62
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-001.html +81 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-001.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: size' on block elements should cause them to be sized as if they had no contents</title>
6
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
7
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
8
  <link rel="match" href="contain-size-block-001-ref.html">
9
  <style>
10
  .contain {
11
    contain: size;
12
    border: 1em solid green;
13
    background: red;
14
  }
15
  .innerContents {
16
    color: transparent;
17
    height: 100px;
18
    width: 100px;
19
  }
20
  .minHeight {
21
    min-height: 50px;
22
    background: lightblue;
23
  }
24
  .height {
25
    height: 50px;
26
    background: lightblue;
27
  }
28
  .maxWidth {
29
    max-width: 50px;
30
  }
31
  .width {
32
    width: 50px;
33
  }
34
  .floatLBasic {
35
    float: left;
36
  }
37
  .floatLWidth {
38
    float: left;
39
    width: 50px;
40
  }
41
  .flexBaselineCheck {
42
    display: flex;
43
    align-items: baseline;
44
  }
45
  </style>
46
</head>
47
<body>
48
  <!--CSS Test: A size-contained block element with no specified size should render at 0 height regardless of content.-->
49
  <div class="contain"><div class="innerContents">inner</div></div>
50
  <br>
51
52
  <!--CSS Test: A size-contained block element with specified min-height should render at given min-height regardless of content.-->
53
  <div class="contain minHeight"><div class="innerContents">inner</div></div>
54
  <br>
55
56
  <!--CSS Test: A size-contained block element with specified height should render at given height regardless of content.-->
57
  <div class="contain height"><div class="innerContents">inner</div></div>
58
  <br>
59
60
  <!--CSS Test: A size-contained block element with specified max-width should render at given max-width and zero height regardless of content.-->
61
  <div class="contain maxWidth"><div class="innerContents">inner</div></div>
62
  <br>
63
64
  <!--CSS Test: A size-contained block element with specified width should render at given width and zero height regardless of content.-->
65
  <div class="contain width"><div class="innerContents">inner</div></div>
66
  <br>
67
68
  <!--CSS Test: A size-contained floated block element with no specified size should render at 0px by 0px regardless of content.-->
69
  <div class="contain floatLBasic"><div class="innerContents">inner</div></div>
70
  <br>
71
72
  <!--CSS Test: A size-contained floated block element with specified width and no specified height should render at given width and 0 height regardless of content.-->
73
  <div class="contain floatLWidth"><div class="innerContents">inner</div></div>
74
  <br>
75
76
  <!--CSS Test: A size-contained block element should perform baseline alignment regularly.-->
77
  <div class="flexBaselineCheck">
78
  outside before<div class="contain"><div class="innerContents">inner</div></div>outside after
79
  </div>
80
</body>
81
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-002-expected.html +88 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-002-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
7
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
8
  <style>
9
  .basic {
10
    overflow: scroll;
11
    position: relative;
12
    border: 2px solid green;
13
  }
14
  .height-ref {
15
    height: 60px;
16
    background: lightblue;
17
  }
18
  .width-ref {
19
    width: 60px;
20
  }
21
  .floatLBasic-ref {
22
    float: left;
23
  }
24
  .floatLWidth-ref {
25
    float: left;
26
    width: 60px;
27
  }
28
  .flexBaselineCheck {
29
    display: flex;
30
    align-items: baseline;
31
  }
32
  .innerContents {
33
    color: transparent;
34
    height: 100px;
35
    width: 100px;
36
    position: absolute;
37
  }
38
  .zeroHeightContents {
39
    color: transparent;
40
    height: 0px;
41
    width: 0px;
42
  }
43
  </style>
44
</head>
45
<body>
46
  <!-- NOTE: In the reference-case scenarios here, we use the same DOM as in
47
       the testcase, and we simply use 'position: absolute' on the descendants
48
       wherever the testcase has 'contain: size' on the container.  This
49
       produces an accurate reference rendering, because out-of-flow content
50
       doesn't contribute to the container's sizing, but does create scrollable
51
       overflow (i.e. it produces scrollbars of the appropriate size for the
52
       amount of overflow). -->
53
  <div class="basic"><div class="innerContents">inner</div></div>
54
  <br>
55
56
  <div class="basic height-ref"><div class="innerContents">inner</div></div>
57
  <br>
58
59
  <div class="basic height-ref"><div class="innerContents">inner</div></div>
60
  <br>
61
62
  <div class="basic width-ref"><div class="innerContents">inner</div></div>
63
  <br>
64
65
  <div class="basic width-ref"><div class="innerContents">inner</div></div>
66
  <br>
67
68
  <div class="basic floatLBasic-ref"><div class="innerContents">inner</div></div>
69
  <br>
70
71
  <div class="basic floatLWidth-ref"><div class="innerContents">inner</div></div>
72
  <br>
73
74
  <div class="flexBaselineCheck">
75
    outside before
76
    <div class="basic">
77
      <!-- We use the out-of-flow "innerContents" to create the correct
78
           amount of scrollable overflow to match the testcase, and we
79
           use the smaller in-flow "zeroHeightContents" to provide a
80
           baseline that we can use to verify the testcase's baseline
81
           alignment position. -->
82
      <div class="innerContents">inner</div>
83
      <div class="zeroHeightContents">i</div>
84
    </div>
85
    outside after
86
  </div>
87
</body>
88
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-002.html +93 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-002.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: size' on 'overflow:scroll' block elements should cause them to be sized as if they had no contents</title>
6
  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
7
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
8
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
9
  <link rel="match" href="contain-size-block-002-ref.html">
10
  <style>
11
  .contain {
12
    contain: size;
13
    overflow: scroll;
14
    border: 2px solid green;
15
  }
16
  .innerContents {
17
    color: transparent;
18
    height: 100px;
19
    width: 100px;
20
  }
21
  .minHeight {
22
    min-height: 60px;
23
    background: lightblue;
24
  }
25
  .height {
26
    height: 60px;
27
    background: lightblue;
28
  }
29
  .maxWidth {
30
    max-width: 60px;
31
  }
32
  .width {
33
    width: 60px;
34
  }
35
  .floatLBasic {
36
    float: left;
37
  }
38
  .floatLWidth {
39
    float: left;
40
    width: 60px;
41
  }
42
  .flexBaselineCheck {
43
    display: flex;
44
    align-items: baseline;
45
  }
46
  </style>
47
</head>
48
<body>
49
  <!-- NOTE: In all cases below, the expectation is that the size-contained
50
       element should be sized as if it had no contents (while honoring
51
       whatever sizing properties are provided). -->
52
53
  <!--CSS Test: A size-contained scrollable block with no specified size.-->
54
  <div class="contain"><div class="innerContents">inner</div></div>
55
  <br>
56
57
  <!--CSS Test: A size-contained scrollable block with specified min-height -->
58
  <div class="contain minHeight"><div class="innerContents">inner</div></div>
59
  <br>
60
61
  <!--CSS Test: A size-contained scrollable block with specified height -->
62
  <div class="contain height"><div class="innerContents">inner</div></div>
63
  <br>
64
65
  <!--CSS Test: A size-contained scrollable block with specified max-width -->
66
  <div class="contain maxWidth"><div class="innerContents">inner</div></div>
67
  <br>
68
69
  <!--CSS Test: A size-contained scrollable block with specified width -->
70
  <div class="contain width"><div class="innerContents">inner</div></div>
71
  <br>
72
73
  <!--CSS Test: A size-contained floated scrollable block with auto size -->
74
  <div class="contain floatLBasic"><div class="innerContents">inner</div></div>
75
  <br>
76
77
  <!--CSS Test: A size-contained floated scrollable block with
78
      specified width -->
79
  <div class="contain floatLWidth"><div class="innerContents">inner</div></div>
80
  <br>
81
82
  <!--CSS Test: A size-contained scrollable block in a
83
      baseline-aligning flex container: should size as if it's empty, but
84
      still baseline-align using its contents' baseline -->
85
  <div class="flexBaselineCheck">
86
    outside before
87
    <div class="contain">
88
      <div class="innerContents">inner</div>
89
    </div>
90
    outside after
91
  </div>
92
</body>
93
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-003-expected.html +88 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-003-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
7
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
8
  <style>
9
  .basic {
10
    overflow: auto;
11
    position: relative;
12
    border: 2px solid green;
13
  }
14
  .height-ref {
15
    height: 60px;
16
    background: lightblue;
17
  }
18
  .width-ref {
19
    width: 60px;
20
  }
21
  .floatLBasic-ref {
22
    float: left;
23
  }
24
  .floatLWidth-ref {
25
    float: left;
26
    width: 60px;
27
  }
28
  .flexBaselineCheck {
29
    display: flex;
30
    align-items: baseline;
31
  }
32
  .innerContents {
33
    color: transparent;
34
    height: 100px;
35
    width: 100px;
36
    position: absolute;
37
  }
38
  .zeroHeightContents {
39
    color: transparent;
40
    height: 0px;
41
    width: 0px;
42
  }
43
  </style>
44
</head>
45
<body>
46
  <!-- NOTE: In the reference-case scenarios here, we use the same DOM as in
47
       the testcase, and we simply use 'position: absolute' on the descendants
48
       wherever the testcase has 'contain: size' on the container.  This
49
       produces an accurate reference rendering, because out-of-flow content
50
       doesn't contribute to the container's sizing, but does create scrollable
51
       overflow (i.e. it produces scrollbars of the appropriate size for the
52
       amount of overflow). -->
53
  <div class="basic"><div class="innerContents">inner</div></div>
54
  <br>
55
56
  <div class="basic height-ref"><div class="innerContents">inner</div></div>
57
  <br>
58
59
  <div class="basic height-ref"><div class="innerContents">inner</div></div>
60
  <br>
61
62
  <div class="basic width-ref"><div class="innerContents">inner</div></div>
63
  <br>
64
65
  <div class="basic width-ref"><div class="innerContents">inner</div></div>
66
  <br>
67
68
  <div class="basic floatLBasic-ref"><div class="innerContents">inner</div></div>
69
  <br>
70
71
  <div class="basic floatLWidth-ref"><div class="innerContents">inner</div></div>
72
  <br>
73
74
  <div class="flexBaselineCheck">
75
    outside before
76
    <div class="basic">
77
      <!-- We use the out-of-flow "innerContents" to create the correct
78
           amount of scrollable overflow to match the testcase, and we
79
           use the smaller in-flow "zeroHeightContents" to provide a
80
           baseline that we can use to verify the testcase's baseline
81
           alignment position. -->
82
      <div class="innerContents">inner</div>
83
      <div class="zeroHeightContents">i</div>
84
    </div>
85
    outside after
86
  </div>
87
</body>
88
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-003.html +93 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-003.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: size' on 'overflow:auto' block elements should cause them to be sized as if they had no contents</title>
6
  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
7
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
8
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
9
  <link rel="match" href="contain-size-block-003-ref.html">
10
  <style>
11
  .contain {
12
    contain: size;
13
    overflow: auto;
14
    border: 2px solid green;
15
  }
16
  .innerContents {
17
    color: transparent;
18
    height: 100px;
19
    width: 100px;
20
  }
21
  .minHeight {
22
    min-height: 60px;
23
    background: lightblue;
24
  }
25
  .height {
26
    height: 60px;
27
    background: lightblue;
28
  }
29
  .maxWidth {
30
    max-width: 60px;
31
  }
32
  .width {
33
    width: 60px;
34
  }
35
  .floatLBasic {
36
    float: left;
37
  }
38
  .floatLWidth {
39
    float: left;
40
    width: 60px;
41
  }
42
  .flexBaselineCheck {
43
    display: flex;
44
    align-items: baseline;
45
  }
46
  </style>
47
</head>
48
<body>
49
  <!-- NOTE: In all cases below, the expectation is that the size-contained
50
       element should be sized as if it had no contents (while honoring
51
       whatever sizing properties are provided). -->
52
53
  <!--CSS Test: A size-contained scrollable block with no specified size.-->
54
  <div class="contain"><div class="innerContents">inner</div></div>
55
  <br>
56
57
  <!--CSS Test: A size-contained scrollable block with specified min-height -->
58
  <div class="contain minHeight"><div class="innerContents">inner</div></div>
59
  <br>
60
61
  <!--CSS Test: A size-contained scrollable block with specified height -->
62
  <div class="contain height"><div class="innerContents">inner</div></div>
63
  <br>
64
65
  <!--CSS Test: A size-contained scrollable block with specified max-width -->
66
  <div class="contain maxWidth"><div class="innerContents">inner</div></div>
67
  <br>
68
69
  <!--CSS Test: A size-contained scrollable block with specified width -->
70
  <div class="contain width"><div class="innerContents">inner</div></div>
71
  <br>
72
73
  <!--CSS Test: A size-contained floated scrollable block with auto size -->
74
  <div class="contain floatLBasic"><div class="innerContents">inner</div></div>
75
  <br>
76
77
  <!--CSS Test: A size-contained floated scrollable block with
78
      specified width -->
79
  <div class="contain floatLWidth"><div class="innerContents">inner</div></div>
80
  <br>
81
82
  <!--CSS Test: A size-contained scrollable block in a
83
      baseline-aligning flex container: should size as if it's empty, but
84
      still baseline-align using its contents' baseline -->
85
  <div class="flexBaselineCheck">
86
    outside before
87
    <div class="contain">
88
      <div class="innerContents">inner</div>
89
    </div>
90
    outside after
91
  </div>
92
</body>
93
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-004-expected.html +87 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-004-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
7
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
8
  <style>
9
  .basic {
10
    overflow: hidden;
11
    position: relative;
12
    border: 2px solid green;
13
  }
14
  .height-ref {
15
    height: 60px;
16
    background: lightblue;
17
  }
18
  .width-ref {
19
    width: 60px;
20
  }
21
  .floatLBasic-ref {
22
    float: left;
23
  }
24
  .floatLWidth-ref {
25
    float: left;
26
    width: 60px;
27
  }
28
  .flexBaselineCheck {
29
    display: flex;
30
    align-items: baseline;
31
  }
32
  .innerContents {
33
    color: transparent;
34
    height: 100px;
35
    width: 100px;
36
    position: absolute;
37
  }
38
  .zeroHeightContents {
39
    color: transparent;
40
    height: 0px;
41
    width: 0px;
42
  }
43
  </style>
44
</head>
45
<body>
46
  <!-- NOTE: In the reference-case scenarios here, we use the same DOM as in
47
       the testcase, and we simply use 'position: absolute' on the descendants
48
       wherever the testcase has 'contain: size' on the container.  This
49
       produces an accurate reference rendering, because out-of-flow content
50
       doesn't contribute to the container's sizing, but does create scrollable
51
       overflow. -->
52
  <div class="basic"><div class="innerContents">inner</div></div>
53
  <br>
54
55
  <div class="basic height-ref"><div class="innerContents">inner</div></div>
56
  <br>
57
58
  <div class="basic height-ref"><div class="innerContents">inner</div></div>
59
  <br>
60
61
  <div class="basic width-ref"><div class="innerContents">inner</div></div>
62
  <br>
63
64
  <div class="basic width-ref"><div class="innerContents">inner</div></div>
65
  <br>
66
67
  <div class="basic floatLBasic-ref"><div class="innerContents">inner</div></div>
68
  <br>
69
70
  <div class="basic floatLWidth-ref"><div class="innerContents">inner</div></div>
71
  <br>
72
73
  <div class="flexBaselineCheck">
74
    outside before
75
    <div class="basic">
76
      <!-- We use the out-of-flow "innerContents" to create the correct
77
           amount of scrollable overflow to match the testcase, and we
78
           use the smaller in-flow "zeroHeightContents" to provide a
79
           baseline that we can use to verify the testcase's baseline
80
           alignment position. -->
81
      <div class="innerContents">inner</div>
82
      <div class="zeroHeightContents">i</div>
83
    </div>
84
    outside after
85
  </div>
86
</body>
87
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-004.html +93 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-004.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: size' on 'overflow:hidden' block elements should cause them to be sized as if they had no contents</title>
6
  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
7
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
8
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
9
  <link rel="match" href="contain-size-block-004-ref.html">
10
  <style>
11
  .contain {
12
    contain: size;
13
    overflow: hidden;
14
    border: 2px solid green;
15
  }
16
  .innerContents {
17
    color: transparent;
18
    height: 100px;
19
    width: 100px;
20
  }
21
  .minHeight {
22
    min-height: 60px;
23
    background: lightblue;
24
  }
25
  .height {
26
    height: 60px;
27
    background: lightblue;
28
  }
29
  .maxWidth {
30
    max-width: 60px;
31
  }
32
  .width {
33
    width: 60px;
34
  }
35
  .floatLBasic {
36
    float: left;
37
  }
38
  .floatLWidth {
39
    float: left;
40
    width: 60px;
41
  }
42
  .flexBaselineCheck {
43
    display: flex;
44
    align-items: baseline;
45
  }
46
  </style>
47
</head>
48
<body>
49
  <!-- NOTE: In all cases below, the expectation is that the size-contained
50
       element should be sized as if it had no contents (while honoring
51
       whatever sizing properties are provided). -->
52
53
  <!--CSS Test: A size-contained scrollable block with no specified size.-->
54
  <div class="contain"><div class="innerContents">inner</div></div>
55
  <br>
56
57
  <!--CSS Test: A size-contained scrollable block with specified min-height -->
58
  <div class="contain minHeight"><div class="innerContents">inner</div></div>
59
  <br>
60
61
  <!--CSS Test: A size-contained scrollable block with specified height -->
62
  <div class="contain height"><div class="innerContents">inner</div></div>
63
  <br>
64
65
  <!--CSS Test: A size-contained scrollable block with specified max-width -->
66
  <div class="contain maxWidth"><div class="innerContents">inner</div></div>
67
  <br>
68
69
  <!--CSS Test: A size-contained scrollable block with specified width -->
70
  <div class="contain width"><div class="innerContents">inner</div></div>
71
  <br>
72
73
  <!--CSS Test: A size-contained floated scrollable block with auto size -->
74
  <div class="contain floatLBasic"><div class="innerContents">inner</div></div>
75
  <br>
76
77
  <!--CSS Test: A size-contained floated scrollable block with
78
      specified width -->
79
  <div class="contain floatLWidth"><div class="innerContents">inner</div></div>
80
  <br>
81
82
  <!--CSS Test: A size-contained scrollable block in a
83
      baseline-aligning flex container: should size as if it's empty, but
84
      still baseline-align using its contents' baseline -->
85
  <div class="flexBaselineCheck">
86
    outside before
87
    <div class="contain">
88
      <div class="innerContents">inner</div>
89
    </div>
90
    outside after
91
  </div>
92
</body>
93
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-borders-expected.xht +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-borders-expected.xht_sec1
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
 <head>
4
  <title>CSS Reftest Reference</title>
5
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
6
  <style type="text/css"><![CDATA[
7
  div
8
  {
9
  background-color: green;
10
  height: 100px;
11
  width: 100px;
12
  }
13
  ]]></style>
14
 </head>
15
 <body>
16
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17
  <div></div>
18
 </body>
19
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-borders.html +9 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-borders.html_sec1
1
<!DOCTYPE html>
2
<title>contain:size on auto-height block width vertical borders</title>
3
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
4
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
5
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
6
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
7
<div style="contain:size; width:100px; border:50px solid green; border-left:none; border-right:none; background:red;">
8
  <div style="height:200px;"></div>
9
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-breaks-001-expected.html +31 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-breaks-001-expected.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test reference</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
  <meta name=flags content="ahem">
7
8
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
9
<style>
10
article {
11
  height: 2.5em;
12
  column-gap: 0;
13
  columns: 3 1em;
14
  width: 3em;
15
  column-fill: auto;
16
17
  font-size: 40px;
18
  font-family: ahem;
19
  line-height: 1;
20
}
21
div {
22
  background: orange;
23
  padding-top: 5em;
24
}
25
</style>
26
27
<p>This test passes if there is an orange rectangle below. If the shape is not a rectangle, the test fails.
28
29
<article>
30
<div></div>
31
</article>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-breaks-001.html +65 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-breaks-001.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test: size containment and fragmentation</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
  <meta name=flags content="ahem">
7
  <meta name=assert content="size containment makes element monolithic">
8
  <link rel="match" href="reference/contain-size-breaks-001-ref.html">
9
  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-size">
10
  <link rel=help href="https://drafts.csswg.org/css-break-3/#monolithic">
11
12
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
13
<style>
14
article {
15
  height: 2.5em;
16
  column-gap: 0;
17
  columns: 3 1em;
18
  width: 3em;
19
20
  font-size: 40px;
21
  font-family: ahem;
22
  line-height: 1;
23
}
24
div {
25
  contain: size;
26
  height: 5em;
27
  color: orange;
28
}
29
</style>
30
31
<p>This test passes if there is an orange rectangle below. If the shape is not a rectangle, the test fails.
32
33
<article>
34
<div>A B C D E</div>
35
</article>
36
37
<!--
38
As the element is monolithic it should either:
39
* Overflow vertically, appearing as a single 1x5 em rectangle:
40
    -----
41
    | A |
42
    | B |
43
    | C |
44
    | D |
45
    | E |
46
    -----
47
48
* Be sliced, with one slice in each column, appearing as a single 2x2.5 em rectangle:
49
    ----------
50
    | A |' ◟ '
51
    | B || D |
52
    ' ◜ '| E |
53
    ----------
54
55
Either way, it will always appear as a single rectangle.
56
57
If the element is not monolithic, it will fit 2 letters (A & B) in the first column,
58
2 (C & D) in the second column, and the fifth (E) will be overflowing the div,
59
either into the third column, or into the bottom of the second one.
60
Either way, this will not look like a rectangle.
61
62
Note: We use some UTF-8 characters to simulate the sliced C on the ASCII diagrams:
63
* U+25DC: ◜ Upper left quadrant circular arc
64
* U+25DF: ◟ Lower left quadrant circular arc
65
-->
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-button-001-expected.html +17 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-button-001-expected.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Reference file</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<style>
6
button {
7
  border: 5px solid green;
8
  padding: 0;
9
  color: transparent;
10
  width: 0;
11
  height: 0;
12
  font-size: 2em;
13
}
14
</style>
15
16
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the top, and then the word "after".</p>
17
before<button>b</button>after
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-button-001.html +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-button-001.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Size containment on button</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
6
<link rel="match" href="reference/contain-size-button-001-ref.html">
7
<meta name=assert content="Size containment does apply to buttons, thus their size is the same than if they don't have contents.">
8
<style>
9
button {
10
  border: 5px solid green;
11
  padding: 0;
12
  contain: size;
13
  color: transparent;
14
  font-size: 2em;
15
}
16
</style>
17
18
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the top, and then the word "after".</p>
19
before<button>flex</button>after
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-button-002-expected.html +86 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-button-002-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
7
  <style>
8
  button {
9
    border: 1em solid green;
10
    /* In case the testcase's 'inner' text is taller than the button, don't let
11
       it influence its line-box's size.  This lets us more-easily compare
12
       sizing between empty buttons vs. contained nonempty buttons. */
13
    vertical-align: top;
14
  }
15
  .vaBaseline {
16
    vertical-align: baseline;
17
  }
18
  .width-ref {
19
    width: 50px;
20
  }
21
  .height-ref {
22
    height: 50px;
23
    background: lightblue;
24
  }
25
  .floatLBasic-ref {
26
    float: left;
27
  }
28
  .floatLWidth-ref {
29
    float: left;
30
    width: 50px;
31
  }
32
  br { clear: both }
33
  .iFlexBasic-ref {
34
    display: inline-flex;
35
  }
36
  .iFlexWidth-ref {
37
    display: inline-flex;
38
    width: 50px;
39
  }
40
  .innerContents {
41
    color: transparent;
42
    height: 0;
43
    width: 0;
44
  }
45
  .orthog-ref {
46
    writing-mode: vertical-lr;
47
  }
48
  </style>
49
</head>
50
<body>
51
  <button></button>
52
  <br>
53
54
  <button class="floatLBasic-ref"></button>
55
  <br>
56
57
  <button class="floatLWidth-ref"></button>
58
  <br>
59
60
  <button class="iFlexBasic-ref"></button>
61
  <br>
62
63
  <button class="iFlexWidth-ref"></button>
64
  <br>
65
66
  outside before<button class="vaBaseline"><div class="innerContents">inner</div></button>outside after
67
  <br>
68
69
  <button class="width-ref"></button>
70
  <br>
71
72
  <button class="width-ref"></button>
73
  <br>
74
75
  <button class="height-ref"></button>
76
  <br>
77
78
  <button class="height-ref"></button>
79
  <br>
80
81
  s<button class="orthog-ref vaBaseline"><div class="innerContents">inner</div></button>endtext
82
  <br>
83
84
  <button class="height-ref width-ref">inside</button>
85
</body>
86
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-button-002.html +108 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-button-002.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: size' on buttons should cause them to be sized as if they had no contents.</title>
6
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
7
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
8
  <link rel="match" href="contain-size-button-002-ref.html">
9
  <style>
10
  button {
11
    contain: size;
12
    border: 1em solid green;
13
    /* In case the testcase's 'inner' text is taller than the button, don't let
14
       it influence its line-box's size.  This lets us more-easily compare
15
       sizing between empty buttons vs. contained nonempty buttons. */
16
    vertical-align: top;
17
  }
18
  .vaBaseline {
19
    vertical-align: baseline;
20
  }
21
  .innerContents {
22
    color: transparent;
23
    height: 100px;
24
    width: 100px;
25
  }
26
  .minWidth {
27
    min-width: 50px;
28
  }
29
  .width {
30
    width: 50px;
31
  }
32
  .minHeight {
33
    min-height: 50px;
34
    background: lightblue;
35
  }
36
  .height {
37
    height: 50px;
38
    background: lightblue;
39
  }
40
  .floatLBasic {
41
    float: left;
42
  }
43
  .floatLWidth {
44
    float: left;
45
    width: 50px;
46
  }
47
  br { clear: both }
48
  .iFlexBasic {
49
    display: inline-flex;
50
  }
51
  .iFlexWidth {
52
    display: inline-flex;
53
    width: 50px;
54
  }
55
  .orthog {
56
    writing-mode: vertical-lr;
57
  }
58
  </style>
59
</head>
60
<body>
61
  <!--CSS Test: A size-contained button with no specified size should render at 0 height regardless of content.-->
62
  <button><div class="innerContents">inner</div></button>
63
  <br>
64
65
  <!--CSS Test: A size-contained floated button with no specified size should render at 0px by 0px regardless of content.-->
66
  <button class="floatLBasic"><div class="innerContents">inner</div></button>
67
  <br>
68
69
  <!--CSS Test: A size-contained floated button with specified width and no specified height should render at given width and 0 height regardless of content.-->
70
  <button class="floatLWidth"><div class="innerContents">inner</div></button>
71
  <br>
72
73
  <!--CSS Test: A size-contained inline-flex button with no specified size should render at 0px by 0px regardless of content.-->
74
  <button class="iFlexBasic"><div class="innerContents">inner</div></button>
75
  <br>
76
77
  <!--CSS Test: A size-contained inline-flex button with specified width and no specified height should render at given width and 0 height regardless of content.-->
78
  <button class="iFlexWidth"><div class="innerContents">inner</div></button>
79
  <br>
80
81
  <!--CSS Test: A size-contained button should perform baseline alignment regularly.-->
82
  outside before<button class="vaBaseline"><div class="innerContents">inner</div></button>outside after
83
  <br>
84
85
  <!--CSS Test: A size-contained button with specified min-width should render at given min-width and zero height regardless of content.-->
86
  <button class="minWidth"><div class="innerContents">inner</div></button>
87
  <br>
88
89
  <!--CSS Test: A size-contained button with specified width should render at given width and zero height regardless of content.-->
90
  <button class="width"><div class="innerContents">inner</div></button>
91
  <br>
92
93
  <!--CSS Test: A size-contained button with specified min-height should render at given min-height regardless of content.-->
94
  <button class="minHeight"><div class="innerContents">inner</div></button>
95
  <br>
96
97
  <!--CSS Test: A size-contained button with specified height should render at given height regardless of content.-->
98
  <button class="height"><div class="innerContents">inner</div></button>
99
  <br>
100
101
  <!--CSS Test: A size-contained button with vertical text should perform baseline alignment regularly.-->
102
  s<button class="orthog vaBaseline"><div class="innerContents">inner</div></button>endtext
103
  <br>
104
105
  <!--CSS Test: A size-contained button with inner text should layout the text in the same manner as a container of the same type with identical contents.-->
106
  <button class="height width">inside</button>
107
</body>
108
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-001-expected.html +15 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-001-expected.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Reference file</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<style>
6
fieldset {
7
  display: inline-block;
8
  color: transparent;
9
  border: none;
10
  padding: 0;
11
}
12
</style>
13
14
<p>This test passes if it has the same output as the reference. You see the word "before", a small space, and then the word "after".</p>
15
before<fieldset></fieldset>after
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-001.html +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-001.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Size containment on fieldset</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
6
<link rel="match" href="reference/contain-size-fieldset-001-ref.html">
7
<meta name=assert content="Size containment does apply to fieldsets, thus their size is the same than if they don't have contents.">
8
<style>
9
fieldset {
10
  contain: size;
11
  display: inline-block;
12
  color: transparent;
13
  border: none;
14
  padding: 0;
15
}
16
</style>
17
18
<p>This test passes if it has the same output as the reference. You see the word "before", a small space, and then the word "after".</p>
19
before<fieldset><legend>legend</legend></fieldset>after
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-002-expected.html +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-002-expected.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Reference file</title>
4
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
5
<style>
6
#border {
7
  border: 1px solid black;
8
  width: min-content;
9
}
10
fieldset {
11
  visibility: hidden;
12
  height: 1px;
13
}
14
</style>
15
16
<p>This test passes if it has the same output as the reference. You should see a black border box below.</p>
17
<div id="border">
18
  <fieldset></fieldset>
19
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-002.html +26 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-002.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Size containment on fieldset</title>
4
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
6
<link rel="match" href="reference/contain-size-fieldset-002-ref.html">
7
<meta name=assert content="Size containment does apply to fieldsets, thus their size is the same than if they don't have contents.">
8
<style>
9
#border {
10
  border: 1px solid black;
11
  width: min-content;
12
}
13
fieldset {
14
  contain: size;
15
  visibility: hidden;
16
  height: 1px;
17
}
18
</style>
19
20
<p>This test passes if it has the same output as the reference. You should see a black border box below.</p>
21
<div id="border">
22
  <fieldset>
23
    <legend>legend</legend>
24
    Fieldset contents are here.
25
  </fieldset>
26
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-003-expected.html +43 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-003-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
7
  <style>
8
  .basic {
9
    visibility: hidden;
10
    border: none;
11
  }
12
  .container {
13
    border: 10px solid green;
14
    display: inline-block;
15
    vertical-align: top;
16
  }
17
  .height {
18
    height: 30px;
19
  }
20
  .width {
21
    width: 30px;
22
  }
23
  </style>
24
</head>
25
<body>
26
  <div class="container"><fieldset class="basic"></fieldset></div>
27
  <br>
28
29
  <div class="container"><fieldset class="basic height"></fieldset></div>
30
  <br>
31
32
  <div class="container"><fieldset class="basic height"></fieldset></div>
33
  <br>
34
35
  <div class="container"><fieldset class="basic width"></fieldset></div>
36
  <br>
37
38
  <div class="container"><fieldset class="basic width"></fieldset></div>
39
  <br>
40
41
  <fieldset class="height"><legend>legend</legend></fieldset>
42
</body>
43
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-003.html +99 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-003.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: size' on fieldset elements should cause them to be sized as if they had no contents.</title>
6
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
7
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
8
  <link rel="match" href="contain-size-fieldset-003-ref.html">
9
  <style>
10
  .contain {
11
    contain: size;
12
    visibility: hidden;
13
    border: none;
14
    color: transparent;
15
  }
16
  .container {
17
    border: 10px solid green;
18
    display: inline-block;
19
    vertical-align: top;
20
  }
21
  .innerContents {
22
    height: 50px;
23
    width: 50px;
24
  }
25
  .minHeight {
26
    min-height: 30px;
27
  }
28
  .height {
29
    height: 30px;
30
  }
31
  .minWidth {
32
    min-width: 30px;
33
  }
34
  .width {
35
    width: 30px;
36
  }
37
  </style>
38
</head>
39
<body>
40
  <!--Note: The following .container class is used to help test if size-contained
41
  fieldsets and non-contained fieldsets have the same size. Normally, we'd test
42
  that a fieldset with children and size-containment is drawn identically to a
43
  fieldset without containment or children. However, when we have a legend as
44
  a child, border placement and padding of the fieldset are changed.
45
  To check the dimensions between the ref-case and test-case without
46
  failing because of the border/padding differences, we make the fieldset
47
  {visibility:hidden; border:none;} and add a .container wrapper div.-->
48
49
  <!--CSS Test: A size-contained fieldset element with no specified size should size itself as if it had no contents.-->
50
  <div class="container">
51
  <fieldset class="contain">
52
    <legend>legend</legend>
53
    <div class="innerContents">inner</div>
54
  </fieldset>
55
  </div>
56
  <br>
57
58
  <!--CSS Test: A size-contained fieldset element with specified min-height should size itself as if it had no contents.-->
59
  <div class="container">
60
  <fieldset class="contain minHeight">
61
    <legend>legend</legend>
62
    <div class="innerContents">inner</div>
63
  </fieldset>
64
  </div>
65
  <br>
66
67
  <!--CSS Test: A size-contained fieldset element with specified height should size itself as if it had no contents.-->
68
  <div class="container">
69
  <fieldset class="contain height">
70
    <legend>legend</legend>
71
    <div class="innerContents">inner</div>
72
  </fieldset>
73
  </div>
74
  <br>
75
76
  <!--CSS Test: A size-contained fieldset element with specified min-width should size itself as if it had no contents.-->
77
  <div class="container">
78
  <fieldset class="contain minWidth">
79
    <legend>legend</legend>
80
    <div class="innerContents">inner</div>
81
  </fieldset>
82
  </div>
83
  <br>
84
85
  <!--CSS Test: A size-contained fieldset element with specified width should size itself as if it had no contents.-->
86
  <div class="container">
87
  <fieldset class="contain width">
88
    <legend>legend</legend>
89
    <div class="innerContents">inner</div>
90
  </fieldset>
91
  </div>
92
  <br>
93
94
  <!--CSS Test: A size contained fieldset element with a legend should draw its legend and border in the same way as a non-contained fieldset element-->
95
  <fieldset class="height" style="contain:size;">
96
    <legend>legend</legend>
97
  </fieldset>
98
</body>
99
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-004-expected.html +42 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-004-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
7
  <style>
8
  .container {
9
    border: 10px solid green;
10
    display: inline-block;
11
  }
12
  .floatLBasic-ref {
13
    float: left;
14
  }
15
  .floatLWidth-ref {
16
    float: left;
17
    width: 30px;
18
  }
19
  .flexBaselineCheck {
20
    display: flex;
21
    align-items: baseline;
22
  }
23
  fieldset {
24
    border: none;
25
    color: transparent;
26
  }
27
  legend, .innerContents {
28
    width: 0;
29
    height: 0;
30
    padding: 0;
31
  }
32
  </style>
33
</head>
34
<body>
35
  <div class="flexBaselineCheck">
36
  outside before<fieldset>
37
    <legend>l</legend>
38
    <div class="innerContents">i</div>
39
  </fieldset>outside after
40
  </div>
41
</body>
42
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-004.html +35 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-004.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: size' on fieldset elements shouldn't prevent them from being baseline-aligned regularly.</title>
6
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
7
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
8
  <link rel="match" href="contain-size-fieldset-004-ref.html">
9
  <style>
10
  .contain {
11
    contain: size;
12
    border: none;
13
    color: transparent;
14
    visibility: hidden;
15
  }
16
  .innerContents {
17
    height: 50px;
18
    width: 50px;
19
  }
20
  .flexBaselineCheck {
21
    display: flex;
22
    align-items: baseline;
23
  }
24
  </style>
25
</head>
26
<body>
27
  <!--CSS Test: A size-contained fieldset element should perform baseline alignment regularly.-->
28
  <div class="flexBaselineCheck">
29
  outside before<fieldset class="contain">
30
    <legend>legend</legend>
31
    <div class="innerContents">inner</div>
32
  </fieldset>outside after
33
  </div>
34
</body>
35
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-flex-001-expected.html +49 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-flex-001-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
7
  <style>
8
  .basic {
9
    display: flex;
10
    border: 1em solid green;
11
  }
12
  .height-ref {
13
    height: 40px;
14
    background: lightblue;
15
  }
16
  .width-ref {
17
    width: 40px;
18
  }
19
  .floatLBasic-ref {
20
    float: left;
21
  }
22
  .floatLWidth-ref {
23
    float: left;
24
    width: 40px;
25
  }
26
  </style>
27
</head>
28
<body>
29
  <div class="basic"></div>
30
  <br>
31
32
  <div class="basic height-ref"></div>
33
  <br>
34
35
  <div class="basic height-ref"></div>
36
  <br>
37
38
  <div class="basic width-ref"></div>
39
  <br>
40
41
  <div class="basic width-ref"></div>
42
  <br>
43
44
  <div class="basic floatLBasic-ref"></div>
45
  <br>
46
47
  <div class="basic floatLWidth-ref"></div>
48
</body>
49
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-flex-001.html +72 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-flex-001.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: size' on flex elements should cause them to be sized as if they had no contents.</title>
6
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
7
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
8
  <link rel="match" href="contain-size-flex-001-ref.html">
9
  <style>
10
  .contain {
11
    display: flex;
12
    contain:size;
13
    border: 1em solid green;
14
    background: red;
15
  }
16
  .innerContents {
17
    color: transparent;
18
    height: 100px;
19
    width: 100px;
20
  }
21
  .minHeight {
22
    min-height: 40px;
23
    background: lightblue;
24
  }
25
  .height {
26
    height: 40px;
27
    background: lightblue;
28
  }
29
  .maxWidth {
30
    max-width: 40px;
31
  }
32
  .width {
33
    width: 40px;
34
  }
35
  .floatLBasic {
36
    float: left;
37
  }
38
  .floatLWidth {
39
    float: left;
40
    width: 40px;
41
  }
42
  </style>
43
</head>
44
<body>
45
  <!--CSS Test: A size-contained flex element with no specified size should render at 0 height regardless of content.-->
46
  <div class="contain"><div class="innerContents">inner</div></div>
47
  <br>
48
49
  <!--CSS Test: A size-contained flex element with specified min-height should render at given min-height regardless of content.-->
50
  <div class="contain minHeight"><div class="innerContents">inner</div></div>
51
  <br>
52
53
  <!--CSS Test: A size-contained flex element with specified height should render at given height regardless of content.-->
54
  <div class="contain height"><div class="innerContents">inner</div></div>
55
  <br>
56
57
  <!--CSS Test: A size-contained flex element with specified max-width should render at given max-width and zero height regardless of content.-->
58
  <div class="contain maxWidth"><div class="innerContents">inner</div></div>
59
  <br>
60
61
  <!--CSS Test: A size-contained flex element with specified width should render at given width and zero height regardless of content.-->
62
  <div class="contain width"><div class="innerContents">inner</div></div>
63
  <br>
64
65
  <!--CSS Test: A size-contained floated flex element with no specified size should render at 0px by 0px regardless of content.-->
66
  <div class="contain floatLBasic"><div class="innerContents">inner</div></div>
67
  <br>
68
69
  <!--CSS Test: A size-contained floated flex element with specified width and no specified height should render at given width and 0 height regardless of content.-->
70
  <div class="contain floatLWidth"><div class="innerContents">inner</div></div>
71
</body>
72
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-flexbox-001-expected.html +17 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-flexbox-001-expected.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Reference file</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<style>
6
div {
7
  display: inline-flex;
8
  border: 5px solid green;
9
  color: transparent;
10
  width: 0;
11
  height: 0;
12
  font-size: 2em;
13
}
14
</style>
15
16
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the top, and then the word "after".</p>
17
before<div>f</div>after
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-flexbox-001.html +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-flexbox-001.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Size containment on flexbox container</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
6
<link rel="match" href="reference/contain-size-flexbox-001-ref.html">
7
<meta name=assert content="Size containment does apply to flexbox containers, thus their size is the same than if they don't have contents.">
8
<style>
9
div {
10
  display: inline-flex;
11
  border: 5px solid green;
12
  contain: size;
13
  color: transparent;
14
  font-size: 2em;
15
}
16
</style>
17
18
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the top, and then the word "after".</p>
19
before<div>flex</div>after
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-flexbox-002-expected.html +23 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-flexbox-002-expected.html_sec1
1
<!DOCTYPE html>
2
<title>Tests that scrollbars are handled correctly in a flex item with contains:size</title>
3
<link rel="author" title="Google LLC" href="https://www.google.com">
4
5
<style>
6
div > div {
7
  vertical-align: top;
8
  display: inline-block;
9
  contain: size;
10
  overflow: scroll;
11
  border: 1px solid;
12
}
13
</style>
14
15
<p>Test passes if the two lines below look the same.</p>
16
17
<div style="line-height: 1.0;">
18
  <div></div>
19
</div>
20
21
<div style="line-height: 1.0;">
22
  <div></div>
23
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-flexbox-002.html +25 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-flexbox-002.html_sec1
1
<!DOCTYPE html>
2
<title>Tests that scrollbars are handled correctly in a flex item with contains:size</title>
3
<link rel="author" title="Google LLC" href="https://www.google.com">
4
<link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-size">
5
<link rel="match" href="reference/contain-size-flexbox-002-ref.html">
6
7
<style>
8
div > div {
9
  vertical-align: top;
10
  display: inline-block;
11
  contain: size;
12
  overflow: scroll;
13
  border: 1px solid;
14
}
15
</style>
16
17
<p>Test passes if the two lines below look the same.</p>
18
19
<div style="display: flex; line-height: 1.0;">
20
  <div></div>
21
</div>
22
23
<div style="line-height: 1.0;">
24
  <div></div>
25
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-001-expected.html +17 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-001-expected.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Reference file</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<style>
6
div {
7
  display: inline-grid;
8
  border: 5px solid green;
9
  color: transparent;
10
  width: 0;
11
  height: 0;
12
  font-size: 2em;
13
}
14
</style>
15
16
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the top, and then the word "after".</p>
17
before<div>g</div>after
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-001.html +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-001.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Size containment on grid container</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
6
<link rel="match" href="reference/contain-size-grid-001-ref.html">
7
<meta name=assert content="Size containment does apply to grid containers, thus their size is the same than if they don't have contents.">
8
<style>
9
div {
10
  display: inline-grid;
11
  border: 5px solid green;
12
  contain: size;
13
  color: transparent;
14
  font-size: 2em;
15
}
16
</style>
17
18
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the top, and then the word "after".</p>
19
before<div>grid</div>after
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-002-expected.xht +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-002-expected.xht_sec1
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
 <head>
4
  <title>CSS Reftest Reference</title>
5
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
6
  <style type="text/css"><![CDATA[
7
  div
8
  {
9
  background-color: green;
10
  height: 100px;
11
  width: 100px;
12
  }
13
  ]]></style>
14
 </head>
15
 <body>
16
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17
  <div></div>
18
 </body>
19
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-002.html +44 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-002.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Size containment on grid container with explicit non-intrinsically sized tracks (and gaps)</title>
4
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
6
<meta name=assert content="grid-gap, grid-template-columns, and grid-template-rows do affect the size of the grid, even with size containment">
7
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
8
9
<style>
10
body {
11
  overflow: hidden;
12
}
13
div {
14
  position: absolute;
15
}
16
#red {
17
  background: red;
18
  width: 100px;
19
  height: 100px;
20
}
21
#test {
22
  background: green;
23
24
  contain: size;
25
  display: grid;
26
  grid-gap: 20px;
27
  grid-template-columns: auto 80px; /* 0 + 20 + 80 = 100 */
28
  grid-template-rows: 40px 40px; /* 40 + 20 + 40 = 100 */
29
  font-size: 800px;
30
}
31
</style>
32
33
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
34
<div id=red></div>
35
<div id=test>&nbsp;</div>
36
37
<!--
38
The &nbsp;, auto sized column, and 800px font size
39
are to make the test fail in browsers
40
that do not implement contain:size at all,
41
by making the box non square.
42
-->
43
44
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-003-expected.txt +57 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-003-expected.txt_sec1
1
2
PASS .grid 1
3
PASS .grid 2
4
PASS .grid 3
5
PASS .grid 4
6
PASS .grid 5
7
PASS .grid 6
8
PASS .grid 7
9
PASS .grid 8
10
PASS .grid 9
11
PASS .grid 10
12
PASS .grid 11
13
PASS .grid 12
14
PASS .grid 13
15
PASS .grid 14
16
PASS .grid 15
17
PASS .grid 16
18
PASS .grid 17
19
PASS .grid 18
20
PASS .grid 19
21
PASS .grid 20
22
PASS .grid 21
23
PASS .grid 22
24
PASS .grid 23
25
PASS .grid 24
26
PASS .grid 25
27
PASS .grid 26
28
PASS .grid 27
29
PASS .grid 28
30
PASS .grid 29
31
PASS .grid 30
32
PASS .grid 31
33
PASS .grid 32
34
PASS .grid 33
35
PASS .grid 34
36
PASS .grid 35
37
PASS .grid 36
38
PASS .grid 37
39
FAIL .grid 38 assert_equals:
40
<div class="grid" style="grid: repeat(auto-fit, 75px) / repeat(auto-fit, 100px);" data-expected-width="0" data-expected-height="0">
41
    <div></div>
42
  </div>
43
width expected 0 but got 100
44
FAIL .grid 39 assert_equals:
45
<div class="grid" style="grid: auto 50px / 100px auto;" data-expected-width="100" data-expected-height="50">
46
  <div data-expected-width="100" data-expected-height="10" data-offset-x="0" data-offset-y="0">X</div>
47
  <div data-expected-width="40" data-expected-height="10" data-offset-x="100" data-offset-y="0">XX</div>
48
  <div data-expected-width="100" data-expected-height="50" data-offset-x="0" data-offset-y="10">XXX</div>
49
  <div data-expected-width="40" data-expected-height="50" data-offset-x="100" data-offset-y="10">XXXX</div>
50
</div>
51
width expected 100 but got 140
52
53
X
54
XX
55
XXX
56
XXXX
57
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-003.html +201 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-003.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Size containment on grid containers</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
6
<meta name=assert content="Size containment does apply to grid containers, thus their size is the same than if they don't have contents but taking into account the track sizes.">
7
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
8
<style>
9
.grid {
10
  display: inline-grid;
11
  contain: size;
12
  position: relative;
13
  font: 10px/1 Ahem;
14
}
15
.wrapper {
16
  width: 300px;
17
  height: 150px;
18
}
19
</style>
20
<script src="/resources/testharness.js"></script>
21
<script src="/resources/testharnessreport.js"></script>
22
<script src="/resources/check-layout-th.js"></script>
23
<body onload="checkLayout('.grid')">
24
25
<div id="log"></div>
26
27
<div class="grid" style="grid: 50px / 100px;"
28
  data-expected-width="100" data-expected-height="50">
29
</div>
30
31
<div class="grid" style="grid: 50px / 100px; width: 200px; height: 100px;"
32
  data-expected-width="200" data-expected-height="100">
33
</div>
34
35
<div class="grid" style="grid: 50px / 100px; width: min-content; height: min-content;"
36
  data-expected-width="100" data-expected-height="50">
37
</div>
38
39
<div class="grid" style="grid: 50px / 100px; overflow: scroll;"
40
  data-expected-width="115" data-expected-height="65">
41
</div>
42
43
<div class="grid" style="grid: 50px / 100px; width: 200px; height: 100px; overflow: scroll;"
44
  data-expected-width="200" data-expected-height="100">
45
</div>
46
47
<div class="grid" style="grid: 50px / 100px; width: min-content; height: min-content; overflow: scroll;"
48
  data-expected-width="115" data-expected-height="65">
49
</div>
50
51
<div class="grid" style="grid: 50px / 100px; margin: 2px 4px;"
52
  data-expected-width="100" data-expected-height="50">
53
</div>
54
55
<div class="grid" style="grid: 50px / 100px; margin: 2px 4px; border-style: solid; border-width: 5px 10px;"
56
  data-expected-width="120" data-expected-height="60">
57
</div>
58
59
<div class="grid" style="grid: 50px / 100px; margin: 2px 4px; border-style: solid; border-width: 5px 10px; padding: 3px 6px;"
60
  data-expected-width="132" data-expected-height="66">
61
</div>
62
63
<div class="grid" style="grid: 60% / 50%;"
64
  data-expected-width="0" data-expected-height="0">
65
</div>
66
67
<div class="grid" style="grid: auto / auto;"
68
  data-expected-width="0" data-expected-height="0">
69
</div>
70
71
<div class="grid" style="grid: 1fr / 2fr;"
72
  data-expected-width="0" data-expected-height="0">
73
</div>
74
75
<div class="grid" style="grid: calc(50px - 10%) / calc(100px + 20%);"
76
  data-expected-width="0" data-expected-height="0">
77
</div>
78
79
<div class="grid" style="grid: fit-content(50px) / fit-content(100px);"
80
  data-expected-width="0" data-expected-height="0">
81
</div>
82
83
<div class="grid" style="grid: minmax(40px, 60px) / minmax(50px, 100px);"
84
  data-expected-width="100" data-expected-height="60">
85
</div>
86
87
<div class="grid" style="grid: minmax(40px, 60px) / minmax(50px, 100px); width: min-content; height: min-content;"
88
  data-expected-width="50" data-expected-height="60">
89
</div>
90
91
<div class="grid" style="grid: auto 50px 20% 1fr / 100px auto 10% 2fr;"
92
  data-expected-width="100" data-expected-height="50">
93
</div>
94
95
<div class="grid" style="grid: repeat(3, 20px) / repeat(4, 25px);"
96
  data-expected-width="100" data-expected-height="60">
97
</div>
98
99
<div class="grid" style="grid: repeat(3, 20px 10px) / repeat(2, 25px auto 25px);"
100
  data-expected-width="100" data-expected-height="90">
101
</div>
102
103
<div class="grid" style="grid: repeat(auto-fill, 50px) / repeat(auto-fill, 100px);"
104
  data-expected-width="100" data-expected-height="50">
105
</div>
106
107
<div class="grid" style="grid: repeat(auto-fill, 25px 25px) / repeat(auto-fill, 50px 50px);"
108
  data-expected-width="100" data-expected-height="50">
109
</div>
110
111
<div class="grid" style="grid: repeat(auto-fill, 25px 20% 25px) / repeat(auto-fill, 50px 10% 50px);"
112
  data-expected-width="100" data-expected-height="50">
113
</div>
114
115
<div class="grid" style="grid: repeat(auto-fit, 50px) / repeat(auto-fit, 100px);"
116
  data-expected-width="0" data-expected-height="0">
117
</div>
118
119
<div class="grid" style="grid: repeat(auto-fit, 25px 20% 25px) / repeat(auto-fit, 50px 10% 50px);"
120
  data-expected-width="0" data-expected-height="0">
121
</div>
122
123
<div class="grid" style="grid: 10px repeat(auto-fill, 20px) 10px / 25px repeat(auto-fill, 50px) 25px;"
124
  data-expected-width="100" data-expected-height="40">
125
</div>
126
127
<div class="grid" style="grid: 50px fit-content(20px) / 100px fit-content(50px);"
128
  data-expected-width="100" data-expected-height="50">
129
</div>
130
131
<div class="grid" style="grid: 50px / 100px; grid-gap: 10px 20px;"
132
  data-expected-width="100" data-expected-height="50">
133
</div>
134
135
<div class="grid" style="grid: 25px 25px / 50px 50px; grid-gap: 10px 20px;"
136
  data-expected-width="120" data-expected-height="60">
137
</div>
138
139
<div class="grid" style="grid: 10px repeat(2, 10px) / 20px repeat(4, 20px); grid-gap: 5px 10px;"
140
  data-expected-width="140" data-expected-height="40">
141
</div>
142
143
<div class="grid" style="grid: repeat(auto-fill, 10px 20% 10px) / repeat(auto-fill, 20px 10% 20px); grid-gap: 5px 10px;"
144
  data-expected-width="60" data-expected-height="30">
145
</div>
146
147
<div class="grid" style="grid: 50px repeat(auto-fill, 10px 10px) / 100px repeat(auto-fill, 20px 20px); grid-gap: 5px 10px;"
148
  data-expected-width="160" data-expected-height="80">
149
</div>
150
151
<div class="grid" style="grid: repeat(auto-fill, 10px 10px) 50px / repeat(auto-fill, 20px 20px) 100px; grid-gap: 5px 10px;"
152
  data-expected-width="160" data-expected-height="80">
153
</div>
154
155
<div class="grid" style="grid: 25px repeat(auto-fill, 10px 10px) 25px / 50px repeat(auto-fill, 20px 20px) 50px; grid-gap: 5px 10px;"
156
  data-expected-width="170" data-expected-height="85">
157
</div>
158
159
<div class="grid" style="grid: 25px repeat(auto-fit, 10px 10px) 25px / 50px repeat(auto-fit, 20px 20px) 50px; grid-gap: 5px 10px;"
160
  data-expected-width="110" data-expected-height="55">
161
</div>
162
163
<div class="wrapper">
164
  <div class="grid" style="grid: repeat(auto-fill, 75px) / repeat(auto-fill, 100px);"
165
    data-expected-width="100" data-expected-height="75">
166
  </div>
167
</div>
168
169
<div class="wrapper">
170
  <div class="grid" style="grid: repeat(auto-fit, 75px) / repeat(auto-fit, 100px);"
171
    data-expected-width="0" data-expected-height="0">
172
  </div>
173
</div>
174
175
<div class="wrapper">
176
  <div class="grid" style="grid: repeat(auto-fill, 75px) / repeat(auto-fill, 100px);"
177
    data-expected-width="100" data-expected-height="75">
178
    <div></div>
179
  </div>
180
</div>
181
182
<div class="wrapper">
183
  <div class="grid" style="grid: repeat(auto-fit, 75px) / repeat(auto-fit, 100px);"
184
    data-expected-width="0" data-expected-height="0">
185
    <div></div>
186
  </div>
187
</div>
188
189
<div class="grid" style="grid: auto 50px / 100px auto;"
190
  data-expected-width="100" data-expected-height="50">
191
  <div data-expected-width="100" data-expected-height="10"
192
    data-offset-x="0" data-offset-y="0">X</div>
193
  <div data-expected-width="40" data-expected-height="10"
194
    data-offset-x="100" data-offset-y="0">XX</div>
195
  <div data-expected-width="100" data-expected-height="50"
196
    data-offset-x="0" data-offset-y="10">XXX</div>
197
  <div data-expected-width="40" data-expected-height="50"
198
    data-offset-x="100" data-offset-y="10">XXXX</div>
199
</div>
200
201
</body>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-004-expected.txt +129 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-004-expected.txt_sec1
1
2
PASS .grid 1
3
FAIL .grid 2 assert_equals:
4
<div class="grid percent min-content" data-expected-height="0" data-expected-width="0">
5
  <div data-expected-height="0" data-expected-width="0">XXXX</div>
6
</div>
7
width expected 0 but got 300
8
PASS .grid 3
9
FAIL .grid 4 assert_equals:
10
<div class="grid percent max-content" data-expected-height="0" data-expected-width="0">
11
  <div data-expected-height="0" data-expected-width="0">XXXX</div>
12
</div>
13
width expected 0 but got 300
14
PASS .grid 5
15
PASS .grid 6
16
PASS .grid 7
17
FAIL .grid 8 assert_equals:
18
<div class="grid calc min-content" data-expected-height="0" data-expected-width="0">
19
  <div data-expected-height="100" data-expected-width="100">XXXX</div>
20
</div>
21
width expected 0 but got 300
22
PASS .grid 9
23
FAIL .grid 10 assert_equals:
24
<div class="grid calc max-content" data-expected-height="0" data-expected-width="0">
25
  <div data-expected-height="100" data-expected-width="100">XXXX</div>
26
</div>
27
width expected 0 but got 300
28
PASS .grid 11
29
PASS .grid 12
30
PASS .grid 13
31
FAIL .grid 14 assert_equals:
32
<div class="grid minmax-percent-fixed min-content" data-expected-height="100" data-expected-width="0">
33
  <div data-expected-height="100" data-expected-width="0">XXXX</div>
34
</div>
35
width expected 0 but got 100
36
PASS .grid 15
37
PASS .grid 16
38
PASS .grid 17
39
PASS .grid 18
40
PASS .grid 19
41
PASS .grid 20
42
PASS .grid 21
43
FAIL .grid 22 assert_equals:
44
<div class="grid minmax-fixed-percent max-content" data-expected-height="100" data-expected-width="100">
45
  <div data-expected-height="100" data-expected-width="100">XXXX</div>
46
</div>
47
width expected 100 but got 300
48
PASS .grid 23
49
PASS .grid 24
50
PASS .grid 25
51
FAIL .grid 26 assert_equals:
52
<div class="grid minmax-percent-flex min-content" data-expected-height="0" data-expected-width="0">
53
  <div data-expected-height="0" data-expected-width="0">XXXX</div>
54
</div>
55
width expected 0 but got 300
56
PASS .grid 27
57
FAIL .grid 28 assert_equals:
58
<div class="grid minmax-percent-flex max-content" data-expected-height="0" data-expected-width="0">
59
  <div data-expected-height="0" data-expected-width="0">XXXX</div>
60
</div>
61
width expected 0 but got 300
62
PASS .grid 29
63
PASS .grid 30
64
PASS .grid 31
65
FAIL .grid 32 assert_equals:
66
<div class="grid minmax-intrinsic-percent min-content" data-expected-height="0" data-expected-width="0">
67
  <div data-expected-height="75" data-expected-width="300">XXXX</div>
68
</div>
69
width expected 0 but got 300
70
PASS .grid 33
71
FAIL .grid 34 assert_equals:
72
<div class="grid minmax-intrinsic-percent max-content" data-expected-height="0" data-expected-width="0">
73
  <div data-expected-height="75" data-expected-width="300">XXXX</div>
74
</div>
75
width expected 0 but got 300
76
PASS .grid 35
77
PASS .grid 36
78
PASS .grid 37
79
FAIL .grid 38 assert_equals:
80
<div class="grid minmax-percent-intrinsic min-content" data-expected-height="0" data-expected-width="0">
81
  <div data-expected-height="0" data-expected-width="0">XXXX</div>
82
</div>
83
width expected 0 but got 300
84
PASS .grid 39
85
FAIL .grid 40 assert_equals:
86
<div class="grid minmax-percent-intrinsic max-content" data-expected-height="0" data-expected-width="0">
87
  <div data-expected-height="0" data-expected-width="0">XXXX</div>
88
</div>
89
width expected 0 but got 300
90
PASS .grid 41
91
PASS .grid 42
92
PASS .grid 43
93
FAIL .grid 44 assert_equals:
94
<div class="grid fit-content min-content" data-expected-height="0" data-expected-width="0">
95
  <div data-expected-height="75" data-expected-width="300">XXXX</div>
96
</div>
97
width expected 0 but got 300
98
PASS .grid 45
99
FAIL .grid 46 assert_equals:
100
<div class="grid fit-content max-content" data-expected-height="0" data-expected-width="0">
101
  <div data-expected-height="75" data-expected-width="300">XXXX</div>
102
</div>
103
width expected 0 but got 300
104
PASS .grid 47
105
PASS .grid 48
106
XXXX
107
XXXX
108
XXXX
109
XXXX
110
XXXX
111
XXXX
112
XXXX
113
XXXX
114
XXXX
115
XXXX
116
XXXX
117
XXXX
118
XXXX
119
XXXX
120
XXXX
121
XXXX
122
XXXX
123
XXXX
124
XXXX
125
XXXX
126
XXXX
127
XXXX
128
XXXX
129
XXXX
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-004.html +210 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-004.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Size containment on grid containers with percentages</title>
4
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
6
<meta name="assert" content="Checks that grid containers with size containment and their grid items are sized correctly when the track sizing functions contain percentages.">
7
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
8
<style>
9
.grid {
10
  display: grid;
11
  contain: size;
12
  font: 75px/1 Ahem;
13
}
14
.min-content {
15
  height: min-content;
16
  width: min-content;
17
}
18
.max-content {
19
  height: max-content;
20
  width: max-content;
21
}
22
.fixed {
23
  height: 100px;
24
  width: 100px;
25
}
26
.percent {
27
  grid: 50% / 200%;
28
}
29
.calc {
30
  grid: calc(100px + 50%) / calc(100px + 200%);
31
}
32
.minmax-percent-fixed {
33
  grid: minmax(50%, 100px) / minmax(200%, 100px);
34
}
35
.minmax-fixed-percent {
36
  grid: minmax(100px, 50%) / minmax(100px, 200%);
37
}
38
.minmax-percent-flex {
39
  grid: minmax(50%, 1fr) / minmax(200%, 1fr);
40
}
41
.minmax-percent-intrinsic {
42
  grid: minmax(50%, min-content) / minmax(200%, min-content);
43
}
44
.minmax-intrinsic-percent {
45
  grid: minmax(min-content, 50%) / minmax(min-content, 200%);
46
}
47
.fit-content {
48
  grid: fit-content(50%) / fit-content(200%);
49
}
50
</style>
51
<script src="/resources/testharness.js"></script>
52
<script src="/resources/testharnessreport.js"></script>
53
<script src="/resources/check-layout-th.js"></script>
54
<body onload="checkLayout('.grid')">
55
56
<div id="log"></div>
57
58
<div class="grid percent min-content" data-expected-height="0" data-expected-width="0">
59
  <div data-expected-height="0" data-expected-width="0"></div>
60
</div>
61
<div class="grid percent min-content" data-expected-height="0" data-expected-width="0">
62
  <div data-expected-height="0" data-expected-width="0">XXXX</div>
63
</div>
64
<div class="grid percent max-content" data-expected-height="0" data-expected-width="0">
65
  <div data-expected-height="0" data-expected-width="0"></div>
66
</div>
67
<div class="grid percent max-content" data-expected-height="0" data-expected-width="0">
68
  <div data-expected-height="0" data-expected-width="0">XXXX</div>
69
</div>
70
<div class="grid percent fixed" data-expected-height="100" data-expected-width="100">
71
  <div data-expected-height="50" data-expected-width="200"></div>
72
</div>
73
<div class="grid percent fixed" data-expected-height="100" data-expected-width="100">
74
  <div data-expected-height="50" data-expected-width="200">XXXX</div>
75
</div>
76
77
<div class="grid calc min-content" data-expected-height="0" data-expected-width="0">
78
  <div data-expected-height="100" data-expected-width="100"></div>
79
</div>
80
<div class="grid calc min-content" data-expected-height="0" data-expected-width="0">
81
  <div data-expected-height="100" data-expected-width="100">XXXX</div>
82
</div>
83
<div class="grid calc max-content" data-expected-height="0" data-expected-width="0">
84
  <div data-expected-height="100" data-expected-width="100"></div>
85
</div>
86
<div class="grid calc max-content" data-expected-height="0" data-expected-width="0">
87
  <div data-expected-height="100" data-expected-width="100">XXXX</div>
88
</div>
89
<div class="grid calc fixed" data-expected-height="100" data-expected-width="100">
90
  <div data-expected-height="150" data-expected-width="300"></div>
91
</div>
92
<div class="grid calc fixed" data-expected-height="100" data-expected-width="100">
93
  <div data-expected-height="150" data-expected-width="300">XXXX</div>
94
</div>
95
96
<div class="grid minmax-percent-fixed min-content" data-expected-height="100" data-expected-width="0">
97
  <div data-expected-height="100" data-expected-width="0"></div>
98
</div>
99
<div class="grid minmax-percent-fixed min-content" data-expected-height="100" data-expected-width="0">
100
  <div data-expected-height="100" data-expected-width="0">XXXX</div>
101
</div>
102
<div class="grid minmax-percent-fixed max-content" data-expected-height="100" data-expected-width="100">
103
  <div data-expected-height="100" data-expected-width="200"></div>
104
</div>
105
<div class="grid minmax-percent-fixed max-content" data-expected-height="100" data-expected-width="100">
106
  <div data-expected-height="100" data-expected-width="200">XXXX</div>
107
</div>
108
<div class="grid minmax-percent-fixed fixed" data-expected-height="100" data-expected-width="100">
109
  <div data-expected-height="100" data-expected-width="200"></div>
110
</div>
111
<div class="grid minmax-percent-fixed fixed" data-expected-height="100" data-expected-width="100">
112
  <div data-expected-height="100" data-expected-width="200">XXXX</div>
113
</div>
114
115
<div class="grid minmax-fixed-percent min-content" data-expected-height="100" data-expected-width="100">
116
  <div data-expected-height="100" data-expected-width="100"></div>
117
</div>
118
<div class="grid minmax-fixed-percent min-content" data-expected-height="100" data-expected-width="100">
119
  <div data-expected-height="100" data-expected-width="100">XXXX</div>
120
</div>
121
<div class="grid minmax-fixed-percent max-content" data-expected-height="100" data-expected-width="100">
122
  <div data-expected-height="100" data-expected-width="100"></div>
123
</div>
124
<div class="grid minmax-fixed-percent max-content" data-expected-height="100" data-expected-width="100">
125
  <div data-expected-height="100" data-expected-width="100">XXXX</div>
126
</div>
127
<div class="grid minmax-fixed-percent fixed" data-expected-height="100" data-expected-width="100">
128
  <div data-expected-height="100" data-expected-width="100"></div>
129
</div>
130
<div class="grid minmax-fixed-percent fixed" data-expected-height="100" data-expected-width="100">
131
  <div data-expected-height="100" data-expected-width="100">XXXX</div>
132
</div>
133
134
<div class="grid minmax-percent-flex min-content" data-expected-height="0" data-expected-width="0">
135
  <div data-expected-height="0" data-expected-width="0"></div>
136
</div>
137
<div class="grid minmax-percent-flex min-content" data-expected-height="0" data-expected-width="0">
138
  <div data-expected-height="0" data-expected-width="0">XXXX</div>
139
</div>
140
<div class="grid minmax-percent-flex max-content" data-expected-height="0" data-expected-width="0">
141
  <div data-expected-height="0" data-expected-width="0"></div>
142
</div>
143
<div class="grid minmax-percent-flex max-content" data-expected-height="0" data-expected-width="0">
144
  <div data-expected-height="0" data-expected-width="0">XXXX</div>
145
</div>
146
<div class="grid minmax-percent-flex fixed" data-expected-height="100" data-expected-width="100">
147
  <div data-expected-height="100" data-expected-width="200"></div>
148
</div>
149
<div class="grid minmax-percent-flex fixed" data-expected-height="100" data-expected-width="100">
150
  <div data-expected-height="100" data-expected-width="200">XXXX</div>
151
</div>
152
153
<div class="grid minmax-intrinsic-percent min-content" data-expected-height="0" data-expected-width="0">
154
  <div data-expected-height="0" data-expected-width="0"></div>
155
</div>
156
<div class="grid minmax-intrinsic-percent min-content" data-expected-height="0" data-expected-width="0">
157
  <div data-expected-height="75" data-expected-width="300">XXXX</div>
158
</div>
159
<div class="grid minmax-intrinsic-percent max-content" data-expected-height="0" data-expected-width="0">
160
  <div data-expected-height="0" data-expected-width="0"></div>
161
</div>
162
<div class="grid minmax-intrinsic-percent max-content" data-expected-height="0" data-expected-width="0">
163
  <div data-expected-height="75" data-expected-width="300">XXXX</div>
164
</div>
165
<div class="grid minmax-intrinsic-percent fixed" data-expected-height="100" data-expected-width="100">
166
  <div data-expected-height="50" data-expected-width="100"></div>
167
</div>
168
<div class="grid minmax-intrinsic-percent fixed" data-expected-height="100" data-expected-width="100">
169
  <div data-expected-height="75" data-expected-width="300">XXXX</div>
170
</div>
171
172
<div class="grid minmax-percent-intrinsic min-content" data-expected-height="0" data-expected-width="0">
173
  <div data-expected-height="0" data-expected-width="0"></div>
174
</div>
175
<div class="grid minmax-percent-intrinsic min-content" data-expected-height="0" data-expected-width="0">
176
  <div data-expected-height="0" data-expected-width="0">XXXX</div>
177
</div>
178
<div class="grid minmax-percent-intrinsic max-content" data-expected-height="0" data-expected-width="0">
179
  <div data-expected-height="0" data-expected-width="0"></div>
180
</div>
181
<div class="grid minmax-percent-intrinsic max-content" data-expected-height="0" data-expected-width="0">
182
  <div data-expected-height="0" data-expected-width="0">XXXX</div>
183
</div>
184
<div class="grid minmax-percent-intrinsic fixed" data-expected-height="100" data-expected-width="100">
185
  <div data-expected-height="50" data-expected-width="200"></div>
186
</div>
187
<div class="grid minmax-percent-intrinsic fixed" data-expected-height="100" data-expected-width="100">
188
  <div data-expected-height="75" data-expected-width="200">XXXX</div>
189
</div>
190
191
<div class="grid fit-content min-content" data-expected-height="0" data-expected-width="0">
192
  <div data-expected-height="0" data-expected-width="0"></div>
193
</div>
194
<div class="grid fit-content min-content" data-expected-height="0" data-expected-width="0">
195
  <div data-expected-height="75" data-expected-width="300">XXXX</div>
196
</div>
197
<div class="grid fit-content max-content" data-expected-height="0" data-expected-width="0">
198
  <div data-expected-height="0" data-expected-width="0"></div>
199
</div>
200
<div class="grid fit-content max-content" data-expected-height="0" data-expected-width="0">
201
  <div data-expected-height="75" data-expected-width="300">XXXX</div>
202
</div>
203
<div class="grid fit-content fixed" data-expected-height="100" data-expected-width="100">
204
  <div data-expected-height="0" data-expected-width="0"></div>
205
</div>
206
<div class="grid fit-content fixed" data-expected-height="100" data-expected-width="100">
207
  <div data-expected-height="75" data-expected-width="300">XXXX</div>
208
</div>
209
210
</body>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-005-expected.html +49 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-005-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Gerald Squelart" href="mailto:gsquelart@mozilla.com">
7
  <style>
8
  .basic {
9
    display: grid;
10
    border: 1em solid green;
11
  }
12
  .height-ref {
13
    height: 40px;
14
    background: lightblue;
15
  }
16
  .width-ref {
17
    width: 40px;
18
  }
19
  .floatLBasic-ref {
20
    float: left;
21
  }
22
  .floatLWidth-ref {
23
    float: left;
24
    width: 40px;
25
  }
26
  </style>
27
</head>
28
<body>
29
  <div class="basic"></div>
30
  <br>
31
32
  <div class="basic height-ref"></div>
33
  <br>
34
35
  <div class="basic height-ref"></div>
36
  <br>
37
38
  <div class="basic width-ref"></div>
39
  <br>
40
41
  <div class="basic width-ref"></div>
42
  <br>
43
44
  <div class="basic floatLBasic-ref"></div>
45
  <br>
46
47
  <div class="basic floatLWidth-ref"></div>
48
</body>
49
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-005.html +72 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-005.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: size' on grid elements should cause them to be sized as if they had no contents.</title>
6
  <link rel="author" title="Gerald Squelart" href="mailto:gsquelart@mozilla.com">
7
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
8
  <link rel="match" href="contain-size-grid-005-ref.html">
9
  <style>
10
  .contain {
11
    display: grid;
12
    contain:size;
13
    border: 1em solid green;
14
    background: red;
15
  }
16
  .innerContents {
17
    color: transparent;
18
    height: 100px;
19
    width: 100px;
20
  }
21
  .minHeight {
22
    min-height: 40px;
23
    background: lightblue;
24
  }
25
  .height {
26
    height: 40px;
27
    background: lightblue;
28
  }
29
  .maxWidth {
30
    max-width: 40px;
31
  }
32
  .width {
33
    width: 40px;
34
  }
35
  .floatLBasic {
36
    float: left;
37
  }
38
  .floatLWidth {
39
    float: left;
40
    width: 40px;
41
  }
42
  </style>
43
</head>
44
<body>
45
  <!--CSS Test: A size-contained grid element with no specified size should render at 0 height regardless of content.-->
46
  <div class="contain"><div class="innerContents">inner</div></div>
47
  <br>
48
49
  <!--CSS Test: A size-contained grid element with specified min-height should render at given min-height regardless of content.-->
50
  <div class="contain minHeight"><div class="innerContents">inner</div></div>
51
  <br>
52
53
  <!--CSS Test: A size-contained grid element with specified height should render at given height regardless of content.-->
54
  <div class="contain height"><div class="innerContents">inner</div></div>
55
  <br>
56
57
  <!--CSS Test: A size-contained grid element with specified max-width should render at given max-width and zero height regardless of content.-->
58
  <div class="contain maxWidth"><div class="innerContents">inner</div></div>
59
  <br>
60
61
  <!--CSS Test: A size-contained grid element with specified width should render at given width and zero height regardless of content.-->
62
  <div class="contain width"><div class="innerContents">inner</div></div>
63
  <br>
64
65
  <!--CSS Test: A size-contained floated grid element with no specified size should render at 0px by 0px regardless of content.-->
66
  <div class="contain floatLBasic"><div class="innerContents">inner</div></div>
67
  <br>
68
69
  <!--CSS Test: A size-contained floated grid element with specified width and no specified height should render at given width and 0 height regardless of content.-->
70
  <div class="contain floatLWidth"><div class="innerContents">inner</div></div>
71
</body>
72
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-001-expected.html +43 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-001-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
7
  <style>
8
  .basic {
9
    display: inline-block;
10
    border: 1em solid green;
11
  }
12
  .height-ref {
13
    height: 50px;
14
  }
15
  .width-ref {
16
    width: 50px;
17
  }
18
  .innerContents {
19
    color: transparent;
20
    width: 0;
21
    height: 0;
22
  }
23
  </style>
24
</head>
25
<body>
26
  <div class="basic"><div class="innerContents">i</div></div>
27
  <br>
28
29
  outside before<div class="basic"><div class="innerContents">i</div></div>outside after
30
  <br>
31
32
  <div class="basic height-ref"><div class="innerContents">i</div></div>
33
  <br>
34
35
  <div class="basic height-ref"><div class="innerContents">i</div></div>
36
  <br>
37
38
  <div class="basic width-ref"><div class="innerContents">i</div></div>
39
  <br>
40
41
  <div class="basic width-ref"><div class="innerContents">i</div></div>
42
</body>
43
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-001.html +59 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-001.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: size' on inline-block elements should cause them to be sized as if they had no contents and baseline-aligned regularly.</title>
6
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
7
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
8
  <link rel="match" href="contain-size-inline-block-001-ref.html">
9
  <style>
10
  .contain {
11
    display: inline-block;
12
    contain:size;
13
    border: 1em solid green;
14
    background: red;
15
  }
16
  .innerContents {
17
    color: transparent;
18
    height: 100px;
19
    width: 100px;
20
  }
21
  .minHeight {
22
    min-height: 50px;
23
  }
24
  .height {
25
    height: 50px;
26
  }
27
  .minWidth {
28
    min-width: 50px;
29
  }
30
  .width {
31
    width: 50px;
32
  }
33
  </style>
34
</head>
35
<body>
36
  <!--CSS Test: A size-contained inline-block element with no specified size should render at 0 height and 0 width regardless of content.-->
37
  <div class="contain"><div class="innerContents">inner</div></div>
38
  <br>
39
40
  <!--CSS Test: A size-contained inline-block element should perform baseline alignment regularly.-->
41
  outside before<div class="contain"><div class="innerContents">inner</div></div>outside after
42
  <br>
43
44
  <!--CSS Test: A size-contained inline-block element with specified min-height should render at given min-height and 0 width regardless of content.-->
45
  <div class="contain minHeight"><div class="innerContents">inner</div></div>
46
  <br>
47
48
  <!--CSS Test: A size-contained inline-block element with specified height should render at given height and 0 width regardless of content.-->
49
  <div class="contain height"><div class="innerContents">inner</div></div>
50
  <br>
51
52
  <!--CSS Test: A size-contained inline-block element with specified min-width should render at given min-width and 0 height regardless of content.-->
53
  <div class="contain minWidth"><div class="innerContents">inner</div></div>
54
  <br>
55
56
  <!--CSS Test: A size-contained inline-block element with specified width should render at given width and 0 height regardless of content.-->
57
  <div class="contain width"><div class="innerContents">inner</div></div>
58
</body>
59
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-002-expected.html +56 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-002-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
7
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
8
  <style>
9
  .basic {
10
    display: inline-block;
11
    overflow: scroll;
12
    position: relative;
13
    border: 2px solid green;
14
  }
15
  .height-ref {
16
    height: 60px;
17
  }
18
  .width-ref {
19
    width: 60px;
20
  }
21
  .innerContents {
22
    color: transparent;
23
    height: 100px;
24
    width: 100px;
25
    position: absolute;
26
  }
27
  </style>
28
</head>
29
<body>
30
  <!-- NOTE: In the reference-case scenarios here, we use the same DOM as in
31
       the testcase, and we simply use 'position: absolute' on the descendants
32
       wherever the testcase has 'contain: size' on the container.  This
33
       produces an accurate reference rendering, because out-of-flow content
34
       doesn't contribute to the container's sizing, but does create scrollable
35
       overflow (i.e. it produces scrollbars of the appropriate size for the
36
       amount of overflow). -->
37
  <div class="basic"><div class="innerContents">inner</div></div>
38
  <br>
39
40
  outside before
41
  <div class="basic"><div class="innerContents">inner</div></div>
42
  outside after
43
  <br>
44
45
  <div class="basic height-ref"><div class="innerContents">inner</div></div>
46
  <br>
47
48
  <div class="basic height-ref"><div class="innerContents">inner</div></div>
49
  <br>
50
51
  <div class="basic width-ref"><div class="innerContents">inner</div></div>
52
  <br>
53
54
  <div class="basic width-ref"><div class="innerContents">inner</div></div>
55
</body>
56
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-002.html +67 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-002.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: size' on 'overflow:scroll' inline-block elements should cause them to be sized as if they had no contents and baseline-aligned regularly.</title>
6
  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
7
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
8
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
9
  <link rel="match" href="contain-size-inline-block-002-ref.html">
10
  <style>
11
  .contain {
12
    display: inline-block;
13
    overflow: scroll;
14
    contain:size;
15
    border: 2px solid green;
16
  }
17
  .innerContents {
18
    color: transparent;
19
    height: 100px;
20
    width: 100px;
21
  }
22
  .minHeight {
23
    min-height: 60px;
24
  }
25
  .height {
26
    height: 60px;
27
  }
28
  .minWidth {
29
    min-width: 60px;
30
  }
31
  .width {
32
    width: 60px;
33
  }
34
  </style>
35
</head>
36
<body>
37
  <!-- NOTE: In all cases below, the expectation is that the size-contained
38
       element should be sized as if it had no contents (while honoring
39
       whatever sizing properties are provided). -->
40
41
  <!-- A size-contained scrollable inline-block with no specified size -->
42
  <div class="contain"><div class="innerContents">inner</div></div>
43
  <br>
44
45
  <!-- A size-contained scrollable inline-block should perform baseline
46
       alignment regularly, based on contents' baseline. -->
47
  outside before
48
  <div class="contain"><div class="innerContents">inner</div></div>
49
  outside after
50
  <br>
51
52
  <!-- A size-contained scrollable inline-block with specified min-height -->
53
  <div class="contain minHeight"><div class="innerContents">inner</div></div>
54
  <br>
55
56
  <!-- A size-contained scrollable inline-block with specified height -->
57
  <div class="contain height"><div class="innerContents">inner</div></div>
58
  <br>
59
60
  <!-- A size-contained scrollable inline-block with specified min-width -->
61
  <div class="contain minWidth"><div class="innerContents">inner</div></div>
62
  <br>
63
64
  <!-- A size-contained scrollable inline-block with specified width -->
65
  <div class="contain width"><div class="innerContents">inner</div></div>
66
</body>
67
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-003-expected.html +56 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-003-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
7
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
8
  <style>
9
  .basic {
10
    display: inline-block;
11
    overflow: auto;
12
    position: relative;
13
    border: 2px solid green;
14
  }
15
  .height-ref {
16
    height: 60px;
17
  }
18
  .width-ref {
19
    width: 60px;
20
  }
21
  .innerContents {
22
    color: transparent;
23
    height: 100px;
24
    width: 100px;
25
    position: absolute;
26
  }
27
  </style>
28
</head>
29
<body>
30
  <!-- NOTE: In the reference-case scenarios here, we use the same DOM as in
31
       the testcase, and we simply use 'position: absolute' on the descendants
32
       wherever the testcase has 'contain: size' on the container.  This
33
       produces an accurate reference rendering, because out-of-flow content
34
       doesn't contribute to the container's sizing, but does create scrollable
35
       overflow (i.e. it produces scrollbars of the appropriate size for the
36
       amount of overflow). -->
37
  <div class="basic"><div class="innerContents">inner</div></div>
38
  <br>
39
40
  outside before
41
  <div class="basic"><div class="innerContents">inner</div></div>
42
  outside after
43
  <br>
44
45
  <div class="basic height-ref"><div class="innerContents">inner</div></div>
46
  <br>
47
48
  <div class="basic height-ref"><div class="innerContents">inner</div></div>
49
  <br>
50
51
  <div class="basic width-ref"><div class="innerContents">inner</div></div>
52
  <br>
53
54
  <div class="basic width-ref"><div class="innerContents">inner</div></div>
55
</body>
56
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-003.html +67 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-003.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: size' on 'overflow:auto' inline-block elements should cause them to be sized as if they had no contents and baseline-aligned regularly.</title>
6
  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
7
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
8
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
9
  <link rel="match" href="contain-size-inline-block-003-ref.html">
10
  <style>
11
  .contain {
12
    display: inline-block;
13
    overflow: auto;
14
    contain:size;
15
    border: 2px solid green;
16
  }
17
  .innerContents {
18
    color: transparent;
19
    height: 100px;
20
    width: 100px;
21
  }
22
  .minHeight {
23
    min-height: 60px;
24
  }
25
  .height {
26
    height: 60px;
27
  }
28
  .minWidth {
29
    min-width: 60px;
30
  }
31
  .width {
32
    width: 60px;
33
  }
34
  </style>
35
</head>
36
<body>
37
  <!-- NOTE: In all cases below, the expectation is that the size-contained
38
       element should be sized as if it had no contents (while honoring
39
       whatever sizing properties are provided). -->
40
41
  <!-- A size-contained scrollable inline-block with no specified size -->
42
  <div class="contain"><div class="innerContents">inner</div></div>
43
  <br>
44
45
  <!-- A size-contained scrollable inline-block should perform baseline
46
       alignment regularly, based on contents' baseline. -->
47
  outside before
48
  <div class="contain"><div class="innerContents">inner</div></div>
49
  outside after
50
  <br>
51
52
  <!-- A size-contained scrollable inline-block with specified min-height -->
53
  <div class="contain minHeight"><div class="innerContents">inner</div></div>
54
  <br>
55
56
  <!-- A size-contained scrollable inline-block with specified height -->
57
  <div class="contain height"><div class="innerContents">inner</div></div>
58
  <br>
59
60
  <!-- A size-contained scrollable inline-block with specified min-width -->
61
  <div class="contain minWidth"><div class="innerContents">inner</div></div>
62
  <br>
63
64
  <!-- A size-contained scrollable inline-block with specified width -->
65
  <div class="contain width"><div class="innerContents">inner</div></div>
66
</body>
67
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-004-expected.html +55 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-004-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
7
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
8
  <style>
9
  .basic {
10
    display: inline-block;
11
    overflow: hidden;
12
    position: relative;
13
    border: 2px solid green;
14
  }
15
  .height-ref {
16
    height: 60px;
17
  }
18
  .width-ref {
19
    width: 60px;
20
  }
21
  .innerContents {
22
    color: transparent;
23
    height: 100px;
24
    width: 100px;
25
    position: absolute;
26
  }
27
  </style>
28
</head>
29
<body>
30
  <!-- NOTE: In the reference-case scenarios here, we use the same DOM as in
31
       the testcase, and we simply use 'position: absolute' on the descendants
32
       wherever the testcase has 'contain: size' on the container.  This
33
       produces an accurate reference rendering, because out-of-flow content
34
       doesn't contribute to the container's sizing, but does create scrollable
35
       overflow. -->
36
  <div class="basic"><div class="innerContents">inner</div></div>
37
  <br>
38
39
  outside before
40
  <div class="basic"><div class="innerContents">inner</div></div>
41
  outside after
42
  <br>
43
44
  <div class="basic height-ref"><div class="innerContents">inner</div></div>
45
  <br>
46
47
  <div class="basic height-ref"><div class="innerContents">inner</div></div>
48
  <br>
49
50
  <div class="basic width-ref"><div class="innerContents">inner</div></div>
51
  <br>
52
53
  <div class="basic width-ref"><div class="innerContents">inner</div></div>
54
</body>
55
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-004.html +67 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-004.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: size' on 'overflow:hidden' inline-block elements should cause them to be sized as if they had no contents and baseline-aligned regularly.</title>
6
  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
7
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
8
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
9
  <link rel="match" href="contain-size-inline-block-004-ref.html">
10
  <style>
11
  .contain {
12
    display: inline-block;
13
    overflow: hidden;
14
    contain:size;
15
    border: 2px solid green;
16
  }
17
  .innerContents {
18
    color: transparent;
19
    height: 100px;
20
    width: 100px;
21
  }
22
  .minHeight {
23
    min-height: 60px;
24
  }
25
  .height {
26
    height: 60px;
27
  }
28
  .minWidth {
29
    min-width: 60px;
30
  }
31
  .width {
32
    width: 60px;
33
  }
34
  </style>
35
</head>
36
<body>
37
  <!-- NOTE: In all cases below, the expectation is that the size-contained
38
       element should be sized as if it had no contents (while honoring
39
       whatever sizing properties are provided). -->
40
41
  <!-- A size-contained scrollable inline-block with no specified size -->
42
  <div class="contain"><div class="innerContents">inner</div></div>
43
  <br>
44
45
  <!-- A size-contained scrollable inline-block should perform baseline
46
       alignment regularly, based on contents' baseline. -->
47
  outside before
48
  <div class="contain"><div class="innerContents">inner</div></div>
49
  outside after
50
  <br>
51
52
  <!-- A size-contained scrollable inline-block with specified min-height -->
53
  <div class="contain minHeight"><div class="innerContents">inner</div></div>
54
  <br>
55
56
  <!-- A size-contained scrollable inline-block with specified height -->
57
  <div class="contain height"><div class="innerContents">inner</div></div>
58
  <br>
59
60
  <!-- A size-contained scrollable inline-block with specified min-width -->
61
  <div class="contain minWidth"><div class="innerContents">inner</div></div>
62
  <br>
63
64
  <!-- A size-contained scrollable inline-block with specified width -->
65
  <div class="contain width"><div class="innerContents">inner</div></div>
66
</body>
67
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-flex-001-expected.html +28 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-flex-001-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
7
  <style>
8
  .basic {
9
    border: 1em solid green;
10
    display: inline-flex;
11
  }
12
  .width-ref {
13
    width: 50px;
14
  }
15
  .innerContents {
16
    color: transparent;
17
    width: 0;
18
    height: 0;
19
  }
20
  </style>
21
</head>
22
<body>
23
  aa<div class="basic"><div class="innerContents">i</div></div>bb
24
  <br>
25
26
  aa<div class="basic width-ref"><div class="innerContents">i</div></div>bb
27
</body>
28
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-flex-001.html +34 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-flex-001.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: size' on inline-flex elements should cause them to be sized as if they had no contents and baseline-aligned regularly.</title>
6
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
7
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
8
  <link rel="match" href="contain-size-inline-flex-001-ref.html">
9
  <style>
10
  .contain {
11
    display: inline-flex;
12
    contain:size;
13
    border: 1em solid green;
14
    background: red;
15
  }
16
  .innerContents {
17
    color: transparent;
18
    height: 100px;
19
    width: 100px;
20
  }
21
  .width {
22
    width: 50px;
23
  }
24
  </style>
25
</head>
26
<body>
27
  <!--CSS Test: A size-contained inline-flex element without dimensions should ensure baseline alignment behaves regularly.-->
28
  aa<div class="contain"><div class="innerContents">inner</div></div>bb
29
  <br>
30
31
  <!--CSS Test: A size-contained inline-flex element with specified width should ensure baseline alignment behaves regularly.-->
32
  aa<div class="contain width"><div class="innerContents">inner</div></div>bb
33
</body>
34
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-monolithic-001-expected.html +21 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-monolithic-001-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  div
11
    {
12
      font-family: monospace;
13
      font-size: 20px;
14
      width: 8ch;
15
    }
16
  </style>
17
18
  <p>Test passes if "AB", "CD", "EF" and "GH" are vertically aligned into 1 single column and if there is <strong>no red</strong>.
19
20
21
  <div>AB<br>CD<br>EF<br>GH</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-monolithic-001.html +38 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-monolithic-001.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: size' element is monolithic</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-multicol-1/#column-gaps-and-rules">
9
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-size">
10
  <link rel="match" href="reference/contain-size-monolithic-001-ref.html">
11
12
  <meta content="This test checks that an element with size containment becomes monolithic. In this test, the only way to break the content of such monolithic element is to break (or slice) the content at each pair of characters. Since column rules are only drawn between two columns that both have content and since the test expects only 1 column filled with content, therefore the column rule should not be painted, thus the 'no red' test success condition." name="assert">
13
  <meta name="flags" content="">
14
15
  <style>
16
  div#multi-column
17
    {
18
      column-count: 2;
19
      column-fill: balance; /* balance is the initial column-fill value */
20
      column-gap: 4ch;
21
      column-rule: red solid 4ch;
22
      column-width: 2ch;
23
      font-family: monospace;
24
      font-size: 20px;
25
      width: 8ch;
26
    }
27
28
  div#size-contain
29
    {
30
      contain: size;
31
    }
32
  </style>
33
34
  <p>Test passes if "AB", "CD", "EF" and "GH" are vertically aligned into 1 single column and if there is <strong>no red</strong>.
35
36
  <div id="multi-column">
37
    <div id="size-contain">AB CD EF GH</div>
38
  </div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-monolithic-002-expected.html +4 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-monolithic-002-expected.html_sec1
1
<!DOCTYPE html>
2
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
3
<p>Test passes if there is a filled green square.</p>
4
<div style="width:100px; height:100px; background:green;"></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-monolithic-002.html +34 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-monolithic-002.html_sec1
1
<!DOCTYPE html>
2
<html>
3
  <meta charset="UTF-8">
4
  <title>CSS Containment Test: absolute positioned 'contain: size' element is monolithic</title>
5
  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
6
  <link rel="author" title="Mozilla" href="https://www.mozilla.org/">
7
  <link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
8
  <link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
9
  <meta  name="assert" content="This test checks that an absolute positioned element with size containment is monolithic.">
10
11
  <style>
12
  #multicol {
13
    width: 300px;
14
    column-count: 3;
15
  }
16
  #container {
17
    position: relative;
18
  }
19
  #abs-size-contain {
20
    position: absolute;
21
    contain: size;
22
    width: 100px;
23
    height: 100px;
24
    background: green;
25
  }
26
  </style>
27
28
  <p>Test passes if there is a filled green square.</p>
29
  <div id="multicol">
30
    <div id="container">
31
      <div id="abs-size-contain"></div>
32
    </div>
33
  </div>
34
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-001-expected.xht +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-001-expected.xht_sec1
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
 <head>
4
  <title>CSS Reftest Reference</title>
5
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
6
  <style type="text/css"><![CDATA[
7
  div
8
  {
9
  background-color: green;
10
  height: 100px;
11
  width: 100px;
12
  }
13
  ]]></style>
14
 </head>
15
 <body>
16
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17
  <div></div>
18
 </body>
19
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-001.html +46 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-001.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Size containment on a multicol with set column size (and gap)</title>
4
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
6
<meta name=assert content="columns and column-gap do affect the size of a multicol, even with size containment">
7
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
8
9
<style>
10
div {
11
  position: absolute;
12
}
13
#red {
14
  background: red;
15
  width: 100px;
16
  height: 100px;
17
}
18
#test {
19
  background: green;
20
21
  contain: size;
22
  columns: 2 40px;
23
  column-gap: 20px;
24
  min-height: 100px;
25
26
  color: transparent;
27
}
28
</style>
29
30
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
31
<div id=red></div>
32
<div id=test>
33
filler filler filler filler filler filler filler filler
34
filler filler filler filler filler filler filler filler
35
filler filler filler filler filler filler filler filler
36
filler filler filler filler filler filler filler filler
37
</div>
38
39
<!--
40
The filler text, min-height (instead of height) and transparent color
41
are to make the test fail in browsers
42
that do not implement contain:size at all,
43
by making the box non square.
44
-->
45
46
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-002-expected.html +49 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-002-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
7
  <style>
8
  .basic {
9
    border: 1em solid green;
10
    column-count: 3;
11
  }
12
  .height-ref {
13
    height: 20px;
14
    background: lightblue;
15
  }
16
  .width-ref {
17
    width: 20px;
18
  }
19
  .floatLBasic-ref {
20
    float: left;
21
  }
22
  .floatLWidth-ref {
23
    float: left;
24
    width: 20px;
25
  }
26
  </style>
27
</head>
28
<body>
29
  <div class="basic"></div>
30
  <br>
31
32
  <div class="basic height-ref"></div>
33
  <br>
34
35
  <div class="basic height-ref"></div>
36
  <br>
37
38
  <div class="basic width-ref"></div>
39
  <br>
40
41
  <div class="basic width-ref"></div>
42
  <br>
43
44
  <div class="basic floatLBasic-ref"></div>
45
  <br>
46
47
  <div class="basic floatLWidth-ref"></div>
48
</body>
49
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-002.html +72 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-002.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: size' on multicol elements should cause them to be sized as if they had no contents.</title>
6
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
7
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
8
  <link rel="match" href="contain-size-multicol-002-ref.html">
9
  <style>
10
  .contain {
11
    contain: size;
12
    border: 1em solid green;
13
    background: red;
14
    column-count: 3;
15
  }
16
  .innerContents {
17
    color: transparent;
18
    height: 50px;
19
    width: 50px;
20
  }
21
  .minHeight {
22
    min-height: 20px;
23
    background: lightblue;
24
  }
25
  .height {
26
    height: 20px;
27
    background: lightblue;
28
  }
29
  .maxWidth {
30
    max-width: 20px;
31
  }
32
  .width {
33
    width: 20px;
34
  }
35
  .floatLBasic {
36
    float: left;
37
  }
38
  .floatLWidth {
39
    float: left;
40
    width: 20px;
41
  }
42
  </style>
43
</head>
44
<body>
45
  <!--CSS Test: A size-contained multicol element with no specified size should render at 0 height regardless of content.-->
46
  <div class="contain"><div class="innerContents">inner</div></div>
47
  <br>
48
49
  <!--CSS Test: A size-contained multicol element with specified min-height should render at given min-height regardless of content.-->
50
  <div class="contain minHeight"><div class="innerContents">inner</div></div>
51
  <br>
52
53
  <!--CSS Test: A size-contained multicol element with specified height should render at given height regardless of content.-->
54
  <div class="contain height"><div class="innerContents">inner</div></div>
55
  <br>
56
57
  <!--CSS Test: A size-contained multicol element with specified max-width should render at given max-width and zero height regardless of content.-->
58
  <div class="contain maxWidth"><div class="innerContents">inner</div></div>
59
  <br>
60
61
  <!--CSS Test: A size-contained multicol element with specified width should render at given width and zero height regardless of content.-->
62
  <div class="contain width"><div class="innerContents">inner</div></div>
63
  <br>
64
65
  <!--CSS Test: A size-contained floated multicol element with no specified size should render at 0px by 0px regardless of content.-->
66
  <div class="contain floatLBasic"><div class="innerContents">inner</div></div>
67
  <br>
68
69
  <!--CSS Test: A size-contained floated multicol element with specified width and no specified height should render at given width and 0 height regardless of content.-->
70
  <div class="contain floatLWidth"><div class="innerContents">inner</div></div>
71
</body>
72
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-003-expected.html +66 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-003-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
7
  <style>
8
  .basic {
9
    border: 1em solid green;
10
    column-count: 3;
11
  }
12
  .innerContents {
13
    color: transparent;
14
    height: 0;
15
    width: 0;
16
  }
17
  .col-width-ref {
18
    column-width: 20px;
19
  }
20
  .col-gap-ref {
21
    column-gap: 5px;
22
  }
23
  .flexBaselineCheck {
24
    display: flex;
25
    align-items: baseline;
26
  }
27
  .min {
28
    width: min-content;
29
  }
30
  .max {
31
    width: max-content;
32
  }
33
  </style>
34
</head>
35
<body>
36
  <div class="flexBaselineCheck">
37
    outside before
38
    <div class="basic" style="max-height:0px">
39
      <div class="innerContents">inner</div>
40
    </div>
41
    outside after
42
  </div>
43
  <br>
44
45
  <div class="basic min col-width-ref"></div>
46
  <br>
47
48
  <div class="basic max col-width-ref"></div>
49
  <br>
50
51
  <div class="basic min col-gap-ref col-width-ref"></div>
52
  <br>
53
54
  <div class="basic max col-gap-ref col-width-ref"></div>
55
  <br>
56
57
  <div class="min">
58
    <div class="basic"></div>
59
  </div>
60
  <br>
61
62
  <div class="max">
63
    <div class="basic"></div>
64
  </div>
65
</body>
66
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-003.html +78 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-003.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: size' on multicol elements should cause them to be sized as if they had no contents</title>
6
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
7
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
8
  <link rel="match" href="contain-size-multicol-003-ref.html">
9
  <style>
10
  .contain {
11
    contain: size;
12
    border: 1em solid green;
13
    background: red;
14
    column-count: 3;
15
  }
16
  .innerContents {
17
    color: transparent;
18
    height: 100px;
19
    width: 100px;
20
  }
21
  .col-width {
22
    column-width: 20px;
23
  }
24
  .col-gap {
25
    column-gap: 5px;
26
  }
27
  .flexBaselineCheck {
28
    display: flex;
29
    align-items: baseline;
30
  }
31
  .min {
32
    width: min-content;
33
  }
34
  .max {
35
    width: max-content;
36
  }
37
  </style>
38
</head>
39
<body>
40
  <!-- This test verifies that contain:size doesn't interfere with the
41
       determination of a multicol element's baseline. -->
42
  <div class="flexBaselineCheck">
43
    outside before
44
    <div class="contain">
45
      <div class="innerContents">inner</div>
46
    </div>
47
    outside after
48
  </div>
49
  <br>
50
51
  <!--The following tests are used to ensure column-gaps and column-widths continue to contribute to the minimum and maximum width of a size-contained multicol element. Each should render as if it had no contents.-->
52
53
  <div class="contain min col-width"><div class="innerContents">inner</div></div>
54
  <br>
55
56
  <div class="contain max col-width"><div class="innerContents">inner</div></div>
57
  <br>
58
59
  <div class="contain min col-gap col-width"><div class="innerContents">inner</div></div>
60
  <br>
61
62
  <div class="contain max col-gap col-width"><div class="innerContents">inner</div></div>
63
  <br>
64
65
  <div class="min">
66
    <div class="contain">
67
      <div class="innerContents">inner</div>
68
    </div>
69
  </div>
70
  <br>
71
72
  <div class="max">
73
    <div class="contain">
74
      <div class="innerContents">inner</div>
75
    </div>
76
  </div>
77
</body>
78
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-004-expected.html +31 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-004-expected.html_sec1
1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
7
  <style>
8
    .cols {
9
      column-count: 3;
10
      column-rule: 1px dotted blue;
11
      column-fill: auto;
12
      border: 2px solid blue;
13
      height: 50px;
14
      width: 300px;
15
    }
16
    .innerObject {
17
      height: 200px;
18
      width: 100px;
19
      background: orange;
20
    }
21
  </style>
22
</head>
23
  <body>
24
    <div class="cols">
25
      <canvas class="innerObject">
26
        <!-- Note: We use a canvas object here as a generic reference for
27
             something monolithic/non-fragmentable. -->
28
      </canvas>
29
    </div>
30
  </body>
31
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-004.html +34 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-004.html_sec1
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta charset="utf-8">
5
  <title>CSS Test: 'contain: size' should force elements to be monolithic, i.e. to not fragment inside a multicol element.</title>
6
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
7
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
8
  <link rel="match" href="contain-size-multicol-004-ref.html">
9
  <style>
10
    .contain {
11
      contain:size;
12
    }
13
    .cols {
14
      column-count: 3;
15
      column-rule: 1px dotted blue;
16
      column-fill: auto;
17
      border: 2px solid blue;
18
      height: 50px;
19
      width: 300px;
20
    }
21
    .innerObject {
22
      height: 200px;
23
      width: 100px;
24
      background: orange;
25
    }
26
  </style>
27
</head>
28
  <body>
29
    <div class="cols">
30
      <div class="contain innerObject">
31
      </div>
32
    </div>
33
  </body>
34
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-as-flex-item-expected.txt +11 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-as-flex-item-expected.txt_sec1
1
There should be a green square below.
2
3
4
FAIL #flex 1 assert_equals:
5
<div id="flex">
6
  <div id="multicol" data-expected-width="100" data-expected-height="100">
7
    <div style="width:1000px; height:1px;"></div>
8
  </div>
9
</div>
10
width expected 100 but got 784
11
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-as-flex-item.html +30 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-as-flex-item.html_sec1
1
<!DOCTYPE HTML>
2
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
3
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
4
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=863454">
5
<style>
6
  #flex {
7
    display: flex;
8
  }
9
10
  #multicol {
11
    columns: 3;
12
    min-width: 0;
13
    column-gap: 50px;
14
    contain:size;
15
    height:100px;
16
    background:green;
17
  }
18
</style>
19
<p>There should be a green square below.</p>
20
<div id="flex">
21
  <div id="multicol" data-expected-width="100" data-expected-height="100">
22
    <div style="width:1000px; height:1px;"></div>
23
  </div>
24
</div>
25
<script src="/resources/testharness.js"></script>
26
<script src="/resources/testharnessreport.js"></script>
27
<script src="/resources/check-layout-th.js"></script>
28
<script>
29
  checkLayout("#flex");
30
</script>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-001-expected.xht +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-001-expected.xht_sec1
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
 <head>
4
  <title>CSS Reftest Reference</title>
5
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
6
  <style type="text/css"><![CDATA[
7
  div
8
  {
9
  background-color: green;
10
  height: 100px;
11
  width: 100px;
12
  }
13
  ]]></style>
14
 </head>
15
 <body>
16
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17
  <div></div>
18
 </body>
19
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-001.html +17 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-001.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Size containment replaced elements intrinsic size</title>
4
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
5
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
6
<meta name=assert content="This test checks that intrinsic size of replaced elements with 'contain: size' is zero.">
7
<style>
8
object {
9
  background: green;
10
  padding: 50px;
11
  contain: size;
12
}
13
</style>
14
15
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
16
<object data="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><rect fill='red' width='100' height='100'/></svg>">
17
</object>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-002-expected.xht +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-002-expected.xht_sec1
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
 <head>
4
  <title>CSS Reftest Reference</title>
5
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
6
  <style type="text/css"><![CDATA[
7
  div
8
  {
9
  background-color: green;
10
  height: 100px;
11
  width: 100px;
12
  }
13
  ]]></style>
14
 </head>
15
 <body>
16
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17
  <div></div>
18
 </body>
19
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-002.html +18 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-002.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Size containment replaced elements intrinsic size</title>
4
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
5
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
6
<meta name=assert content="This test checks that intrinsic size of replaced elements with 'contain: size' is zero.">
7
<style>
8
svg {
9
  background: green;
10
  padding: 50px 0;
11
  contain: size;
12
}
13
</style>
14
15
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
16
<svg width="100" viewBox="0 0 50 50">
17
  <rect fill="red" width="50" height="50"/>
18
</svg>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-003a-expected.html +46 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-003a-expected.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Reference</title>
4
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
5
<link rel="author" href="https://mozilla.org" title="Mozilla">
6
<style>
7
  video, audio, canvas, svg, img, embed, object, iframe {
8
    border: 3px solid teal;
9
    max-height: 0px;
10
    max-width: 0px;
11
    margin: 15px;
12
  }
13
</style>
14
<body>
15
  <!-- video element: -->
16
  <video></video>
17
  <video controls></video>
18
  <video poster="support/blue-100x100.png"></video>
19
  <video poster="support/blue-100x100.png" controls></video>
20
  <video src="support/white.webm" controls></video>
21
  <video src="support/white.webm" controls></video>
22
  <br>
23
24
  <!-- audio element with controls, and a few other misc replaced elements: -->
25
  <audio controls></audio>
26
  <canvas></canvas>
27
  <svg></svg>
28
  <br>
29
30
  <!-- image elements: -->
31
  <img src="broken">
32
  <img src="support/blue-100x100.png">
33
  <picture><source srcset="support/blue-100x100.png"><img></picture>
34
  <br>
35
36
  <!-- document-embedding elements (with & without a target resource that
37
       could provide an intrinsic ratio in some cases, in the absence of
38
       contain:size): -->
39
  <embed>
40
  <embed src="support/blue-100x100.png">
41
  <object></object>
42
  <object data="support/blue-100x100.png"></object>
43
  <iframe></iframe>
44
  <iframe src="support/blue-100x100.png"></iframe>
45
  <br>
46
</body>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-003a.html +50 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-003a.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: intrinsic size of size-contained replaced elems</title>
4
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
5
<link rel="author" href="https://mozilla.org" title="Mozilla">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
7
<link rel="match" href="contain-size-replaced-003-ref.html">
8
<meta name=assert content="This test checks that various size-contained replaced elements have an intrinsic size of 0,0 regardless of their content.">
9
<style>
10
  video, audio, canvas, svg, img, embed, object, iframe {
11
    border: 3px solid teal;
12
    contain: size;
13
    margin: 15px;
14
    width: auto;
15
    height: auto;
16
  }
17
</style>
18
<body>
19
  <!-- video element: -->
20
  <video></video>
21
  <video controls></video>
22
  <video poster="support/blue-100x100.png"></video>
23
  <video poster="support/blue-100x100.png" controls></video>
24
  <video src="support/white.webm" controls></video>
25
  <video src="support/white.webm" controls></video>
26
  <br>
27
28
  <!-- audio element with controls, and a few other misc replaced elements: -->
29
  <audio controls></audio>
30
  <canvas></canvas>
31
  <svg></svg>
32
  <br>
33
34
  <!-- Image elements: -->
35
  <img src="broken">
36
  <img src="support/blue-100x100.png">
37
  <picture><source srcset="support/blue-100x100.png"><img></picture>
38
  <br>
39
40
  <!-- Document-embedding elements (with & without a target resource that
41
       could provide an intrinsic ratio in some cases, in the absence of
42
       contain:size): -->
43
  <embed>
44
  <embed src="support/blue-100x100.png">
45
  <object></object>
46
  <object data="support/blue-100x100.png"></object>
47
  <iframe></iframe>
48
  <iframe src="support/blue-100x100.png"></iframe>
49
  <br>
50
</body>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-003b-expected.html +46 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-003b-expected.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Reference</title>
4
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
5
<link rel="author" href="https://mozilla.org" title="Mozilla">
6
<style>
7
  video, audio, canvas, svg, img, embed, object, iframe {
8
    border: 3px solid teal;
9
    max-height: 0px;
10
    max-width: 0px;
11
    margin: 15px;
12
  }
13
</style>
14
<body>
15
  <!-- video element: -->
16
  <video></video>
17
  <video controls></video>
18
  <video poster="support/blue-100x100.png"></video>
19
  <video poster="support/blue-100x100.png" controls></video>
20
  <video src="support/white.webm" controls></video>
21
  <video src="support/white.webm" controls></video>
22
  <br>
23
24
  <!-- audio element with controls, and a few other misc replaced elements: -->
25
  <audio controls></audio>
26
  <canvas></canvas>
27
  <svg></svg>
28
  <br>
29
30
  <!-- image elements: -->
31
  <img src="broken">
32
  <img src="support/blue-100x100.png">
33
  <picture><source srcset="support/blue-100x100.png"><img></picture>
34
  <br>
35
36
  <!-- document-embedding elements (with & without a target resource that
37
       could provide an intrinsic ratio in some cases, in the absence of
38
       contain:size): -->
39
  <embed>
40
  <embed src="support/blue-100x100.png">
41
  <object></object>
42
  <object data="support/blue-100x100.png"></object>
43
  <iframe></iframe>
44
  <iframe src="support/blue-100x100.png"></iframe>
45
  <br>
46
</body>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-003b.html +50 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-003b.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: intrinsic size of size-contained replaced elems, with explicit max-content width</title>
4
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
5
<link rel="author" href="https://mozilla.org" title="Mozilla">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
7
<link rel="match" href="contain-size-replaced-003-ref.html">
8
<meta name=assert content="This test checks that various size-contained replaced elements have an intrinsic size of 0,0 regardless of their content.">
9
<style>
10
  video, audio, canvas, svg, img, embed, object, iframe {
11
    border: 3px solid teal;
12
    contain: size;
13
    margin: 15px;
14
    width: max-content; /* This means 0, given 'contain:size'. */
15
    height: auto;
16
  }
17
</style>
18
<body>
19
  <!-- video element: -->
20
  <video></video>
21
  <video controls></video>
22
  <video poster="support/blue-100x100.png"></video>
23
  <video poster="support/blue-100x100.png" controls></video>
24
  <video src="support/white.webm" controls></video>
25
  <video src="support/white.webm" controls></video>
26
  <br>
27
28
  <!-- audio element with controls, and a few other misc replaced elements: -->
29
  <audio controls></audio>
30
  <canvas></canvas>
31
  <svg></svg>
32
  <br>
33
34
  <!-- Image elements: -->
35
  <img src="broken">
36
  <img src="support/blue-100x100.png">
37
  <picture><source srcset="support/blue-100x100.png"><img></picture>
38
  <br>
39
40
  <!-- Document-embedding elements (with & without a target resource that
41
       could provide an intrinsic ratio in some cases, in the absence of
42
       contain:size): -->
43
  <embed>
44
  <embed src="support/blue-100x100.png">
45
  <object></object>
46
  <object data="support/blue-100x100.png"></object>
47
  <iframe></iframe>
48
  <iframe src="support/blue-100x100.png"></iframe>
49
  <br>
50
</body>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-003c-expected.html +46 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-003c-expected.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Reference</title>
4
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
5
<link rel="author" href="https://mozilla.org" title="Mozilla">
6
<style>
7
  video, audio, canvas, svg, img, embed, object, iframe {
8
    border: 3px solid teal;
9
    max-height: 0px;
10
    max-width: 0px;
11
    margin: 15px;
12
  }
13
</style>
14
<body>
15
  <!-- video element: -->
16
  <video></video>
17
  <video controls></video>
18
  <video poster="support/blue-100x100.png"></video>
19
  <video poster="support/blue-100x100.png" controls></video>
20
  <video src="support/white.webm" controls></video>
21
  <video src="support/white.webm" controls></video>
22
  <br>
23
24
  <!-- audio element with controls, and a few other misc replaced elements: -->
25
  <audio controls></audio>
26
  <canvas></canvas>
27
  <svg></svg>
28
  <br>
29
30
  <!-- image elements: -->
31
  <img src="broken">
32
  <img src="support/blue-100x100.png">
33
  <picture><source srcset="support/blue-100x100.png"><img></picture>
34
  <br>
35
36
  <!-- document-embedding elements (with & without a target resource that
37
       could provide an intrinsic ratio in some cases, in the absence of
38
       contain:size): -->
39
  <embed>
40
  <embed src="support/blue-100x100.png">
41
  <object></object>
42
  <object data="support/blue-100x100.png"></object>
43
  <iframe></iframe>
44
  <iframe src="support/blue-100x100.png"></iframe>
45
  <br>
46
</body>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-003c.html +50 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-003c.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: intrinsic size of size-contained replaced elems, with explicit max-content height</title>
4
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
5
<link rel="author" href="https://mozilla.org" title="Mozilla">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
7
<link rel="match" href="contain-size-replaced-003-ref.html">
8
<meta name=assert content="This test checks that various size-contained replaced elements have an intrinsic size of 0,0 regardless of their content.">
9
<style>
10
  video, audio, canvas, svg, img, embed, object, iframe {
11
    border: 3px solid teal;
12
    contain: size;
13
    margin: 15px;
14
    height: max-content; /* This means 0, given 'contain:size'. */
15
    width: auto;
16
  }
17
</style>
18
<body>
19
  <!-- video element: -->
20
  <video></video>
21
  <video controls></video>
22
  <video poster="support/blue-100x100.png"></video>
23
  <video poster="support/blue-100x100.png" controls></video>
24
  <video src="support/white.webm" controls></video>
25
  <video src="support/white.webm" controls></video>
26
  <br>
27
28
  <!-- audio element with controls, and a few other misc replaced elements: -->
29
  <audio controls></audio>
30
  <canvas></canvas>
31
  <svg></svg>
32
  <br>
33
34
  <!-- Image elements: -->
35
  <img src="broken">
36
  <img src="support/blue-100x100.png">
37
  <picture><source srcset="support/blue-100x100.png"><img></picture>
38
  <br>
39
40
  <!-- Document-embedding elements (with & without a target resource that
41
       could provide an intrinsic ratio in some cases, in the absence of
42
       contain:size): -->
43
  <embed>
44
  <embed src="support/blue-100x100.png">
45
  <object></object>
46
  <object data="support/blue-100x100.png"></object>
47
  <iframe></iframe>
48
  <iframe src="support/blue-100x100.png"></iframe>
49
  <br>
50
</body>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-004-expected.html +25 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-004-expected.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Reference: Size containment replaced elements intrinsic size</title>
4
<style>
5
  body > div, video, audio, img, canvas, svg, iframe {
6
    border: 3px solid orange;
7
    contain: size;
8
    margin-bottom: 15px;
9
    width: 0px;
10
    height: 0px;
11
    float: left;
12
    clear: both;
13
  }
14
</style>
15
<div>abc</div>
16
<video></video><br>
17
<video controls></video><br>
18
<img src="support/60x60-green.png"><br>
19
<picture>
20
<source srcset="support/60x60-green.png">
21
    <img>
22
</picture><br>
23
<canvas></canvas><br>
24
<svg></svg><br>
25
<iframe></iframe>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-004.html +28 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-004.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Size containment replaced elements intrinsic size</title>
4
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
5
<link rel="match" href="contain-size-replaced-004-ref.html">
6
<meta name=assert content="This test checks that intrinsic size of replaced elements with 'contain: size' is zero.">
7
<style>
8
  body > div, video, audio, img, canvas, svg, iframe {
9
    border: 3px solid orange;
10
    contain: size;
11
    margin-bottom: 15px;
12
    width: min-content;
13
    height: min-content;
14
    float: left;
15
    clear: both;
16
  }
17
</style>
18
<div>abc</div>
19
<video></video><br>
20
<video controls></video><br>
21
<img src="support/60x60-green.png"><br>
22
<picture>
23
<source srcset="support/60x60-green.png">
24
    <img>
25
</picture><br>
26
<canvas></canvas><br>
27
<svg></svg><br>
28
<iframe></iframe>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-005-expected.html +26 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-005-expected.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Reference: Size containment replaced elements intrinsic size</title>
4
<style>
5
  body > div, video, audio, img, canvas, svg, iframe {
6
    position: absolute;
7
    border: 3px solid orange;
8
    contain: size;
9
    margin-bottom: 15px;
10
    width: 0px;
11
    height: 0px;
12
    float: left;
13
    clear: both;
14
  }
15
</style>
16
<div>abc</div>
17
<video></video><br>
18
<video controls></video><br>
19
<img src="support/60x60-green.png"><br>
20
<picture>
21
<source srcset="support/60x60-green.png">
22
    <img>
23
</picture><br>
24
<canvas></canvas><br>
25
<svg></svg><br>
26
<iframe></iframe>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-005.html +29 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-005.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Size containment replaced elements intrinsic size</title>
4
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
5
<link rel="match" href="contain-size-replaced-005-ref.html">
6
<meta name=assert content="This test checks that intrinsic size of out-of-flow replaced elements with 'contain: size' is zero.">
7
<style>
8
  body > div, video, audio, img, canvas, svg, iframe {
9
    position: absolute;
10
    border: 3px solid orange;
11
    contain: size;
12
    margin-bottom: 15px;
13
    width: min-content;
14
    height: min-content;
15
    float: left;
16
    clear: both;
17
  }
18
</style>
19
<div>abc</div>
20
<video></video><br>
21
<video controls></video><br>
22
<img src="support/60x60-green.png"><br>
23
<picture>
24
<source srcset="support/60x60-green.png">
25
    <img>
26
</picture><br>
27
<canvas></canvas><br>
28
<svg></svg><br>
29
<iframe></iframe>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-006-expected.html +24 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-006-expected.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Reference: Size containment replaced elements intrinsic size</title>
4
<style>
5
  div, video, audio, img, canvas, svg, iframe {
6
    border: 3px solid orange;
7
    margin-bottom: 15px;
8
    width: 25px;
9
    height: 35px;
10
    float: left;
11
    clear: both;
12
  }
13
</style>
14
<div>abc</div>
15
<video></video><br>
16
<video controls></video><br>
17
<img src="support/60x60-green.png"><br>
18
<picture>
19
<source srcset="support/60x60-green.png">
20
    <img>
21
</picture><br>
22
<canvas></canvas><br>
23
<svg></svg><br>
24
<iframe></iframe>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-006.html +30 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-006.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Size containment replaced elements intrinsic size</title>
4
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
5
<link rel="match" href="contain-size-replaced-006-ref.html">
6
<meta name=assert content="This test checks that min-width/min-height of replaced elements with 'contain: size' works.">
7
<style>
8
  body > div, video, audio, img, canvas, svg, iframe {
9
    border: 3px solid orange;
10
    contain: size;
11
    margin-bottom: 15px;
12
    min-width: 25px;
13
    min-height: 35px;
14
    width: min-content;
15
    height: min-content;
16
    float: left;
17
    clear: both;
18
  }
19
</style>
20
<div>abc</div>
21
<video></video><br>
22
<video controls></video><br>
23
<img src="support/60x60-green.png"><br>
24
<picture>
25
<source srcset="support/60x60-green.png">
26
    <img>
27
</picture><br>
28
<canvas></canvas><br>
29
<svg></svg><br>
30
<iframe></iframe>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-007-expected.xht +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-007-expected.xht_sec1
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
 <head>
4
  <title>CSS Reftest Reference</title>
5
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
6
  <style type="text/css"><![CDATA[
7
  div
8
  {
9
  background-color: green;
10
  height: 100px;
11
  width: 100px;
12
  }
13
  ]]></style>
14
 </head>
15
 <body>
16
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17
  <div></div>
18
 </body>
19
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-007.html +10 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-007.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Size containment replaced elements intrinsic size</title>
4
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
5
<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#attributes-for-embedded-content-and-images">
6
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
7
<meta name=assert content="This test checks that an aspect ratio computed from width and height attributes is used even with contain: size.">
8
9
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
10
<img src="support/60x60-green.png" width="60" height="60" style="width: 100px; height: auto; contain: size;">
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-001-expected.html +13 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-001-expected.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Reference file</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<style>
6
div {
7
  display: inline-block;
8
  border: solid thick;
9
  overflow: scroll;
10
}
11
</style>
12
<p>This test passes if it has the same output as the reference.</p>
13
<div></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-001.html +17 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-001.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Size containment scrollbars</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
6
<link rel="match" href="reference/contain-size-scrollbars-001-ref.html">
7
<meta name=assert content="This test checks that the size of an element with 'contain: size' includes the scrollbars too.">
8
<style>
9
div {
10
  contain: size;
11
  display: inline-block;
12
  border: solid thick;
13
  overflow: scroll;
14
}
15
</style>
16
<p>This test passes if it has the same output as the reference.</p>
17
<div>FAIL</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-002-expected.html +13 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-002-expected.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Reference file</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<style>
6
div {
7
  display: inline-block;
8
  border: solid thick;
9
  overflow: scroll;
10
}
11
</style>
12
<p>This test passes if it has the same output as the reference.</p>
13
<div></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-002.html +17 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-002.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Size containment scrollbars</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
6
<link rel="match" href="reference/contain-size-scrollbars-001-ref.html">
7
<meta name=assert content="This test checks that the size of a flexbox container with 'contain: size' includes the scrollbars too.">
8
<style>
9
div {
10
  contain: size;
11
  display: inline-flex;
12
  border: solid thick;
13
  overflow: scroll;
14
}
15
</style>
16
<p>This test passes if it has the same output as the reference.</p>
17
<div>FAIL</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-003-expected.html +13 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-003-expected.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Reference file</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<style>
6
div {
7
  display: inline-block;
8
  border: solid thick;
9
  overflow: scroll;
10
}
11
</style>
12
<p>This test passes if it has the same output as the reference.</p>
13
<div></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-003.html +17 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-003.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Size containment scrollbars</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
6
<link rel="match" href="reference/contain-size-scrollbars-001-ref.html">
7
<meta name=assert content="This test checks that the size of a grid container with 'contain: size' includes the scrollbars too.">
8
<style>
9
div {
10
  contain: size;
11
  display: inline-grid;
12
  border: solid thick;
13
  overflow: scroll;
14
}
15
</style>
16
<p>This test passes if it has the same output as the reference.</p>
17
<div>FAIL</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-004-expected.html +25 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-004-expected.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Reference file</title>
4
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
5
<style>
6
#scroller {
7
  background: lightgreen;
8
  overflow: scroll;
9
  padding-bottom: 50px;
10
  width: 100px;
11
  height: 100px;
12
}
13
#content {
14
  background: lightblue;
15
  width: 50px;
16
  height: 130px;
17
}
18
</style>
19
20
<div id=scroller>
21
  <div id=content>
22
  </div>
23
</div>
24
25
<p>This test passes if it has the same output as the reference.</p>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-004.html +29 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-004.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Size containment scrollbars</title>
4
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
6
<link rel="match" href="reference/contain-size-scrollbars-004-ref.html">
7
<meta name=assert content="This test checks that contain:size element's content and padding are considered for scrollbars.">
8
<style>
9
#scroller {
10
  contain: size;
11
  background: lightgreen;
12
  overflow: scroll;
13
  padding-bottom: 50px;
14
  width: 100px;
15
  height: 100px;
16
}
17
#content {
18
  background: lightblue;
19
  width: 50px;
20
  height: 130px;
21
}
22
</style>
23
24
<div id=scroller>
25
  <div id=content>
26
  </div>
27
</div>
28
29
<p>This test passes if it has the same output as the reference.</p>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-001-expected.html +12 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-001-expected.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Reference file</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<style>
6
select {
7
  color: white;
8
  background: white;
9
}
10
</style>
11
<p>Test passes if it has the same output than the reference.</p>
12
<select></select>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-001.html +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-001.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Size containment on select</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
6
<link rel="match" href="reference/contain-size-select-001-ref.html">
7
<meta name=assert content="<select> elements with 'contain: size' should be treated as having no contents.">
8
<style>
9
select {
10
  color: white;
11
  background: white;
12
  contain: size;
13
}
14
</style>
15
<p>Test passes if it has the same output than the reference.</p>
16
<select>
17
  <option>AVeryLongOption</option>
18
  <option>Another Option</option>
19
</select>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-002-expected.html +12 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-002-expected.html_sec1
1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>CSS Containment Test: Reference file</title>
4
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5
<style>
6
select {
7
  color: white;
8
  background: white;
9
}
10
</style>
11
<p>Test passes if it has the same output than the reference.</p>
12
<select></select>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-002.html +26 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-002.html_sec1
1
<!DOCTYPE html>
2
<html class="reftest-wait">
3
<meta charset="utf-8">
4
<title>CSS Containment Test: Size containment on select</title>
5
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
6
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
7
<link rel="match" href="reference/contain-size-select-001-ref.html">
8
<meta name=assert content="Check that setting 'contain: size' on a <select> elements causes it to be sized as having no contents.">
9
<style>
10
select {
11
  color: white;
12
  background: white;
13
}
14
</style>
15
<p>Test passes if it has the same output than the reference.</p>
16
<select id="target">
17
  <option>AVeryLongOption</option>
18
  <option>Another Option</option>
19
</select>
20
<script>
21
  window.requestAnimationFrame( () => {
22
    target.style.contain = "size";
23
    document.documentElement.removeAttribute("class");
24
  });
25
</script>
26
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-001-expected.html +35 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-001-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
7
  <style>
8
  select {
9
    color: transparent;
10
  }
11
  .minWidth {
12
    min-width: 100px;
13
  }
14
  .width {
15
    width: 100px;
16
  }
17
  .floatLWidth {
18
    float: left;
19
    width: 100px;
20
  }
21
  </style>
22
</head>
23
<body>
24
  <select class="floatLWidth">
25
  </select>
26
  <br style="clear:both;">
27
28
  <select class="minWidth">
29
  </select>
30
  <br>
31
32
  <select class="width">
33
  </select>
34
</body>
35
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-001.html +50 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-001.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: size' on select objects should cause them to be sized as if they have no contents.</title>
6
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
7
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
8
  <link rel="match" href="contain-size-select-elem-001-ref.html">
9
  <style>
10
  select {
11
    contain: size;
12
    color: transparent;
13
  }
14
  .minWidth {
15
    min-width: 100px;
16
  }
17
  .width {
18
    width: 100px;
19
  }
20
  .floatLWidth {
21
    float: left;
22
    width: 100px;
23
  }
24
  </style>
25
</head>
26
<body>
27
  <select class="floatLWidth">
28
    <option>CSS Test: A size-contained floated select with specified width and no specified height should size itself as if it had no contents.</option>
29
    <option>a</option>
30
    <option>b</option>
31
    <option>c</option>
32
  </select>
33
  <br style="clear:both;">
34
35
  <select class="minWidth">
36
    <option>CSS Test: A size-contained select with specified min-width should size itself as if it had no contents.</option>
37
    <option>a</option>
38
    <option>b</option>
39
    <option>c</option>
40
  </select>
41
  <br>
42
43
  <select class="width">
44
    <option>CSS Test: A size-contained select with specified width should size itself as if it had no contents.</option>
45
    <option>a</option>
46
    <option>b</option>
47
    <option>c</option>
48
  </select>
49
</body>
50
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-002-expected.html +24 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-002-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
7
  <style>
8
  select {
9
    color: transparent;
10
  }
11
  .floatLBasic {
12
    float: left;
13
  }
14
  </style>
15
</head>
16
<body>
17
  <select>
18
  </select>
19
  <br>
20
21
  <select class="floatLBasic">
22
  </select>
23
</body>
24
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-002.html +35 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-002.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: size' on select objects should cause them to be sized as if they have no contents.</title>
6
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
7
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
8
  <link rel="match" href="contain-size-select-elem-002-ref.html">
9
  <style>
10
  select {
11
    contain: size;
12
    color: transparent;
13
  }
14
  .floatLBasic {
15
    float: left;
16
  }
17
  </style>
18
</head>
19
<body>
20
  <select>
21
    <option>CSS Test: A size-contained select with no specified size should size itself as if it had no contents.</option>
22
    <option>aaaaaa</option>
23
    <option>b</option>
24
    <option>c</option>
25
  </select>
26
  <br>
27
28
  <select class="floatLBasic">
29
    <option>CSS Test: A size-contained floated select with no specified size should size itself as if it had no contents.</option>
30
    <option>a</option>
31
    <option>b</option>
32
    <option>c</option>
33
  </select>
34
</body>
35
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-003-expected.html +35 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-003-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
7
  <style>
8
  select {
9
    color: transparent;
10
  }
11
  .minWidth {
12
    min-width: 100px;
13
  }
14
  .width {
15
    width: 100px;
16
  }
17
  .floatLWidth {
18
    float: left;
19
    width: 100px;
20
  }
21
  </style>
22
</head>
23
<body>
24
  <select multiple class="floatLWidth">
25
  </select>
26
  <br style="clear:both;">
27
28
  <select multiple class="minWidth">
29
  </select>
30
  <br>
31
32
  <select multiple class="width">
33
  </select>
34
</body>
35
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-003.html +44 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-003.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: size' on select objects should cause them to be sized as if they have no contents.</title>
6
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
7
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
8
  <link rel="match" href="contain-size-select-elem-003-ref.html">
9
  <style>
10
  select {
11
    contain: size;
12
    color: transparent;
13
  }
14
  .minWidth {
15
    min-width: 100px;
16
  }
17
  .width {
18
    width: 100px;
19
  }
20
  .floatLWidth {
21
    float: left;
22
    width: 100px;
23
  }
24
  </style>
25
</head>
26
<body>
27
  <select multiple class="floatLWidth">
28
    <option>CSS Test: A size-contained floated select with specified width and no specified height should size itself as if it had no contents.</option>
29
    <option>a</option>
30
  </select>
31
  <br style="clear:both;">
32
33
  <select multiple class="minWidth">
34
    <option>CSS Test: A size-contained select with specified min-width should size itself as if it had no contents.</option>
35
    <option>a</option>
36
  </select>
37
  <br>
38
39
  <select multiple class="width">
40
    <option>CSS Test: A size-contained select with specified width should size itself as if it had no contents.</option>
41
    <option>a</option>
42
  </select>
43
</body>
44
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-004-expected.html +24 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-004-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
7
  <style>
8
  select {
9
    color: transparent;
10
  }
11
  .floatLBasic {
12
    float: left;
13
  }
14
  </style>
15
</head>
16
<body>
17
  <select multiple>
18
  </select>
19
  <br>
20
21
  <select multiple class="floatLBasic">
22
  </select>
23
</body>
24
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-004.html +31 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-004.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: size' on select objects should cause them to be sized as if they have no contents.</title>
6
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
7
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
8
  <link rel="match" href="contain-size-select-elem-004-ref.html">
9
  <style>
10
  select {
11
    contain: size;
12
    color: transparent;
13
  }
14
  .floatLBasic {
15
    float: left;
16
  }
17
  </style>
18
</head>
19
<body>
20
  <select multiple>
21
    <option>CSS Test: A size-contained select with no specified size should size itself as if it had no contents.</option>
22
    <option>aaaaaa</option>
23
  </select>
24
  <br>
25
26
  <select multiple class="floatLBasic">
27
    <option>CSS Test: A size-contained floated select with no specified size should size itself as if it had no contents.</option>
28
    <option>a</option>
29
  </select>
30
</body>
31
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-005-expected.html +42 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-005-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
7
  <style>
8
  select {
9
    color: transparent;
10
    /* We make scrollbars transparent because some <option> elements can cause
11
       overflow, which can cause scrollbars to be active in the test and
12
       inactive in the reference.  But the test only cares about the sizing. */
13
    scrollbar-color: transparent transparent;
14
  }
15
  .fsMedium {
16
    /* custom styling for some select elements, which is allowed to influence
17
       their size (in the same way that it influences the size of an empty
18
       select element): */
19
    font-size: 10px;
20
  }
21
  </style>
22
</head>
23
<body>
24
  <select multiple                 ></select>
25
  <select multiple size="1"        ></select>
26
  <select multiple class="fsMedium"></select>
27
28
  <select multiple                 ></select>
29
  <select multiple size="1"        ></select>
30
  <select multiple class="fsMedium"></select>
31
32
  <br><br>
33
34
  <select multiple                 ></select>
35
  <select multiple size="1"        ></select>
36
  <select multiple class="fsMedium"></select>
37
38
  <select multiple                 ></select>
39
  <select multiple size="1"        ></select>
40
  <select multiple class="fsMedium"></select>
41
</body>
42
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-005.html +54 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-005.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: size' on select objects should cause them to be sized as if they have no contents.</title>
6
  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
7
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
8
  <link rel="match" href="contain-size-select-elem-005-ref.html">
9
  <style>
10
  select {
11
    contain: size;
12
    color: transparent;
13
    /* We make scrollbars transparent because some <option> elements can cause
14
       overflow, which can cause scrollbars to be active in the test and
15
       inactive in the reference.  But the test only cares about the sizing. */
16
    scrollbar-color: transparent transparent;
17
  }
18
  .fsMedium {
19
    /* custom styling for some select elements, which is allowed to influence
20
       their size (in the same way that it influences the size of an empty
21
       select element): */
22
    font-size: 10px;
23
  }
24
  .fsSmall {
25
    /* custom styling for some option elements (which would make their parent
26
       select elem shorter, except for the fact that it's size-contained): */
27
    font-size: 6px;
28
  }
29
  </style>
30
</head>
31
<body>
32
  <!-- No contents: -->
33
  <select multiple                 ></select>
34
  <select multiple size="1"        ></select>
35
  <select multiple class="fsMedium"></select>
36
37
  <!-- Empty option: -->
38
  <select multiple                 ><option></option></select>
39
  <select multiple size="1"        ><option></option></select>
40
  <select multiple class="fsMedium"><option></option></select>
41
42
  <br><br>
43
44
  <!-- Nonempty option: -->
45
  <select multiple                 ><option>X</option></select>
46
  <select multiple size="1"        ><option>X</option></select>
47
  <select multiple class="fsMedium"><option>X</option></select>
48
49
  <!-- Nonempty option with custom font-size: -->
50
  <select multiple                 ><option class="fsSmall">X</option></select>
51
  <select multiple size="1"        ><option class="fsSmall">X</option></select>
52
  <select multiple class="fsMedium"><option class="fsSmall">X</option></select>
53
</body>
54
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-table-caption-001-expected.html +18 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-table-caption-001-expected.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Reftest Reference</title>
6
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
7
  <style>
8
  caption {
9
    border: 1em solid green;
10
  }
11
  </style>
12
</head>
13
<body>
14
  <table>
15
    <caption></caption>
16
  </table>
17
</body>
18
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-table-caption-001.html +32 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-table-caption-001.html_sec1
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>CSS Test: 'contain: size' on table captions should cause them to be sized as if they had no contents.</title>
6
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
7
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
8
  <link rel="match" href="contain-size-table-caption-001-ref.html">
9
  <style>
10
  .contain {
11
    contain:size;
12
  }
13
  .innerContents {
14
    height: 100px;
15
    width: 100px;
16
    color: transparent;
17
  }
18
  caption {
19
    border: 1em solid green;
20
  }
21
  </style>
22
</head>
23
<body>
24
  <table>
25
    <caption class="contain">
26
      <div class="innerContents">
27
        inner
28
      </div>
29
    </caption>
30
  </table>
31
</body>
32
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-001-expected.html +20 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-001-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  div
11
    {
12
      background-color: green;
13
      height: 40px;
14
      width: 206px;
15
    }
16
  </style>
17
18
  <p>Test passes if there is a short horizontal green stripe and <strong>no red</strong>.
19
20
  <div></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-001.html +40 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-001.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: strict' and table caption</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#contain-property">
9
  <link rel="match" href="reference/contain-paint-size-001-ref.html">
10
11
  <meta name="flags" content="">
12
13
  <style>
14
  table
15
    {
16
      table-layout: fixed;
17
      width: 206px;
18
    }
19
20
  caption
21
    {
22
      background-color: red;
23
      border: green solid 1em;
24
      color: red;
25
      contain: strict;
26
      font-size: 20px;
27
    }
28
  </style>
29
30
  <p>Test passes if there is a short horizontal green stripe and <strong>no red</strong>.
31
32
  <table>
33
34
  <caption>FAIL FAIL FAIL FAIL FAIL FAIL</caption>
35
36
    <tr><td>&nbsp;<td>&nbsp;
37
38
    <tr><td>&nbsp;<td>&nbsp;
39
40
  </table>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-002-expected.html +20 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-002-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  div
11
    {
12
      background-color: green;
13
      height: 40px;
14
      width: 206px;
15
    }
16
  </style>
17
18
  <p>Test passes if there is a short horizontal green stripe and <strong>no red</strong>.
19
20
  <div></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-002.html +27 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-002.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: strict' and block box</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#contain-property">
9
  <link rel="match" href="reference/contain-paint-size-001-ref.html">
10
11
  <meta name="flags" content="">
12
13
  <style>
14
  div
15
    {
16
      background-color: red;
17
      border: green solid 1em;
18
      color: red;
19
      contain: strict;
20
      font-size: 20px;
21
      width: 166px;
22
    }
23
  </style>
24
25
  <p>Test passes if there is a short horizontal green stripe and <strong>no red</strong>.
26
27
  <div>FAIL FAIL FAIL FAIL FAIL FAIL</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-003-expected.html +37 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-003-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  div
11
    {
12
      color: transparent;
13
      float: left;
14
      font-size: 16px;
15
      padding: 8px;
16
    }
17
18
  div#blue-rectangle
19
    {
20
      background-color: blue;
21
      margin: 8px;
22
      width: 6em;
23
    }
24
25
  div#orange-rectangle
26
    {
27
      background-color: orange;
28
      height: 0px;
29
      width: 12em;
30
    }
31
  </style>
32
33
  <p>Test passes if the orange rectangle and blue rectangle do not overlap.
34
35
  <div id="blue-rectangle">Some text in a blue rectangle.</div>
36
37
  <div id="orange-rectangle">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-003.html +42 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-003.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: a block with 'contain: strict' alongside a float</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#contain-property">
9
  <link rel="match" href="reference/contain-layout-size-003-ref.html">
10
11
  <meta name="flags" content="">
12
13
  <style>
14
  div
15
    {
16
      color: transparent;
17
      font-size: 16px;
18
      padding: 8px;
19
    }
20
21
  div#floated-left
22
    {
23
      background-color: blue;
24
      float: left;
25
      margin: 8px;
26
      width: 6em;
27
    }
28
29
  div#with-contain-strict
30
    {
31
      background-color: orange;
32
      width: 12em;
33
34
      contain: strict;
35
    }
36
  </style>
37
38
  <p>Test passes if the orange rectangle and blue rectangle do not overlap.
39
40
  <div id="floated-left">Some text in a blue rectangle.</div>
41
42
  <div id="with-contain-strict">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-011-expected.html +23 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-011-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  p
11
    {
12
      margin-top: 1.5em;
13
    }
14
15
  div
16
    {
17
      font-size: 3em;
18
    }
19
  </style>
20
21
  <p>Test passes if there is the number 26.
22
23
  <div>26</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-011.html +64 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-011.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: strict' does not turn on style containment</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
9
  <link rel="match" href="reference/contain-strict-011-ref.html">
10
11
  <meta name="flags" content="">
12
  <meta name="assert" content="'contain: strict' does not turn on style containment. So, in this test, the counter of spans should not be reset and must not be reset.">
13
14
  <style>
15
  body
16
    {
17
      counter-reset: counter-of-span 17;
18
    }
19
20
    /*
21
    This creates a new counter identified as "counter-of-span"
22
    and initially sets such counter to 17 (an entirely
23
    arbitrary number)
24
    */
25
26
  div
27
    {
28
      contain: strict;
29
    }
30
31
  div > span
32
    {
33
      background-color: yellow;
34
      color: red;
35
      counter-increment: counter-of-span 3;
36
    }
37
38
    /*
39
    This increments the counter identified as "counter-of-span"
40
    of the step value of 3 (an entirely arbitrary number) each
41
    and every time there is a <span> child within the subtree
42
    of div
43
    */
44
45
  p#test::after
46
    {
47
      content: counter(counter-of-span);
48
      font-size: 3em;
49
    }
50
51
    /*
52
    Now, the generated content is set to the current
53
    value of the counter identified as "counter-of-span":
54
    17 + 3 * 3 == 26
55
    */
56
  </style>
57
58
  <body>
59
60
  <div><span>FAIL1</span> <span>FAIL2</span> <span>FAIL3</span></div>
61
62
  <p id="pass-fail-conditions-sentence">Test passes if there is the number 26.
63
64
  <p id="test">
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-baseline-001-expected.html +18 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-baseline-001-expected.html_sec1
1
<!doctype html>
2
<html lang=en>
3
<meta charset=utf-8>
4
<title>CSS test reference</title>
5
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
<style>
7
div {
8
  display: inline-block;
9
  height: 5px;
10
  background: blue;
11
  width: 50px;
12
  color: transparent;
13
  font-size: 100px;
14
}
15
</style>
16
17
<p>Test passes if there are two, not one, blue lines below.</p>
18
<div></div><div>a</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-baseline-001.html +24 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-baseline-001.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test: style containment and baselines</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
  <meta name=assert content="contain:style does not suppress baseline alignment">
7
  <link rel="match" href="reference/contain-baseline-ref.html">
8
  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-style">
9
  <meta name="flags" content="">
10
11
<style>
12
div {
13
  display: inline-block;
14
  height: 5px;
15
  background: blue;
16
  width: 50px;
17
  contain: style;
18
  color: transparent;
19
  font-size: 100px;
20
}
21
</style>
22
23
<p>Test passes if there are two, not one, blue lines below.</p>
24
<div></div><div>a</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-001-expected.html +36 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-001-expected.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test reference</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
<style>
7
article {
8
  columns: 2 1ch;
9
  column-gap: 0;
10
  float: left;
11
  font-family: monospace;
12
  margin-right: 3em;
13
}
14
div {
15
  page-break-inside: avoid;
16
  break-inside: avoid;
17
}
18
</style>
19
20
<p>Test passes if there are two identical blocks “A” letters below.
21
<article>
22
  <div>
23
  A<br>
24
  A<br>
25
  A<br>
26
  A
27
  <div>
28
</article>
29
<article>
30
  <div>
31
  A<br>
32
  A<br>
33
  A<br>
34
  A
35
  <div>
36
</article>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-001.html +48 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-001.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test: style containment and break-inside:avoid</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
  <meta name=flags content="">
7
  <meta name=assert content="style containment is (no longer) supposed to have any effect on the break-inside property">
8
  <link rel="match" href="reference/contain-style-breaks-001-ref.html">
9
  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-style">
10
11
<style>
12
article {
13
  columns: 2 1ch;
14
  column-gap: 0;
15
  float: left;
16
  font-family: monospace;
17
  margin-right: 3em;
18
}
19
div {
20
  page-break-inside: avoid;
21
  break-inside: avoid;
22
}
23
#test > div {
24
  contain: style;
25
}
26
</style>
27
28
<p>Test passes if there are two identical blocks “A” letters below.
29
<article id=ref>
30
  <div>
31
  A<br>
32
  A<br>
33
  A<br>
34
  A
35
  <div>
36
</article>
37
<article id=test>
38
  <div>
39
  A<br>
40
  A<br>
41
  A<br>
42
  A
43
  <div>
44
</article>
45
<!--
46
Having two blocks to avoid making browsers that don't support the property at all fail.
47
Since containment is supposed to have no effect, failing such browsers would not be useful.
48
-->
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-002-expected.html +36 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-002-expected.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test reference</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
<style>
7
article {
8
  columns: 2 1ch;
9
  column-gap: 0;
10
  float: left;
11
  font-family: monospace;
12
  margin-right: 3em;
13
}
14
div {
15
  page-break-inside: avoid;
16
  break-inside: avoid;
17
}
18
</style>
19
20
<p>Test passes if there are two identical blocks “A” letters below.
21
<article>
22
  <div>
23
  A<br>
24
  A<br>
25
  A<br>
26
  A
27
  <div>
28
</article>
29
<article>
30
  <div>
31
  A<br>
32
  A<br>
33
  A<br>
34
  A
35
  <div>
36
</article>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-002.html +52 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-002.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test: style containment and break-inside:avoid</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
  <meta name=flags content="">
7
  <meta name=assert content="style containment is not (any longer) supposed to have any effect on the break-inside property. Same as -001, applying containment on the parent.">
8
  <link rel="match" href="reference/contain-style-breaks-001-ref.html">
9
  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-style">
10
11
<style>
12
article {
13
  columns: 2 1ch;
14
  column-gap: 0;
15
  float: left;
16
  font-family: monospace;
17
  margin-right: 3em;
18
}
19
div > div {
20
  page-break-inside: avoid;
21
  break-inside: avoid;
22
}
23
#test > div {
24
  contain: style;
25
}
26
</style>
27
28
<p>Test passes if there are two identical blocks “A” letters below.
29
<article id=ref>
30
  <div>
31
    <div>
32
    A<br>
33
    A<br>
34
    A<br>
35
    A
36
    <div>
37
  </div>
38
</article>
39
<article id=test>
40
  <div>
41
    <div>
42
    A<br>
43
    A<br>
44
    A<br>
45
    A
46
    <div>
47
  </div>
48
</article>
49
<!--
50
Having two blocks to avoid making browsers that don't support the property at all fail.
51
Since containment is supposed to have no effect, failing such browsers would not be useful.
52
-->
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-003-expected.html +36 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-003-expected.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test reference</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
<style>
7
article {
8
  columns: 2 1ch;
9
  column-gap: 0;
10
  float: left;
11
  font-family: monospace;
12
  margin-right: 3em;
13
}
14
div {
15
  page-break-inside: avoid;
16
  break-inside: avoid;
17
}
18
</style>
19
20
<p>Test passes if there are two identical blocks “A” letters below.
21
<article>
22
  <div>
23
  A<br>
24
  A<br>
25
  A<br>
26
  A
27
  <div>
28
</article>
29
<article>
30
  <div>
31
  A<br>
32
  A<br>
33
  A<br>
34
  A
35
  <div>
36
</article>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-003.html +52 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-003.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test: style containment and break-inside:avoid</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
  <meta name=flags content="">
7
  <meta name=assert content="style containment is not (any longer) supposed to have any effect on the break-inside property. Same as -001, applying break-inside on the parent.">
8
  <link rel="match" href="reference/contain-style-breaks-001-ref.html">
9
  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-style">
10
11
<style>
12
article {
13
  columns: 2 1ch;
14
  column-gap: 0;
15
  float: left;
16
  font-family: monospace;
17
  margin-right: 3em;
18
}
19
article > div {
20
  page-break-inside: avoid;
21
  break-inside: avoid;
22
}
23
#test div > div {
24
  contain: style;
25
}
26
</style>
27
28
<p>Test passes if there are two identical blocks “A” letters below.
29
<article id=ref>
30
  <div>
31
    <div>
32
    A<br>
33
    A<br>
34
    A<br>
35
    A
36
    <div>
37
  </div>
38
</article>
39
<article id=test>
40
  <div>
41
    <div>
42
    A<br>
43
    A<br>
44
    A<br>
45
    A
46
    <div>
47
  </div>
48
</article>
49
<!--
50
Having two blocks to avoid making browsers that don't support the property at all fail.
51
Since containment is supposed to have no effect, failing such browsers would not be useful.
52
-->
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-004-expected.html +30 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-004-expected.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test reference</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
<style>
7
article {
8
  columns: 2 1ch;
9
  column-gap: 0;
10
  float: left;
11
  font-family: monospace;
12
  margin-right: 3em;
13
  line-height: 1;
14
  height: 4em;
15
  column-fill: auto;
16
}
17
div:last-of-type {
18
  break-before: column;
19
}
20
</style>
21
22
<p>Test passes if there are two identical blocks “A” letters below.
23
<article>
24
  <div>A<br>A</div>
25
  <div>A<br>A</div>
26
</article>
27
<article>
28
  <div>A<br>A</div>
29
  <div>A<br>A</div>
30
</article>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-004.html +46 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-004.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test: style containment and break-before</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
  <meta name=flags content="">
7
  <meta name=assert content="style containment is not (any longer) supposed to have any effect on the break-before property.">
8
  <link rel="match" href="reference/contain-style-breaks-004-ref.html">
9
  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-style">
10
11
<style>
12
article {
13
  columns: 2 1ch;
14
  column-gap: 0;
15
  float: left;
16
  font-family: monospace;
17
  margin-right: 3em;
18
  line-height: 1;
19
  height: 4em;
20
  column-fill: auto;
21
}
22
div > div:last-of-type {
23
  break-before: column;
24
}
25
#test > div {
26
  contain: style;
27
}
28
</style>
29
30
<p>Test passes if there are two identical blocks “A” letters below.
31
<article id=ref>
32
  <div>
33
    <div>A<br>A</div>
34
    <div>A<br>A</div>
35
  </div>
36
</article>
37
<article id=test>
38
  <div>
39
    <div>A<br>A</div>
40
    <div>A<br>A</div>
41
  </div>
42
</article>
43
<!--
44
Having two blocks to avoid making browsers that don't support the property at all fail.
45
Since containment is supposed to have no effect, failing such browsers would not be useful.
46
-->
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-005-expected.html +30 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-005-expected.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test reference</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
<style>
7
article {
8
  columns: 2 1ch;
9
  column-gap: 0;
10
  float: left;
11
  font-family: monospace;
12
  margin-right: 3em;
13
  line-height: 1;
14
  height: 4em;
15
  column-fill: auto;
16
}
17
div:last-of-type {
18
  break-before: column;
19
}
20
</style>
21
22
<p>Test passes if there are two identical blocks “A” letters below.
23
<article>
24
  <div>A<br>A</div>
25
  <div>A<br>A</div>
26
</article>
27
<article>
28
  <div>A<br>A</div>
29
  <div>A<br>A</div>
30
</article>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-005.html +46 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-005.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test: style containment and break-after</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
  <meta name=flags content="">
7
  <meta name=assert content="style containment is not (any longer) supposed to have any effect on the break-after property.">
8
  <link rel="match" href="reference/contain-style-breaks-004-ref.html">
9
  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-style">
10
11
<style>
12
article {
13
  columns: 2 1ch;
14
  column-gap: 0;
15
  float: left;
16
  font-family: monospace;
17
  margin-right: 3em;
18
  line-height: 1;
19
  height: 4em;
20
  column-fill: auto;
21
}
22
div > div:first-of-type {
23
  break-after: column;
24
}
25
#test > div {
26
  contain: style;
27
}
28
</style>
29
30
<p>Test passes if there are two identical blocks “A” letters below.
31
<article id=ref>
32
  <div>
33
    <div>A<br>A</div>
34
    <div>A<br>A</div>
35
  </div>
36
</article>
37
<article id=test>
38
  <div>
39
    <div>A<br>A</div>
40
    <div>A<br>A</div>
41
  </div>
42
</article>
43
<!--
44
Having two blocks to avoid making browsers that don't support the property at all fail.
45
Since containment is supposed to have no effect, failing such browsers would not be useful.
46
-->
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-001-expected.html +18 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-001-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  div
11
    {
12
      font-size: 3em;
13
    }
14
  </style>
15
16
  <p>Test passes if there is the digit 5.
17
18
  <div>5</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-001.html +59 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-001.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: style' and counter</title>
6
7
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-style">
8
  <link rel="match" href="reference/contain-style-counters-001-ref.html">
9
10
  <meta content="This test checks that when an element has 'contain: style', then counters which may be affecting its subtree are reset to 0 for such scope." name="assert">
11
  <meta name="flags" content="">
12
13
  <style>
14
  div#create-counter
15
    {
16
      counter-reset: counter-of-span 9;
17
    }
18
19
    /*
20
    This creates a new counter identified as "counter-of-span"
21
    and initially sets such counter to 9 (an entirely
22
    arbitrary number).
23
    */
24
25
  div#test
26
    {
27
      contain: style;
28
      font-size: 3em;
29
    }
30
31
  div#test span
32
    {
33
      counter-increment: counter-of-span 5;
34
    }
35
36
    /*
37
    This increments the counter identified as "counter-of-span"
38
    of the step value of 5 (an entirely arbitrary number) each
39
    and every time there is a <span> descendant within the subtree
40
    of div#test
41
    */
42
43
  div#test span::after
44
    {
45
      content: counter(counter-of-span);
46
    }
47
    /*
48
    Now, the generated content after the span is set to the
49
    current value of the counter identified as "counter-of-span"
50
    */
51
52
  </style>
53
54
55
  <p>Test passes if there is the digit 5.
56
57
  <div id="create-counter"></div>
58
59
  <div id="test"><span></span></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-002-expected.html +18 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-002-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  div
11
    {
12
      font-size: 3em;
13
    }
14
  </style>
15
16
  <p>Test passes if there is the digit 5.
17
18
  <div>5</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-002.html +68 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-002.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: style' and counter (with 'display: contents')</title>
6
7
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-style">
8
  <link rel="match" href="reference/contain-style-counters-001-ref.html">
9
10
  <meta content="This test checks that when an element has 'contain: style', then counters which may be affecting its subtree are reset to 0 for such scope. In this test, the div#test does not generate a principal box because of 'display: contents'. Despite that particular condition, 'contain: style' will have an effect on div#test." name="assert">
11
  <meta name="flags" content="">
12
13
  <style>
14
  div#create-counter
15
    {
16
      counter-reset: counter-of-span 9;
17
    }
18
19
    /*
20
    This creates a new counter identified as "counter-of-span"
21
    and initially sets such counter to 9 (an entirely
22
    arbitrary number).
23
    */
24
25
  div#test
26
    {
27
      contain: style;
28
      display: contents;
29
      font-size: 3em;
30
    }
31
32
    /*
33
    Other types of containment (size, layout, paint) have no
34
    effect on box that do not generate a principal box which
35
    is the case here with div#test because of 'display: contents'.
36
    But in this test, 'contain: style' will apply and will
37
    have a rendering effect on the counter.
38
    */
39
40
  div#test span
41
    {
42
      counter-increment: counter-of-span 5;
43
    }
44
45
    /*
46
    This increments the counter identified as "counter-of-span"
47
    of the step value of 5 (an entirely arbitrary number) each
48
    and every time there is a <span> descendant within the subtree
49
    of div#test
50
    */
51
52
  div#test span::after
53
    {
54
      content: counter(counter-of-span);
55
    }
56
    /*
57
    Now, the generated content after the span is set to the
58
    current value of the counter identified as "counter-of-span"
59
    */
60
61
  </style>
62
63
64
  <p>Test passes if there is the digit 5.
65
66
  <div id="create-counter"></div>
67
68
  <div id="test"><span></span></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-003-expected.html +18 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-003-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
9
  <style>
10
  div
11
    {
12
      font-size: 3em;
13
    }
14
  </style>
15
16
  <p>Test passes if there is the number 20.
17
18
  <div>20</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-003.html +70 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-003.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: style' for counters (span children of &lt;body&gt;)</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-style">
9
  <link rel="match" href="reference/contain-style-counters-003-ref.html">
10
11
  <meta name="flags" content="">
12
13
  <style>
14
  body
15
    {
16
      counter-reset: counter-of-span 17;
17
    }
18
19
    /*
20
    This creates a new counter identified as "counter-of-span"
21
    and initially sets such counter to 17 (an entirely
22
    arbitrary number)
23
    */
24
25
  body
26
    {
27
      contain: style;
28
    }
29
30
    /*
31
    This will reset the counter to 0.
32
    */
33
34
  body span
35
    {
36
      counter-increment: counter-of-span 4;
37
    }
38
39
    /*
40
    This increments the counter identified as "counter-of-span"
41
    of the step value of 4 (an entirely arbitrary number) each
42
    and every time there is a <span> descendant within the subtree
43
    of body
44
    */
45
46
  div
47
    {
48
      font-size: 3em;
49
    }
50
51
  div::after
52
    {
53
      content: counter(counter-of-span);
54
    }
55
56
    /*
57
    Now, the generated content after the span is set to the
58
    current value of the counter identified as "counter-of-span"
59
    */
60
  </style>
61
62
  <body>
63
64
  <span></span> <span></span> <span></span> <span></span> <span></span>
65
66
  <!-- 5 span above -->
67
68
  <p>Test passes if there is the number 20.
69
70
  <div></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-004-expected.html +18 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-004-expected.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Reference Test</title>
6
7
  <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
8
9
  <style>
10
  div
11
    {
12
      font-size: 3em;
13
    }
14
  </style>
15
16
  <p>Test passes if there is the number 0.
17
18
  <div>0</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-004.html +72 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-004.html_sec1
1
<!DOCTYPE html>
2
3
  <meta charset="UTF-8">
4
5
  <title>CSS Containment Test: 'contain: style' for counters (span descendants of &lt;body&gt;)</title>
6
7
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-style">
9
  <link rel="match" href="reference/contain-style-counters-004-ref.html">
10
11
  <meta name="flags" content="">
12
13
  <style>
14
  body
15
    {
16
      counter-reset: counter-of-span 13;
17
    }
18
19
    /*
20
    This creates a new counter identified as "counter-of-span"
21
    and initially sets such counter to 13 (an entirely
22
    arbitrary number)
23
    */
24
25
  body
26
    {
27
      contain: style;
28
    }
29
30
    /*
31
    This will reset the counter to 0.
32
    */
33
34
  body span
35
    {
36
      counter-increment: counter-of-span 5;
37
    }
38
39
    /*
40
    This increments the counter identified as "counter-of-span"
41
    of the step value of 5 (an entirely arbitrary number) each
42
    and every time there is a <span> descendant within the subtree
43
    of body
44
    */
45
46
  div
47
    {
48
      font-size: 3em;
49
    }
50
51
  div::after
52
    {
53
      content: counter(counter-of-span);
54
    }
55
56
    /*
57
    Now, the generated content after the span is set to the
58
    current value of the counter identified as "counter-of-span"
59
    */
60
  </style>
61
62
  <body>
63
64
  <p> <span></span> <span></span> <span></span> <span></span>
65
66
  <!-- 4 span inside the <p>. However, since div isn't a sibling of spans,
67
       it creates a new counter.
68
  -->
69
70
  <p>Test passes if there is the number 0.
71
72
  <div></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-subgrid-001-expected.html +35 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-subgrid-001-expected.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain reference: layout/paint containment on subgrid</title>
5
  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
6
7
<style>
8
.grid {
9
  display: grid;
10
  width: 40px;
11
  height: 40px;
12
  grid: [a] repeat(2,15px) [b] / [a] repeat(2,15px) [b];
13
  gap: 10px;
14
}
15
16
.subgrid {
17
  display: grid;
18
  grid: none;
19
  background: lightgrey;
20
  grid-area:1/1/3/3;
21
}
22
23
.layout { contain: layout; }
24
.paint { contain: paint; }
25
26
.inner {
27
  background: blue;
28
  grid-area:a/a/b/b;
29
}
30
</style>
31
32
<div class="grid"><div class="subgrid layout"><div class="inner"></div></div></div>
33
<div class="grid"><div class="subgrid paint"><div class="inner"></div></div></div>
34
<div class="grid"><div class="subgrid layout"><div class="inner"></div></div></div>
35
<div class="grid"><div class="subgrid paint"><div class="inner"></div></div></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-subgrid-001.html +45 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-subgrid-001.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test: layout/paint containment on subgrid</title>
5
  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
6
  <meta name=assert content="layout/paint containment inhibits subgrid">
7
  <link rel="match" href="reference/contain-subgrid-001.html">
8
  <link rel=help href="https://drafts.csswg.org/css-contain/#containment-layout">
9
  <link rel=help href="https://drafts.csswg.org/css-contain/#containment-paint">
10
  <link rel=help href="https://drafts.csswg.org/css-grid-2/">
11
12
<style>
13
.grid {
14
  display: grid;
15
  width: 40px;
16
  height: 40px;
17
  grid: [a] repeat(2,15px) [b] / [a] repeat(2,15px) [b];
18
  gap: 10px;
19
}
20
21
.subgrid {
22
  display: grid;
23
  grid: subgrid;
24
  background: lightgrey;
25
  grid-area:1/1/3/3;
26
}
27
28
.layout { contain: layout; }
29
.paint { contain: paint; }
30
31
.inner {
32
  background: blue;
33
  grid-area:a/a/b/b;
34
}
35
.p {
36
  place-self: start;
37
  width:100%;
38
  height:100%;
39
}
40
</style>
41
42
<div class="grid"><div class="subgrid layout"><div class="inner"></div></div></div>
43
<div class="grid"><div class="subgrid paint"><div class="inner"></div></div></div>
44
<div class="grid"><div class="subgrid layout"><div class="inner p"></div></div></div>
45
<div class="grid"><div class="subgrid paint"><div class="inner p"></div></div></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-001-expected.html +17 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-001-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>CSS Content Visibility: container (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
#container {
10
  width: 150px;
11
  height: 150px;
12
  background: lightblue;
13
}
14
</style>
15
16
<div id=container></div>
17
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-001.html +45 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-001.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>CSS Content Visibility: hidden does not paint</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="container-ref.html">
8
<meta name="assert" content="content-visibility subtrees are not painted">
9
10
<style>
11
#container {
12
  content-visibility: hidden;
13
  width: 150px;
14
  height: 150px;
15
  background: lightblue;
16
}
17
#child {
18
  width: 50px;
19
  height: 50px;
20
  background: lightgreen;
21
}
22
.abspos { position: absolute; }
23
.relpos { position: relative; }
24
.fixedpos { position: fixed; }
25
.start { top: 0; left: 0; }
26
.mid { top: 10px; left: 10px; }
27
.end { bottom: 0; right: 0; }
28
.zindex { z-index: 1; }
29
.small { width: 10px; height: 10px; background: blue; }
30
.medium { width: 20px; height: 20px; background: green; }
31
.large { width: 30px; height: 30px; background: pink; }
32
</style>
33
34
<div id=container>
35
  Text.
36
  <div id=child></div>
37
  <span>inline child</span>
38
  <div class="abspos start small"></div>
39
  <div class="relpos mid medium"></div>
40
  <div class="fixedpos end large"></div>
41
  <div class=relpos>
42
    <div class="abspos mid small zindex"></div>
43
  </div>
44
</div>
45
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-002-expected.html +25 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-002-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>CSS Content Visibility: container with child and text (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
#container {
10
  width: 150px;
11
  height: 150px;
12
  background: lightblue;
13
}
14
#child {
15
  width: 50px;
16
  height: 50px;
17
  background: lightgreen;
18
}
19
</style>
20
21
<div id=container>
22
  Text.
23
  <div id=child></div>
24
</div>
25
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-002.html +42 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-002.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>CSS Content Visibility: hidden starts painting when removed</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="container-with-child-ref.html">
8
<meta name="assert" content="content-visibility subtrees start painting when hidden is removed">
9
10
<script src="/common/reftest-wait.js"></script>
11
12
<style>
13
#container {
14
  width: 150px;
15
  height: 150px;
16
  background: lightblue;
17
}
18
.hidden {
19
  content-visibility: hidden;
20
}
21
#child {
22
  width: 50px;
23
  height: 50px;
24
  background: lightgreen;
25
}
26
</style>
27
28
<div id=container class=hidden>
29
  Text.
30
  <div id=child></div>
31
</div>
32
33
<script>
34
function runTest() {
35
  const container = document.getElementById("container");
36
  container.classList.remove("hidden");
37
  requestAnimationFrame(takeScreenshot);
38
}
39
40
window.onload = runTest;
41
</script>
42
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-003-expected.html +20 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-003-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>CSS Content Visibility: hidden container is not breakable (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
#parent {
10
  width: 100px;
11
}
12
#container {
13
  border-top: solid green 50px;
14
  border-bottom: solid green 50px;
15
}
16
</style>
17
18
<div id="parent">
19
  <div id="container"></div>
20
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-003.html +27 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-003.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>CSS Content Visibility: hidden container is not breakable</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="content-visibility-003-ref.html">
8
<meta name="assert" content="content-visibility container is not breakable">
9
10
<style>
11
#container {
12
  border-top: solid green 50px;
13
  border-bottom: solid green 50px;
14
  content-visibility: hidden;
15
}
16
#parent {
17
  columns: 2;
18
  height: 0px;
19
  width: 200px;
20
  column-gap: 0;
21
}
22
</style>
23
24
<div id="parent">
25
  <div id="container">Text</div>
26
</div>
27
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-004-expected.html +9 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-004-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>CSS Content Visibility: hidden container in an iframe (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<iframe></iframe>
9
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-004.html +20 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-004.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>CSS Content Visibility: hidden container in an iframe</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="content-visibility-004-ref.html">
8
<meta name="assert" content="content-visibility makes iframe contents hidden">
9
10
<iframe id="frame" srcdoc='
11
  <style>
12
  #container {
13
    width: 100px;
14
    height: 100px;
15
    content-visibility: hidden;
16
  }
17
  </style>
18
  <div id="container">Lorem</div>
19
'></iframe>
20
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-005-expected.html +17 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-005-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>CSS Content Visibility: container (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
#container {
10
  width: 150px;
11
  height: 150px;
12
  background: lightblue;
13
}
14
</style>
15
16
<div id=container></div>
17
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-005.html +42 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-005.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>CSS Content Visibility: hidden stops painting when added</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="container-ref.html">
8
<meta name="assert" content="content-visibility subtrees stop painting when hidden is added">
9
10
<script src="/common/reftest-wait.js"></script>
11
12
<style>
13
#container {
14
  width: 150px;
15
  height: 150px;
16
  background: lightblue;
17
}
18
.hidden {
19
  content-visibility: hidden;
20
}
21
#child {
22
  width: 50px;
23
  height: 50px;
24
  background: lightgreen;
25
}
26
</style>
27
28
<div id=container>
29
  Text.
30
  <div id=child></div>
31
</div>
32
33
<script>
34
function runTest() {
35
  const container = document.getElementById("container");
36
  container.classList.add("hidden");
37
  requestAnimationFrame(takeScreenshot);
38
}
39
40
window.onload = runTest;
41
</script>
42
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-006-expected.html +17 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-006-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>CSS Content Visibility: container (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
#container {
10
  width: 150px;
11
  height: 150px;
12
  background: lightblue;
13
}
14
</style>
15
16
<div id=container></div>
17
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-006.html +43 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-006.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>CSS Content Visibility: hidden stops painting when added (composited)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="container-ref.html">
8
<meta name="assert" content="content-visibility subtrees stop painting when hidden is added">
9
10
<script src="/common/reftest-wait.js"></script>
11
12
<style>
13
#container {
14
  width: 150px;
15
  height: 150px;
16
  background: lightblue;
17
  will-change: transform;
18
}
19
.hidden {
20
  content-visibility: hidden;
21
}
22
#child {
23
  width: 50px;
24
  height: 50px;
25
  background: lightgreen;
26
}
27
</style>
28
29
<div id=container>
30
  Text.
31
  <div id=child></div>
32
</div>
33
34
<script>
35
function runTest() {
36
  const container = document.getElementById("container");
37
  container.classList.add("hidden");
38
  requestAnimationFrame(takeScreenshot);
39
}
40
41
window.onload = runTest;
42
</script>
43
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-007-expected.html +17 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-007-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>CSS Content Visibility: container (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
#container {
10
  width: 150px;
11
  height: 150px;
12
  background: lightblue;
13
}
14
</style>
15
16
<div id=container></div>
17
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-007.html +43 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-007.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>CSS Content Visibility: hidden stops painting when added (composited child)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="container-ref.html">
8
<meta name="assert" content="content-visibility subtrees stop painting when hidden is added">
9
10
<script src="/common/reftest-wait.js"></script>
11
12
<style>
13
#container {
14
  width: 150px;
15
  height: 150px;
16
  background: lightblue;
17
}
18
.hidden {
19
  content-visibility: hidden;
20
}
21
#child {
22
  width: 50px;
23
  height: 50px;
24
  background: lightgreen;
25
  will-change: transform;
26
}
27
</style>
28
29
<div id=container>
30
  Text.
31
  <div id=child></div>
32
</div>
33
34
<script>
35
function runTest() {
36
  const container = document.getElementById("container");
37
  container.classList.add("hidden");
38
  requestAnimationFrame(takeScreenshot);
39
}
40
41
window.onload = runTest;
42
</script>
43
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-008-expected.html +17 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-008-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>CSS Content Visibility: container (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
#container {
10
  width: 150px;
11
  height: 150px;
12
  background: lightblue;
13
}
14
</style>
15
16
<div id=container></div>
17
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-008.html +44 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-008.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>CSS Content Visibility: hidden stops painting when added (composited with composited child)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="container-ref.html">
8
<meta name="assert" content="content-visibility subtrees stop painting when hidden is added">
9
10
<script src="/common/reftest-wait.js"></script>
11
12
<style>
13
#container {
14
  width: 150px;
15
  height: 150px;
16
  background: lightblue;
17
  will-change: transform;
18
}
19
.hidden {
20
  content-visibility: hidden;
21
}
22
#child {
23
  width: 50px;
24
  height: 50px;
25
  background: lightgreen;
26
  will-change: transform;
27
}
28
</style>
29
30
<div id=container>
31
  Text.
32
  <div id=child></div>
33
</div>
34
35
<script>
36
function runTest() {
37
  const container = document.getElementById("container");
38
  container.classList.add("hidden");
39
  requestAnimationFrame(takeScreenshot);
40
}
41
42
window.onload = runTest;
43
</script>
44
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-009-expected.html +22 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-009-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>CSS Content Visibility: positioned container (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
#container {
10
  width: 150px;
11
  height: 150px;
12
  background: lightblue;
13
}
14
.positioned {
15
  position: absolute;
16
  top: 0;
17
  left: 0;
18
}
19
</style>
20
21
<div id=container class=positioned></div>
22
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-009.html +47 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-009.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>CSS Content Visibility: hidden stops painting when added (positioned)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="positioned-container-ref.html">
8
<meta name="assert" content="content-visibility subtrees stop painting when hidden is added">
9
10
<script src="/common/reftest-wait.js"></script>
11
12
<style>
13
#container {
14
  width: 150px;
15
  height: 150px;
16
  background: lightblue;
17
}
18
.positioned {
19
  position: absolute;
20
  top: 0;
21
  left: 0;
22
}
23
.hidden {
24
  content-visibility: hidden;
25
}
26
#child {
27
  width: 50px;
28
  height: 50px;
29
  background: lightgreen;
30
}
31
</style>
32
33
<div id=container class=positioned>
34
  Text.
35
  <div id=child></div>
36
</div>
37
38
<script>
39
function runTest() {
40
  const container = document.getElementById("container");
41
  container.classList.add("hidden");
42
  requestAnimationFrame(takeScreenshot);
43
}
44
45
window.onload = runTest;
46
</script>
47
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-010-expected.html +17 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-010-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>CSS Content Visibility: container (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
#container {
10
  width: 150px;
11
  height: 150px;
12
  background: lightblue;
13
}
14
</style>
15
16
<div id=container></div>
17
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-010.html +47 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-010.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>CSS Content Visibility: hidden stops painting when added (positioned child)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="container-ref.html">
8
<meta name="assert" content="content-visibility subtrees stop painting when hidden is added">
9
10
<script src="/common/reftest-wait.js"></script>
11
12
<style>
13
#container {
14
  width: 150px;
15
  height: 150px;
16
  background: lightblue;
17
}
18
.positioned {
19
  position: absolute;
20
  top: 0;
21
  left: 0;
22
}
23
.hidden {
24
  content-visibility: hidden;
25
}
26
#child {
27
  width: 50px;
28
  height: 50px;
29
  background: lightgreen;
30
}
31
</style>
32
33
<div id=container>
34
  Text.
35
  <div id=child class=positioned></div>
36
</div>
37
38
<script>
39
function runTest() {
40
  const container = document.getElementById("container");
41
  container.classList.add("hidden");
42
  requestAnimationFrame(takeScreenshot);
43
}
44
45
window.onload = runTest;
46
</script>
47
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-011-expected.html +22 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-011-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>CSS Content Visibility: positioned container (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
#container {
10
  width: 150px;
11
  height: 150px;
12
  background: lightblue;
13
}
14
.positioned {
15
  position: absolute;
16
  top: 0;
17
  left: 0;
18
}
19
</style>
20
21
<div id=container class=positioned></div>
22
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-011.html +47 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-011.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>CSS Content Visibility: hidden stops painting when added (positioned with a positioned child)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="positioned-container-ref.html">
8
<meta name="assert" content="content-visibility subtrees stop painting when hidden is added">
9
10
<script src="/common/reftest-wait.js"></script>
11
12
<style>
13
#container {
14
  width: 150px;
15
  height: 150px;
16
  background: lightblue;
17
}
18
.positioned {
19
  position: absolute;
20
  top: 0;
21
  left: 0;
22
}
23
.hidden {
24
  content-visibility: hidden;
25
}
26
#child {
27
  width: 50px;
28
  height: 50px;
29
  background: lightgreen;
30
}
31
</style>
32
33
<div id=container class=positioned>
34
  Text.
35
  <div id=child class=positioned></div>
36
</div>
37
38
<script>
39
function runTest() {
40
  const container = document.getElementById("container");
41
  container.classList.add("hidden");
42
  requestAnimationFrame(takeScreenshot);
43
}
44
45
window.onload = runTest;
46
</script>
47
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-012-expected.html +25 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-012-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>CSS Content Visibility: container with child and text (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
#container {
10
  width: 150px;
11
  height: 150px;
12
  background: lightblue;
13
}
14
#child {
15
  width: 50px;
16
  height: 50px;
17
  background: lightgreen;
18
}
19
</style>
20
21
<div id=container>
22
  Text.
23
  <div id=child></div>
24
</div>
25
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-012.html +43 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-012.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>CSS Content Visibility: hidden starts painting when removed (composited)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="container-with-child-ref.html">
8
<meta name="assert" content="content-visibility subtrees start painting when hidden is removed">
9
10
<script src="/common/reftest-wait.js"></script>
11
12
<style>
13
#container {
14
  width: 150px;
15
  height: 150px;
16
  background: lightblue;
17
  will-change: transform;
18
}
19
.hidden {
20
  content-visibility: hidden;
21
}
22
#child {
23
  width: 50px;
24
  height: 50px;
25
  background: lightgreen;
26
}
27
</style>
28
29
<div id=container class=hidden>
30
  Text.
31
  <div id=child></div>
32
</div>
33
34
<script>
35
function runTest() {
36
  const container = document.getElementById("container");
37
  container.classList.remove("hidden");
38
  requestAnimationFrame(takeScreenshot);
39
}
40
41
window.onload = runTest;
42
</script>
43
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-013-expected.html +25 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-013-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>CSS Content Visibility: container with child and text (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
#container {
10
  width: 150px;
11
  height: 150px;
12
  background: lightblue;
13
}
14
#child {
15
  width: 50px;
16
  height: 50px;
17
  background: lightgreen;
18
}
19
</style>
20
21
<div id=container>
22
  Text.
23
  <div id=child></div>
24
</div>
25
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-013.html +43 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-013.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>CSS Content Visibility: hidden starts painting when removed (composited child)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="container-with-child-ref.html">
8
<meta name="assert" content="content-visibility subtrees start painting when hidden is removed">
9
10
<script src="/common/reftest-wait.js"></script>
11
12
<style>
13
#container {
14
  width: 150px;
15
  height: 150px;
16
  background: lightblue;
17
}
18
.hidden {
19
  content-visibility: hidden;
20
}
21
#child {
22
  width: 50px;
23
  height: 50px;
24
  background: lightgreen;
25
  will-change: transform;
26
}
27
</style>
28
29
<div id=container class=hidden>
30
  Text.
31
  <div id=child></div>
32
</div>
33
34
<script>
35
function runTest() {
36
  const container = document.getElementById("container");
37
  container.classList.remove("hidden");
38
  requestAnimationFrame(takeScreenshot);
39
}
40
41
window.onload = runTest;
42
</script>
43
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-014-expected.html +25 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-014-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>CSS Content Visibility: container with child and text (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
#container {
10
  width: 150px;
11
  height: 150px;
12
  background: lightblue;
13
}
14
#child {
15
  width: 50px;
16
  height: 50px;
17
  background: lightgreen;
18
}
19
</style>
20
21
<div id=container>
22
  Text.
23
  <div id=child></div>
24
</div>
25
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-014.html +44 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-014.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>CSS Content Visibility: hidden starts painting when removed (composited with a composited child)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="container-with-child-ref.html">
8
<meta name="assert" content="content-visibility subtrees start painting when hidden is removed">
9
10
<script src="/common/reftest-wait.js"></script>
11
12
<style>
13
#container {
14
  width: 150px;
15
  height: 150px;
16
  background: lightblue;
17
  will-change: transform;
18
}
19
.hidden {
20
  content-visibility: hidden;
21
}
22
#child {
23
  width: 50px;
24
  height: 50px;
25
  background: lightgreen;
26
  will-change: transform;
27
}
28
</style>
29
30
<div id=container class=hidden>
31
  Text.
32
  <div id=child></div>
33
</div>
34
35
<script>
36
function runTest() {
37
  const container = document.getElementById("container");
38
  container.classList.remove("hidden");
39
  requestAnimationFrame(takeScreenshot);
40
}
41
42
window.onload = runTest;
43
</script>
44
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-015-expected.txt +3 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-015-expected.txt_sec1
1
2
FAIL Content Visibility: hit testing assert_equals: center hits outer expected "outer" but got "inner"
3
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-015.html +50 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-015.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Content Visibility: hit testing</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<meta name="assert" content="content-visibility hidden prevents hit-testing in the subtree">
8
9
<script src="/resources/testharness.js"></script>
10
<script src="/resources/testharnessreport.js"></script>
11
12
<style>
13
body {
14
  margin: 0;
15
  padding: 0;
16
}
17
#outer {
18
  width: 100px;
19
  height: 100px;
20
  background: lightblue;
21
22
  content-visibility: hidden;
23
}
24
#inner {
25
  margin: 25px;
26
  width: 50px;
27
  height: 50px;
28
  background lightgreen;
29
}
30
</style>
31
32
<body id="body">
33
<div id="outer"><div id="inner"></div></div>
34
</body>
35
36
<script>
37
async_test((t) => {
38
  const container = document.getElementById("outer");
39
40
  let target = document.elementFromPoint(50, 50);
41
  t.step(() => assert_equals(target.id, "outer", "center hits outer"));
42
  target = document.elementFromPoint(10, 50);
43
  t.step(() => assert_equals(target.id, "outer", "edge hits outer"));
44
  target = document.elementFromPoint(100, 50);
45
  t.step(() => assert_equals(target.id, "body", "elsewhere hits body"));
46
  t.done();
47
});
48
49
</script>
50
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-016-expected.txt +3 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-016-expected.txt_sec1
1
2
FAIL Content Visibility: hit testing (composited) assert_equals: center hits outer expected "outer" but got "inner"
3
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-016.html +51 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-016.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Content Visibility: hit testing (composited)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<meta name="assert" content="content-visibility hidden prevents hit-testing in the subtree">
8
9
<script src="/resources/testharness.js"></script>
10
<script src="/resources/testharnessreport.js"></script>
11
12
<style>
13
body {
14
  margin: 0;
15
  padding: 0;
16
}
17
#outer {
18
  width: 100px;
19
  height: 100px;
20
  background: lightblue;
21
22
  content-visibility: hidden;
23
  will-change: transform;
24
}
25
#inner {
26
  margin: 25px;
27
  width: 50px;
28
  height: 50px;
29
  background lightgreen;
30
}
31
</style>
32
33
<body id="body">
34
<div id="outer"><div id="inner"></div></div>
35
</body>
36
37
<script>
38
async_test((t) => {
39
  const container = document.getElementById("outer");
40
41
  let target = document.elementFromPoint(50, 50);
42
  t.step(() => assert_equals(target.id, "outer", "center hits outer"));
43
  target = document.elementFromPoint(10, 50);
44
  t.step(() => assert_equals(target.id, "outer", "edge hits outer"));
45
  target = document.elementFromPoint(100, 50);
46
  t.step(() => assert_equals(target.id, "body", "elsewhere hits body"));
47
  t.done();
48
});
49
50
</script>
51
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-017-expected.txt +3 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-017-expected.txt_sec1
1
2
FAIL Content Visibility: hit testing (composited child) assert_equals: center hits outer expected "outer" but got "inner"
3
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-017.html +51 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-017.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Content Visibility: hit testing (composited child)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<meta name="assert" content="content-visibility hidden prevents hit-testing in the subtree">
8
9
<script src="/resources/testharness.js"></script>
10
<script src="/resources/testharnessreport.js"></script>
11
12
<style>
13
body {
14
  margin: 0;
15
  padding: 0;
16
}
17
#outer {
18
  width: 100px;
19
  height: 100px;
20
  background: lightblue;
21
22
  content-visibility: hidden;
23
}
24
#inner {
25
  margin: 25px;
26
  width: 50px;
27
  height: 50px;
28
  background lightgreen;
29
  will-change: transform;
30
}
31
</style>
32
33
<body id="body">
34
<div id="outer"><div id="inner"></div></div>
35
</body>
36
37
<script>
38
async_test((t) => {
39
  const container = document.getElementById("outer");
40
41
  let target = document.elementFromPoint(50, 50);
42
  t.step(() => assert_equals(target.id, "outer", "center hits outer"));
43
  target = document.elementFromPoint(10, 50);
44
  t.step(() => assert_equals(target.id, "outer", "edge hits outer"));
45
  target = document.elementFromPoint(100, 50);
46
  t.step(() => assert_equals(target.id, "body", "elsewhere hits body"));
47
  t.done();
48
});
49
50
</script>
51
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-018-expected.txt +3 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-018-expected.txt_sec1
1
2
FAIL Content Visibility: hit testing (composited with a composited child) assert_equals: center hits outer expected "outer" but got "inner"
3
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-018.html +52 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-018.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Content Visibility: hit testing (composited with a composited child)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<meta name="assert" content="content-visibility hidden prevents hit-testing in the subtree">
8
9
<script src="/resources/testharness.js"></script>
10
<script src="/resources/testharnessreport.js"></script>
11
12
<style>
13
body {
14
  margin: 0;
15
  padding: 0;
16
}
17
#outer {
18
  width: 100px;
19
  height: 100px;
20
  background: lightblue;
21
22
  content-visibility: hidden;
23
  will-change: transform;
24
}
25
#inner {
26
  margin: 25px;
27
  width: 50px;
28
  height: 50px;
29
  background lightgreen;
30
  will-change: transform;
31
}
32
</style>
33
34
<body id="body">
35
<div id="outer"><div id="inner"></div></div>
36
</body>
37
38
<script>
39
async_test((t) => {
40
  const container = document.getElementById("outer");
41
42
  let target = document.elementFromPoint(50, 50);
43
  t.step(() => assert_equals(target.id, "outer", "center hits outer"));
44
  target = document.elementFromPoint(10, 50);
45
  t.step(() => assert_equals(target.id, "outer", "edge hits outer"));
46
  target = document.elementFromPoint(100, 50);
47
  t.step(() => assert_equals(target.id, "body", "elsewhere hits body"));
48
  t.done();
49
});
50
51
</script>
52
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-019.sub.https-expected.html +16 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-019.sub.https-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Display Locking: iframe locking (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
div {
10
  background: blue;
11
}
12
</style>
13
14
<div>lorem ipsum</div>
15
<iframe id="frame" width=400 height=200 srcdoc=''></iframe>
16
<div>consectetur adipiscing elit</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-019.sub.https.html +36 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-019.sub.https.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>Content Visibility: cross-origin iframe locking</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="content-visibility-019-ref.html">
8
<script src="/common/reftest-wait.js"></script>
9
<script src="../resources/utils.js"></script>
10
11
<style>
12
div {
13
  background: blue;
14
}
15
.hidden {
16
  content-visibility: hidden;
17
}
18
</style>
19
20
<div>lorem ipsum</div>
21
<iframe id="frame" width=400 height=200 src='https://{{hosts[alt][]}}:{{ports[https][0]}}/wpt_internal/display-lock/css-content-visibility/resources/frame.html'></iframe>
22
<div>consectetur adipiscing elit</div>
23
24
<script>
25
async function runTest() {
26
  document.getElementById("frame").classList.add("hidden");
27
  requestAnimationFrame(takeScreenshot);
28
}
29
30
window.onload = () => {
31
  requestAnimationFrame(() => {
32
    requestAnimationFrame(runTest);
33
  });
34
};
35
</script>
36
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-020-expected.html +16 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-020-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Content Visibility: hidden iframe (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
div {
10
  background: blue;
11
}
12
</style>
13
14
<div>lorem ipsum</div>
15
<iframe id="frame" width=400 height=200 srcdoc=''></iframe>
16
<div>consectetur adipiscing elit</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-020.html +45 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-020.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>Content Visibility: hidden iframe</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="content-visibility-020-ref.html">
8
<meta name="assert" content="content-visibility hidden iframe does not paint">
9
10
<script src="/common/reftest-wait.js"></script>
11
<script src="../resources/utils.js"></script>
12
13
<style>
14
div {
15
  background: blue;
16
}
17
.hidden {
18
  content-visibility: hidden;
19
}
20
</style>
21
22
<div>lorem ipsum</div>
23
<iframe id="frame" width=400 height=200 srcdoc='
24
  <style>
25
  div {
26
    background: lightgreen;
27
  }
28
  </style>
29
  <div>dolor sit amet</div>
30
'></iframe>
31
<div>consectetur adipiscing elit</div>
32
33
<script>
34
async function runTest() {
35
  document.getElementById("frame").classList.add("hidden");
36
  requestAnimationFrame(takeScreenshot);
37
}
38
39
window.onload = () => {
40
  requestAnimationFrame(() => {
41
    requestAnimationFrame(runTest);
42
  });
43
};
44
</script>
45
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-021-expected.html +24 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-021-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Content Visibility: hidden image (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
div {
10
  background: blue;
11
}
12
.myimg {
13
  display: inline-block;
14
  width: 400px;
15
  height: 200px;
16
  background: lightblue;
17
  border: 1px solid black;
18
}
19
</style>
20
21
<div>lorem ipsum</div>
22
<div class="myimg"></div>
23
<div class="myimg"></div>
24
<div>consectetur adipiscing elit</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-021.html +45 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-021.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>Content Visibility: hidden image</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="content-visibility-021-ref.html">
8
<meta name="assert" content="content-visibility hidden img element does not paint replaced content">
9
10
<script src="/common/reftest-wait.js"></script>
11
12
<style>
13
div {
14
  background: blue;
15
}
16
img {
17
  width: 400px;
18
  height: 200px;
19
  background: lightblue;
20
  border: 1px solid black;
21
}
22
.hidden {
23
  content-visibility: hidden;
24
}
25
</style>
26
27
<div>lorem ipsum</div>
28
<img id="img1" src="resources/dice.png"></img>
29
<img id="img2" src="resources/circles.svg"></img>
30
<div>consectetur adipiscing elit</div>
31
32
<script>
33
async function runTest() {
34
  document.getElementById("img1").classList.add("hidden");
35
  document.getElementById("img2").classList.add("hidden");
36
  requestAnimationFrame(takeScreenshot);
37
}
38
39
window.onload = () => {
40
  requestAnimationFrame(() => {
41
    requestAnimationFrame(runTest);
42
  });
43
};
44
</script>
45
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-022-expected.html +23 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-022-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Content Visibility: hidden svg (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
div {
10
  background: blue;
11
}
12
.mysvg {
13
  display: inline-block;
14
  width: 400px;
15
  height: 300px;
16
  background: lightblue;
17
  border: 1px solid black;
18
}
19
</style>
20
21
<div>lorem ipsum</div>
22
<div class="mysvg"></div>
23
<div>consectetur adipiscing elit</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-022.html +52 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-022.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>Content Visibility: hidden svg</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="content-visibility-022-ref.html">
8
<meta name="assert" content="content-visibility hidden svg does not paint">
9
10
<script src="/common/reftest-wait.js"></script>
11
12
<style>
13
div {
14
  background: blue;
15
}
16
svg {
17
  border: 1px solid black;
18
  background: lightblue;
19
}
20
.hidden {
21
  content-visibility: hidden;
22
}
23
</style>
24
25
<div>lorem ipsum</div>
26
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300" id="svg">
27
  <g stroke-width="10" transform="translate(-30)">
28
      <circle cx="80" cy="50" r="35" fill="#084" stroke="none"/>
29
      <circle cx="80" cy="50" r="20" fill="#080" stroke="#FF0"/>
30
      <circle cx="80" cy="120" r="35" fill="#004" stroke="none"/>
31
      <circle cx="80" cy="120" r="20" fill="#080" stroke="#FF0"/>
32
      <circle cx="80" cy="190" r="35" fill="#088" stroke="none"/>
33
      <circle cx="80" cy="190" r="20" fill="#080" stroke="#FF0"/>
34
      <circle cx="80" cy="260" r="35" fill="#008" stroke="none"/>
35
      <circle cx="80" cy="260" r="20" fill="#080" stroke="#FF0"/>
36
  </g>
37
</svg>
38
<div>consectetur adipiscing elit</div>
39
40
<script>
41
async function runTest() {
42
  document.getElementById("svg").classList.add("hidden");
43
  requestAnimationFrame(takeScreenshot);
44
}
45
46
window.onload = () => {
47
  requestAnimationFrame(() => {
48
    requestAnimationFrame(runTest);
49
  });
50
};
51
</script>
52
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-023-expected.html +23 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-023-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Content Visibility: hidden iframe (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
div {
10
  background: blue;
11
}
12
</style>
13
14
<div>lorem ipsum</div>
15
<iframe width=400 height=200 srcdoc='
16
  <style>
17
  div {
18
    background: lightgreen;
19
  }
20
  </style>
21
  <div>dolor sit amet</div>
22
'></iframe>
23
<div>consectetur adipiscing elit</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-023.html +44 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-023.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>Content Visibility: hidden iframe</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="content-visibility-023-ref.html">
8
<meta name="assert" content="content-visibility hidden iframe paints when hidden is removed">
9
10
<script src="/common/reftest-wait.js"></script>
11
12
<style>
13
div {
14
  background: blue;
15
}
16
.hidden {
17
  content-visibility: hidden;
18
}
19
</style>
20
21
<div>lorem ipsum</div>
22
<iframe id="frame" class=hidden width=400 height=200 srcdoc='
23
  <style>
24
  div {
25
    background: lightgreen;
26
  }
27
  </style>
28
  <div>dolor sit amet</div>
29
'></iframe>
30
<div>consectetur adipiscing elit</div>
31
32
<script>
33
async function runTest() {
34
  document.getElementById("frame").classList.remove("hidden");
35
  requestAnimationFrame(takeScreenshot);
36
}
37
38
window.onload = () => {
39
  requestAnimationFrame(() => {
40
    requestAnimationFrame(runTest);
41
  });
42
};
43
</script>
44
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-024-expected.html +23 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-024-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Content Visibility: hidden image (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
div {
10
  background: blue;
11
}
12
img {
13
  width: 400px;
14
  height: 200px;
15
  background: lightblue;
16
  border: 1px solid black;
17
}
18
</style>
19
20
<div>lorem ipsum</div>
21
<img src="resources/dice.png"></img>
22
<img src="resources/circles.svg"></img>
23
<div>consectetur adipiscing elit</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-024.html +45 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-024.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>Content Visibility: hidden image</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="content-visibility-024-ref.html">
8
<meta name="assert" content="content-visibility hidden img element paints when hidden is removed">
9
10
<script src="/common/reftest-wait.js"></script>
11
12
<style>
13
div {
14
  background: blue;
15
}
16
img {
17
  width: 400px;
18
  height: 200px;
19
  background: lightblue;
20
  border: 1px solid black;
21
}
22
.hidden {
23
  content-visibility: hidden;
24
}
25
</style>
26
27
<div>lorem ipsum</div>
28
<img id="img1" class=hidden src="resources/dice.png"></img>
29
<img id="img2" class=hidden src="resources/circles.svg"></img>
30
<div>consectetur adipiscing elit</div>
31
32
<script>
33
async function runTest() {
34
  document.getElementById("img1").classList.remove("hidden");
35
  document.getElementById("img2").classList.remove("hidden");
36
  requestAnimationFrame(takeScreenshot);
37
}
38
39
window.onload = () => {
40
  requestAnimationFrame(() => {
41
    requestAnimationFrame(runTest);
42
  });
43
};
44
</script>
45
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-025-expected.html +31 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-025-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Content Visibility: hidden svg (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
div {
10
  background: blue;
11
}
12
svg {
13
  border: 1px solid black;
14
  background: lightblue;
15
}
16
</style>
17
18
<div>lorem ipsum</div>
19
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300">
20
  <g stroke-width="10" transform="translate(-30)">
21
      <circle cx="80" cy="50" r="35" fill="#084" stroke="none"/>
22
      <circle cx="80" cy="50" r="20" fill="#080" stroke="#FF0"/>
23
      <circle cx="80" cy="120" r="35" fill="#004" stroke="none"/>
24
      <circle cx="80" cy="120" r="20" fill="#080" stroke="#FF0"/>
25
      <circle cx="80" cy="190" r="35" fill="#088" stroke="none"/>
26
      <circle cx="80" cy="190" r="20" fill="#080" stroke="#FF0"/>
27
      <circle cx="80" cy="260" r="35" fill="#008" stroke="none"/>
28
      <circle cx="80" cy="260" r="20" fill="#080" stroke="#FF0"/>
29
  </g>
30
</svg>
31
<div>consectetur adipiscing elit</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-025.html +52 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-025.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>Content Visibility: hidden svg</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="content-visibility-025-ref.html">
8
<meta name="assert" content="content-visibility hidden svg paints when hidden is removed">
9
10
<script src="/common/reftest-wait.js"></script>
11
12
<style>
13
div {
14
  background: blue;
15
}
16
svg {
17
  border: 1px solid black;
18
  background: lightblue;
19
}
20
.hidden {
21
  content-visibility: hidden;
22
}
23
</style>
24
25
<div>lorem ipsum</div>
26
<svg class=hidden xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300" id="svg">
27
  <g stroke-width="10" transform="translate(-30)">
28
      <circle cx="80" cy="50" r="35" fill="#084" stroke="none"/>
29
      <circle cx="80" cy="50" r="20" fill="#080" stroke="#FF0"/>
30
      <circle cx="80" cy="120" r="35" fill="#004" stroke="none"/>
31
      <circle cx="80" cy="120" r="20" fill="#080" stroke="#FF0"/>
32
      <circle cx="80" cy="190" r="35" fill="#088" stroke="none"/>
33
      <circle cx="80" cy="190" r="20" fill="#080" stroke="#FF0"/>
34
      <circle cx="80" cy="260" r="35" fill="#008" stroke="none"/>
35
      <circle cx="80" cy="260" r="20" fill="#080" stroke="#FF0"/>
36
  </g>
37
</svg>
38
<div>consectetur adipiscing elit</div>
39
40
<script>
41
async function runTest() {
42
  document.getElementById("svg").classList.remove("hidden");
43
  requestAnimationFrame(takeScreenshot);
44
}
45
46
window.onload = () => {
47
  requestAnimationFrame(() => {
48
    requestAnimationFrame(runTest);
49
  });
50
};
51
</script>
52
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-026-expected.txt +6 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-026-expected.txt_sec1
1
2
FAIL content-visibility: hidden adds contain: size layout style; assert_equals: expected (string) "none" but got (undefined) undefined
3
FAIL content-visibility: auto adds contain: size layout style paint; assert_equals: expected (string) "none" but got (undefined) undefined
4
FAIL content-visibility: auto adds contain: size layout style paint, can't be overridden assert_equals: expected (string) "none" but got (undefined) undefined
5
FAIL content-visibility keeps all containment even when shorthands are specified assert_equals: expected (string) "none" but got (undefined) undefined
6
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-026.html +115 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-026.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Content Visibility: containment added</title>
5
<link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<meta name="assert" content="content-visibility visible does not add containment">
8
<meta name="assert" content="content-visibility hidden adds containment">
9
<meta name="assert" content="content-visibility auto adds containment">
10
<meta name="assert" content="content-visibility auto visibility switches after rAF callbacks of the frame that produces the painted output">
11
12
<style>
13
.auto {
14
  content-visibility: auto;
15
}
16
.hidden {
17
  content-visibility: hidden;
18
}
19
.spacer {
20
  height: 10000px;
21
}
22
</style>
23
<div id="container"></div>
24
<div id="onscreen_container"></div>
25
<div class=spacer></div>
26
<div id="offscreen_container"></div>
27
28
<script src="/resources/testharness.js"></script>
29
<script src="/resources/testharnessreport.js"></script>
30
31
<script>
32
function setUp(container) {
33
  container.style = "";
34
  container.classList = "";
35
  assert_equals(getComputedStyle(container).contain, "none");
36
}
37
38
test(() => {
39
  setUp(container);
40
  container.classList.add("hidden");
41
  assert_equals(getComputedStyle(container).contain, "size layout style paint");
42
}, "content-visibility: hidden adds contain: size layout style;");
43
44
async_test((t) => {
45
  setUp(onscreen_container);
46
  setUp(offscreen_container);
47
48
  function runTest() {
49
    onscreen_container.classList.add("auto");
50
    offscreen_container.classList.add("auto");
51
52
    t.step(() => assert_equals(getComputedStyle(onscreen_container).contain, "size layout style paint", "initial onscreen"));
53
    t.step(() => assert_equals(getComputedStyle(offscreen_container).contain, "size layout style paint", "initial offscreen"));
54
    // Considering this as frame 1, at the end of the frame intersection observation will happen
55
    // and determine that on-screen is visible and off-screen is not. The on-screen switch will
56
    // happen synchronously since this is the first time we check, so for the remainder of the
57
    // frames, on-screen should not have a size containment.
58
59
    // For off-screen container:
60
    // At frame 2, we verify that it has size containment.
61
    // At frame 3, we scroll it into view and verify it has size containment. At the end of the frame
62
    //    we will determine that it is visible and schedule a visibility switch to happen at the next
63
    //    frame (at post-rAF timing).
64
    // At frame 4, we still have size containment until after rAF callbacks.
65
    // At frame 5, the container is no longer size-contained since it is visible.
66
    requestAnimationFrame(() => {
67
      // Frame 2 checks:
68
      t.step(() => assert_equals(getComputedStyle(onscreen_container).contain, "layout style paint", "frame 2 onscreen"));
69
      t.step(() => assert_equals(getComputedStyle(offscreen_container).contain, "size layout style paint", "frame 2 offscreen"));
70
71
      requestAnimationFrame(() => {
72
        window.scrollBy(0, 10000);
73
74
        // Frame 3 checks:
75
        t.step(() => assert_equals(getComputedStyle(offscreen_container).contain, "size layout style paint", "frame 3"));
76
77
        requestAnimationFrame(() => {
78
          // Frame 4 checks:
79
          t.step(() => assert_equals(getComputedStyle(offscreen_container).contain, "size layout style paint", "frame 4"));
80
81
          requestAnimationFrame(() => {
82
            // Frame 5 checks:
83
            t.step(() => assert_equals(getComputedStyle(offscreen_container).contain, "layout style paint", "frame 5"));
84
            t.done();
85
          });
86
        });
87
      });
88
    });
89
  }
90
  // rAF to ensure we know where we are in the lifecycle.
91
  requestAnimationFrame(runTest);
92
}, "content-visibility: auto adds contain: size layout style paint;");
93
94
test(() => {
95
  setUp(container);
96
  container.classList.add("auto");
97
  container.style = "contain: style;";
98
  assert_equals(getComputedStyle(container).contain, "size layout style paint");
99
  container.style = "contain: style layout;";
100
  assert_equals(getComputedStyle(container).contain, "size layout style paint");
101
  container.style = "";
102
  assert_equals(getComputedStyle(container).contain, "size layout style paint");
103
}, "content-visibility: auto adds contain: size layout style paint, can't be overridden");
104
105
test(() => {
106
  setUp(container);
107
  container.classList.add("auto");
108
  container.style = "contain: paint;";
109
  assert_equals(getComputedStyle(container).contain, "size layout style paint");
110
  container.style = "contain: strict;";
111
  assert_equals(getComputedStyle(container).contain, "size layout style paint");
112
  container.style = "contain: content;";
113
  assert_equals(getComputedStyle(container).contain, "size layout style paint");
114
}, "content-visibility keeps all containment even when shorthands are specified");
115
</script>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-027-expected.html +17 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-027-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Content Visibility: auto in the viewport (reference).</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
.border {
10
  border: 1px solid black;
11
}
12
</style>
13
14
<div class=border>
15
  Test passes if there is a border around this text.
16
</div>
17
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-027.html +37 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-027.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>Content Visibility: auto in the viewport.</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="content-visibility-027-ref.html">
8
<meta name="assert" content="content-visibility auto element in the viewport paints">
9
<meta name="assert" content="content-visibility auto element in the viewport does not have size containment">
10
11
<script src="/common/reftest-wait.js"></script>
12
13
<style>
14
div {
15
  content-visibility: auto;
16
  border: 1px solid black;
17
}
18
</style>
19
20
<div class=locked>
21
  Test passes if there is a border around this text.
22
</div>
23
24
<script>
25
26
window.onload = requestAnimationFrame(() => {
27
  requestAnimationFrame(() => {
28
    requestAnimationFrame(() => {
29
      takeScreenshot();
30
    });
31
  });
32
});
33
34
</script>
35
</html>
36
37
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-028-expected.html +25 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-028-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>CSS Content Visibility: container with child and text (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
#container {
10
  width: 150px;
11
  height: 150px;
12
  background: lightblue;
13
}
14
#child {
15
  width: 50px;
16
  height: 50px;
17
  background: lightgreen;
18
}
19
</style>
20
21
<div id=container>
22
  Text.
23
  <div id=child></div>
24
</div>
25
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-028.html +64 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-028.html_sec1
1
<!DOCTYPE html>
2
<html class="reftest-wait">
3
<meta charset="utf-8">
4
<title>Content Visibility: shadow dom</title>
5
<link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="container-with-child-ref.html">
8
<meta name="assert" content="content-visibility hidden can be used in a shadow DOM">
9
10
<script src="/common/reftest-wait.js"></script>
11
<script src="resources/utils.js"></script>
12
13
<style>
14
.hidden {
15
  content-visibility: hidden;
16
}
17
.child {
18
  width: 50px;
19
  height: 50px;
20
  background: lightgreen;
21
}
22
</style>
23
<div id="host">
24
  <div id="slotted">
25
    Text.
26
    <div class=child></div>
27
  </div>
28
</div>
29
30
<script>
31
async function runTest() {
32
  // Set up hidden element within shadow root.
33
  let shadowRoot = host.attachShadow({ mode: "open" });
34
  let hidden = document.createElement("div");
35
  shadowRoot.innerHTML = `
36
    <style>
37
    .container {
38
      width: 150px;
39
      height: 150px;
40
      background: lightblue;
41
    }
42
    </style>`;
43
  shadowRoot.appendChild(hidden);
44
  hidden.innerHTML = "<slot></slot>";
45
  hidden.getBoundingClientRect();
46
  hidden.classList.add("container");
47
  hidden.classList.add("hidden");
48
  requestAnimationFrame(() => {
49
    slotted.style = "display: none";
50
    // Do a forced layout outside the hidden subtree.
51
    host.getBoundingClientRect();
52
53
    hidden.classList.remove("hidden");
54
    slotted.style = "";
55
    requestAnimationFrame(() => {
56
      // Check that everything is painted as we expect.
57
      takeScreenshot();
58
    });
59
  });
60
}
61
62
window.onload = runTest;
63
</script>
64
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-029-expected.txt +6 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-029-expected.txt_sec1
1
This text should be visible.
2
This text should not be visible.
3
This text is also not visible.
4
5
FAIL innerText on locked element. assert_equals: expected "This text should be visible." but got "This text should be visible.\nThis text should not be visible.\nThis text is also not visible."
6
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-029.html +27 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-029.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Content Visibility: innerText</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<meta name="assert" content="innerText skips content-visibility hidden elements">
8
9
<script src="/resources/testharness.js"></script>
10
<script src="/resources/testharnessreport.js"></script>
11
<script src="resources/utils.js"></script>
12
13
This text should be visible.
14
<div id="container" style="content-visibility: hidden">
15
  This text should not be visible.
16
  <div id="inner">
17
    This text is also not visible.
18
  </div>
19
</div>
20
21
<script>
22
test(() => {
23
  assert_equals(document.body.innerText, "This text should be visible.");
24
  assert_equals(document.getElementById("inner").innerText, "");
25
}, "innerText on locked element.");
26
</script>
27
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-030-expected.txt +3 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-030-expected.txt_sec1
1
2
FAIL IntersectionObserver interactions assert_equals: runStep2 expected 1 but got 0
3
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-030.html +183 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-030.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Content Visibility: intersection observer interactions</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<meta name="assert" content="content-visibility hidden is not intersecting from IO perspective">
8
9
<script src="/resources/testharness.js"></script>
10
<script src="/resources/testharnessreport.js"></script>
11
12
<style>
13
div {
14
  width: 100px;
15
  height: 100px;
16
}
17
#spacer {
18
  height: 3000px;
19
}
20
.hidden {
21
  content-visibility: hidden;
22
}
23
</style>
24
25
<div id="target1">
26
  <div id="target2"></div>
27
</div>
28
<div id="target3">
29
  <div id="target4"></div>
30
</div>
31
<div id="spacer"></div>
32
<div id="find_me"></div>
33
34
<script>
35
async_test((t) => {
36
  let target1, target2, target3, target4;
37
  let observer;
38
  let entries = [];
39
40
  // Set everything up.
41
  function enqueueStep1() {
42
    target1 = document.getElementById("target1");
43
    target2 = document.getElementById("target2");
44
    target3 = document.getElementById("target3");
45
    target4 = document.getElementById("target4");
46
47
    observer = new IntersectionObserver((new_entries) => {
48
      entries = entries.concat(new_entries);
49
    });
50
    observer.observe(target1);
51
    observer.observe(target2);
52
    observer.observe(target3);
53
    observer.observe(target4);
54
55
    entries = entries.concat(observer.takeRecords());
56
    t.step(() => { assert_equals(entries.length, 0, "No initial notifications") });
57
    requestAnimationFrame(() => {
58
      requestAnimationFrame(() => {
59
        runStep1();
60
      });
61
    });
62
  }
63
64
  // Verify that all elements are visible at the start, with intersection events.
65
  function runStep1() {
66
    const step = arguments.callee.name;
67
    t.step(() => {
68
      assert_equals(entries.length, 4, step);
69
      // Clear the observed visible targets.
70
      for (let i = 0; i < entries.length; ++i) {
71
        assert_true(entries[i].isIntersecting);
72
        assert_true(entries[i].target === target1 ||
73
                    entries[i].target === target2 ||
74
                    entries[i].target === target3 ||
75
                    entries[i].target === target4, step);
76
      }
77
    });
78
79
    entries = [];
80
    enqueueStep2();
81
  }
82
83
  // Lock target3.
84
  async function enqueueStep2() {
85
    target3.classList.add("hidden");
86
    requestAnimationFrame(() => {
87
      requestAnimationFrame(() => {
88
        runStep2();
89
      });
90
    });
91
  }
92
93
  // Verify that the hidden element received a not-intersecting event.
94
  function runStep2() {
95
    const step = arguments.callee.name;
96
    t.step(() => {
97
      assert_equals(entries.length, 1, step);
98
      assert_false(entries[0].isIntersecting, step);
99
      assert_equals(entries[0].target, target4, step);
100
    });
101
102
    entries = [];
103
    enqueueStep3();
104
  }
105
106
  // Scroll all elements off screen.
107
  function enqueueStep3() {
108
    document.getElementById("find_me").scrollIntoView();
109
    requestAnimationFrame(() => {
110
      requestAnimationFrame(() => {
111
        runStep3();
112
      });
113
    });
114
  }
115
116
  // Verify that all elements received not intersecting event, except
117
  // target4, which was already not intersecting due to being hidden.
118
  function runStep3() {
119
    const step = arguments.callee.name;
120
    t.step(() => {
121
      assert_equals(entries.length, 3, step);
122
      for (let i = 0; i < entries.length; ++i) {
123
        assert_false(entries[i].isIntersecting, step);
124
        assert_not_equals(entries[i].target, target4, step);
125
      }
126
    });
127
128
    entries = [];
129
    enqueueStep4();
130
  }
131
132
  // Scroll the elements back on screen.
133
  function enqueueStep4() {
134
    target1.scrollIntoView();
135
    requestAnimationFrame(() => {
136
      requestAnimationFrame(() => {
137
        runStep4();
138
      });
139
    });
140
  }
141
142
  // Verify that all elements received not intersecting event, except
143
  // target4, which remains not intersecting.
144
  function runStep4() {
145
    const step = arguments.callee.name;
146
    t.step(() => {
147
      assert_equals(entries.length, 3, step);
148
      for (let i = 0; i < entries.length; ++i) {
149
        assert_true(entries[i].isIntersecting);
150
        assert_not_equals(entries[i].target, target4, step);
151
      }
152
    });
153
154
    entries = [];
155
    enqueueStep5();
156
  }
157
158
  // Unlock target3.
159
  async function enqueueStep5() {
160
    target3.classList.remove("hidden");
161
    requestAnimationFrame(() => {
162
      requestAnimationFrame(() => {
163
        runStep5();
164
      });
165
    });
166
  }
167
168
  function runStep5() {
169
    const step = arguments.callee.name;
170
    t.step(() => {
171
      assert_equals(entries.length, 1, step);
172
      assert_true(entries[0].isIntersecting, step);
173
      assert_equals(entries[0].target, target4, step);
174
    });
175
    t.done();
176
  }
177
178
179
  window.onload = () => {
180
    requestAnimationFrame(enqueueStep1);
181
  };
182
}, "IntersectionObserver interactions");
183
</script>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-031-expected.txt +10 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-031-expected.txt_sec1
1
CONSOLE MESSAGE: Unhandled Promise Rejection: Error: assert_equals: ResizeObsever should not run during while unrendered expected true but got false
2
3
Harness Error (FAIL), message = Unhandled rejection: assert_equals: ResizeObsever should not run during while unrendered expected true but got false
4
5
TIMEOUT ResizeObserver skipped while hidden Test timed out
6
7
Harness Error (FAIL), message = Unhandled rejection: assert_equals: ResizeObsever should not run during while unrendered expected true but got false
8
9
TIMEOUT ResizeObserver skipped while hidden Test timed out
10
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-031.html +76 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-031.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Content Visibility: resize observer interactions</title>
5
<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<meta name="assert" content="content-visibility hidden subtrees do not trigger resize observer">
8
9
<style>
10
.hidden {
11
  content-visibility: hidden;
12
}
13
</style>
14
<div id="container">
15
  <div id="resize" style="width: 50px; height: 50px">
16
  </div>
17
</div>
18
19
<script src="/resources/testharness.js"></script>
20
<script src="/resources/testharnessreport.js"></script>
21
22
<script>
23
async_test((t) => {
24
  let didCallback = false;
25
26
  async function runTest() {
27
    let resizeCallback = function (entries) {
28
      didCallback = true;
29
    }
30
    let resizeObserver = new ResizeObserver(resizeCallback);
31
32
    resizeObserver.observe(resize);
33
34
    requestAnimationFrame(step2);
35
  }
36
37
  async function step2() {
38
    assert_equals(true, didCallback, 'Resize observation should happen in first frame after registering');
39
    didCallback = false;
40
41
    const container = document.getElementById("container");
42
    container.classList.add("hidden");
43
44
    // Change the size of #resize. This should cause a resize observation, but
45
    // only when the element becomes unhidden.
46
    resize.style.width = '100px';
47
48
    requestAnimationFrame(step3);
49
  }
50
51
  async function step3() {
52
    assert_equals(false, didCallback,
53
        'ResizeObsever should not run during while unrendered');
54
    requestAnimationFrame(step4);
55
  }
56
57
  async function step4() {
58
    assert_equals(false, didCallback,
59
        'ResizeObsever should not run while unrendered');
60
    const container = document.getElementById("container");
61
    container.classList.remove("hidden");
62
    requestAnimationFrame(step5);
63
  }
64
65
  async function step5() {
66
    assert_equals(true, didCallback,
67
        'ResizeObsevers should now run once becoming visible');
68
    t.done();
69
  }
70
71
  window.onload = function() {
72
    requestAnimationFrame(() => requestAnimationFrame(runTest));
73
  };
74
}, "ResizeObserver skipped while hidden");
75
</script>
76
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-032-expected.html +10 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-032-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Content Visibility: hidden iframe, size changes (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<iframe width=200 height=300></iframe>
9
</html>
10
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-032.html +26 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-032.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>Content Visibility: hidden iframe, size changes</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="content-visibility-032-ref.html">
8
<meta name="assert" content="content-visibility hidden iframes can change size.">
9
10
<script src="/common/reftest-wait.js"></script>
11
12
<style>
13
.hidden {
14
  content-visibility: hidden;
15
}
16
</style>
17
<iframe class=hidden id=frame width=200 height=200 srcdoc='Lorem ipsum'></iframe>
18
19
<script>
20
async function runTest() {
21
  document.getElementById("frame").height = 300;
22
  requestAnimationFrame(takeScreenshot);
23
}
24
25
onload = () => { requestAnimationFrame(runTest); };
26
</script>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-033.sub.https-expected.html +10 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-033.sub.https-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Content Visibility: hidden iframe, size changes (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<iframe width=200 height=300></iframe>
9
</html>
10
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-033.sub.https.html +26 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-033.sub.https.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>Display Locking: locks an iframe, and changes its size</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="content-visibility-033-ref.html">
8
<meta name="assert" content="content-visibility hidden cross origin iframe can change size">
9
10
<script src="/common/reftest-wait.js"></script>
11
12
<style>
13
.hidden {
14
  content-visibility: hidden;
15
}
16
</style>
17
<iframe id="frame" class=hidden width=200 height=200 src='https://{{hosts[alt][]}}:{{ports[https][0]}}/wpt_internal/display-lock/css-content-visibility/resources/frame.html'></iframe>
18
19
<script>
20
async function runTest() {
21
  document.getElementById("frame").height = 300;
22
  requestAnimationFrame(takeScreenshot);
23
}
24
25
onload = () => { requestAnimationFrame(runTest); };
26
</script>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-034-expected.html +29 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-034-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Content Visibility: hidden element shifted down (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
#container {
10
  width: 150px;
11
  height: 150px;
12
  border: 1px solid blue;
13
}
14
#spacer {
15
  width: 100px;
16
  height: 100px;
17
  background: lightgreen;
18
}
19
#checker {
20
  width: 100px;
21
  height: 50px;
22
  background: green;
23
}
24
</style>
25
26
<div id="spacer"></div>
27
<div id="container"></div>
28
<div id="checker"></div>
29
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-034.html +43 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-034.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>Content Visibility: hidden element shifted down</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="content-visibility-034-ref.html">
8
<meta name="assert" content="content-visibility hidden element participates in layout">
9
10
<script src="/common/reftest-wait.js"></script>
11
12
<style>
13
#container {
14
  width: 150px;
15
  height: 150px;
16
  border: 1px solid blue;
17
  content-visibility: hidden;
18
}
19
#spacer {
20
  width: 100px;
21
  height: 50px;
22
  background: lightgreen;
23
}
24
#checker {
25
  width: 100px;
26
  height: 50px;
27
  background: green;
28
}
29
</style>
30
31
<div id="spacer"></div>
32
<div id="container">Lorem</div>
33
<div id="checker"></div>
34
35
<script>
36
function runTest() {
37
  document.getElementById("spacer").style.height = "100px";
38
  requestAnimationFrame(takeScreenshot);
39
}
40
41
window.onload = requestAnimationFrame(() => requestAnimationFrame(runTest));
42
</script>
43
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-035-expected.txt +4 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-035-expected.txt_sec1
1
2
3
FAIL Testing focus and force layout on element with hidden flat-tree ancestor assert_not_equals: got disallowed value Element node <input id="slotted" type="text"></input>
4
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-035.html +57 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-035.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Display Locking: hidden shadow descendant</title>
5
<link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<meta name="assert" content="content-visibility hidden element's subtree cannot be focused">
8
<meta name="assert" content="content-visibility hidden element's subtree can access layout values">
9
10
<div id="host">
11
  <input id="slotted" type="text">
12
</div>
13
14
<script src="/resources/testharness.js"></script>
15
<script src="/resources/testharnessreport.js"></script>
16
17
<script>
18
let container = document.createElement("div");
19
container.innerHTML = "<slot></slot>";
20
21
let shadowRoot = host.attachShadow({ mode: "open" });
22
shadowRoot.innerHTML = "<style>.hidden { content-visibility: hidden; }</style>";
23
shadowRoot.appendChild(container);
24
25
async_test((t) => {
26
  async function focusTest() {
27
    t.step(() => assert_not_equals(document.activeElement, slotted));
28
    t.step(() => assert_not_equals(shadowRoot.activeElement, slotted));
29
30
    container.classList.add("hidden");
31
    requestAnimationFrame(() => {
32
      t.step(() => assert_not_equals(document.activeElement, slotted));
33
      t.step(() => assert_not_equals(shadowRoot.activeElement, slotted));
34
35
      slotted.focus();
36
      t.step(() => assert_not_equals(document.activeElement, slotted));
37
      t.step(() => assert_not_equals(shadowRoot.activeElement, slotted));
38
39
      forceLayoutTest();
40
    });
41
  }
42
43
  async function forceLayoutTest() {
44
    t.step(() => assert_equals(slotted.offsetTop, 0));
45
    // Add a 20px div above the slotted div.
46
    container.innerHTML = "<div style='height: 20px;'></div><slot></slot>";
47
    t.step(() => assert_equals(slotted.offsetTop, 20));
48
    t.done();
49
  }
50
51
  window.onload = function() {
52
    requestAnimationFrame(() => requestAnimationFrame(focusTest));
53
  };
54
}, "Testing focus and force layout on element with hidden flat-tree ancestor");
55
56
</script>
57
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-036-expected.txt +3 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-036-expected.txt_sec1
1
2
PASS getComputedStyle gets up-to-date style
3
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-036.html +61 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-036.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Display Locking: style on hidden element & child</title>
5
<link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<meta name="assert" content="style is available for content-visibility hidden elements">
8
9
<style>
10
.hidden {
11
  content-visibility: hidden;
12
}
13
</style>
14
<div id="container" class=hidden>
15
  <div id="child">
16
    <div id="grandchild"></div>
17
  </div>
18
</div>
19
20
<script src="/resources/testharness.js"></script>
21
<script src="/resources/testharnessreport.js"></script>
22
23
<script>
24
async_test((t) => {
25
  async function runTest() {
26
    let container = document.getElementById("container");
27
    container.style = "color: blue;";
28
    t.step(() => assert_equals(getComputedStyle(container).color, "rgb(0, 0, 255)", "container color changed to blue"));
29
    t.step(() => assert_equals(getComputedStyle(child).color, "rgb(0, 0, 255)", "child inherits blue color"));
30
    t.step(() => assert_equals(getComputedStyle(grandchild).color, "rgb(0, 0, 255)", "grandchild inherits blue color"));
31
32
    child.style = "color: green;";
33
    t.step(() => assert_equals(getComputedStyle(container).color, "rgb(0, 0, 255)", "container color is still blue"));
34
    t.step(() => assert_equals(getComputedStyle(child).color, "rgb(0, 128, 0)", "child color changed to green"));
35
    t.step(() => assert_equals(getComputedStyle(grandchild).color, "rgb(0, 128, 0)", "grandchild inherits green color"));
36
37
    child.style = "";
38
39
    // Commit container, lock child.
40
    container.classList.remove("hidden");
41
    child.classList.add("hidden");
42
    requestAnimationFrame(() => {
43
      // Update style outside of the hidden subtree.
44
      container.style = "color: red;";
45
      container.offsetTop;
46
47
      // Inheritance works as usual through hidden boundaries.
48
      t.step(() => assert_equals(getComputedStyle(grandchild).color, "rgb(255, 0, 0)", "grandchild inherits red color"));
49
      t.step(() => assert_equals(getComputedStyle(child).color, "rgb(255, 0, 0)", "child inherits red color"));
50
      t.step(() => assert_equals(getComputedStyle(container).color, "rgb(255, 0, 0)", "container color changed to red"));
51
52
      t.done();
53
    });
54
  }
55
56
  window.onload = function() {
57
    requestAnimationFrame(() => requestAnimationFrame(runTest));
58
  };
59
}, "getComputedStyle gets up-to-date style");
60
</script>
61
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-037-expected.html +17 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-037-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>CSS Content Visibility: container (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
#container {
10
  width: 150px;
11
  height: 150px;
12
  background: lightblue;
13
}
14
</style>
15
16
<div id=container></div>
17
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-037.html +39 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-037.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>Content Visibility: hidden grid with positioned child</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="container-ref.html">
8
<meta name="assert" content="content-visibility hidden grid does not paint the subtree">
9
10
<script src="/common/reftest-wait.js"></script>
11
12
<style>
13
#grid {
14
  display: grid;
15
  width: 150px;
16
  height: 150px;
17
  background: lightblue;
18
}
19
#positioned {
20
  position: absolute;
21
}
22
.hidden {
23
  content-visibility: hidden;
24
}
25
</style>
26
27
<div id=grid>
28
  <div id=positioned>lorem ipsum</div>
29
</div>
30
31
<script>
32
function runTest() {
33
  document.getElementById("grid").classList.add("hidden");
34
  requestAnimationFrame(takeScreenshot);
35
}
36
37
window.onload = () => requestAnimationFrame(runTest);
38
</script>
39
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-038-expected.txt +3 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-038-expected.txt_sec1
1
2
FAIL Measure Forced Layout assert_equals: 0 forced expected 0 but got 8
3
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-038.html +107 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-038.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Content Visibility: measure layout</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<meta name="assert" content="content-visibility hidden element layout is correct">
8
<meta name="assert" content="content-visibility hidden element's subtree layout is correct">
9
10
<style>
11
#container {
12
  background: lightgreen;
13
  contain: layout;
14
}
15
.hidden {
16
  content-visibility: hidden;
17
}
18
#sizer {
19
  width: 100px;
20
  height: 100px;
21
}
22
.child {
23
  width: 20px;
24
  height: 20%;
25
  background: cyan;
26
}
27
#spacer {
28
  width: 150px;
29
  height: 150px;
30
  background: green;
31
}
32
</style>
33
34
<div id="parent"></div>
35
<div id="spacer"></div>
36
37
<script src="/resources/testharness.js"></script>
38
<script src="/resources/testharnessreport.js"></script>
39
40
<script>
41
async_test((t) => {
42
  function createChild(id) {
43
    const child = document.createElement("div");
44
    child.classList = "child";
45
    child.id = id;
46
    return child;
47
  }
48
49
  function measureForced() {
50
    t.step(() => {
51
      // Ensure children are laid out; this forces a layout if it wasn't done.
52
      assert_equals(document.getElementById("0").offsetTop, 0, "0 forced");
53
      assert_equals(document.getElementById("1").offsetTop, 20, "1 forced");
54
      assert_equals(document.getElementById("2").offsetTop, 40, "2 forced");
55
      // Both parent should be 0 height, since it's hidden. Both parent and spacers
56
      // should have 8 offsetTop.
57
      assert_equals(document.getElementById("parent").offsetTop, 8, "parent forced");
58
      assert_equals(document.getElementById("spacer").offsetTop, 8, "spacer forced");
59
    });
60
  }
61
62
  function measureWhenVisible() {
63
    t.step(() => {
64
      // Ensure children are still laid out.
65
      assert_equals(document.getElementById("0").offsetTop, 0, "0 when visible");
66
      assert_equals(document.getElementById("1").offsetTop, 20, "1 when visible");
67
      assert_equals(document.getElementById("2").offsetTop, 40, "2 when visible");
68
      // Now the parent should encompass a container, so spacer is pushed down.
69
      assert_equals(document.getElementById("parent").offsetTop, 8, "parent when visible");
70
      assert_equals(document.getElementById("spacer").offsetTop, 108, "spacer when visible");
71
    });
72
  }
73
74
  function construct(container) {
75
    const sizer = document.createElement("div");
76
    sizer.id = "sizer";
77
    container.appendChild(sizer);
78
    sizer.appendChild(createChild("0"));
79
    sizer.appendChild(createChild("1"));
80
    sizer.appendChild(createChild("2"));
81
  }
82
83
  async function runTest() {
84
    const container = document.createElement("div");
85
    container.id = "container";
86
87
    document.getElementById("parent").appendChild(container);
88
    container.classList.add("hidden");
89
    requestAnimationFrame(() => {
90
      construct(container);
91
      measureForced();
92
93
      container.classList.remove("hidden");
94
      requestAnimationFrame(() => requestAnimationFrame(() => {
95
        measureWhenVisible();
96
        t.done();
97
      }));
98
    });
99
  }
100
101
  window.onload = function() {
102
    requestAnimationFrame(() => requestAnimationFrame(runTest));
103
  };
104
}, "Measure Forced Layout");
105
</script>
106
107
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-039-expected.txt +4 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-039-expected.txt_sec1
1
This is text
2
3
PASS Measure Forced SVG Text
4
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-039.html +79 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-039.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Display Locking: measure forced SVG text</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<meta name="assert" content="content-visibility hidden svg descendant has correct layout">
8
9
<style>
10
#container {
11
  width: 100px;
12
  height: 100px;
13
  background: lightgreen;
14
}
15
.hidden {
16
  content-visibility: hidden;
17
}
18
</style>
19
20
<div id="parent"></div>
21
22
<script src="/resources/testharness.js"></script>
23
<script src="/resources/testharnessreport.js"></script>
24
25
<script>
26
async_test((t) => {
27
  let length;
28
  function measureForced() {
29
    t.step(() => {
30
      length = document.getElementById("text").getComputedTextLength();
31
      assert_not_equals(length, 0, "forced");
32
33
    });
34
  }
35
36
  function measureWhenVisible() {
37
    t.step(() => {
38
      const visible_length = document.getElementById("text").getComputedTextLength();
39
      assert_not_equals(visible_length, 0, "when visible");
40
      assert_equals(visible_length, length, "when visible");
41
    });
42
  }
43
44
  function construct(container) {
45
    container.innerHTML = `
46
      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
47
        <style>
48
          .t { font: 10px sans-serif; }
49
        </style>
50
        <text id="text" x="10" y="10" class="t">This is text</text>
51
      </svg>
52
    `;
53
  }
54
55
  async function runTest() {
56
    const container = document.createElement("div");
57
    container.id = "container";
58
59
    document.getElementById("parent").appendChild(container);
60
    container.classList.add("hidden");
61
    requestAnimationFrame(() => {
62
      construct(container);
63
      measureForced();
64
65
      container.classList.remove("hidden");
66
      requestAnimationFrame(() => {
67
        measureWhenVisible();
68
        t.done();
69
      });
70
    });
71
  }
72
73
  window.onload = function() {
74
    requestAnimationFrame(() => requestAnimationFrame(runTest));
75
  };
76
}, "Measure Forced SVG Text");
77
</script>
78
79
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-040-expected.html +17 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-040-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>CSS Content Visibility: container (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
#container {
10
  width: 150px;
11
  height: 150px;
12
  background: lightblue;
13
}
14
</style>
15
16
<div id=container></div>
17
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-040.html +45 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-040.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>Display Locking: absolute positioned in flex, which is in a hidden div.</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="container-ref.html">
8
<meta name="assert" content="content-visibility hidden flex and abspos descendants don't paint">
9
10
<script src="/common/reftest-wait.js"></script>
11
<script src="resources/utils.js"></script>
12
13
<style>
14
#container {
15
  width: 150px;
16
  height: 150px;
17
  background: lightblue;
18
  position: relative;
19
}
20
div > div {
21
  width: 100px;
22
  height: 100px;
23
  background: red;
24
}
25
.hidden {
26
  content-visibility: hidden;
27
}
28
.flex { display: flex; }
29
.abspos { position: absolute; }
30
</style>
31
32
<div id=container>
33
  <div class=flex>
34
    <div class=abspos></div>
35
  </div>
36
</div>
37
38
<script>
39
async function runTest() {
40
  document.getElementById("container").classList.add("hidden");
41
  requestAnimationFrame(takeScreenshot);
42
}
43
44
window.onload = requestAnimationFrame(() => requestAnimationFrame(runTest));
45
</script>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-041-expected.html +17 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-041-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>CSS Content Visibility: container (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
#container {
10
  width: 150px;
11
  height: 150px;
12
  background: lightblue;
13
}
14
</style>
15
16
<div id=container></div>
17
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-041.html +42 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-041.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>Content Visibility: pseudo elements</title>
5
<link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="container-ref.html">
8
<meta name="assert" content="subtree-visiblity hidden doesn't paint ::before or ::after">
9
<script src="/common/reftest-wait.js"></script>
10
11
<style>
12
#container {
13
  width: 150px;
14
  height: 150px;
15
  background: lightblue;
16
}
17
#container::before {
18
  content: "a";
19
  color: blue;
20
}
21
.hasAfter::after {
22
  content: "b";
23
  color: green;
24
}
25
.hidden {
26
  content-visibility: hidden;
27
}
28
</style>
29
<div id="log"></div>
30
<div id="container" style="display:none;"></div>
31
32
<script>
33
async function runTest() {
34
  container.classList.add("hasAfter");
35
  container.classList.add("hidden");
36
  container.style = "";
37
  requestAnimationFrame(takeScreenshot);
38
}
39
40
window.onload = runTest;
41
</script>
42
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-042-expected.html +20 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-042-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Content Visibility: pseudo elements</title>
5
<link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
#container::before {
10
  content: "a";
11
  color: blue;
12
}
13
#container::after {
14
  content: "b";
15
  color: green;
16
}
17
</style>
18
<div id="container"></div>
19
</script>
20
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-042.html +37 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-042.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>Content Visibility: pseudo elements</title>
5
<link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="content-visibility-042-ref.html">
8
<meta name="assert" content="content-visibility elements paints ::before and ::after when hidden is removed">
9
10
<script src="/common/reftest-wait.js"></script>
11
12
<style>
13
#container::before {
14
  content: "a";
15
  color: blue;
16
}
17
.hasAfter::after {
18
  content: "b";
19
  color: green;
20
}
21
.hidden {
22
  content-visibility: hidden;
23
}
24
</style>
25
<div id="container" class=hidden style="display:none;"></div>
26
27
<script>
28
async function runTest() {
29
  container.classList.add("hasAfter");
30
  container.classList.remove("hidden");
31
  container.style = "";
32
  requestAnimationFrame(takeScreenshot);
33
}
34
35
window.onload = runTest;
36
</script>
37
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-043-expected.html +17 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-043-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>CSS Content Visibility: container (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
#container {
10
  width: 150px;
11
  height: 150px;
12
  background: lightblue;
13
}
14
</style>
15
16
<div id=container></div>
17
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-043.html +40 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-043.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>Content Visibility: scroll child into view, and adopt to a document</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="container-ref.html">
8
<meta name="assert" content="scrollIntoView on a hidden subtree is a no-op">
9
<meta name="assert" content="adopting an element in a hidden subtree works (no asserts / crashes)">
10
11
<script src="/common/reftest-wait.js"></script>
12
13
<style>
14
#container {
15
  width: 150px;
16
  height: 150px;
17
  background: lightblue;
18
}
19
.hidden {
20
  content-visibility: hidden;
21
}
22
</style>
23
<div id=container class=hidden>
24
  Text.
25
  <div id=child></div>
26
</div>
27
28
<script>
29
function moveChild() {
30
  child.scrollIntoView();
31
  document.implementation.createDocument( "", null).adoptNode(child);
32
  requestAnimationFrame(takeScreenshot);
33
}
34
35
async function runTest() {
36
  requestAnimationFrame(moveChild);
37
}
38
39
window.onload = requestAnimationFrame(runTest);
40
</script>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-044-expected.txt +11 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-044-expected.txt_sec1
1
CONSOLE MESSAGE: Error: assert_equals: expected 0 but got 10
2
3
4
Harness Error (FAIL), message = Error: assert_equals: expected 0 but got 10
5
6
TIMEOUT Content Visibility: slot moved after container is hidden Test timed out
7
8
Harness Error (FAIL), message = Error: assert_equals: expected 0 but got 10
9
10
TIMEOUT Content Visibility: slot moved after container is hidden Test timed out
11
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-044.html +32 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-044.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Content Visibility: slot moved after container is hidden</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<meta name="assert" content="ensure that hidden slotted element can be updated">
8
9
<script src="/resources/testharness.js"></script>
10
<script src="/resources/testharnessreport.js"></script>
11
12
<div id=host>
13
<input id=slotted>
14
<script>
15
16
async_test((t) => {
17
  let container = document.createElement("div");
18
  container.innerHTML = "<slot></slot>";
19
  let shadowRoot = host.attachShadow({ mode: "open" });
20
  shadowRoot.innerHTML = "<style>.hidden { content-visibility: hidden }</style>";
21
  shadowRoot.appendChild(container);
22
23
  t.step(async () => {
24
    container.classList.add("hidden");
25
    requestAnimationFrame(() => {
26
      assert_equals(slotted.offsetTop, 0);
27
      container.innerHTML = "<div style='height: 20px;'></div><slot></slot>";
28
      t.done();
29
    });
30
  });
31
});
32
</script>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-045-expected.html +17 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-045-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>CSS Content Visibility: container (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
#container {
10
  width: 150px;
11
  height: 150px;
12
  background: lightblue;
13
}
14
</style>
15
16
<div id=container></div>
17
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-045.html +52 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-045.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>Content Visibility: auto subtree becomes hidden in the viewport</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="container-ref.html">
8
<meta name="assert" content="hidden subtree because auto and so stops painting">
9
<script src="/common/reftest-wait.js"></script>
10
11
<style>
12
#container {
13
  width: 150px;
14
  height: 150px;
15
  background: lightblue;
16
}
17
#child {
18
  width: 50px;
19
  height: 50px;
20
  background: lightgreen;
21
}
22
.auto { content-visibility: auto; }
23
.hidden { content-visibility: hidden; }
24
25
</style>
26
27
<div id=container class=auto>
28
  Text.
29
  <div id=child></div>
30
</div>
31
32
<script>
33
34
function runTest() {
35
  document.getElementById("container").classList.remove("auto");
36
  document.getElementById("container").classList.add("hidden");
37
38
  requestAnimationFrame(takeScreenshot);
39
}
40
41
window.onload = requestAnimationFrame(() => {
42
  requestAnimationFrame(() => {
43
    requestAnimationFrame(() => {
44
      runTest();
45
    });
46
  });
47
});
48
49
</script>
50
</html>
51
52
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-046-expected.html +25 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-046-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>CSS Content Visibility: container with child and text (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
#container {
10
  width: 150px;
11
  height: 150px;
12
  background: lightblue;
13
}
14
#child {
15
  width: 50px;
16
  height: 50px;
17
  background: lightgreen;
18
}
19
</style>
20
21
<div id=container>
22
  Text.
23
  <div id=child></div>
24
</div>
25
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-046.html +45 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-046.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>Content Visibility: viewport auto painting.</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="container-with-child-ref.html">
8
<meta name="assert" content="viewport intersection paints the content-visibility auto element">
9
<script src="/common/reftest-wait.js"></script>
10
11
<style>
12
#container {
13
  width: 150px;
14
  height: 150px;
15
  background: lightblue;
16
}
17
#child {
18
  width: 50px;
19
  height: 50px;
20
  background: lightgreen;
21
}
22
.auto {
23
  content-visibility: auto;
24
}
25
</style>
26
27
<div id=container class=auto>
28
  Text.
29
  <div id=child></div>
30
</div>
31
32
<script>
33
34
function runTest() {
35
  document.getElementById("target").classList.add("auto");
36
  requestAnimationFrame(takeScreenshot);
37
}
38
39
window.onload = requestAnimationFrame(
40
  () => requestAnimationFrame(takeScreenshot));
41
42
</script>
43
</html>
44
45
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-047-expected.txt +6 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-047-expected.txt_sec1
1
2
3
4
5
FAIL Tab order navigation skips hidden subtrees assert_equals: expected Element node <input id="five" type="text"></input> but got Element node <input id="two" type="text"></input>
6
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-047.html +49 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-047.html_sec1
1
<!doctype HTML>
2
<meta charset="utf8">
3
<title>Content Visibility: tab order navigation ignores hidden subtrees</title>
4
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
5
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
6
<meta name="assert" content="tab order navigation ignores hidden subtrees.">
7
8
<script src="/resources/testharness.js"></script>
9
<script src="/resources/testharnessreport.js"></script>
10
<script src="/resources/testdriver.js"></script>
11
<script src="/resources/testdriver-actions.js"></script>
12
<script src="/resources/testdriver-vendor.js"></script>
13
14
<style>
15
.hidden {
16
  content-visibility: hidden;
17
}
18
</style>
19
20
<input id=one type=text></input>
21
<div class=hidden>
22
  <input id=two type=text></input>
23
  <input id=three type=text></input>
24
  <input id=four type=text></input>
25
</div>
26
<input id=five type=text></input>
27
28
<script>
29
async_test((t) => {
30
  const tab = "\t";
31
  async function step1() {
32
    await test_driver.send_keys(document.body, tab);
33
    t.step(() => {
34
      assert_equals(document.activeElement, document.getElementById("one"));
35
    });
36
    requestAnimationFrame(step2);
37
  }
38
39
  async function step2() {
40
    await test_driver.send_keys(document.body, tab);
41
    t.step(() => {
42
      assert_equals(document.activeElement, document.getElementById("five"));
43
    });
44
    t.done();
45
  }
46
47
  window.onload = () => { requestAnimationFrame(step1); };
48
}, "Tab order navigation skips hidden subtrees");
49
</script>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-048-expected.txt +4 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-048-expected.txt_sec1
1
2
FAIL Fragment navigation with content-visibility; single text promise_test: Unhandled rejection with value: object "ReferenceError: Can't find variable: fetchResults"
3
FAIL Fragment navigation with content-visibility; range across blocks promise_test: Unhandled rejection with value: object "ReferenceError: Can't find variable: fetchResults"
4
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-048.html +46 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-048.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Content Visibility: navigating to a text fragment.</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<meta name="timeout" content="long">
8
<meta name="assert" content="content-visibility: auto subtrees are 'searchable' by text fragment links">
9
10
<script src="/resources/testharness.js"></script>
11
<script src="/resources/testharnessreport.js"></script>
12
<script src="/resources/testdriver.js"></script>
13
<script src="/resources/testdriver-vendor.js"></script>
14
<script src="/common/utils.js"></script>
15
<script src="/scroll-to-text-fragment/stash.js"></script>
16
17
<script>
18
promise_test(t => new Promise((resolve, reject) => {
19
    const fragment = '#:~:text=hiddentext';
20
    const key = token();
21
    test_driver.bless("Open a URL with a text fragment directive", () => {
22
      window.open(`resources/text-fragment-target-auto.html?key=${key}${fragment}`,
23
                  '_blank',
24
                  'noopener');
25
    });
26
    fetchResults(key, resolve, reject);
27
}).then(data => {
28
  assert_equals(data.scrollPosition, "text");
29
  assert_equals(data.target, "text");
30
}), "Fragment navigation with content-visibility; single text");
31
32
promise_test(t => new Promise((resolve, reject) => {
33
    const fragment = '#:~:text=start,end';
34
    const key = token();
35
    test_driver.bless("Open a URL with a text fragment directive", () => {
36
      window.open(`resources/text-fragment-target-auto.html?key=${key}${fragment}`,
37
                  '_blank',
38
                  'noopener');
39
    });
40
    fetchResults(key, resolve, reject);
41
}).then(data => {
42
  assert_equals(data.scrollPosition, "text2");
43
  assert_equals(data.target, "text2and3ancestor");
44
}), "Fragment navigation with content-visibility; range across blocks");
45
</script>
46
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-049-expected.html +33 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-049-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Content Visibility: anchor links paint subtrees (reference)</title>
5
<link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
.spacer {
10
  width: 150px;
11
  height: 3000px;
12
  background: lightblue;
13
}
14
#container {
15
  contain: style layout;
16
  width: 150px;
17
  height: 150px;
18
  background: lightgreen;
19
}
20
#target {
21
  width: 100px;
22
  height: 100px;
23
  background: green;
24
}
25
</style>
26
27
<div class="spacer"></div>
28
<div id="container"><div id="target"></div></div>
29
30
<script>
31
target.scrollIntoView();
32
</script>
33
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-049.html +43 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-049.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>Content Visibility: anchor links paint subtrees</title>
5
<link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="content-visibility-049-ref.html">
8
<meta name="assert" content="content-visibility auto subtrees respond to anchor links">
9
10
<script src="/common/reftest-wait.js"></script>
11
<script src="../resources/utils.js"></script>
12
13
<style>
14
.spacer {
15
  width: 150px;
16
  height: 3000px;
17
  background: lightblue;
18
}
19
#container {
20
  width: 150px;
21
  height: 150px;
22
  background: lightgreen;
23
  content-visibility: auto;
24
}
25
#target {
26
  width: 100px;
27
  height: 100px;
28
  background: green;
29
}
30
</style>
31
32
<div class="spacer"></div>
33
<div id="container"><div id="target"></div></div>
34
35
<script>
36
function runTest() {
37
  location.href += "#target";
38
  requestAnimationFrame(takeScreenshot);
39
}
40
41
window.onload = () => { requestAnimationFrame(runTest); };
42
</script>
43
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-050-expected.txt +3 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-050-expected.txt_sec1
1
2
FAIL Using tabindex to focus an newly constructed element in an auto subtree focuses element assert_greater_than: expected a number greater than 500 but got 0
3
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-050.html +39 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-050.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Content Visibility: focus on new element</title>
5
<link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<meta name="assert" content="focus can target content-visibility: auto subtrees created while hidden">
8
9
<script src="/resources/testharness.js"></script>
10
<script src="/resources/testharnessreport.js"></script>
11
12
<style>
13
.auto {
14
  content-visibility: auto;
15
}
16
.spacer {
17
  height: 3000px;
18
}
19
</style>
20
21
<div class=spacer></div>
22
<div id=container class=auto></div>
23
24
<script>
25
async_test((t) => {
26
  function runTest() {
27
    const focusable = document.createElement("div");
28
    focusable.tabIndex = 0;
29
    container.appendChild(focusable);
30
    focusable.focus();
31
    requestAnimationFrame(() => {
32
      t.step(() => assert_greater_than(document.scrollingElement.scrollTop, 500));
33
      t.done();
34
    });
35
  }
36
  onload = requestAnimationFrame(() => requestAnimationFrame(runTest));
37
}, "Using tabindex to focus an newly constructed element in an auto subtree focuses element");
38
</script>
39
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-051-expected.html +17 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-051-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>CSS Content Visibility: container (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
#container {
10
  width: 150px;
11
  height: 150px;
12
  background: lightblue;
13
}
14
</style>
15
16
<div id=container></div>
17
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-051.html +44 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-051.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>CSS Content Visibility: switching to block stop painting</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="container-ref.html">
8
<meta name="assert" content="content-visibility has no effect on non-atomic inlines, but switching to block stop painting">
9
10
<script src="/common/reftest-wait.js"></script>
11
12
<style>
13
#container {
14
  content-visibility: hidden;
15
  width: 150px;
16
  height: 150px;
17
  background: lightblue;
18
}
19
.inline {
20
  display: inline;
21
}
22
#child {
23
  width: 50px;
24
  height: 50px;
25
  background: lightgreen;
26
}
27
</style>
28
29
<div id=container class=inline>
30
  Text.
31
  <div id=child></div>
32
  <span>inline child</span>
33
</div>
34
35
<script>
36
function runTest() {
37
  const container = document.getElementById("container");
38
  container.classList.remove("inline");
39
  takeScreenshot();
40
}
41
42
window.onload = () => requestAnimationFrame(runTest);
43
</script>
44
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-052-expected.html +43 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-052-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>CSS Content Visibility: container with child and text (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
#container {
10
  width: 150px;
11
  height: 150px;
12
  background: lightblue;
13
  contain: layout;
14
}
15
#child {
16
  width: 50px;
17
  height: 50px;
18
  background: lightgreen;
19
}
20
.abspos { position: absolute; }
21
.relpos { position: relative; }
22
.fixedpos { position: fixed; }
23
.start { top: 0; left: 0; }
24
.mid { top: 10px; left: 10px; }
25
.end { bottom: 0; right: 0; }
26
.zindex { z-index: 1; }
27
.small { width: 10px; height: 10px; background: blue; }
28
.medium { width: 20px; height: 20px; background: green; }
29
.large { width: 30px; height: 30px; background: pink; }
30
</style>
31
32
<div id=container>
33
  Text.
34
  <div id=child></div>
35
  <span>inline child</span>
36
  <div class="abspos start small"></div>
37
  <div class="relpos mid medium"></div>
38
  <div class="fixedpos end large"></div>
39
  <div class=relpos>
40
    <div class="abspos mid small zindex"></div>
41
  </div>
42
</div>
43
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-052.html +60 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-052.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>CSS Content Visibility: hidden starts painting when removed</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="container-with-pos-children-ref.html">
8
<meta name="assert" content="content-visibility subtrees start painting when hidden is removed">
9
10
<script src="/common/reftest-wait.js"></script>
11
12
<style>
13
#container {
14
  width: 150px;
15
  height: 150px;
16
  background: lightblue;
17
  contain: layout;
18
}
19
.hidden {
20
  content-visibility: hidden;
21
}
22
#child {
23
  width: 50px;
24
  height: 50px;
25
  background: lightgreen;
26
}
27
.abspos { position: absolute; }
28
.relpos { position: relative; }
29
.fixedpos { position: fixed; }
30
.start { top: 0; left: 0; }
31
.mid { top: 10px; left: 10px; }
32
.end { bottom: 0; right: 0; }
33
.zindex { z-index: 1; }
34
.small { width: 10px; height: 10px; background: blue; }
35
.medium { width: 20px; height: 20px; background: green; }
36
.large { width: 30px; height: 30px; background: pink; }
37
</style>
38
39
<div id=container class=hidden>
40
  Text.
41
  <div id=child></div>
42
  <span>inline child</span>
43
  <div class="abspos start small"></div>
44
  <div class="relpos mid medium"></div>
45
  <div class="fixedpos end large"></div>
46
  <div class=relpos>
47
    <div class="abspos mid small zindex"></div>
48
  </div>
49
</div>
50
51
<script>
52
function runTest() {
53
  const container = document.getElementById("container");
54
  container.classList.remove("hidden");
55
  requestAnimationFrame(takeScreenshot);
56
}
57
58
window.onload = runTest;
59
</script>
60
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-053-expected.txt +4 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-053-expected.txt_sec1
1
2
3
PASS Targetting a slotted auto-hidden element with focus makes it the active element
4
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-053.html +30 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-053.html_sec1
1
<html>
2
<meta charset="utf8">
3
<title>Content Visibility: focus on display none element</title>
4
<link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">
5
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
6
<meta name="assert" content="tab navigation skips display none elements in an auto subtree">
7
8
<script src="/resources/testharness.js"></script>
9
<script src="/resources/testharnessreport.js"></script>
10
11
<div id=spacer style="height: 3000px"></div>
12
<div id="host">
13
  <input id="slotted" type="text">
14
</div>
15
16
<script>
17
test(() => {
18
  const container = document.createElement("div");
19
  container.innerHTML = "<slot></slot>";
20
  container.style = "content-visibility: auto";
21
22
  const shadowRoot = host.attachShadow({ mode: "open" });
23
  shadowRoot.appendChild(container);
24
25
  assert_not_equals(document.activeElement, slotted);
26
  slotted.focus();
27
  assert_equals(document.activeElement, slotted);
28
}, "Targetting a slotted auto-hidden element with focus makes it the active element");
29
</script>
30
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-054-expected.txt +3 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-054-expected.txt_sec1
1
2
PASS Trying to focus on an element in a hidden subtree with display none will not work
3
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-054.html +34 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-054.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Display Locking: focus on styled element</title>
5
<link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<meta name="assert" content="focus does not target display-none but hidden elements">
8
9
<script src="/resources/testharness.js"></script>
10
<script src="/resources/testharnessreport.js"></script>
11
12
<div id="container" style="content-visibility: auto">
13
  <div id="focusable1" tabIndex="0">
14
    focusable thing
15
  </div>
16
  <div id="displayNoneParent">
17
    <div id="focusable2" tabIndex="0">
18
      focusable thing
19
    </div>
20
  </div>
21
</div>
22
23
<script>
24
test(() => {
25
  focusable1.style.display = "none";
26
  focusable1.focus();
27
  assert_not_equals(document.activeElement, focusable1);
28
29
  displayNoneParent.style.display = "none";
30
  focusable2.focus();
31
  assert_not_equals(document.activeElement, focusable2);
32
}, "Trying to focus on an element in a hidden subtree with display none will not work");
33
</script>
34
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-055-expected.html +27 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-055-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Content Visibility: spacer and a container, scrolled to container (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
.spacer {
10
  width: 150px;
11
  height: 3000px;
12
  background: lightblue;
13
}
14
#container {
15
  width: 150px;
16
  height: 150px;
17
  background: lightgreen;
18
}
19
</style>
20
21
<div class="spacer"></div>
22
<div id="container"></div>
23
24
<script>
25
onload = () => container.scrollIntoView();
26
</script>
27
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-055.html +42 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-055.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>Content Visibility: anchor links prevented</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="spacer-and-container-scrolled-ref.html">
8
<meta name="assert" content="anchor link scroll is not prevented when the target is hidden">
9
10
<script src="/common/reftest-wait.js"></script>
11
12
<style>
13
.spacer {
14
  width: 150px;
15
  height: 3000px;
16
  background: lightblue;
17
}
18
#container {
19
  width: 150px;
20
  height: 150px;
21
  background: lightgreen;
22
  content-visibility: hidden;
23
}
24
#target {
25
  width: 100px;
26
  height: 100px;
27
  background: green;
28
}
29
</style>
30
31
<div class="spacer"></div>
32
<div id="container"><div id="target"></div></div>
33
34
<script>
35
function runTest() {
36
  location.href += "#target";
37
  requestAnimationFrame(takeScreenshot);
38
}
39
40
window.onload = () => { requestAnimationFrame(runTest); };
41
</script>
42
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-056-expected.html +27 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-056-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Content Visibility: spacer and a container, scrolled to container (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
.spacer {
10
  width: 150px;
11
  height: 3000px;
12
  background: lightblue;
13
}
14
#container {
15
  width: 150px;
16
  height: 150px;
17
  background: lightgreen;
18
}
19
</style>
20
21
<div class="spacer"></div>
22
<div id="container"></div>
23
24
<script>
25
onload = () => container.scrollIntoView();
26
</script>
27
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-056.html +42 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-056.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>Content Visibility: scrollIntoView prevented</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="spacer-and-container-scrolled-ref.html">
8
<meta name="assert" content="scrollIntoView is not prevented when the target is hidden">
9
10
<script src="/common/reftest-wait.js"></script>
11
12
<style>
13
.spacer {
14
  width: 150px;
15
  height: 3000px;
16
  background: lightblue;
17
}
18
#container {
19
  width: 150px;
20
  height: 150px;
21
  background: lightgreen;
22
  content-visibility: hidden;
23
}
24
#target {
25
  width: 100px;
26
  height: 100px;
27
  background: green;
28
}
29
</style>
30
31
<div class="spacer"></div>
32
<div id="container"><div id="target"></div></div>
33
34
<script>
35
function runTest() {
36
  document.getElementById("target").scrollIntoView();
37
  requestAnimationFrame(takeScreenshot);
38
}
39
40
window.onload = () => { requestAnimationFrame(runTest); };
41
</script>
42
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-057-expected.html +25 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-057-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>CSS Content Visibility: container with child and text (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
#container {
10
  width: 150px;
11
  height: 150px;
12
  background: lightblue;
13
}
14
#child {
15
  width: 50px;
16
  height: 50px;
17
  background: lightgreen;
18
}
19
</style>
20
21
<div id=container>
22
  Text.
23
  <div id=child></div>
24
</div>
25
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-057.html +52 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-057.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>Content Visibility: hidden subtree becomes auto in the viewport</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="container-with-child-ref.html">
8
<meta name="assert" content="hidden subtree because auto and then paints">
9
<script src="/common/reftest-wait.js"></script>
10
11
<style>
12
#container {
13
  width: 150px;
14
  height: 150px;
15
  background: lightblue;
16
}
17
#child {
18
  width: 50px;
19
  height: 50px;
20
  background: lightgreen;
21
}
22
.auto { content-visibility: auto; }
23
.hidden { content-visibility: hidden; }
24
25
</style>
26
27
<div id=container class=hidden>
28
  Text.
29
  <div id=child></div>
30
</div>
31
32
<script>
33
34
function runTest() {
35
  document.getElementById("container").classList.remove("hidden");
36
  document.getElementById("container").classList.add("auto");
37
38
  requestAnimationFrame(takeScreenshot);
39
}
40
41
window.onload = requestAnimationFrame(() => {
42
  requestAnimationFrame(() => {
43
    requestAnimationFrame(() => {
44
      runTest();
45
    });
46
  });
47
});
48
49
</script>
50
</html>
51
52
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-058-expected.html +59 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-058-expected.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>CSS Content Visibility: auto, scrollIntoView() (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<script src="/common/reftest-wait.js"></script>
8
9
<style>
10
.spacer {
11
  height: 10000px;
12
}
13
.container {
14
  position: relative;
15
  width: 150px;
16
  background: lightblue;
17
  contain-intrinsic-size: 50px 250px;
18
}
19
.size_contained {
20
  contain: size;
21
}
22
.child {
23
  width: 50px;
24
  height: 300px;
25
  background: lightgreen;
26
}
27
#target {
28
  position: absolute;
29
  bottom: 0;
30
31
  width: 10px;
32
  height: 10px;
33
  background: blue;
34
}
35
</style>
36
37
<div class=spacer></div>
38
<div id=container class="container">
39
  <div class=child></div>
40
  <div id=target></div>
41
</div>
42
<div class=spacer></div>
43
44
<script>
45
46
function runReference() {
47
  document.getElementById("target").scrollIntoView(true /* alignToTop */);
48
  requestAnimationFrame(takeScreenshot);
49
}
50
51
window.onload = requestAnimationFrame(() => {
52
  requestAnimationFrame(() => {
53
    requestAnimationFrame(() => {
54
      runReference();
55
    });
56
  });
57
});
58
59
</script>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-058.html +63 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-058.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>Content Visibility: auto, scrollIntoView()</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="content-visibility-058-ref.html">
8
<meta name="assert" content="scrollIntoView() uses contain:size information to find target offset">
9
<meta name="assert" content="viewport intersection removes contain:size thus moving target">
10
<script src="/common/reftest-wait.js"></script>
11
12
<style>
13
.spacer {
14
  height: 10000px;
15
}
16
.container {
17
  width: 150px;
18
  background: lightblue;
19
  contain-intrinsic-size: 50px 250px;
20
}
21
.child {
22
  width: 50px;
23
  height: 300px;
24
  background: lightgreen;
25
}
26
#target {
27
  position: absolute;
28
  bottom: 0;
29
30
  width: 10px;
31
  height: 10px;
32
  background: blue;
33
}
34
.auto { content-visibility: auto; }
35
36
</style>
37
38
<div class=spacer></div>
39
<div class="container auto">
40
  <div class=child></div>
41
  <div id=target></div>
42
</div>
43
<div class=spacer></div>
44
45
<script>
46
47
function runTest() {
48
  document.getElementById("target").scrollIntoView(true /* alignToTop */);
49
  requestAnimationFrame(takeScreenshot);
50
}
51
52
window.onload = requestAnimationFrame(() => {
53
  requestAnimationFrame(() => {
54
    requestAnimationFrame(() => {
55
      runTest();
56
    });
57
  });
58
});
59
60
</script>
61
</html>
62
63
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-059-expected.html +40 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-059-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>CSS Content Visibility: hidden + scrollIntoView (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
.spacer {
10
  height: 1000px;
11
  background: lightgreen;
12
}
13
#container {
14
  width: 150px;
15
  height: 150px;
16
  background: lightblue;
17
}
18
#target {
19
  position: relative;
20
  top: 75px;
21
  visibility: hidden;
22
23
  width: 50px;
24
  height: 50px;
25
  background: red;
26
}
27
</style>
28
29
<div>top of the page</div>
30
<div class=spacer></div>
31
<div id=container>
32
  <div id=target></div>
33
</div>
34
<div class=spacer></div>
35
<div>bottom of the page</div>
36
37
<script>
38
onload = () => document.getElementById("target").scrollIntoView();
39
</script>
40
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-059.html +58 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-059.html_sec1
1
<!doctype HTML>
2
3
<html class="reftest-wait">
4
<meta charset="utf8">
5
<title>CSS Content Visibility: hidden + scrollIntoView</title>
6
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
7
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
8
<link rel="match" href="content-visibility-059-ref.html">
9
<meta name="assert" content="scrollIntoView scrolls to element under hidden, not just container">
10
<meta name="assert" content="scrollIntoView does not start painting hidden content">
11
<script src="/common/reftest-wait.js"></script>
12
13
<style>
14
.spacer {
15
  height: 1000px;
16
  background: lightgreen;
17
}
18
#container {
19
  width: 150px;
20
  height: 150px;
21
  background: lightblue;
22
}
23
#target {
24
  position: relative;
25
  top: 75px;
26
27
  width: 50px;
28
  height: 50px;
29
  background: red;
30
}
31
.hidden {
32
  content-visibility: hidden;
33
}
34
</style>
35
36
<div>top of the page</div>
37
<div class=spacer></div>
38
<div id=container class=hidden>
39
  <div id=target></div>
40
</div>
41
<div class=spacer></div>
42
<div>bottom of the page</div>
43
44
<script>
45
function runTest() {
46
  document.getElementById("target").scrollIntoView();
47
  requestAnimationFrame(takeScreenshot);
48
}
49
50
window.onload = requestAnimationFrame(() => {
51
  requestAnimationFrame(() => {
52
    requestAnimationFrame(() => {
53
      runTest();
54
    });
55
  });
56
});
57
</script>
58
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-060-expected.html +23 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-060-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Content Visibility: spacer and a container (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
.spacer {
10
  width: 150px;
11
  height: 3000px;
12
  background: lightblue;
13
}
14
#container {
15
  contain: style layout;
16
  width: 150px;
17
  height: 150px;
18
}
19
</style>
20
21
<div class="spacer"></div>
22
<div id="container"></div>
23
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-060.html +57 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-060.html_sec1
1
<!doctype HTML>
2
3
<html class="reftest-wait">
4
<meta charset="utf8">
5
<title>CSS Content Visibility: hidden + scrollIntoView on display:none</title>
6
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
7
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
8
<link rel="match" href="spacer-and-container-ref.html">
9
<meta name="assert" content="scrollIntoView ignores display:none element in a hidden subtree">
10
<script src="/common/reftest-wait.js"></script>
11
12
<style>
13
.spacer {
14
  width: 150px;
15
  height: 3000px;
16
  background: lightblue;
17
}
18
#container {
19
  width: 150px;
20
  height: 150px;
21
  background: lightblue;
22
}
23
#target {
24
  display: none;
25
26
  position: relative;
27
  top: 75px;
28
29
  width: 50px;
30
  height: 50px;
31
  background: red;
32
}
33
.hidden {
34
  content-visibility: hidden;
35
}
36
</style>
37
38
<div class=spacer></div>
39
<div id=container class=hidden>
40
  <div id=target></div>
41
</div>
42
43
<script>
44
function runTest() {
45
  document.getElementById("target").scrollIntoView();
46
  requestAnimationFrame(takeScreenshot);
47
}
48
49
window.onload = requestAnimationFrame(() => {
50
  requestAnimationFrame(() => {
51
    requestAnimationFrame(() => {
52
      runTest();
53
    });
54
  });
55
});
56
</script>
57
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-061-expected.html +23 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-061-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Content Visibility: spacer and a container (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
.spacer {
10
  width: 150px;
11
  height: 3000px;
12
  background: lightblue;
13
}
14
#container {
15
  contain: style layout;
16
  width: 150px;
17
  height: 150px;
18
}
19
</style>
20
21
<div class="spacer"></div>
22
<div id="container"></div>
23
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-061.html +57 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-061.html_sec1
1
<!doctype HTML>
2
3
<html class="reftest-wait">
4
<meta charset="utf8">
5
<title>CSS Content Visibility: hidden + scrollIntoView on display:contents</title>
6
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
7
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
8
<link rel="match" href="spacer-and-container-ref.html">
9
<meta name="assert" content="scrollIntoView ignores display:contents element in a hidden subtree">
10
<script src="/common/reftest-wait.js"></script>
11
12
<style>
13
.spacer {
14
  width: 150px;
15
  height: 3000px;
16
  background: lightblue;
17
}
18
#container {
19
  width: 150px;
20
  height: 150px;
21
  background: lightblue;
22
}
23
#target {
24
  display: contents;
25
26
  position: relative;
27
  top: 75px;
28
29
  width: 50px;
30
  height: 50px;
31
  background: red;
32
}
33
.hidden {
34
  content-visibility: hidden;
35
}
36
</style>
37
38
<div class=spacer></div>
39
<div id=container class=hidden>
40
  <div id=target></div>
41
</div>
42
43
<script>
44
function runTest() {
45
  document.getElementById("target").scrollIntoView();
46
  requestAnimationFrame(takeScreenshot);
47
}
48
49
window.onload = requestAnimationFrame(() => {
50
  requestAnimationFrame(() => {
51
    requestAnimationFrame(() => {
52
      runTest();
53
    });
54
  });
55
});
56
</script>
57
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-062-expected.html +23 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-062-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Content Visibility: spacer and a container (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
.spacer {
10
  width: 150px;
11
  height: 3000px;
12
  background: lightblue;
13
}
14
#container {
15
  contain: style layout;
16
  width: 150px;
17
  height: 150px;
18
}
19
</style>
20
21
<div class="spacer"></div>
22
<div id="container"></div>
23
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-062.html +57 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-062.html_sec1
1
<!doctype HTML>
2
3
<html class="reftest-wait">
4
<meta charset="utf8">
5
<title>CSS Content Visibility: auto + scrollIntoView on display:none</title>
6
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
7
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
8
<link rel="match" href="spacer-and-container-ref.html">
9
<meta name="assert" content="scrollIntoView ignores display:none element in an auto subtree">
10
<script src="/common/reftest-wait.js"></script>
11
12
<style>
13
.spacer {
14
  width: 150px;
15
  height: 3000px;
16
  background: lightblue;
17
}
18
#container {
19
  width: 150px;
20
  height: 150px;
21
  background: lightblue;
22
}
23
#target {
24
  display: none;
25
26
  position: relative;
27
  top: 75px;
28
29
  width: 50px;
30
  height: 50px;
31
  background: red;
32
}
33
.auto {
34
  content-visibility: auto;
35
}
36
</style>
37
38
<div class=spacer></div>
39
<div id=container class=auto>
40
  <div id=target></div>
41
</div>
42
43
<script>
44
function runTest() {
45
  document.getElementById("target").scrollIntoView();
46
  requestAnimationFrame(takeScreenshot);
47
}
48
49
window.onload = requestAnimationFrame(() => {
50
  requestAnimationFrame(() => {
51
    requestAnimationFrame(() => {
52
      runTest();
53
    });
54
  });
55
});
56
</script>
57
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-063-expected.html +23 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-063-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Content Visibility: spacer and a container (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
.spacer {
10
  width: 150px;
11
  height: 3000px;
12
  background: lightblue;
13
}
14
#container {
15
  contain: style layout;
16
  width: 150px;
17
  height: 150px;
18
}
19
</style>
20
21
<div class="spacer"></div>
22
<div id="container"></div>
23
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-063.html +57 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-063.html_sec1
1
<!doctype HTML>
2
3
<html class="reftest-wait">
4
<meta charset="utf8">
5
<title>CSS Content Visibility: auto + scrollIntoView on display:contents</title>
6
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
7
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
8
<link rel="match" href="spacer-and-container-ref.html">
9
<meta name="assert" content="scrollIntoView ignores display:contents element in an auto subtree">
10
<script src="/common/reftest-wait.js"></script>
11
12
<style>
13
.spacer {
14
  width: 150px;
15
  height: 3000px;
16
  background: lightblue;
17
}
18
#container {
19
  width: 150px;
20
  height: 150px;
21
  background: lightblue;
22
}
23
#target {
24
  display: contents;
25
26
  position: relative;
27
  top: 75px;
28
29
  width: 50px;
30
  height: 50px;
31
  background: red;
32
}
33
.auto {
34
  content-visibility: auto;
35
}
36
</style>
37
38
<div class=spacer></div>
39
<div id=container class=auto>
40
  <div id=target></div>
41
</div>
42
43
<script>
44
function runTest() {
45
  document.getElementById("target").scrollIntoView();
46
  requestAnimationFrame(takeScreenshot);
47
}
48
49
window.onload = requestAnimationFrame(() => {
50
  requestAnimationFrame(() => {
51
    requestAnimationFrame(() => {
52
      runTest();
53
    });
54
  });
55
});
56
</script>
57
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-064-expected.html +57 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-064-expected.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>CSS Content Visibility: hidden + scrollIntoView (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<script src="/common/reftest-wait.js"></script>
8
9
<style>
10
.spacer {
11
  height: 1000px;
12
  background: lightgreen;
13
}
14
#container {
15
  position: relative;
16
  width: 150px;
17
  background: lightblue;
18
  contain: paint;
19
}
20
#child {
21
  width: 150px;
22
  height: 300px;
23
}
24
#target {
25
  position: absolute;
26
  bottom: 0;
27
28
  width: 50px;
29
  height: 50px;
30
  background: red;
31
}
32
</style>
33
34
<div>top of the page</div>
35
<div class=spacer></div>
36
<div id=container>
37
  <div id=child></div>
38
  <div id=target tabindex=0></div>
39
</div>
40
<div class=spacer></div>
41
<div>bottom of the page</div>
42
43
<script>
44
function runReference() {
45
  document.getElementById("target").focus();
46
  requestAnimationFrame(takeScreenshot);
47
}
48
49
window.onload = requestAnimationFrame(() => {
50
  requestAnimationFrame(() => {
51
    requestAnimationFrame(() => {
52
      runReference();
53
    });
54
  });
55
});
56
</script>
57
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-064.html +63 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-064.html_sec1
1
<!doctype HTML>
2
3
<html class="reftest-wait">
4
<meta charset="utf8">
5
<title>CSS Content Visibility: auto + focus</title>
6
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
7
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
8
<link rel="match" href="content-visibility-064-ref.html">
9
<meta name="assert" content="focus() can focus auto skipped subtree elements">
10
<meta name="assert" content="focus() scrolls after removing contain:size">
11
<script src="/common/reftest-wait.js"></script>
12
13
<style>
14
.spacer {
15
  height: 1000px;
16
  background: lightgreen;
17
}
18
#container {
19
  width: 150px;
20
  background: lightblue;
21
  contain-intrinsic-size: 50px 150px;
22
}
23
#child {
24
  width: 150px;
25
  height: 300px;
26
}
27
#target {
28
  position: absolute;
29
  bottom: 0;
30
31
  width: 50px;
32
  height: 50px;
33
  background: red;
34
}
35
.auto {
36
  content-visibility: auto;
37
}
38
</style>
39
40
<div>top of the page</div>
41
<div class=spacer></div>
42
<div id=container class=auto>
43
  <div id=child></div>
44
  <div id=target tabindex=0></div>
45
</div>
46
<div class=spacer></div>
47
<div>bottom of the page</div>
48
49
<script>
50
function runTest() {
51
  document.getElementById("target").focus();
52
  requestAnimationFrame(takeScreenshot);
53
}
54
55
window.onload = requestAnimationFrame(() => {
56
  requestAnimationFrame(() => {
57
    requestAnimationFrame(() => {
58
      runTest();
59
    });
60
  });
61
});
62
</script>
63
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-065-expected.html +23 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-065-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Content Visibility: spacer and a container (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
.spacer {
10
  width: 150px;
11
  height: 3000px;
12
  background: lightblue;
13
}
14
#container {
15
  contain: style layout;
16
  width: 150px;
17
  height: 150px;
18
}
19
</style>
20
21
<div class="spacer"></div>
22
<div id="container"></div>
23
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-065.html +57 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-065.html_sec1
1
<!doctype HTML>
2
3
<html class="reftest-wait">
4
<meta charset="utf8">
5
<title>CSS Content Visibility: auto + focus on display:none</title>
6
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
7
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
8
<link rel="match" href="spacer-and-container-ref.html">
9
<meta name="assert" content="focus ignores display:none element in an auto subtree">
10
<script src="/common/reftest-wait.js"></script>
11
12
<style>
13
.spacer {
14
  width: 150px;
15
  height: 3000px;
16
  background: lightblue;
17
}
18
#container {
19
  width: 150px;
20
  height: 150px;
21
  background: lightblue;
22
}
23
#target {
24
  display: none;
25
26
  position: relative;
27
  top: 75px;
28
29
  width: 50px;
30
  height: 50px;
31
  background: red;
32
}
33
.auto {
34
  content-visibility: auto;
35
}
36
</style>
37
38
<div class=spacer></div>
39
<div id=container class=auto>
40
  <div id=target tabindex=0></div>
41
</div>
42
43
<script>
44
function runTest() {
45
  document.getElementById("target").focus();
46
  requestAnimationFrame(takeScreenshot);
47
}
48
49
window.onload = requestAnimationFrame(() => {
50
  requestAnimationFrame(() => {
51
    requestAnimationFrame(() => {
52
      runTest();
53
    });
54
  });
55
});
56
</script>
57
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-066-expected.html +23 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-066-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Content Visibility: spacer and a container (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
.spacer {
10
  width: 150px;
11
  height: 3000px;
12
  background: lightblue;
13
}
14
#container {
15
  contain: style layout;
16
  width: 150px;
17
  height: 150px;
18
}
19
</style>
20
21
<div class="spacer"></div>
22
<div id="container"></div>
23
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-066.html +57 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-066.html_sec1
1
<!doctype HTML>
2
3
<html class="reftest-wait">
4
<meta charset="utf8">
5
<title>CSS Content Visibility: auto + focus on display:contents</title>
6
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
7
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
8
<link rel="match" href="spacer-and-container-ref.html">
9
<meta name="assert" content="focus ignores display:contents element in an auto subtree">
10
<script src="/common/reftest-wait.js"></script>
11
12
<style>
13
.spacer {
14
  width: 150px;
15
  height: 3000px;
16
  background: lightblue;
17
}
18
#container {
19
  width: 150px;
20
  height: 150px;
21
  background: lightblue;
22
}
23
#target {
24
  display: contents;
25
26
  position: relative;
27
  top: 75px;
28
29
  width: 50px;
30
  height: 50px;
31
  background: red;
32
}
33
.auto {
34
  content-visibility: auto;
35
}
36
</style>
37
38
<div class=spacer></div>
39
<div id=container class=auto>
40
  <div id=target tabindex=0></div>
41
</div>
42
43
<script>
44
function runTest() {
45
  document.getElementById("target").focus();
46
  requestAnimationFrame(takeScreenshot);
47
}
48
49
window.onload = requestAnimationFrame(() => {
50
  requestAnimationFrame(() => {
51
    requestAnimationFrame(() => {
52
      runTest();
53
    });
54
  });
55
});
56
</script>
57
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-067-expected.html +23 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-067-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Content Visibility: spacer and a container (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
.spacer {
10
  width: 150px;
11
  height: 3000px;
12
  background: lightblue;
13
}
14
#container {
15
  contain: style layout;
16
  width: 150px;
17
  height: 150px;
18
}
19
</style>
20
21
<div class="spacer"></div>
22
<div id="container"></div>
23
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-067.html +55 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-067.html_sec1
1
<!doctype HTML>
2
3
<html class="reftest-wait">
4
<meta charset="utf8">
5
<title>CSS Content Visibility: hidden + focus</title>
6
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
7
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
8
<link rel="match" href="spacer-and-container-ref.html">
9
<meta name="assert" content="focus ignores element in a hidden subtree">
10
<script src="/common/reftest-wait.js"></script>
11
12
<style>
13
.spacer {
14
  width: 150px;
15
  height: 3000px;
16
  background: lightblue;
17
}
18
#container {
19
  width: 150px;
20
  height: 150px;
21
  background: lightblue;
22
}
23
#target {
24
  position: relative;
25
  top: 75px;
26
27
  width: 50px;
28
  height: 50px;
29
  background: red;
30
}
31
.hidden {
32
  content-visibility: hidden;
33
}
34
</style>
35
36
<div class=spacer></div>
37
<div id=container class=hidden>
38
  <div id=target tabindex=0></div>
39
</div>
40
41
<script>
42
function runTest() {
43
  document.getElementById("target").focus();
44
  requestAnimationFrame(takeScreenshot);
45
}
46
47
window.onload = requestAnimationFrame(() => {
48
  requestAnimationFrame(() => {
49
    requestAnimationFrame(() => {
50
      runTest();
51
    });
52
  });
53
});
54
</script>
55
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-068-expected.txt +3 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-068-expected.txt_sec1
1
2
FAIL Content Visibility: off-screen focus assert_equals: step1 height expected 100 but got 10
3
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-068.html +98 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-068.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Content Visibility: off-screen focus</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<meta name="assert" content="content-visibility auto element remains non-skipped when elements in its subtree have focus.">
8
9
<script src="/resources/testharness.js"></script>
10
<script src="/resources/testharnessreport.js"></script>
11
12
<style>
13
body, html {
14
  padding: 0;
15
  margin: 0;
16
}
17
18
.spacer {
19
  height: 3000px;
20
  background: lightblue;
21
}
22
#container {
23
  background: lightgreen;
24
  contain-intrinsic-size: 50px 100px;
25
  content-visibility: auto;
26
}
27
#focusable {
28
  width: 10px;
29
  height: 10px;
30
}
31
</style>
32
33
<div class=spacer></div>
34
<div id=container>
35
  <div id=focusable tabindex=0></div>
36
</div>
37
<div class=spacer></div>
38
39
<script>
40
async_test((t) => {
41
  // Initially container should be 3000px offscreen with contained height 100px.
42
  function step1() {
43
    const r = container.getBoundingClientRect();
44
    t.step(() => {
45
      assert_equals(r.y, 3000, "step1 offset");
46
      assert_equals(r.height, 100, "step1 height");
47
    });
48
49
    focusable.focus();
50
    requestAnimationFrame(step2);
51
  }
52
  // After focusing the subtree, the container should be somewhere closer than
53
  // 3000px (scrolled into view) and the height should be 10px, since it no
54
  // longer has containment.
55
  function step2() {
56
    const r = container.getBoundingClientRect();
57
    t.step(() => {
58
      assert_less_than(r.y, 3000, "step2 offset");
59
      assert_equals(r.height, 10, "step2 height");
60
    });
61
    document.scrollingElement.scrollTop = 0;
62
    requestAnimationFrame(step3);
63
  }
64
  // After scrolling the document back to the top, the container should be back
65
  // at 3000px but because its subtree is still focused, it should have height
66
  // 10px.
67
  function step3() {
68
    const r = container.getBoundingClientRect();
69
    t.step(() => {
70
      assert_equals(r.y, 3000, "step3 offset");
71
      assert_equals(r.height, 10, "step3 height");
72
    });
73
    requestAnimationFrame(step4);
74
  }
75
  // This is a repeat of step3, to ensure that this is a stable state.
76
  function step4() {
77
    const r = container.getBoundingClientRect();
78
    t.step(() => {
79
      assert_equals(r.y, 3000, "step4 offset");
80
      assert_equals(r.height, 10, "step4 height");
81
    });
82
    focusable.blur();
83
    requestAnimationFrame(step5);
84
  }
85
  // After blurring the focused element, we should go back to the contained
86
  // height of 100px.
87
  function step5() {
88
    const r = container.getBoundingClientRect();
89
    t.step(() => {
90
      assert_equals(r.y, 3000, "step5 offset");
91
      assert_equals(r.height, 100, "step5 height");
92
    });
93
    t.done();
94
  }
95
  step1();
96
});
97
</script>
98
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-069-expected.txt +3 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-069-expected.txt_sec1
1
2
PASS Content Visibility: pending visibility changes
3
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-069.html +53 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-069.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Content Visibility: pending visibility changes</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<meta name="assert" content="disconnecting elements while visibility state adjustments are pending does not crash">
8
9
<script src="/resources/testharness.js"></script>
10
<script src="/resources/testharnessreport.js"></script>
11
12
<style>
13
body {
14
  margin: 0;
15
  padding: 0;
16
}
17
.spacer {
18
  height: 3000px;
19
}
20
.auto {
21
  content-visibility: auto;
22
  width: 5px;
23
  height: 5px;
24
}
25
</style>
26
27
<body id="body">
28
<div id=one class=auto>text</div>
29
<div class=spacer></div>
30
<div id=two class=auto>text</div>
31
<div class=spacer></div>
32
</body>
33
34
<script>
35
async_test((t) => {
36
  function runTest() {
37
    document.scrollingElement.scrollTop = 2990;
38
39
    const range = document.createRange();
40
    range.selectNodeContents(one);
41
    window.getSelection().addRange(range);
42
43
    requestAnimationFrame(() => {
44
      one.remove();
45
      two.remove();
46
      t.done();
47
    });
48
  }
49
  onload = requestAnimationFrame(() => requestAnimationFrame(runTest));
50
});
51
52
</script>
53
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-070-expected.txt +4 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-070-expected.txt_sec1
1
hello
2
3
FAIL Content Visibility: off-screen selection assert_equals: step1 height expected 100 but got 10
4
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-070.html +112 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-070.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Content Visibility: off-screen selection</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<meta name="assert" content="content-visibility auto element remains non-skipped when elements in its subtree have selection.">
8
9
<script src="/resources/testharness.js"></script>
10
<script src="/resources/testharnessreport.js"></script>
11
12
<style>
13
body, html {
14
  padding: 0;
15
  margin: 0;
16
}
17
18
.spacer {
19
  height: 3000px;
20
  background: lightblue;
21
}
22
#container {
23
  background: lightgreen;
24
  contain-intrinsic-size: 50px 100px;
25
  content-visibility: auto;
26
}
27
#selectable {
28
  width: 10px;
29
  height: 10px;
30
}
31
</style>
32
33
<div class=spacer></div>
34
<div id=container>
35
  <div id=selectable>hello</div>
36
</div>
37
<div class=spacer></div>
38
39
<script>
40
async_test((t) => {
41
  const selection = window.getSelection();
42
  const range = document.createRange();
43
  range.selectNodeContents(selectable);
44
45
  // Initially container should be 3000px offscreen with contained height 100px.
46
  function step1() {
47
    const r = container.getBoundingClientRect();
48
    t.step(() => {
49
      assert_equals(r.y, 3000, "step1 offset");
50
      assert_equals(r.height, 100, "step1 height");
51
    });
52
53
    selection.removeAllRanges();
54
    selection.addRange(range);
55
56
    requestAnimationFrame(step2);
57
  }
58
  // The container has a selection so it should be smaller now, height 10px.
59
  function step2() {
60
    const r = container.getBoundingClientRect();
61
    t.step(() => {
62
      assert_equals(r.y, 3000, "step3 offset");
63
      assert_equals(r.height, 10, "step3 height");
64
    });
65
    document.scrollingElement.scrollTop = 3000;
66
    requestAnimationFrame(step3);
67
  }
68
  // After scrolling the container should be closer and still height 10px.
69
  function step3() {
70
    const r = container.getBoundingClientRect();
71
    t.step(() => {
72
      assert_less_than(r.y, 3000, "step2 offset");
73
      assert_equals(r.height, 10, "step2 height");
74
    });
75
    document.scrollingElement.scrollTop = 0;
76
    requestAnimationFrame(step4);
77
  }
78
  // Scrolling back to the top we should remain at height 10px.
79
  function step4() {
80
    const r = container.getBoundingClientRect();
81
    t.step(() => {
82
      assert_equals(r.y, 3000, "step4 offset");
83
      assert_equals(r.height, 10, "step4 height");
84
    });
85
    requestAnimationFrame(step5);
86
  }
87
  // Repeat step4 to ensure we're in a stable situation.
88
  function step5() {
89
    const r = container.getBoundingClientRect();
90
    t.step(() => {
91
      assert_equals(r.y, 3000, "step4 offset");
92
      assert_equals(r.height, 10, "step4 height");
93
    });
94
95
    selection.removeAllRanges();
96
97
    requestAnimationFrame(step6);
98
  }
99
  // After removing the selection we should go back to the contained
100
  // height of 100px.
101
  function step6() {
102
    const r = container.getBoundingClientRect();
103
    t.step(() => {
104
      assert_equals(r.y, 3000, "step5 offset");
105
      assert_equals(r.height, 100, "step5 height");
106
    });
107
    t.done();
108
  }
109
  step1();
110
});
111
</script>
112
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-071-expected.txt +13 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-071-expected.txt_sec1
1
hello
2
hello
3
hello
4
hello
5
hello
6
7
FAIL One elements selected:  assert_true: expected true got false
8
FAIL Range extended to cover more elements:  assert_true: expected true got false
9
FAIL Range shrunk to cover fewer elements:  assert_true: expected true got false
10
FAIL Range flipped from back to front:  assert_true: expected true got false
11
FAIL Range flipped from front to back:  assert_true: expected true got false
12
FAIL Range goes back and forth:  assert_true: expected true got false
13
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-071.html +185 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-071.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Content Visibility: off-screen selection</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<meta name="assert" content="content-visibility auto element remains non-skipped when elements in its subtree have selection.">
8
9
<script src="/resources/testharness.js"></script>
10
<script src="/resources/testharnessreport.js"></script>
11
12
<style>
13
body, html {
14
  padding: 0;
15
  margin: 0;
16
}
17
18
.spacer {
19
  height: 3000px;
20
}
21
.container {
22
  width: 10px;
23
  contain-intrinsic-size: 10px 20px;
24
  content-visibility: auto;
25
}
26
.child {
27
  width: 10px;
28
  height: 10px;
29
}
30
</style>
31
32
<div class=spacer></div>
33
<div id=container_1 class=container><div id=child_1 class=child>hello</div></div>
34
<div id=container_2 class=container><div id=child_2 class=child>hello</div></div>
35
<div id=container_3 class=container><div id=child_3 class=child>hello</div></div>
36
<div id=container_4 class=container><div id=child_4 class=child>hello</div></div>
37
<div id=container_5 class=container><div id=child_5 class=child>hello</div></div>
38
39
<script>
40
function isLocked(container) {
41
  const height = container.getBoundingClientRect().height;
42
  assert_true(height == 20 || height == 10);
43
  return container.getBoundingClientRect().height == 20;
44
}
45
46
const selection = window.getSelection();
47
function resetSelection() {
48
  selection.removeAllRanges();
49
  assert_true(isLocked(container_1));
50
  assert_true(isLocked(container_2));
51
  assert_true(isLocked(container_3));
52
  assert_true(isLocked(container_4));
53
  assert_true(isLocked(container_5));
54
}
55
56
test(() => {
57
  resetSelection();
58
  const range = document.createRange();
59
  range.selectNodeContents(child_2);
60
  selection.addRange(range);
61
62
  assert_true(isLocked(container_1), "1");
63
  assert_false(isLocked(container_2), "2");
64
  assert_true(isLocked(container_3), "3");
65
  assert_true(isLocked(container_4), "4");
66
  assert_true(isLocked(container_5), "5");
67
}, "One elements selected: ");
68
69
test(() => {
70
  resetSelection();
71
  const range = document.createRange();
72
  range.selectNodeContents(child_2);
73
  selection.addRange(range);
74
75
  assert_true(isLocked(container_1), "1");
76
  assert_false(isLocked(container_2), "2");
77
  assert_true(isLocked(container_3), "3");
78
  assert_true(isLocked(container_4), "4");
79
  assert_true(isLocked(container_5), "5");
80
81
  selection.extend(child_4, 0);
82
83
  assert_true(isLocked(container_1), "1");
84
  assert_false(isLocked(container_2), "2");
85
  assert_false(isLocked(container_3), "3");
86
  assert_false(isLocked(container_4), "4");
87
  assert_true(isLocked(container_5), "5");
88
}, "Range extended to cover more elements: ");
89
90
test(() => {
91
  resetSelection();
92
  const range = document.createRange();
93
  range.setStart(child_2, 0);
94
  range.setEnd(child_4, 0);
95
  selection.addRange(range);
96
97
  assert_true(isLocked(container_1), "1");
98
  assert_false(isLocked(container_2), "2");
99
  assert_false(isLocked(container_3), "3");
100
  assert_false(isLocked(container_4), "4");
101
  assert_true(isLocked(container_5), "5");
102
103
  selection.extend(child_2, 1);
104
105
  assert_true(isLocked(container_1), "1");
106
  assert_false(isLocked(container_2), "2");
107
  assert_true(isLocked(container_3), "3");
108
  assert_true(isLocked(container_4), "4");
109
  assert_true(isLocked(container_5), "5");
110
}, "Range shrunk to cover fewer elements: ");
111
112
test(() => {
113
  resetSelection();
114
  const range = document.createRange();
115
  range.setStart(child_3, 0);
116
  range.setEnd(child_3, 0);
117
  selection.addRange(range);
118
  selection.extend(child_2, 0);
119
120
  assert_true(isLocked(container_1), "1");
121
  assert_false(isLocked(container_2), "2");
122
  assert_false(isLocked(container_3), "3");
123
  assert_true(isLocked(container_4), "4");
124
  assert_true(isLocked(container_5), "5");
125
126
  selection.extend(child_4, 0);
127
128
  assert_true(isLocked(container_1), "1");
129
  assert_true(isLocked(container_2), "2");
130
  assert_false(isLocked(container_3), "3");
131
  assert_false(isLocked(container_4), "4");
132
  assert_true(isLocked(container_5), "5");
133
}, "Range flipped from back to front: ");
134
135
test(() => {
136
  resetSelection();
137
  const range = document.createRange();
138
  range.setStart(child_3, 0);
139
  range.setEnd(child_4, 0);
140
  selection.addRange(range);
141
142
  assert_true(isLocked(container_1), "1");
143
  assert_true(isLocked(container_2), "2");
144
  assert_false(isLocked(container_3), "3");
145
  assert_false(isLocked(container_4), "4");
146
  assert_true(isLocked(container_5), "5");
147
148
  selection.extend(child_2, 0);
149
150
  assert_true(isLocked(container_1), "1");
151
  assert_false(isLocked(container_2), "2");
152
  assert_false(isLocked(container_3), "3");
153
  assert_true(isLocked(container_4), "4");
154
  assert_true(isLocked(container_5), "5");
155
}, "Range flipped from front to back: ");
156
157
test(() => {
158
  resetSelection();
159
  const range = document.createRange();
160
  range.setStart(child_1, 0);
161
  range.setEnd(child_1, 0);
162
  selection.addRange(range);
163
164
  let state = 0;
165
  const states = [2, 4, 3, 5, 1];
166
  for (let i = 0; i < 10; ++i) {
167
    const id = states[state];
168
    selection.extend(document.getElementById(`child_${id}`), 1);
169
170
    for (let check_id = 1; check_id <= 5; ++check_id) {
171
      if (check_id <= id) {
172
        assert_false(
173
          isLocked(document.getElementById(`container_${check_id}`)),
174
          `test_${i}, container_${check_id}`);
175
      } else {
176
        assert_true(
177
          isLocked(document.getElementById(`container_${check_id}`)),
178
          `test_${i}, container_${check_id}`);
179
      }
180
    }
181
    state = (state + 1) % states.length;
182
  }
183
}, "Range goes back and forth: ");
184
</script>
185
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-072-expected.txt +7 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-072-expected.txt_sec1
1
2
PASS one.getBoundingClientRect():
3
FAIL two.getBoundingClientRect():  assert_equals: y expected 3007 but got 3041
4
FAIL three.getBoundingClientRect():  assert_equals: y expected 3007 but got 3075
5
FAIL four.getBoundingClientRect():  assert_equals: y expected 3007 but got 3109
6
FAIL five.getBoundingClientRect():  assert_equals: y expected 3007 but got 3143
7
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-072.html +86 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-072.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>Content Visibility: nested forced layouts</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<meta name="assert" content="nested content-visibility items are all processed when layout is forced">
8
9
<script src="/resources/testharness.js"></script>
10
<script src="/resources/testharnessreport.js"></script>
11
12
<style>
13
body, html {
14
  padding: 0;
15
  margin: 0;
16
}
17
.spacer {
18
  height: 3000px;
19
}
20
.target {
21
  width: 12px;
22
  height: 34px;
23
24
  position: relative;
25
  left: 5px;
26
  top: 7px;
27
}
28
29
.auto {
30
  content-visibility: auto;
31
}
32
.hidden {
33
  content-visibility: hidden;
34
}
35
</style>
36
37
<div class=spacer></div>
38
<div class=auto>
39
  <div class=auto>
40
    <div class=target id=one></div>
41
  </div>
42
</div>
43
44
<div class=auto>
45
  <div class=hidden>
46
    <div class=target id=two></div>
47
  </div>
48
</div>
49
50
<div class=hidden>
51
  <div class=auto>
52
    <div class=target id=three></div>
53
  </div>
54
</div>
55
56
<div class=hidden>
57
  <div class=hidden>
58
    <div class=target id=four></div>
59
  </div>
60
</div>
61
62
<div class=hidden>
63
  <div class=hidden>
64
    <div class=hidden>
65
      <div class=hidden>
66
        <div class=hidden>
67
          <div class=target id=five></div>
68
        </div>
69
      </div>
70
    </div>
71
  </div>
72
</div>
73
74
<script>
75
const ids = ["one", "two", "three", "four", "five"];
76
for (let i = 0; i < ids.length; ++i) {
77
  test(() => {
78
    const r = document.getElementById(ids[i]).getBoundingClientRect();
79
    assert_equals(r.x, 5, "x");
80
    assert_equals(r.y, 3007, "y");
81
    assert_equals(r.width, 12, "width");
82
    assert_equals(r.height, 34, "y");
83
  }, `${ids[i]}.getBoundingClientRect(): `);
84
}
85
</script>
86
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-073-expected.html +26 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-073-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>CSS Content Visibility: container with child and text (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
#container {
10
  width: 150px;
11
  height: 150px;
12
  background: lightblue;
13
  display: inline;
14
}
15
#child {
16
  width: 50px;
17
  height: 50px;
18
  background: lightgreen;
19
}
20
</style>
21
22
<div id=container>
23
  Text.
24
  <div id=child></div>
25
</div>
26
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-073.html +43 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-073.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>CSS Content Visibility: switching to inline starts painting</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="inline-container-with-child-ref.html">
8
<meta name="assert" content="content-visibility has no effect on non-atomic inlines">
9
10
<script src="/common/reftest-wait.js"></script>
11
12
<style>
13
#container {
14
  content-visibility: hidden;
15
  width: 150px;
16
  height: 150px;
17
  background: lightblue;
18
}
19
.inline {
20
  display: inline;
21
}
22
#child {
23
  width: 50px;
24
  height: 50px;
25
  background: lightgreen;
26
}
27
</style>
28
29
<div id=container>
30
  Text.
31
  <div id=child></div>
32
</div>
33
34
<script>
35
function runTest() {
36
  const container = document.getElementById("container");
37
  container.classList.add("inline");
38
  takeScreenshot();
39
}
40
41
window.onload = () => requestAnimationFrame(runTest);
42
</script>
43
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-074-expected.html +35 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-074-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>CSS Content Visibility: toggling auto with composited descedant (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
#a { will-change: transform; }
10
#b { height: 15000px; }
11
#c {
12
  width: 800px;
13
  height: 600px;
14
}
15
#d {
16
  will-change: transform;
17
  top: 0px;
18
  width: 500px;
19
  height: 500px;
20
  background: green;
21
}
22
.contain {
23
  contain: layout style paint;
24
}
25
26
</style>
27
28
<div id="a">
29
</div>
30
<div id="b">
31
  <div id="c" class=contain>
32
    <div id="d"></div>
33
    </div>
34
  </div>
35
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-074.html +69 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-074.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>CSS Content Visibility: toggling auto with composited descedant</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="content-visibility-074-ref.html">
8
<meta name="assert" content="after toggling content-visibility auto a few times, composited descedant is visible.">
9
10
<script src="/common/reftest-wait.js"></script>
11
12
<style>
13
#a { will-change: transform; }
14
#b { height: 15000px; }
15
#c {
16
  width: 800px;
17
  height: 600px;
18
}
19
#d {
20
  will-change: transform;
21
  top: 0px;
22
  width: 500px;
23
  height: 500px;
24
  background: green;
25
}
26
.auto {
27
  content-visibility: auto;
28
}
29
30
</style>
31
32
<div id="a">
33
</div>
34
<div id="b">
35
  <div id="c" class=auto>
36
    <div id="d"></div>
37
    </div>
38
  </div>
39
</div>
40
41
<script>
42
function runTest(step) {
43
  if (step % 2 == 0) {
44
    requestAnimationFrame(() => runTest(step + 1));
45
    return;
46
  }
47
48
  switch(step) {
49
    case 1:
50
      document.getElementById("c").classList.remove("auto");
51
      break;
52
    case 3:
53
      document.getElementById("c").classList.add("auto");
54
      break;
55
    case 5:
56
      document.getElementById("c").classList.remove("auto");
57
      break;
58
    case 7:
59
      document.getElementById("c").classList.add("auto");
60
      break;
61
    case 9:
62
      takeScreenshot();
63
      return;
64
  }
65
  requestAnimationFrame(() => runTest(step + 1));
66
}
67
68
window.onload = () => requestAnimationFrame(() => runTest(0));
69
</script>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-075-expected.html +37 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-075-expected.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>CSS Content Visibility: auto + scrollIntoView/fragment nav when size estimate is off (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<script src="/common/reftest-wait.js"></script>
9
10
<style>
11
.small_child {
12
  height: 1000px;
13
}
14
.large_child {
15
  height: 20000px;
16
  position: relative;
17
}
18
#target {
19
  position: absolute;
20
  bottom: 0;
21
}
22
</style>
23
24
<div class=auto><div class=small_child></div></div>
25
<div class=auto><div class=small_child></div></div>
26
<div class=auto><div class=large_child><div id=target>target</div></div></div>
27
<div class=auto><div class=large_child></div></div>
28
<div class=auto><div class=small_child></div></div>
29
30
<script>
31
function runReference() {
32
  target.scrollIntoView();
33
  takeScreenshot();
34
}
35
36
window.onload = () => requestAnimationFrame(() => requestAnimationFrame(runReference));
37
</script>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-075.html +41 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-075.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>CSS Content Visibility: auto + scrollIntoView when size estimate is off</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="content-visibility-075-ref.html">
8
<meta name="assert" content="With content-visibility: auto, scrollIntoView targets the right element">
9
10
<script src="/common/reftest-wait.js"></script>
11
12
<style>
13
.auto {
14
  content-visibility: auto;
15
  contain-intrinsic-size: 1px 1000px;
16
}
17
.child {
18
  height: 20000px;
19
  position: relative;
20
}
21
#target {
22
  position: absolute;
23
  bottom: 0;
24
}
25
</style>
26
27
<div class=auto><div class=child></div></div>
28
<div class=auto><div class=child></div></div>
29
<div class=auto><div class=child><div id=target>target</div></div></div>
30
<div class=auto><div class=child></div></div>
31
<div class=auto><div class=child></div></div>
32
33
<script>
34
function runTest() {
35
  target.scrollIntoView();
36
  // Double rAF to ensure that rendering has "settled".
37
  requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
38
}
39
40
window.onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
41
</script>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-076-expected.html +37 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-076-expected.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>CSS Content Visibility: auto + scrollIntoView/fragment nav when size estimate is off (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<script src="/common/reftest-wait.js"></script>
9
10
<style>
11
.small_child {
12
  height: 1000px;
13
}
14
.large_child {
15
  height: 20000px;
16
  position: relative;
17
}
18
#target {
19
  position: absolute;
20
  bottom: 0;
21
}
22
</style>
23
24
<div class=auto><div class=small_child></div></div>
25
<div class=auto><div class=small_child></div></div>
26
<div class=auto><div class=large_child><div id=target>target</div></div></div>
27
<div class=auto><div class=large_child></div></div>
28
<div class=auto><div class=small_child></div></div>
29
30
<script>
31
function runReference() {
32
  target.scrollIntoView();
33
  takeScreenshot();
34
}
35
36
window.onload = () => requestAnimationFrame(() => requestAnimationFrame(runReference));
37
</script>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-076.html +41 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-076.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>CSS Content Visibility: auto + fragment nav when size estimate is off</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="content-visibility-075-ref.html">
8
<meta name="assert" content="With content-visibility: auto, scrollIntoView targets the right element">
9
10
<script src="/common/reftest-wait.js"></script>
11
12
<style>
13
.auto {
14
  content-visibility: auto;
15
  contain-intrinsic-size: 1px 1000px;
16
}
17
.child {
18
  height: 20000px;
19
  position: relative;
20
}
21
#target {
22
  position: absolute;
23
  bottom: 0;
24
}
25
</style>
26
27
<div class=auto><div class=child></div></div>
28
<div class=auto><div class=child></div></div>
29
<div class=auto><div class=child><div id=target>target</div></div></div>
30
<div class=auto><div class=child></div></div>
31
<div class=auto><div class=child></div></div>
32
33
<script>
34
function runTest() {
35
  window.location.href += "#target";
36
  // Double rAF to ensure that rendering has "settled".
37
  requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
38
}
39
40
window.onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
41
</script>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-077-expected.txt +3 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-077-expected.txt_sec1
1
2
FAIL Content-visibility is not animatable assert_equals: expected (string) "visible" but got (undefined) undefined
3
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-077.html +27 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-077.html_sec1
1
<!doctype HTML>
2
<meta charset="utf8">
3
<title>CSS Content Visibility: content-visibility is not animatable.</title>
4
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
5
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
6
<meta name="assert" content="content-visibility is not animatable">
7
8
<script src="/resources/testharness.js"></script>
9
<script src="/resources/testharnessreport.js"></script>
10
11
<style>
12
@keyframes cv {
13
  from { content-visibility: auto }
14
  to { content-visibility: hidden }
15
}
16
17
#container { animation: cv 1s; }
18
</style>
19
20
<div id=container></div>
21
22
<script>
23
test(() => {
24
  const computedStyle = getComputedStyle(container);
25
  assert_equals(computedStyle.contentVisibility, "visible");
26
}, "Content-visibility is not animatable");
27
</script>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-078-expected.html +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-078-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>CSS Content Visibility: positioned movement update moves hidden container (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<style>
9
#target {
10
  top: 0;
11
  left: 100px;
12
  position: absolute;
13
  width: 100px;
14
  height: 100px;
15
  background: blue;
16
}
17
</style>
18
19
<div id=target></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-078.html +33 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-078.html_sec1
1
<!doctype HTML>
2
<html class="reftest-wait">
3
<meta charset="utf8">
4
<title>CSS Content Visibility: positioned movement update moves hidden container</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<link rel="match" href="content-visibility-078-ref.html">
8
<meta name="assert" content="when locked, position updates still apply">
9
10
<script src="/common/reftest-wait.js"></script>
11
12
<style>
13
.hidden { content-visibility: hidden; }
14
#target {
15
  top: 0;
16
  left: 0;
17
  position: absolute;
18
  width: 100px;
19
  height: 100px;
20
  background: blue;
21
}
22
</style>
23
24
<div id=target class=hidden>Content</div>
25
26
<script>
27
function runTest() {
28
  target.style = "left: 100px;";
29
  takeScreenshot();
30
}
31
32
window.onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
33
</script>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-079-expected.html +8 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-079-expected.html_sec1
1
<!doctype HTML>
2
<html>
3
<meta charset="utf8">
4
<title>CSS Content Visibility: auto in overflow hidden paints (reference)</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
8
<div>content</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-079.html +16 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-079.html_sec1
1
<!doctype HTML>
2
<meta charset="utf8">
3
<title>CSS Content Visibility: auto in overflow hidden paints</title>
4
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
5
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
6
<link rel="match" href="content-visibility-079-ref.html">
7
<meta name="assert" content="content-visibility auto element paints in an overflow hidden element that is not sized">
8
9
<style>
10
.auto { content-visibility: auto; }
11
.overflow { overflow: hidden; }
12
</style>
13
14
<div class=overflow>
15
  <div class=auto>content</div>
16
</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-080-expected.txt +4 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-080-expected.txt_sec1
1
Content Visibility: caret position with html hidden   * { all: initial; content-visibility: hidden; } test(() => { const range = document.caretRangeFromPoint(); assert_not_equals(range, null, "range exists"); assert_equals(range.startContainer, html, "startContainer is html"); assert_equals(range.startOffset, 0, "startOffset is zero"); assert_equals(range.endContainer, html, "endContainer is html"); assert_equals(range.endOffset, 0, "endOffset is zero"); }, "Caret range from point");
2
FAIL Caret range from point assert_equals: startContainer is html expected Element node <html id="html"><head><meta charset="utf8">
3
<title>Conten... but got Text node "Content Visibility: caret position with html hidden"
4
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-080.html +31 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-080.html_sec1
1
<!doctype HTML>
2
<html id=html>
3
<meta charset="utf8">
4
<title>Content Visibility: caret position with html hidden</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<meta name="assert" content="caretRangeFromPoint works even if html has content-visibility hidden">
8
9
<script src="/resources/testharness.js"></script>
10
<script src="/resources/testharnessreport.js"></script>
11
12
<meter></meter>
13
<iframe></iframe>
14
<style>
15
* {
16
  all: initial;
17
  content-visibility: hidden;
18
}
19
</style>
20
21
<script>
22
test(() => {
23
  const range = document.caretRangeFromPoint();
24
  assert_not_equals(range, null, "range exists");
25
  assert_equals(range.startContainer, html, "startContainer is html");
26
  assert_equals(range.startOffset, 0, "startOffset is zero");
27
  assert_equals(range.endContainer, html, "endContainer is html");
28
  assert_equals(range.endOffset, 0, "endOffset is zero");
29
}, "Caret range from point");
30
</script>
31
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-081-expected.txt +3 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-081-expected.txt_sec1
1
2
PASS Scroll offset is restored when content-visibility hidden is removed
3
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-081.html +54 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-081.html_sec1
1
<!doctype HTML>
2
<html id=html>
3
<meta charset="utf8">
4
<title>Content Visibility: scroll position restoration</title>
5
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
7
<meta name="assert" content="if an scroller is hidden via content-visibility and then shown again, its scroll offset should be restored">
8
9
<script src="/resources/testharness.js"></script>
10
<script src="/resources/testharnessreport.js"></script>
11
<script src="support/helper.js"></script>
12
13
<style>
14
.scroller {
15
  width: 100px;
16
  height: 500px;
17
  overflow-y: scroll;
18
}
19
.spacer { height: 3000px; }
20
.hidden { content-visibility: hidden; }
21
</style>
22
23
<div id=target class=scroller>
24
  <div class=spacer></div>
25
</div>
26
</style>
27
28
<script>
29
function removeHiddenAndScheduleTest(t) {
30
  target.classList.remove("hidden");
31
  requestAnimationFrame(() => {
32
    requestAnimationFrame(() => {
33
      testScrollTop(t);
34
    });
35
  });
36
}
37
38
function testScrollTop(t) {
39
  t.step(() => assert_equals(target.scrollTop, 2000));
40
  t.done();
41
}
42
43
async_test((t) => {
44
  target.scrollTop = 2000;
45
  target.classList.add("hidden");
46
47
  requestAnimationFrame(() => {
48
    requestAnimationFrame(() => {
49
      removeHiddenAndScheduleTest(t);
50
    });
51
  });
52
}, "Scroll offset is restored when content-visibility hidden is removed");
53
</script>
54
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-form-controls-crash.html +34 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-form-controls-crash.html_sec1
1
<!DOCTYPE html>
2
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
3
<link rel="help" href="https://crbug.com/1143620">
4
<style>
5
input, select, textarea {
6
  content-visibility: auto;
7
}
8
</style>
9
<input type="button">
10
<input type="checkbox">
11
<input type="color">
12
<input type="date">
13
<input type="datetime">
14
<input type="datetime-local">
15
<input type="email">
16
<input type="file">
17
<input type="hidden">
18
<input type="image">
19
<input type="month">
20
<input type="number">
21
<input type="password">
22
<input type="radio">
23
<input type="range">
24
<input type="reset">
25
<input type="search">
26
<input type="submit">
27
<input type="tel">
28
<input type="text">
29
<input type="time">
30
<input type="url">
31
<input type="week">
32
<select><option>Option1</option></select>
33
<select multiple><option>Option1</option></select>
34
<textarea></textarea>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/inheritance-expected.txt +4 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/inheritance-expected.txt_sec1
1
2
FAIL Property content-visibility has initial value visible assert_true: content-visibility doesn't seem to be supported in the computed style expected true got false
3
FAIL Property content-visibility does not inherit assert_true: expected true got false
4
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/inheritance.html +24 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/inheritance.html_sec1
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<title>Content Visibility: content-visibility inheritance</title>
6
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
7
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
8
<meta name="assert" content="content-visibility does not inherit">
9
<meta name="assert" content="content-visibility has initial value 'visible'">
10
<script src="/resources/testharness.js"></script>
11
<script src="/resources/testharnessreport.js"></script>
12
<script src="/css/support/parsing-testcommon.js"></script>
13
<script src="/css/support/inheritance-testcommon.js"></script>
14
</head>
15
<body>
16
<div id="container">
17
<div id="target"></div>
18
</div>
19
<script>
20
assert_not_inherited("content-visibility", "visible", "auto");
21
</script>
22
</body>
23
</html>
24
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/parsing/content-visibility-computed-expected.txt +5 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/parsing/content-visibility-computed-expected.txt_sec1
1
2
FAIL Property content-visibility value 'visible' assert_true: content-visibility doesn't seem to be supported in the computed style expected true got false
3
FAIL Property content-visibility value 'auto' assert_true: content-visibility doesn't seem to be supported in the computed style expected true got false
4
FAIL Property content-visibility value 'hidden' assert_true: content-visibility doesn't seem to be supported in the computed style expected true got false
5
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/parsing/content-visibility-computed.html +23 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/parsing/content-visibility-computed.html_sec1
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<title>CSS Content Visibility: content-visibility with computed values</title>
6
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
7
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
8
<meta name="assert" content="content-visibility supports the full grammar 'visible | auto | hidden'.">
9
<script src="/resources/testharness.js"></script>
10
<script src="/resources/testharnessreport.js"></script>
11
<script src="/css/support/computed-testcommon.js"></script>
12
</head>
13
<body>
14
<div id=target></div>
15
<div id=scratch></div>
16
<script>
17
18
test_computed_value("content-visibility", "visible");
19
test_computed_value("content-visibility", "auto");
20
test_computed_value("content-visibility", "hidden");
21
</script>
22
</body>
23
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/parsing/content-visibility-invalid-expected.txt +7 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/parsing/content-visibility-invalid-expected.txt_sec1
1
2
PASS e.style['content-visibility'] = "visible auto" should not set the property value
3
PASS e.style['content-visibility'] = "foo-bar" should not set the property value
4
PASS e.style['content-visibility'] = "foo bar baz" should not set the property value
5
PASS e.style['content-visibility'] = "hidden visible" should not set the property value
6
PASS e.style['content-visibility'] = "invisible invisible invisible" should not set the property value
7
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/parsing/content-visibility-invalid.html +22 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/parsing/content-visibility-invalid.html_sec1
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<title>CSS Content Visibility: content-visibility with invalid values</title>
6
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
7
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
8
<meta name="assert" content="content-visibility supports the full grammar 'visible | auto | hidden'.">
9
<script src="/resources/testharness.js"></script>
10
<script src="/resources/testharnessreport.js"></script>
11
<script src="/css/support/parsing-testcommon.js"></script>
12
</head>
13
<body>
14
<script>
15
test_invalid_value("content-visibility", "visible auto");
16
test_invalid_value("content-visibility", "foo-bar");
17
test_invalid_value("content-visibility", "foo bar baz");
18
test_invalid_value("content-visibility", "hidden visible");
19
test_invalid_value("content-visibility", "invisible invisible invisible");
20
</script>
21
</body>
22
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/parsing/content-visibility-valid-expected.txt +5 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/parsing/content-visibility-valid-expected.txt_sec1
1
2
FAIL e.style['content-visibility'] = "visible" should set the property value assert_not_equals: property should be set got disallowed value ""
3
FAIL e.style['content-visibility'] = "auto" should set the property value assert_not_equals: property should be set got disallowed value ""
4
FAIL e.style['content-visibility'] = "hidden" should set the property value assert_not_equals: property should be set got disallowed value ""
5
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/parsing/content-visibility-valid.html +20 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/parsing/content-visibility-valid.html_sec1
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<title>CSS Content Visibility Test: content-visibility with valid values</title>
6
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
7
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
8
<meta name="assert" content="content-visibility supports the full grammar 'visible | auto | hidden'.">
9
<script src="/resources/testharness.js"></script>
10
<script src="/resources/testharnessreport.js"></script>
11
<script src="/css/support/parsing-testcommon.js"></script>
12
</head>
13
<body>
14
<script>
15
test_valid_value("content-visibility", "visible");
16
test_valid_value("content-visibility", "auto");
17
test_valid_value("content-visibility", "hidden");
18
</script>
19
</body>
20
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/parsing/w3c-import.log +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/parsing/w3c-import.log_sec1
1
The tests in this directory were imported from the W3C repository.
2
Do NOT modify these tests directly in WebKit.
3
Instead, create a pull request on the WPT github:
4
	https://github.com/web-platform-tests/wpt
5
6
Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport
7
8
Do NOT modify or remove this file.
9
10
------------------------------------------------------------------------
11
Properties requiring vendor prefixes:
12
None
13
Property values requiring vendor prefixes:
14
None
15
------------------------------------------------------------------------
16
List of files:
17
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/parsing/content-visibility-computed.html
18
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/parsing/content-visibility-invalid.html
19
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/parsing/content-visibility-valid.html
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/resources/circles.svg +37 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/resources/circles.svg_sec1
1
<?xml version="1.0" encoding="iso-8859-1" ?>
2
<svg viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg">
3
<rect x="0" y="0" width="500" height="300" fill="#fff" />
4
5
<g stroke-width="10" transform="translate(-30)">
6
    <circle cx="80" cy="50" r="35" fill="#084" stroke="none"/>
7
    <circle cx="80" cy="50" r="20" fill="#080" stroke="#FF0"/>
8
    <circle cx="80" cy="120" r="35" fill="#004" stroke="none"/>
9
    <circle cx="80" cy="120" r="20" fill="#080" stroke="#FF0"/>
10
    <circle cx="80" cy="190" r="35" fill="#088" stroke="none"/>
11
    <circle cx="80" cy="190" r="20" fill="#080" stroke="#FF0"/>
12
    <circle cx="80" cy="260" r="35" fill="#008" stroke="none"/>
13
    <circle cx="80" cy="260" r="20" fill="#080" stroke="#FF0"/>
14
</g>
15
16
<g stroke-width="10" transform="translate(170)">
17
    <circle cx="80" cy="50" r="35" fill="#085" stroke="none"/>
18
    <circle cx="80" cy="50" r="20" fill="#080" stroke="#FF0"/>
19
    <circle cx="80" cy="120" r="35" fill="#005" stroke="none"/>
20
    <circle cx="80" cy="120" r="20" fill="#080" stroke="#FF0"/>
21
    <circle cx="80" cy="190" r="35" fill="#689" stroke="none"/>
22
    <circle cx="80" cy="190" r="20" fill="#080" stroke="#FF0"/>
23
    <circle cx="80" cy="260" r="35" fill="#609" stroke="none"/>
24
    <circle cx="80" cy="260" r="20" fill="#080" stroke="#FF0"/>
25
</g>
26
27
<g stroke-width="10" transform="translate(370)">
28
    <circle cx="80" cy="50" r="35" fill="#084" stroke="none"/>
29
    <circle cx="80" cy="50" r="20" fill="#080" stroke="#FF0"/>
30
    <circle cx="80" cy="120" r="35" fill="#084" stroke="none"/>
31
    <circle cx="80" cy="120" r="20" fill="#080" stroke="#FF0"/>
32
    <circle cx="80" cy="190" r="35" fill="#088" stroke="none"/>
33
    <circle cx="80" cy="190" r="20" fill="#080" stroke="#FF0"/>
34
    <circle cx="80" cy="260" r="35" fill="#088" stroke="none"/>
35
    <circle cx="80" cy="260" r="20" fill="#080" stroke="#FF0"/>
36
</g>
37
</svg>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/resources/frame.html +8 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/resources/frame.html_sec1
1
<!doctype HTML>
2
<style>
3
div {
4
  background: lightgreen;
5
}
6
</style>
7
<div>dolor sit amet</div>
8
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/resources/text-fragment-target-auto.html +64 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/resources/text-fragment-target-auto.html_sec1
1
<!doctype html>
2
<title>Text fragment navigation helper.</title>
3
4
<script src="/scroll-to-text-fragment/stash.js"></script>
5
<script>
6
function isInView(element) {
7
  let rect = element.getBoundingClientRect();
8
  return rect.top >= 0 && rect.top <= window.innerHeight
9
      && rect.left >= 0 && rect.left <= window.innerWidth;
10
}
11
function checkScroll() {
12
  let position = 'unknown';
13
  if (window.scrollY == 0)
14
    position = 'top';
15
  else if(isInView(document.getElementById("text")))
16
    position = 'text';
17
  else if(isInView(document.getElementById("text2")))
18
    position = 'text2';
19
  else if(isInView(document.getElementById("text3")))
20
    position = 'text3';
21
22
  const target = document.querySelector(":target");
23
  let results = {
24
    scrollPosition: position,
25
    href: window.location.href,
26
    target: target ? target.id : 'undefined'
27
  };
28
  let key = (new URL(document.location)).searchParams.get("key");
29
  stashResultsThenClose(key, results);
30
}
31
function doubleRafCheckScroll() {
32
  requestAnimationFrame(() => {
33
    requestAnimationFrame(() => {
34
      checkScroll();
35
    });
36
  });
37
}
38
</script>
39
40
<style>
41
.spacer {
42
  height: 10000px;
43
}
44
.auto {
45
  subtree-visibility: auto;
46
}
47
</style>
48
49
<body onload="doubleRafCheckScroll()">
50
<div class=spacer></div>
51
<div class=auto>
52
  <div id=text>hiddentext</div>
53
</div>
54
<div class=spacer></div>
55
<div id=text2and3ancestor>
56
  <div class=auto>
57
    <div id=text2>start</div>
58
  </div>
59
  <div class=spacer></div>
60
  <div class=auto>
61
    <div id=text3>end</div>
62
  </div>
63
</div>
64
</body>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/resources/w3c-import.log +20 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/resources/w3c-import.log_sec1
1
The tests in this directory were imported from the W3C repository.
2
Do NOT modify these tests directly in WebKit.
3
Instead, create a pull request on the WPT github:
4
	https://github.com/web-platform-tests/wpt
5
6
Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport
7
8
Do NOT modify or remove this file.
9
10
------------------------------------------------------------------------
11
Properties requiring vendor prefixes:
12
None
13
Property values requiring vendor prefixes:
14
None
15
------------------------------------------------------------------------
16
List of files:
17
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/resources/circles.svg
18
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/resources/dice.png
19
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/resources/frame.html
20
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/resources/text-fragment-target-auto.html
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/w3c-import.log +154 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/w3c-import.log_sec1
1
The tests in this directory were imported from the W3C repository.
2
Do NOT modify these tests directly in WebKit.
3
Instead, create a pull request on the WPT github:
4
	https://github.com/web-platform-tests/wpt
5
6
Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport
7
8
Do NOT modify or remove this file.
9
10
------------------------------------------------------------------------
11
Properties requiring vendor prefixes:
12
None
13
Property values requiring vendor prefixes:
14
None
15
------------------------------------------------------------------------
16
List of files:
17
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-001-expected.html
18
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-001.html
19
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-002-expected.html
20
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-002.html
21
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-003-expected.html
22
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-003.html
23
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-004-expected.html
24
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-004.html
25
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-005-expected.html
26
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-005.html
27
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-006-expected.html
28
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-006.html
29
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-007-expected.html
30
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-007.html
31
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-008-expected.html
32
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-008.html
33
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-009-expected.html
34
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-009.html
35
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-010-expected.html
36
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-010.html
37
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-011-expected.html
38
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-011.html
39
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-012-expected.html
40
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-012.html
41
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-013-expected.html
42
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-013.html
43
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-014-expected.html
44
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-014.html
45
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-015.html
46
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-016.html
47
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-017.html
48
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-018.html
49
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-019.sub.https-expected.html
50
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-019.sub.https.html
51
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-020-expected.html
52
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-020.html
53
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-021-expected.html
54
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-021.html
55
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-022-expected.html
56
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-022.html
57
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-023-expected.html
58
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-023.html
59
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-024-expected.html
60
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-024.html
61
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-025-expected.html
62
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-025.html
63
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-026.html
64
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-027-expected.html
65
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-027.html
66
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-028-expected.html
67
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-028.html
68
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-029.html
69
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-030.html
70
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-031.html
71
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-032-expected.html
72
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-032.html
73
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-033.sub.https-expected.html
74
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-033.sub.https.html
75
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-034-expected.html
76
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-034.html
77
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-035.html
78
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-036.html
79
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-037-expected.html
80
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-037.html
81
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-038.html
82
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-039.html
83
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-040-expected.html
84
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-040.html
85
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-041-expected.html
86
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-041.html
87
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-042-expected.html
88
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-042.html
89
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-043-expected.html
90
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-043.html
91
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-044.html
92
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-045-expected.html
93
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-045.html
94
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-046-expected.html
95
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-046.html
96
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-047.html
97
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-048.html
98
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-049-expected.html
99
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-049.html
100
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-050.html
101
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-051-expected.html
102
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-051.html
103
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-052-expected.html
104
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-052.html
105
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-053.html
106
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-054.html
107
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-055-expected.html
108
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-055.html
109
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-056-expected.html
110
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-056.html
111
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-057-expected.html
112
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-057.html
113
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-058-expected.html
114
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-058.html
115
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-059-expected.html
116
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-059.html
117
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-060-expected.html
118
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-060.html
119
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-061-expected.html
120
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-061.html
121
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-062-expected.html
122
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-062.html
123
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-063-expected.html
124
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-063.html
125
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-064-expected.html
126
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-064.html
127
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-065-expected.html
128
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-065.html
129
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-066-expected.html
130
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-066.html
131
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-067-expected.html
132
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-067.html
133
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-068.html
134
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-069.html
135
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-070.html
136
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-071.html
137
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-072.html
138
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-073-expected.html
139
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-073.html
140
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-074-expected.html
141
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-074.html
142
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-075-expected.html
143
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-075.html
144
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-076-expected.html
145
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-076.html
146
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-077.html
147
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-078-expected.html
148
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-078.html
149
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-079-expected.html
150
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-079.html
151
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-080.html
152
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-081.html
153
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-form-controls-crash.html
154
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/inheritance.html
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/counter-scoping-001-expected.html +9 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/counter-scoping-001-expected.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test reference</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
7
<p>Test passes if the text below is "1 1.2" (not including the quotation marks).<p>
8
<div>1 1.2</div>
9
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/counter-scoping-001.html +26 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/counter-scoping-001.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test: style containment and counter-increment</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
  <meta name=flags content="">
7
  <meta name=assert content="counter-increment is scoped to the subtree and creates a new counter at the root of the subtree">
8
  <link rel="match" href="reference/counter-scoping-001-ref.html">
9
  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-style">
10
11
<style>
12
div {
13
  contain: style;
14
   counter-increment: n;
15
}
16
div::before, div::after {
17
  content: counters(n, '.') " ";
18
}
19
div::after {
20
  counter-increment: n 2;
21
}
22
</style>
23
24
<p>Test passes if the text below is "1 1.2" (not including the quotation marks).<p>
25
<div></div>
26
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/counter-scoping-002-expected.html +9 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/counter-scoping-002-expected.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test reference</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
7
<p>Test passes if the text below is "1 1.2" (not including the quotation marks).<p>
8
<div>1 1.2</div>
9
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/counter-scoping-002.html +27 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/counter-scoping-002.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test: style containment and counter-set</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
  <meta name=flags content="">
7
  <meta name=assert content="counter-set is scoped to the subtree and creates a new counter at the root of the subtree">
8
  <link rel="match" href="reference/counter-scoping-001-ref.html">
9
  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-style">
10
  <link rel=help href="https://drafts.csswg.org/css-lists-3/#propdef-counter-set">
11
12
<style>
13
div {
14
  contain: style;
15
  counter-set: n 1;
16
}
17
div::before, div::after {
18
  content: counters(n, '.') " ";
19
}
20
div::after {
21
  counter-set: n 2;
22
}
23
</style>
24
25
<p>Test passes if the text below is "1 1.2" (not including the quotation marks).<p>
26
<div></div>
27
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/counter-scoping-003-expected.html +9 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/counter-scoping-003-expected.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test reference</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
7
<p>Test passes if the text below is "1 2" (not including the quotation marks).<p>
8
<div>1 2</div>
9
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/counter-scoping-003.html +29 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/counter-scoping-003.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test: style containment and subtree root</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
  <meta name=flags content="">
7
  <meta name=assert content="When considering the effects of the scoped property on elements inside the subtree, the element at the base of the subtree is treated as if it was the root of the document">
8
  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-style">
9
  <link rel="match" href="reference/counter-scoping-003-ref.html">
10
11
<style>
12
div {
13
  contain: style;
14
  counter-increment: c 123;
15
}
16
span {
17
  counter-increment: c 1;
18
}
19
span::before {
20
  content: counter(c);
21
}
22
</style>
23
24
<p>Test passes if the text below is "1 2" (not including the quotation marks).<p>
25
<div>
26
  <span></span>
27
  <span></span>
28
</div>
29
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/inheritance-expected.txt +4 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/inheritance-expected.txt_sec1
1
2
FAIL Property contain has initial value none assert_true: contain doesn't seem to be supported in the computed style expected true got false
3
FAIL Property contain does not inherit assert_true: expected true got false
4
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/inheritance.html +21 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/inheritance.html_sec1
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<title>Inheritance of CSS contain property</title>
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
7
<meta name="assert" content="Property 'contain' does not inherit.">
8
<meta name="assert" content="Property 'contain' has initial value 'none'.">
9
<script src="/resources/testharness.js"></script>
10
<script src="/resources/testharnessreport.js"></script>
11
<script src="/css/support/inheritance-testcommon.js"></script>
12
</head>
13
<body>
14
<div id="container">
15
<div id="target"></div>
16
</div>
17
<script>
18
assert_not_inherited('contain', 'none', 'paint');
19
</script>
20
</body>
21
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/parsing/contain-computed-expected.txt +15 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/parsing/contain-computed-expected.txt_sec1
1
2
FAIL Property contain value 'none' assert_true: contain doesn't seem to be supported in the computed style expected true got false
3
FAIL Property contain value 'strict' assert_true: contain doesn't seem to be supported in the computed style expected true got false
4
FAIL Property contain value 'content' assert_true: contain doesn't seem to be supported in the computed style expected true got false
5
FAIL Property contain value 'size' assert_true: contain doesn't seem to be supported in the computed style expected true got false
6
FAIL Property contain value 'layout' assert_true: contain doesn't seem to be supported in the computed style expected true got false
7
FAIL Property contain value 'style' assert_true: contain doesn't seem to be supported in the computed style expected true got false
8
FAIL Property contain value 'paint' assert_true: contain doesn't seem to be supported in the computed style expected true got false
9
FAIL Property contain value 'size layout' assert_true: contain doesn't seem to be supported in the computed style expected true got false
10
FAIL Property contain value 'style paint' assert_true: contain doesn't seem to be supported in the computed style expected true got false
11
FAIL Property contain value 'layout style paint' assert_true: contain doesn't seem to be supported in the computed style expected true got false
12
FAIL Property contain value 'size layout style paint' assert_true: contain doesn't seem to be supported in the computed style expected true got false
13
FAIL Property contain value 'size layout paint' assert_true: contain doesn't seem to be supported in the computed style expected true got false
14
FAIL Property contain value 'layout paint' assert_true: contain doesn't seem to be supported in the computed style expected true got false
15
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/parsing/contain-computed.html +31 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/parsing/contain-computed.html_sec1
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<title>CSS Containment Module Level 1: getComputedStyle().contain</title>
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
7
<meta name="assert" content="contain computed value is as specified.">
8
<script src="/resources/testharness.js"></script>
9
<script src="/resources/testharnessreport.js"></script>
10
<script src="/css/support/computed-testcommon.js"></script>
11
</head>
12
<body>
13
<div id="target"></div>
14
<script>
15
test_computed_value("contain", "none");
16
test_computed_value("contain", "strict");
17
test_computed_value("contain", "content");
18
19
test_computed_value("contain", "size");
20
test_computed_value("contain", "layout");
21
test_computed_value("contain", "style");
22
test_computed_value("contain", "paint");
23
test_computed_value("contain", "size layout");
24
test_computed_value("contain", "style paint");
25
test_computed_value("contain", "layout style paint");
26
test_computed_value("contain", "size layout style paint");
27
test_computed_value("contain", "size layout paint", "strict");
28
test_computed_value("contain", "layout paint", "content");
29
</script>
30
</body>
31
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/parsing/contain-invalid-expected.txt +6 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/parsing/contain-invalid-expected.txt_sec1
1
2
PASS e.style['contain'] = "auto" should not set the property value
3
PASS e.style['contain'] = "strict content" should not set the property value
4
PASS e.style['contain'] = "size layout size" should not set the property value
5
PASS e.style['contain'] = "paint content" should not set the property value
6
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/parsing/contain-invalid.html +20 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/parsing/contain-invalid.html_sec1
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<title>CSS Containment Module Level 1: parsing contain with invalid values</title>
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
7
<meta name="assert" content="contain supports only the grammar 'none | strict | content | [ size || layout || style || paint ]'.">
8
<script src="/resources/testharness.js"></script>
9
<script src="/resources/testharnessreport.js"></script>
10
<script src="/css/support/parsing-testcommon.js"></script>
11
</head>
12
<body>
13
<script>
14
test_invalid_value("contain", "auto");
15
test_invalid_value("contain", "strict content");
16
test_invalid_value("contain", "size layout size");
17
test_invalid_value("contain", "paint content");
18
</script>
19
</body>
20
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/parsing/contain-valid-expected.txt +13 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/parsing/contain-valid-expected.txt_sec1
1
2
FAIL e.style['contain'] = "none" should set the property value assert_not_equals: property should be set got disallowed value ""
3
FAIL e.style['contain'] = "strict" should set the property value assert_not_equals: property should be set got disallowed value ""
4
FAIL e.style['contain'] = "content" should set the property value assert_not_equals: property should be set got disallowed value ""
5
FAIL e.style['contain'] = "size" should set the property value assert_not_equals: property should be set got disallowed value ""
6
FAIL e.style['contain'] = "layout" should set the property value assert_not_equals: property should be set got disallowed value ""
7
FAIL e.style['contain'] = "style" should set the property value assert_not_equals: property should be set got disallowed value ""
8
FAIL e.style['contain'] = "paint" should set the property value assert_not_equals: property should be set got disallowed value ""
9
FAIL e.style['contain'] = "layout size" should set the property value assert_not_equals: property should be set got disallowed value ""
10
FAIL e.style['contain'] = "paint style" should set the property value assert_not_equals: property should be set got disallowed value ""
11
FAIL e.style['contain'] = "layout style paint" should set the property value assert_not_equals: property should be set got disallowed value ""
12
FAIL e.style['contain'] = "layout paint style size" should set the property value assert_not_equals: property should be set got disallowed value ""
13
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/parsing/contain-valid.html +30 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/parsing/contain-valid.html_sec1
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<title>CSS Containment Module Level 1: parsing contain with valid values</title>
6
<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
7
<meta name="assert" content="contain supports the full grammar 'none | strict | content | [ size || layout || style || paint ]'.">
8
<meta name="assert" content="contain serializes in canonical order.">
9
<script src="/resources/testharness.js"></script>
10
<script src="/resources/testharnessreport.js"></script>
11
<script src="/css/support/parsing-testcommon.js"></script>
12
</head>
13
<body>
14
<script>
15
test_valid_value("contain", "none");
16
test_valid_value("contain", "strict");
17
test_valid_value("contain", "content");
18
19
// [ size || layout || style || paint ]
20
test_valid_value("contain", "size");
21
test_valid_value("contain", "layout");
22
test_valid_value("contain", "style");
23
test_valid_value("contain", "paint");
24
test_valid_value("contain", "layout size", "size layout");
25
test_valid_value("contain", "paint style", "style paint");
26
test_valid_value("contain", "layout style paint");
27
test_valid_value("contain", "layout paint style size", "size layout style paint");
28
</script>
29
</body>
30
</html>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/parsing/w3c-import.log +19 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/parsing/w3c-import.log_sec1
1
The tests in this directory were imported from the W3C repository.
2
Do NOT modify these tests directly in WebKit.
3
Instead, create a pull request on the WPT github:
4
	https://github.com/web-platform-tests/wpt
5
6
Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport
7
8
Do NOT modify or remove this file.
9
10
------------------------------------------------------------------------
11
Properties requiring vendor prefixes:
12
None
13
Property values requiring vendor prefixes:
14
None
15
------------------------------------------------------------------------
16
List of files:
17
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/parsing/contain-computed.html
18
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/parsing/contain-invalid.html
19
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/parsing/contain-valid.html
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-001-expected.html +8 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-001-expected.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test reference</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
<p>Test passes if the text below is "A1Z" (not including the quotation marks).<p>
7
<div>A1Z</div>
8
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-001.html +28 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-001.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test: style containment and open-quote</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
  <meta name=flags content="">
7
  <meta name=assert content="style containment cause the open-quote value of the content property are scoped to the element's subtree">
8
  <link rel="match" href="reference/quote-scoping-001-ref.html">
9
  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-style">
10
11
<style>
12
13
div {
14
  quotes: "A" "Z" "1" "9";
15
}
16
div::before, span::before {
17
  content: open-quote;
18
}
19
div::after {
20
  content: close-quote;
21
}
22
span {
23
  contain: style;
24
}
25
</style>
26
27
<p>Test passes if the text below is "A1Z" (not including the quotation marks).<p>
28
<div><span></span></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-002-expected.html +8 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-002-expected.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test reference</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
7
<p>Test passes if the text below is "A9Z" (not including the quotation marks).<p>
8
<div>A9Z</span></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-002.html +28 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-002.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test: style containment and close-quote</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
  <meta name=flags content="">
7
  <meta name=assert content="style containment cause the close-quote value of the content property are scoped to the element's subtree">
8
  <link rel="match" href="reference/quote-scoping-002-ref.html">
9
  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-style">
10
11
<style>
12
13
div {
14
  quotes: "A" "Z" "1" "9";
15
}
16
div::before {
17
  content: open-quote;
18
}
19
div::after, span::after {
20
  content: close-quote;
21
}
22
span {
23
  contain: style;
24
}
25
</style>
26
27
<p>Test passes if the text below is "AZZ" (not including the quotation marks).<p>
28
<div><span></span></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-003-expected.html +8 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-003-expected.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test reference</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
7
<p>Test passes if the text below is "AZ" (not including the quotation marks).<p>
8
<div>AZ</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-003.html +32 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-003.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test: style containment and no-open-quote</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
  <meta name=flags content="">
7
  <meta name=assert content="style containment cause the no-open-quote value of the content property are scoped to the element's subtree">
8
  <link rel="match" href="reference/quote-scoping-003-ref.html">
9
  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-style">
10
11
<style>
12
13
div {
14
  quotes: "A" "Z" "1" "9";
15
}
16
div::before{
17
  content: open-quote;
18
}
19
20
span::before {
21
  content: no-open-quote;
22
}
23
div::after {
24
  content: close-quote;
25
}
26
span {
27
  contain: style;
28
}
29
</style>
30
31
<p>Test passes if the text below is "AZ" (not including the quotation marks).<p>
32
<div><span></span></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-004-expected.html +8 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-004-expected.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test reference</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
7
<p>Test passes if the text below is "AZ" (not including the quotation marks).<p>
8
<div>AZ</div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-004.html +32 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-004.html_sec1
1
<!doctype html>
2
<html lang=en>
3
  <meta charset=utf-8>
4
  <title>CSS-contain test: style containment and no-close-quote</title>
5
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6
  <meta name=flags content="">
7
  <meta name=assert content="style containment cause the no-close-quote value of the content property are scoped to the element's subtree">
8
  <link rel="match" href="reference/quote-scoping-003-ref.html">
9
  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-style">
10
11
<style>
12
13
div {
14
  quotes: "A" "Z" "1" "9";
15
}
16
div::before{
17
  content: open-quote;
18
}
19
20
span::after {
21
  content: no-close-quote;
22
}
23
div::after {
24
  content: close-quote;
25
}
26
span {
27
  contain: style;
28
}
29
</style>
30
31
<p>Test passes if the text below is "AZ" (not including the quotation marks).<p>
32
<div><span></span></div>
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/w3c-import.log +26 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/w3c-import.log_sec1
1
The tests in this directory were imported from the W3C repository.
2
Do NOT modify these tests directly in WebKit.
3
Instead, create a pull request on the WPT github:
4
	https://github.com/web-platform-tests/wpt
5
6
Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport
7
8
Do NOT modify or remove this file.
9
10
------------------------------------------------------------------------
11
Properties requiring vendor prefixes:
12
None
13
Property values requiring vendor prefixes:
14
None
15
------------------------------------------------------------------------
16
List of files:
17
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/60x60-green.png
18
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/blue-100x100.png
19
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/blue50wBy25h.png
20
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/blue50wBy46h.png
21
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/pattern-gg-gr-100x100.png
22
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/swatch-blue.png
23
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/swatch-orange.png
24
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/swatch-red.png
25
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/swatch-yellow.png
26
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/white.webm
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/w3c-import.log +472 lines
Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/w3c-import.log_sec1
1
The tests in this directory were imported from the W3C repository.
2
Do NOT modify these tests directly in WebKit.
3
Instead, create a pull request on the WPT github:
4
	https://github.com/web-platform-tests/wpt
5
6
Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport
7
8
Do NOT modify or remove this file.
9
10
------------------------------------------------------------------------
11
Properties requiring vendor prefixes:
12
None
13
Property values requiring vendor prefixes:
14
ruby-text
15
------------------------------------------------------------------------
16
List of files:
17
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/META.yml
18
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-animation-001-expected.xht
19
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-animation-001.html
20
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-chrome-thcrash-001.html
21
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-001-expected.html
22
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-001.html
23
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-002-expected.html
24
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-002.html
25
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-003-expected.xht
26
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-003.html
27
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-004-expected.html
28
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-004.html
29
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-011-expected.html
30
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-011.html
31
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-crash.html
32
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-flexbox-outline.html
33
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-001-expected.html
34
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-001.html
35
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-002-expected.xht
36
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-002.html
37
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-003-expected.xht
38
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-003.html
39
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-004-expected.xht
40
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-004.html
41
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-005-expected.xht
42
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-005.html
43
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-006-expected.xht
44
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-006.html
45
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-007-expected.xht
46
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-007.html
47
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-009-expected.xht
48
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-009.html
49
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-010-expected.xht
50
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-010.html
51
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-011-expected.xht
52
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-011.html
53
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-012-expected.xht
54
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-012.html
55
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-013-expected.xht
56
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-013.html
57
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-014-expected.xht
58
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-014.html
59
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-016-expected.html
60
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-016.html
61
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-017-expected.html
62
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-017.html
63
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-018-expected.html
64
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-018.html
65
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-001-expected.xht
66
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-001.html
67
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-002-expected.xht
68
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-002.html
69
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-003-expected.xht
70
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-003.html
71
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-004-expected.html
72
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-004.html
73
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-005-expected.html
74
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-005.html
75
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-breaks-001-expected.html
76
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-breaks-001.html
77
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-breaks-002-expected.html
78
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-breaks-002.html
79
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-button-001-expected.html
80
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-button-001.html
81
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-cell-001-expected.html
82
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-cell-001.html
83
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-cell-002-expected.html
84
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-cell-002.html
85
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-containing-block-absolute-001-expected.html
86
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-containing-block-absolute-001.html
87
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-containing-block-fixed-001-expected.html
88
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-containing-block-fixed-001.html
89
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-flexbox-001-expected.html
90
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-flexbox-001.html
91
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-formatting-context-float-001-expected.html
92
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-formatting-context-float-001.html
93
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-formatting-context-margin-001-expected.html
94
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-formatting-context-margin-001.html
95
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-grid-001-expected.html
96
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-grid-001.html
97
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ifc-022-expected.html
98
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ifc-022.html
99
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-ib-split-001-expected.html
100
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-ib-split-001.html
101
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-no-principal-box-001-expected.html
102
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-no-principal-box-001.html
103
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-no-principal-box-002-expected.html
104
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-no-principal-box-002.html
105
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-no-principal-box-003-expected.html
106
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-no-principal-box-003.html
107
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-independent-formatting-context-001-expected.html
108
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-independent-formatting-context-001.html
109
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-independent-formatting-context-002-expected.html
110
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-independent-formatting-context-002.html
111
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-independent-formatting-context-003-expected.html
112
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-independent-formatting-context-003.html
113
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-013-expected.html
114
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-013.html
115
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-014-expected.html
116
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-014.html
117
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-015-expected.html
118
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-015.html
119
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-016-expected.html
120
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-016.html
121
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-017-expected.html
122
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-017.html
123
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-018-expected.html
124
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-018.html
125
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-019-expected.html
126
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-019.html
127
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-020-expected.html
128
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-020.html
129
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-overflow-001-expected.html
130
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-overflow-001.html
131
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-overflow-002-expected.html
132
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-overflow-002.html
133
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-size-003-expected.html
134
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-size-003.html
135
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-stacking-context-001-expected.html
136
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-stacking-context-001.html
137
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-suppress-baseline-001-expected.html
138
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-suppress-baseline-001.html
139
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-suppress-baseline-002-expected.html
140
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-suppress-baseline-002.html
141
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-001-expected.html
142
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-001.html
143
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-002-expected.html
144
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-002.html
145
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-004-expected.html
146
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-004.html
147
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-005-expected.html
148
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-005.html
149
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-006-expected.html
150
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-006.html
151
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-007-expected.html
152
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-007.html
153
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-008-expected.html
154
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-008.html
155
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-009-expected.xht
156
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-009.html
157
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-010-expected.xht
158
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-010.html
159
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-011-expected.xht
160
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-011.html
161
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-012-expected.xht
162
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-012.html
163
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-014-expected.html
164
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-014.html
165
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-015-expected.html
166
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-015.html
167
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-016-expected.html
168
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-016.html
169
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-017-expected.html
170
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-017.html
171
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-018-expected.html
172
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-018.html
173
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-019-expected.html
174
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-019.html
175
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-020-expected.html
176
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-020.html
177
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-021-expected.html
178
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-021.html
179
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-022-expected.html
180
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-022.html
181
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-023-expected.xht
182
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-023.html
183
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-024-expected.xht
184
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-024.html
185
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-025-expected.html
186
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-025.html
187
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-047-expected.html
188
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-047.html
189
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-048-expected.xht
190
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-048.html
191
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-baseline-001-expected.html
192
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-baseline-001.html
193
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-cell-001-expected.html
194
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-cell-001.html
195
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-cell-002-expected.html
196
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-cell-002.html
197
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-001-expected.html
198
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-001.html
199
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-002-expected.html
200
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-002.html
201
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-003-expected.html
202
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-003.html
203
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-004-expected.html
204
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-004.html
205
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-005-expected.html
206
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-005.html
207
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-006-expected.html
208
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-006.html
209
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-011-expected.xht
210
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-011.html
211
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-012-expected.xht
212
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-012.html
213
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-013-expected.xht
214
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-013.html
215
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-014-expected.xht
216
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-014.html
217
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-015-expected.html
218
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-015.html
219
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-016-expected.html
220
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-016.html
221
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-017-expected.html
222
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-017.html
223
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-018-expected.html
224
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-018.html
225
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-019-expected.html
226
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-019.html
227
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-containing-block-absolute-001-expected.html
228
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-containing-block-absolute-001.html
229
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-containing-block-fixed-001-expected.html
230
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-containing-block-fixed-001.html
231
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-formatting-context-float-001-expected.html
232
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-formatting-context-float-001.html
233
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-formatting-context-margin-001-expected.html
234
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-formatting-context-margin-001.html
235
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ifc-011-expected.html
236
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ifc-011.html
237
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-ib-split-001-expected.html
238
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-ib-split-001.html
239
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-internal-table-001a-expected.html
240
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-internal-table-001a.html
241
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-internal-table-001b-expected.html
242
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-internal-table-001b.html
243
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-no-principal-box-001-expected.html
244
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-no-principal-box-001.html
245
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-ruby-containing-block-001-expected.html
246
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-ruby-containing-block-001.html
247
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-ruby-stacking-and-clipping-001-expected.html
248
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-ruby-stacking-and-clipping-001.html
249
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-independent-formatting-context-001-expected.html
250
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-independent-formatting-context-001.html
251
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-independent-formatting-context-002-expected.html
252
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-independent-formatting-context-002.html
253
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-independent-formatting-context-003-expected.html
254
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-independent-formatting-context-003.html
255
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-size-001-expected.html
256
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-size-001.html
257
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-size-002-expected.html
258
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-size-002.html
259
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-size-003-expected.html
260
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-size-003.html
261
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-stacking-context-001a-expected.html
262
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-stacking-context-001a.html
263
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-stacking-context-001b-expected.html
264
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-stacking-context-001b.html
265
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-table-001-expected.html
266
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-table-001.html
267
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-table-002-expected.html
268
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-table-002.html
269
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-001-expected.html
270
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-001.html
271
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-002-expected.html
272
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-002.html
273
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-003-expected.html
274
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-003.html
275
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-004-expected.html
276
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-004.html
277
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-005-expected.html
278
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-005.html
279
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-006-expected.html
280
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-006.html
281
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-007-expected.html
282
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-007.html
283
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-008-expected.html
284
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-008.html
285
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-009-expected.html
286
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-009.html
287
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-010-expected.html
288
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-010.html
289
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-011-expected.html
290
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-011.html
291
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-012-expected.html
292
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-012.html
293
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-012b-expected.html
294
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-012b.html
295
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-013-expected.xht
296
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-013.html
297
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-021-expected.html
298
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-021.html
299
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-023-expected.html
300
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-023.html
301
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-025-expected.html
302
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-025.html
303
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-027-expected.html
304
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-027.html
305
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-041-expected.html
306
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-041.html
307
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-042-expected.html
308
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-042.html
309
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-051-expected.html
310
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-051.html
311
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-052-expected.html
312
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-052.html
313
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-056-expected.html
314
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-056.html
315
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-061-expected.html
316
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-061.html
317
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-062-expected.html
318
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-062.html
319
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-063-expected.html
320
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-063.html
321
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-064-expected.html
322
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-064.html
323
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-baseline-001-expected.html
324
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-baseline-001.html
325
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-001-expected.html
326
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-001.html
327
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-002-expected.html
328
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-002.html
329
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-003-expected.html
330
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-003.html
331
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-004-expected.html
332
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-004.html
333
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-borders-expected.xht
334
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-borders.html
335
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-breaks-001-expected.html
336
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-breaks-001.html
337
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-button-001-expected.html
338
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-button-001.html
339
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-button-002-expected.html
340
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-button-002.html
341
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-001-expected.html
342
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-001.html
343
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-002-expected.html
344
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-002.html
345
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-003-expected.html
346
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-003.html
347
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-004-expected.html
348
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-004.html
349
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-flex-001-expected.html
350
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-flex-001.html
351
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-flexbox-001-expected.html
352
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-flexbox-001.html
353
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-flexbox-002-expected.html
354
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-flexbox-002.html
355
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-001-expected.html
356
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-001.html
357
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-002-expected.xht
358
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-002.html
359
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-003.html
360
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-004.html
361
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-005-expected.html
362
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-005.html
363
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-001-expected.html
364
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-001.html
365
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-002-expected.html
366
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-002.html
367
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-003-expected.html
368
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-003.html
369
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-004-expected.html
370
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-004.html
371
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-flex-001-expected.html
372
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-flex-001.html
373
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-monolithic-001-expected.html
374
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-monolithic-001.html
375
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-monolithic-002-expected.html
376
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-monolithic-002.html
377
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-001-expected.xht
378
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-001.html
379
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-002-expected.html
380
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-002.html
381
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-003-expected.html
382
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-003.html
383
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-004-expected.html
384
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-004.html
385
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-as-flex-item.html
386
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-001-expected.xht
387
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-001.html
388
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-002-expected.xht
389
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-002.html
390
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-003a-expected.html
391
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-003a.html
392
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-003b-expected.html
393
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-003b.html
394
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-003c-expected.html
395
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-003c.html
396
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-004-expected.html
397
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-004.html
398
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-005-expected.html
399
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-005.html
400
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-006-expected.html
401
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-006.html
402
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-007-expected.xht
403
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-007.html
404
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-001-expected.html
405
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-001.html
406
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-002-expected.html
407
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-002.html
408
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-003-expected.html
409
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-003.html
410
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-004-expected.html
411
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-004.html
412
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-001-expected.html
413
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-001.html
414
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-002-expected.html
415
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-002.html
416
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-001-expected.html
417
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-001.html
418
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-002-expected.html
419
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-002.html
420
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-003-expected.html
421
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-003.html
422
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-004-expected.html
423
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-004.html
424
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-005-expected.html
425
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-005.html
426
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-table-caption-001-expected.html
427
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-table-caption-001.html
428
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-001-expected.html
429
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-001.html
430
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-002-expected.html
431
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-002.html
432
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-003-expected.html
433
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-003.html
434
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-011-expected.html
435
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-011.html
436
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-baseline-001-expected.html
437
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-baseline-001.html
438
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-001-expected.html
439
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-001.html
440
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-002-expected.html
441
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-002.html
442
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-003-expected.html
443
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-003.html
444
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-004-expected.html
445
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-004.html
446
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-005-expected.html
447
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-005.html
448
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-001-expected.html
449
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-001.html
450
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-002-expected.html
451
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-002.html
452
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-003-expected.html
453
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-003.html
454
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-004-expected.html
455
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-004.html
456
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-subgrid-001-expected.html
457
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-subgrid-001.html
458
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/counter-scoping-001-expected.html
459
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/counter-scoping-001.html
460
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/counter-scoping-002-expected.html
461
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/counter-scoping-002.html
462
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/counter-scoping-003-expected.html
463
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/counter-scoping-003.html
464
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/inheritance.html
465
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-001-expected.html
466
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-001.html
467
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-002-expected.html
468
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-002.html
469
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-003-expected.html
470
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-003.html
471
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-004-expected.html
472
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-004.html
- a/LayoutTests/tests-options.json +3 lines
Lines 638-643 a/LayoutTests/tests-options.json_sec1
638
    "imported/w3c/web-platform-tests/css/css-color/color-resolving-hwb.html": [
638
    "imported/w3c/web-platform-tests/css/css-color/color-resolving-hwb.html": [
639
        "slow"
639
        "slow"
640
    ],
640
    ],
641
    "imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-048.html": [
642
        "slow"
643
    ],
641
    "imported/w3c/web-platform-tests/css/css-fonts/font-display/font-display.html": [
644
    "imported/w3c/web-platform-tests/css/css-fonts/font-display/font-display.html": [
642
        "slow"
645
        "slow"
643
    ],
646
    ],

Return to Bug 223254