Skip to content

Commit d2c522e

Browse files
lilleschromium-wpt-export-bot
lilles
authored and
chromium-wpt-export-bot
committed
[@container] Move scroll-state() query tests to wpt
The spec PR landed, so tests should now be supported by the spec. The 'inset-' prefix for the stuck keywords per were not per spec and remove both from tests and implementation. The tests for the 'none'-keyword for snapped and stuck does not match the current spec draft, but will be fixed by [1] [1] w3c/csswg-drafts#10874 Bug: 40279568, 40268059 Change-Id: I7cf8d3a2f251eaea0c3a78329c46a7bfddd85dda Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5850484 Reviewed-by: Anders Hartvoll Ruud <[email protected]> Commit-Queue: Rune Lillesveen <[email protected]> Cr-Commit-Position: refs/heads/main@{#1354415}
1 parent 121c225 commit d2c522e

13 files changed

+653
-0
lines changed

‎css/css-conditional/container-queries/at-container-snapped-parsing.html

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<title>CSS Conditional Test: @container snapped query parsing</title>
3+
<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-rule">
4+
<script src="/resources/testharness.js"></script>
5+
<script src="/resources/testharnessreport.js"></script>
6+
<script src="/css/css-conditional/container-queries/support/cq-testcommon.js"></script>
7+
<div style="container-name:name;container-type:scroll-state">
8+
<main id="main"></main>
9+
</div>
10+
<script>
11+
setup(() => assert_implements_container_queries());
12+
13+
function cleanup_main() {
14+
while (main.firstChild)
15+
main.firstChild.remove();
16+
}
17+
18+
function set_style(text) {
19+
let style = document.createElement('style');
20+
style.innerText = text;
21+
main.append(style);
22+
return style;
23+
}
24+
25+
function test_rule_valid(query) {
26+
test(t => {
27+
t.add_cleanup(cleanup_main);
28+
let style = set_style(`@container ${query} {}`);
29+
assert_equals(style.sheet.rules.length, 1);
30+
}, query);
31+
}
32+
33+
function test_condition_invalid(condition) {
34+
test(t => {
35+
t.add_cleanup(cleanup_main);
36+
let style = set_style(`@container name ${condition} {}`);
37+
assert_equals(style.sheet.rules.length, 0);
38+
}, condition);
39+
}
40+
41+
// Tests that 1) the condition parses, and 2) is either "unknown" or not, as
42+
// specified.
43+
function test_condition_valid(condition, unknown) {
44+
test(t => {
45+
t.add_cleanup(cleanup_main);
46+
let style = set_style(`
47+
@container name ${condition} {}
48+
@container name (${condition}) or (not (${condition})) { main { --match:true; } }
49+
`);
50+
assert_equals(style.sheet.rules.length, 2);
51+
const expected = unknown ? '' : 'true';
52+
assert_equals(getComputedStyle(main).getPropertyValue('--match'), expected);
53+
}, condition);
54+
}
55+
56+
function test_condition_known(condition) {
57+
test_condition_valid(condition, false /* unknown */);
58+
}
59+
60+
function test_condition_unknown(condition) {
61+
test_condition_valid(condition, true /* unknown */);
62+
}
63+
64+
test_condition_known('scroll-state(snapped)');
65+
test_condition_known('scroll-state(snapped: x)');
66+
test_condition_known('scroll-state(snapped: y)');
67+
test_condition_known('scroll-state(snapped: none)');
68+
test_condition_known('scroll-state(snapped: block)');
69+
test_condition_known('scroll-state(snapped: inline)');
70+
test_condition_known('(scroll-state(snapped: block))');
71+
test_condition_known('scroll-state((snapped: inline))');
72+
test_condition_known('scroll-state(not ((snapped: inline) and (snapped: block)))');
73+
test_condition_known('scroll-state((snapped: x) or (snapped: y))');
74+
75+
test_condition_unknown('scroll-state(snapped: auto)');
76+
test_condition_unknown('scroll-state(snapped: true)');
77+
test_condition_unknown('scroll-state(style(snapped: inline))');
78+
test_condition_unknown('style(scroll-state(snapped: inline))');
79+
test_condition_unknown('scroll-state(snapped:)');
80+
</script>

‎css/css-conditional/container-queries/at-container-snapped-serialization.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<title>CSS Container Queries: scroll-state(snapped) conditionText serialization</title>
3+
<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-queries">
4+
<link rel="help" href="https://drafts.csswg.org/cssom/#serialize-a-css-rule">
5+
<script src="/resources/testharness.js"></script>
6+
<script src="/resources/testharnessreport.js"></script>
7+
<script src="/css/css-conditional/container-queries/support/cq-testcommon.js"></script>
8+
<style id="testSheet">
9+
@container scroll-state( snapped:inline) { }
10+
@container scroll-STate(snapped: ) { }
11+
@container scroll-STate(snapped) { }
12+
@container scroll-state( ( snapped: INLINE) OR ( SNAPPED: BlOCK ) ) { }
13+
@container scroll-state (snapped: inline) { }
14+
</style>
15+
<script>
16+
setup(() => {
17+
assert_implements_container_queries();
18+
assert_equals(testSheet.sheet.cssRules.length, 5);
19+
});
20+
21+
const tests = [
22+
["scroll-state(snapped: inline)", "Normalize spaces"],
23+
["scroll-STate(snapped: )", "No value - invalid, serializes as <general-enclosed>"],
24+
["scroll-state(snapped)", "Boolean context"],
25+
["scroll-state((snapped: inline) or (snapped: block))", "Logical with 'or'"],
26+
["scroll-state (snapped: inline)", "Not a scroll-state function with space before '('"]
27+
].map((e, i) => [testSheet.sheet.cssRules[i], ...e]);
28+
29+
tests.forEach((t) => {
30+
test(() => assert_equals(t[0].conditionText, t[1]), t[2]);
31+
});
32+
</script>

‎css/css-conditional/container-queries/at-container-stuck-parsing.html

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<!DOCTYPE html>
2+
<title>CSS Conditional Test: @container stuck query parsing</title>
3+
<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-rule">
4+
<script src="/resources/testharness.js"></script>
5+
<script src="/resources/testharnessreport.js"></script>
6+
<script src="/css/css-conditional/container-queries/support/cq-testcommon.js"></script>
7+
<div style="container-name:name;container-type:scroll-state">
8+
<main id="main"></main>
9+
</div>
10+
<script>
11+
setup(() => assert_implements_container_queries());
12+
13+
function cleanup_main() {
14+
while (main.firstChild)
15+
main.firstChild.remove();
16+
}
17+
18+
function set_style(text) {
19+
let style = document.createElement('style');
20+
style.innerText = text;
21+
main.append(style);
22+
return style;
23+
}
24+
25+
function test_rule_valid(query) {
26+
test(t => {
27+
t.add_cleanup(cleanup_main);
28+
let style = set_style(`@container ${query} {}`);
29+
assert_equals(style.sheet.rules.length, 1);
30+
}, query);
31+
}
32+
33+
function test_condition_invalid(condition) {
34+
test(t => {
35+
t.add_cleanup(cleanup_main);
36+
let style = set_style(`@container name ${condition} {}`);
37+
assert_equals(style.sheet.rules.length, 0);
38+
}, condition);
39+
}
40+
41+
// Tests that 1) the condition parses, and 2) is either "unknown" or not, as
42+
// specified.
43+
function test_condition_valid(condition, unknown) {
44+
test(t => {
45+
t.add_cleanup(cleanup_main);
46+
let style = set_style(`
47+
@container name ${condition} {}
48+
@container name (${condition}) or (not (${condition})) { main { --match:true; } }
49+
`);
50+
assert_equals(style.sheet.rules.length, 2);
51+
const expected = unknown ? '' : 'true';
52+
assert_equals(getComputedStyle(main).getPropertyValue('--match'), expected);
53+
}, condition);
54+
}
55+
56+
function test_condition_known(condition) {
57+
test_condition_valid(condition, false /* unknown */);
58+
}
59+
60+
function test_condition_unknown(condition) {
61+
test_condition_valid(condition, true /* unknown */);
62+
}
63+
64+
test_condition_known('scroll-state(stuck)');
65+
test_condition_known('scroll-state(stuck: none)');
66+
test_condition_known('scroll-state(stuck: top)');
67+
test_condition_known('scroll-state(stuck: left)');
68+
test_condition_known('scroll-state(stuck: bottom)');
69+
test_condition_known('scroll-state(stuck: right)');
70+
test_condition_known('scroll-state(stuck: block-start)');
71+
test_condition_known('scroll-state(stuck: block-end)');
72+
test_condition_known('scroll-state(stuck: inline-start)');
73+
test_condition_known('scroll-state(stuck: inline-end)');
74+
test_condition_known('(scroll-state(stuck: top))');
75+
test_condition_known('scroll-state((stuck: top))');
76+
test_condition_known('scroll-state(not ((stuck: top) and (stuck: bottom)))');
77+
test_condition_known('scroll-state((stuck: right) or (stuck: left))');
78+
79+
test_condition_unknown('scroll-state(stuck: auto)');
80+
test_condition_unknown('scroll-state(stuck: true)');
81+
test_condition_unknown('scroll-state(style(stuck: top))');
82+
test_condition_unknown('style(scroll-state(stuck: top))');
83+
test_condition_unknown('scroll-state(stuck:)');
84+
test_condition_unknown('scroll-state(--foo)');
85+
</script>

‎css/css-conditional/container-queries/at-container-stuck-serialization.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<title>CSS Container Queries: scroll-state(stuck) conditionText serialization</title>
3+
<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-queries">
4+
<link rel="help" href="https://drafts.csswg.org/cssom/#serialize-a-css-rule">
5+
<script src="/resources/testharness.js"></script>
6+
<script src="/resources/testharnessreport.js"></script>
7+
<script src="/css/css-conditional/container-queries/support/cq-testcommon.js"></script>
8+
<style id="testSheet">
9+
@container scroll-state( stuck:top) { }
10+
@container scroll-STate(stuck: ) { }
11+
@container scroll-STate(stuck) { }
12+
@container scroll-state( ( stuck: BOTTOM) OR ( STUCK: inline-START ) ) { }
13+
@container scroll-state (stuck: top) { }
14+
</style>
15+
<script>
16+
setup(() => {
17+
assert_implements_container_queries();
18+
assert_equals(testSheet.sheet.cssRules.length, 5);
19+
});
20+
21+
const tests = [
22+
["scroll-state(stuck: top)", "Normalize spaces"],
23+
["scroll-STate(stuck: )", "No value - invalid, serializes as <general-enclosed>"],
24+
["scroll-state(stuck)", "Boolean context"],
25+
["scroll-state((stuck: bottom) or (stuck: inline-start))", "Logical with 'or'"],
26+
["scroll-state (stuck: top)", "Not a scroll-state function with space before '('"]
27+
].map((e, i) => [testSheet.sheet.cssRules[i], ...e]);
28+
29+
tests.forEach((t) => {
30+
test(() => assert_equals(t[0].conditionText, t[1]), t[2]);
31+
});
32+
</script>

‎css/css-conditional/container-queries/container-type-scroll-state-computed.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Conditional Test: Computed values of container-type with scroll-state</title>
4+
<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-type">
5+
<script src="/resources/testharness.js"></script>
6+
<script src="/resources/testharnessreport.js"></script>
7+
<script src="/css/support/computed-testcommon.js"></script>
8+
<script src="/css/css-conditional/container-queries/support/cq-testcommon.js"></script>
9+
<div id="target"></div>
10+
<script>
11+
setup(() => assert_implements_container_queries());
12+
13+
test_computed_value('container-type', 'scroll-state');
14+
test_computed_value('container-type', 'scroll-state size', 'size scroll-state');
15+
test_computed_value('container-type', 'inline-size scroll-state');
16+
</script>

‎css/css-conditional/container-queries/container-type-scroll-state-containment.html

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<title>CSS Container Queries: container type scroll-state</title>
3+
<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-type">
4+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6402#issuecomment-1812973013">
5+
<script src="/resources/testharness.js"></script>
6+
<script src="/resources/testharnessreport.js"></script>
7+
<script src="/css/css-conditional/container-queries/support/cq-testcommon.js"></script>
8+
<style>
9+
body { margin: 0; }
10+
#container {
11+
margin-top: 100px;
12+
container-type: scroll-state;
13+
width: fit-content;
14+
}
15+
#child {
16+
margin-top: 100px;
17+
width: 100px;
18+
height: 100px;
19+
}
20+
</style>
21+
<div id="container">
22+
<div id="child">Non-zero-content</div>
23+
</div>
24+
<script>
25+
test(() => {
26+
assert_equals(container.offsetWidth, 100, "Intrinsically sized width");
27+
assert_equals(container.offsetHeight, 100, "Intrinsically sized height");
28+
}, "container-type:scroll-state does not apply size containment");
29+
30+
test(() => {
31+
assert_equals(child.getBoundingClientRect().y, 100,
32+
"#container and #child margins collapsed");
33+
}, "container-type:scroll-state does not establish a formatting context");
34+
</script>

‎css/css-conditional/container-queries/container-type-scroll-state-parsing.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Conditional Test: Parsing of container-type with scroll-state</title>
4+
<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-type">
5+
<script src="/resources/testharness.js"></script>
6+
<script src="/resources/testharnessreport.js"></script>
7+
<script src="/css/support/parsing-testcommon.js"></script>
8+
<script src="/css/css-conditional/container-queries/support/cq-testcommon.js"></script>
9+
<div id="target"></div>
10+
<script>
11+
setup(() => assert_implements_container_queries());
12+
13+
test_valid_value('container-type', 'scroll-state');
14+
test_valid_value('container-type', 'size scroll-state');
15+
test_valid_value('container-type', 'scroll-state inline-size', 'inline-size scroll-state');
16+
17+
test_invalid_value('container-type', 'scroll-state scroll-state');
18+
test_invalid_value('container-type', 'normal scroll-state');
19+
test_invalid_value('container-type', 'inline-size block-size scroll-state');
20+
</script>

‎css/css-conditional/container-queries/scroll-state-initially-snapped.html

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<title>@container: scroll-state(snapped) matching for initial rendering</title>
3+
<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-rule">
4+
<script src="/resources/testharness.js"></script>
5+
<script src="/resources/testharnessreport.js"></script>
6+
<script src="/css/css-conditional/container-queries/support/cq-testcommon.js"></script>
7+
<script src="/css/css-transitions/support/helper.js"></script>
8+
<style>
9+
:root {
10+
scroll-snap-type: block mandatory;
11+
}
12+
body {
13+
margin: 0;
14+
}
15+
#filler-before {
16+
height: 200px;
17+
}
18+
#filler-after {
19+
height: 10000px;
20+
}
21+
#snapped {
22+
container-name: initially-snapped;
23+
container-type: scroll-state;
24+
scroll-snap-align: start;
25+
width: 100px;
26+
height: 100px;
27+
background: teal;
28+
}
29+
30+
@container initially-snapped scroll-state(snapped: block) {
31+
span { --snapped: yes }
32+
}
33+
</style>
34+
<div id="filler-before"></div>
35+
<div id="snapped">
36+
<span id="target">My container is snapped</span>
37+
</div>
38+
<div id="filler-after"></div>
39+
<script>
40+
setup(() => assert_implements_container_queries());
41+
42+
promise_test(async t => {
43+
await waitForAnimationFrames(2);
44+
assert_equals(getComputedStyle(target).getPropertyValue("--snapped"), "yes");
45+
assert_equals(document.documentElement.scrollTop, 200);
46+
}, "Check that scroll-state(snapped: block) matches");
47+
</script>

‎css/css-conditional/container-queries/scroll-state-initially-stuck.html

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<title>@container: scroll-state(stuck) matching for initial rendering</title>
3+
<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-rule">
4+
<script src="/resources/testharness.js"></script>
5+
<script src="/resources/testharnessreport.js"></script>
6+
<script src="/css/css-conditional/container-queries/support/cq-testcommon.js"></script>
7+
<script src="/css/css-transitions/support/helper.js"></script>
8+
<style>
9+
#filler {
10+
height: 10000px;
11+
}
12+
#stuck {
13+
container-name: initially-stuck;
14+
container-type: scroll-state;
15+
position: sticky;
16+
bottom: 0;
17+
}
18+
19+
@container initially-stuck scroll-state(stuck: bottom) {
20+
span { --stuck: yes }
21+
}
22+
</style>
23+
<div id="filler"></div>
24+
<div id="stuck">
25+
<span id="target">My container is stuck</span>
26+
</div>
27+
<script>
28+
setup(() => assert_implements_container_queries());
29+
30+
promise_test(async t => {
31+
await waitForAnimationFrames(2);
32+
assert_equals(getComputedStyle(target).getPropertyValue("--stuck"), "yes");
33+
}, "Check that scroll-state(stuck: bottom) matches");
34+
</script>

0 commit comments

Comments
 (0)