at-container-parsing.html (6220B)
1 <!doctype html> 2 <title>@container: 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;container-type:size; width:100px; height:100px"> 8 <main id="cq-main"></main> 9 </div> 10 <script> 11 setup(() => assert_implements_size_container_queries()); 12 13 test_cq_condition_known('(width)'); 14 test_cq_condition_known('(min-width: 0px)'); 15 test_cq_condition_known('(max-width: 0px)'); 16 test_cq_condition_known('(height)'); 17 test_cq_condition_known('(min-height: 0px)'); 18 test_cq_condition_known('(max-height: 0px)'); 19 test_cq_condition_known('(aspect-ratio)'); 20 test_cq_condition_known('(min-aspect-ratio: 1/2)'); 21 test_cq_condition_known('(max-aspect-ratio: 1/2)'); 22 test_cq_condition_known('(orientation: portrait)'); 23 test_cq_condition_known('(inline-size)'); 24 test_cq_condition_known('(min-inline-size: 0px)'); 25 test_cq_condition_known('(max-inline-size: 0px)'); 26 test_cq_condition_known('(block-size)'); 27 test_cq_condition_known('(min-block-size: 0px)'); 28 test_cq_condition_known('(max-block-size: 0px)'); 29 30 test_cq_condition_known('(width: 100px)'); 31 test_cq_condition_known('((width: 100px))'); 32 test_cq_condition_known('(not (width: 100px))'); 33 test_cq_condition_known('((width: 100px) and (height: 100px))'); 34 test_cq_condition_known('(((width: 40px) or (width: 50px)) and (height: 100px))'); 35 test_cq_condition_known('((width: 100px) and ((height: 40px) or (height: 50px)))'); 36 test_cq_condition_known('(((width: 40px) and (height: 50px)) or (height: 100px))'); 37 test_cq_condition_known('((width: 50px) or ((width: 40px) and (height: 50px)))'); 38 test_cq_condition_known('((width: 100px) and (not (height: 100px)))'); 39 test_cq_condition_known('(width < 100px)'); 40 test_cq_condition_known('(width <= 100px)'); 41 test_cq_condition_known('(width = 100px)'); 42 test_cq_condition_known('(width > 100px)'); 43 test_cq_condition_known('(width >= 100px)'); 44 test_cq_condition_known('(100px < width)'); 45 test_cq_condition_known('(100px <= width)'); 46 test_cq_condition_known('(100px = width)'); 47 test_cq_condition_known('(100px > width)'); 48 test_cq_condition_known('(100px >= width)'); 49 test_cq_condition_known('(100px < width < 200px)'); 50 test_cq_condition_known('(100px < width <= 200px)'); 51 test_cq_condition_known('(100px <= width < 200px)'); 52 test_cq_condition_known('(100px > width > 200px)'); 53 test_cq_condition_known('(100px > width >= 200px)'); 54 test_cq_condition_known('(100px >= width > 200px)'); 55 56 test_cq_condition_known('(width: calc(10px))'); 57 test_cq_condition_known('(width: calc(10em))'); 58 test_cq_condition_known('(width: calc(10px + 10em))'); 59 test_cq_condition_known('(width < calc(10px + 10em))'); 60 test_cq_condition_known('(width < max(10px, 10em))'); 61 test_cq_condition_known('(calc(10px + 10em) < width)'); 62 test_cq_condition_known('(calc(10px + 10em) < width < max(30px, 30em))'); 63 test_cq_condition_known('(width: 100px) and (height: 100px)'); 64 test_cq_condition_known('(width: 100px) or (height: 100px)'); 65 test_cq_condition_known('not (width: 100px)'); 66 67 test_cq_condition_unknown('foo(width)'); 68 test_cq_condition_unknown('size(width)'); 69 test_cq_condition_unknown('(asdf)'); 70 test_cq_condition_unknown('(resolution > 100dpi)'); 71 test_cq_condition_unknown('(resolution: 150dpi)'); 72 test_cq_condition_unknown('(resolution: calc(2x))'); 73 test_cq_condition_unknown('(color)'); 74 test_cq_condition_unknown('(min-color: 1)'); 75 test_cq_condition_unknown('(color-index >= 1)'); 76 test_cq_condition_unknown('size(grid)'); 77 test_cq_condition_unknown('(grid)'); 78 test_cq_condition_unknown('(width == 100px)'); 79 test_cq_condition_unknown('(100px == width)'); 80 test_cq_condition_unknown('(100px = width = 200px)'); 81 test_cq_condition_unknown('(100px < width > 200px)'); 82 test_cq_condition_unknown('(100px <= width >= 200px)'); 83 test_cq_condition_unknown('(100px <= width > 200px)'); 84 test_cq_condition_unknown('(100px < width >= 200px)'); 85 test_cq_condition_unknown('(100px : width : 200px)'); 86 87 test_cq_condition_invalid('screen'); 88 test_cq_condition_invalid('print'); 89 test_cq_condition_invalid('not print'); 90 test_cq_condition_invalid('only print'); 91 test_cq_condition_invalid('screen and (width: 100px)'); 92 test_cq_condition_invalid('screen or (width: 100px)'); 93 test_cq_condition_invalid('not screen and (width: 100px)'); 94 test_cq_condition_invalid('not screen or (width: 100px)'); 95 test_cq_condition_invalid('foo (width: 100px)'); 96 97 test_cq_rule_valid('name not (width <= 500px)'); 98 test_cq_rule_valid('not (width <= 500px)'); 99 test_cq_rule_valid('(width: 100px), (height: 100px)'); 100 test_cq_rule_valid('(width),(height) , (inline-size > 20px)'); 101 test_cq_rule_valid('(width), name (height)'); 102 test_cq_rule_valid('--foo'); 103 test_cq_rule_valid('container'); 104 test_cq_rule_valid('container, container2'); 105 106 test_cq_rule_invalid(''); 107 test_cq_rule_invalid('(width),'); 108 test_cq_rule_invalid(',(width)'); 109 test_cq_rule_invalid('(width),,(height)'); 110 111 test_container_name_valid('foo'); 112 test_container_name_valid(' foo'); 113 test_container_name_valid(' foo '); 114 test_container_name_valid('normal'); 115 test_container_name_valid('Normal'); 116 test_container_name_valid('auto'); 117 test_container_name_valid('Auto'); 118 119 test_container_name_invalid('foo foo'); 120 test_container_name_invalid('1px'); 121 test_container_name_invalid('50gil'); 122 test_container_name_invalid('name(foo)'); 123 test_container_name_invalid('type(inline-size)'); 124 test_container_name_invalid('"foo"'); 125 test_container_name_invalid('"inherit"'); 126 test_container_name_invalid('inherit'); 127 test_container_name_invalid('INITIAL'); 128 test_container_name_invalid('Unset'); 129 test_container_name_invalid('deFAULT'); 130 test_container_name_invalid('none'); 131 test_container_name_invalid('None'); 132 test_container_name_invalid('and'); 133 test_container_name_invalid('or'); 134 test_container_name_invalid('not'); 135 test_container_name_invalid('And'); 136 test_container_name_invalid('oR'); 137 test_container_name_invalid('nOt'); 138 </script>