scroll-state-query-with-var.html (2450B)
1 <!DOCTYPE html> 2 <title>@container: scroll-state 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="/css/css-conditional/container-queries/support/cq-testcommon.js"></script> 7 <script src="/css/css-transitions/support/helper.js"></script> 8 <style> 9 @property --registered { 10 syntax: "none|top|left|bottom|right"; 11 inherits: false; 12 initial-value: none; 13 } 14 @property --registered-number { 15 syntax: "<number>"; 16 inherits: false; 17 initial-value: 0; 18 } 19 #container { 20 container-type: scroll-state; 21 overflow: auto; 22 width: 200px; 23 height: 200px; 24 --unregistered: right; 25 --unregistered-number: 13; 26 --registered: right; 27 --registered-number: 13; 28 } 29 #target { 30 width: 400px; /* Make sure we overflow to the right */ 31 height: 10px; 32 --match-unknown: no; 33 --match-unknown-fallback: no; 34 --match-unregistered: no; 35 --match-unregistered-number: no; 36 --match-registered: no; 37 --match-registered-number: no; 38 } 39 @container scroll-state(scrollable: var(--unknown)) { 40 #target { --match-unknown: yes; } 41 } 42 @container (scrollable: var(--unknown, right)) { 43 #target { --match-unknown-fallback: yes; } 44 } 45 @container (scrollable: var(--unregistered)) { 46 #target { --match-unregistered: yes; } 47 } 48 @container (scrollable: var(--unregistered-number)) { 49 #target { --match-unregistered-number: yes; } 50 } 51 @container (scrollable: var(--registered)) { 52 #target { --match-registered: yes; } 53 } 54 @container (scrollable: var(--registered-number)) { 55 #target { --match-registered-number: yes; } 56 } 57 </style> 58 <div id="container"> 59 <div id="target"></div> 60 </div> 61 <script> 62 promise_setup(async () => { 63 assert_implements_scroll_state_container_queries(); 64 await waitForAnimationFrames(2); 65 }); 66 67 for (let match of [["--match-unknown", "no"], 68 ["--match-unknown-fallback", "yes"], 69 ["--match-unregistered", "yes"], 70 ["--match-unregistered-number", "no"], 71 ["--match-registered", "yes"], 72 ["--match-registered-number", "no"]]) { 73 promise_test(async t => { 74 assert_equals(getComputedStyle(target).getPropertyValue(match[0]), match[1]); 75 }, `Matching ${match[0]}`); 76 } 77 78 </script>