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
|
<!doctype html>
<title>@container: style queries parsing</title>
<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-rule">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/cq-testcommon.js"></script>
<div style="container-name:name">
<main id="cq-main"></main>
</div>
<script>
setup(() => assert_implements_style_container_queries());
test_cq_condition_known('style(--my-prop: foo)');
test_cq_condition_known('style(--my-prop: foo - bar ())');
test_cq_condition_known('style(not ((--foo: calc(10px + 2em)) and ((--foo: url(x)))))');
test_cq_condition_known('style((--foo: bar) or (--bar: 10px))');
test_cq_condition_known('style(--my-prop:)');
test_cq_condition_known('style(--my-prop: )');
test_cq_condition_known('style(--foo: bar !important)');
test_cq_condition_known('style(--foo)');
test_cq_condition_known('style(--my-prop: attr(data-foo))');
test_cq_condition_known('style(--foo >= --bar)');
test_cq_condition_known('style(--foo = --bar)');
test_cq_condition_known('style(--foo <= --bar)');
test_cq_condition_known('style(10px > 10em)');
test_cq_condition_known('style(--foo >= 10em)');
test_cq_condition_known('style(10px > --bar)');
test_cq_condition_known('style(10px = --bar)');
test_cq_condition_known('style(--foo < --bar)');
test_cq_condition_known('style(10px <= 10em)');
test_cq_condition_known('style(10px = 10em)');
test_cq_condition_known('style(10px <= calc(10em + 20em))');
test_cq_condition_known('style(calc(10em + 20em) < 10px)');
test_cq_condition_known('style(--foo < 10em)');
test_cq_condition_known('style(10px <= --bar)');
test_cq_condition_known('style(--foo < --bar <= --baz)');
test_cq_condition_known('style(--foo >= --bar > --baz)');
test_cq_condition_known('style(--foo > 10px > 10em)');
test_cq_condition_known('style(10px < --foo < 10em)');
test_cq_condition_known('style(10px < --foo <= 10em)');
test_cq_condition_known('style(10px <= --foo < 10em)');
test_cq_condition_known('style(10px > 10em > --foo)');
test_cq_condition_known('style(10px < 10em < 10)');
test_cq_condition_known('style(var(--p) < calc(100 + 200))');
test_cq_condition_known('style(attr(data-foo type(<number>)) < var(--p) < var(--q))');
test_cq_condition_unknown('style(--foo: bar;)');
test_cq_condition_unknown('style(style(--foo: bar))');
test_cq_condition_unknown('style(10px < 10em > 10)');
test_cq_condition_unknown('style( < 10em)');
</script>
|
