size-query-with-var.html (2664B)
1 <!DOCTYPE html> 2 <title>@container: size query with var()</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 <style> 8 @property --registered { 9 syntax: "<length>"; 10 inherits: false; 11 initial-value: 0; 12 } 13 @property --registered-keyword { 14 syntax: "none|fail"; 15 inherits: false; 16 initial-value: none; 17 } 18 @property --registered-number { 19 syntax: "<number>"; 20 inherits: false; 21 initial-value: 0; 22 } 23 #container { 24 width: 400px; 25 container-type: inline-size; 26 --unregistered: 200px; 27 --unregistered-keyword: fail; 28 --unregistered-number: 200; 29 --registered: 200px; 30 --registered-keyword: fail; 31 --registered-number: 0; 32 } 33 #target { 34 --match-unknown: no; 35 --match-unknown-fallback: no; 36 --match-unregistered: no; 37 --match-unregistered-keyword: no; 38 --match-unregistered-number: no; 39 --match-registered: no; 40 --match-registered-keyword: no; 41 --match-registered-number: no; 42 } 43 @container (width > var(--unknown)) { 44 #target { --match-unknown: yes; } 45 } 46 @container (width > var(--unknown, 100px)) { 47 #target { --match-unknown-fallback: yes; } 48 } 49 @container (width > var(--unregistered)) { 50 #target { --match-unregistered: yes; } 51 } 52 @container (width > var(--unregistered-keyword)) { 53 #target { --match-unregistered-keyword: yes; } 54 } 55 @container (width > var(--unregistered-number)) { 56 #target { --match-unregistered-number: yes; } 57 } 58 @container (width > var(--registered)) { 59 #target { --match-registered: yes; } 60 } 61 @container (width > var(--registered-keyword)) { 62 #target { --match-registered-keyword: yes; } 63 } 64 @container (width > var(--registered-number)) { 65 #target { --match-registered-number: yes; } 66 } 67 </style> 68 <div id="container"> 69 <div id="target"></div> 70 </div> 71 <script> 72 setup(() => assert_implements_size_container_queries()); 73 74 for (let match of [["--match-unknown", "no"], 75 ["--match-unknown-fallback", "yes"], 76 ["--match-unregistered", "yes"], 77 ["--match-unregistered-keyword", "no"], 78 ["--match-unregistered-number", "no"], 79 ["--match-registered", "yes"], 80 ["--match-registered-keyword", "no"], 81 ["--match-registered-number", "no"]]) { 82 test(() => { 83 assert_equals(getComputedStyle(target).getPropertyValue(match[0]), match[1]); 84 }, `Matching ${match[0]}`); 85 } 86 </script>