1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
<!DOCTYPE html>
<title>Custom Functions: @container style queries</title>
<link rel="help" href="https://drafts.csswg.org/css-mixins-1/#conditional-rules">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#container, #target {
container-type: size;
}
#size-container {
container-type: size;
width: 100px;
height: 100px;
--x: size;
}
#parent {
--x: parent;
}
@function --f() {
result: A;
@container (style(--x: before)) {
result: B;
}
@container (style(--x: target)) {
result: C;
}
@container (style(--x: parent)) {
result: D;
}
@container (style(--x: size)) {
result: E;
}
}
#target {
--x: target;
--actual: --f();
}
#target::before {
content: "test";
--x: before;
--actual: --f();
}
</style>
<div id=size-container>
<div id=parent>
<div id=target>
</div>
</div>
</div>
<script>
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue('--x'), 'target');
assert_equals(getComputedStyle(target).getPropertyValue('--actual'), 'D');
}, 'Style query on #target should query parent element');
test(() => {
assert_equals(getComputedStyle(target, '::before').getPropertyValue('--x'), 'before');
assert_equals(getComputedStyle(target, '::before').getPropertyValue('--actual'), 'C');
}, 'Style query on ::before should query originating element');
</script>
|
