at-container-style-parsing.html (2703B)
1 <!doctype html> 2 <title>@container: style queries 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="support/cq-testcommon.js"></script> 7 <div style="container-name:name"> 8 <main id="cq-main"></main> 9 </div> 10 <script> 11 setup(() => assert_implements_style_container_queries()); 12 13 test_cq_condition_known('style(--my-prop: foo)'); 14 test_cq_condition_known('style(--my-prop: foo - bar ())'); 15 test_cq_condition_known('style(not ((--foo: calc(10px + 2em)) and ((--foo: url(x)))))'); 16 test_cq_condition_known('style((--foo: bar) or (--bar: 10px))'); 17 test_cq_condition_known('style(--my-prop:)'); 18 test_cq_condition_known('style(--my-prop: )'); 19 test_cq_condition_known('style(--foo: bar !important)'); 20 test_cq_condition_known('style(--foo)'); 21 test_cq_condition_known('style(--my-prop: attr(data-foo))'); 22 test_cq_condition_known('style(--foo >= --bar)'); 23 test_cq_condition_known('style(--foo = --bar)'); 24 test_cq_condition_known('style(--foo <= --bar)'); 25 test_cq_condition_known('style(10px > 10em)'); 26 test_cq_condition_known('style(--foo >= 10em)'); 27 test_cq_condition_known('style(10px > --bar)'); 28 test_cq_condition_known('style(10px = --bar)'); 29 test_cq_condition_known('style(--foo < --bar)'); 30 test_cq_condition_known('style(10px <= 10em)'); 31 test_cq_condition_known('style(10px = 10em)'); 32 test_cq_condition_known('style(10px <= calc(10em + 20em))'); 33 test_cq_condition_known('style(calc(10em + 20em) < 10px)'); 34 test_cq_condition_known('style(--foo < 10em)'); 35 test_cq_condition_known('style(10px <= --bar)'); 36 test_cq_condition_known('style(--foo < --bar <= --baz)'); 37 test_cq_condition_known('style(--foo >= --bar > --baz)'); 38 test_cq_condition_known('style(--foo > 10px > 10em)'); 39 test_cq_condition_known('style(10px < --foo < 10em)'); 40 test_cq_condition_known('style(10px < --foo <= 10em)'); 41 test_cq_condition_known('style(10px <= --foo < 10em)'); 42 test_cq_condition_known('style(10px > 10em > --foo)'); 43 test_cq_condition_known('style(10px < 10em < 10)'); 44 test_cq_condition_known('style(var(--p) < calc(100 + 200))'); 45 test_cq_condition_known('style(attr(data-foo type(<number>)) < var(--p) < var(--q))'); 46 test_cq_condition_known('style(--foo < initial)'); 47 48 test_cq_condition_unknown('style(--foo: bar;)'); 49 test_cq_condition_unknown('style(style(--foo: bar))'); 50 test_cq_condition_unknown('style(10px < 10em > 10)'); 51 test_cq_condition_unknown('style( < 10em)'); 52 test_cq_condition_unknown('style(10px < 10em !)'); 53 test_cq_condition_unknown('style(10px ! < 10em)'); 54 </script>