1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
<!DOCTYPE html>
<title>CSS Container Queries Test: Container for elements with pseudo elements</title>
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#query-container">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/cq-testcommon.js"></script>
<style>
:root {
color: black;
}
.container {
container-type: size;
width: 200px;
height: 40px;
}
@container (min-width: 300px) {
#container1 div::before { content: "before"; }
#container1 div::after { content: "after"; }
#container2 li::marker { color: green; }
}
</style>
<main id=container1 class=container>
<div>test</div>
</main>
<main id=container2 class=container>
<ol>
<li>One</li>
</ol>
</main>
<script>
setup(() => assert_implements_container_queries());
test(function() {
let div = document.querySelector('#container1 > div');
assert_equals(getComputedStyle(div, '::before').content, 'none');
assert_equals(getComputedStyle(div, '::after').content, 'none');
container1.style.width = '300px';
assert_equals(getComputedStyle(div, '::before').content, '"before"');
assert_equals(getComputedStyle(div, '::after').content, '"after"');
container1.style = '';
assert_equals(getComputedStyle(div, '::before').content, 'none');
assert_equals(getComputedStyle(div, '::after').content, 'none');
}, 'Pseudo-elements ::before and ::after respond to container size changes');
test(function() {
let li = document.querySelector('#container2 li');
assert_equals(getComputedStyle(li, '::marker').color, 'rgb(0, 0, 0)');
container2.style.width = '300px';
assert_equals(getComputedStyle(li, '::marker').color, 'rgb(0, 128, 0)');
container2.style = '';
assert_equals(getComputedStyle(li, '::marker').color, 'rgb(0, 0, 0)');
}, 'Pseudo-element ::marker responds to container size changes');
</script>
|
