function-container-style.html (1493B)
1 <!DOCTYPE html> 2 <title>Custom Functions: @container style queries</title> 3 <link rel="help" href="https://drafts.csswg.org/css-mixins-1/#conditional-rules"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 #container, #target { 8 container-type: size; 9 } 10 #size-container { 11 container-type: size; 12 width: 100px; 13 height: 100px; 14 --x: size; 15 } 16 #parent { 17 --x: parent; 18 } 19 @function --f() { 20 result: A; 21 @container (style(--x: before)) { 22 result: B; 23 } 24 @container (style(--x: target)) { 25 result: C; 26 } 27 @container (style(--x: parent)) { 28 result: D; 29 } 30 @container (style(--x: size)) { 31 result: E; 32 } 33 } 34 #target { 35 --x: target; 36 --actual: --f(); 37 } 38 #target::before { 39 content: "test"; 40 --x: before; 41 --actual: --f(); 42 } 43 </style> 44 45 <div id=size-container> 46 <div id=parent> 47 <div id=target> 48 </div> 49 </div> 50 </div> 51 52 <script> 53 test(() => { 54 assert_equals(getComputedStyle(target).getPropertyValue('--x'), 'target'); 55 assert_equals(getComputedStyle(target).getPropertyValue('--actual'), 'D'); 56 }, 'Style query on #target should query parent element'); 57 58 test(() => { 59 assert_equals(getComputedStyle(target, '::before').getPropertyValue('--x'), 'before'); 60 assert_equals(getComputedStyle(target, '::before').getPropertyValue('--actual'), 'C'); 61 }, 'Style query on ::before should query originating element'); 62 </script>