function-container-self.html (922B)
1 <!DOCTYPE html> 2 <title>Custom Functions: @container can not query self</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 #container { 11 width: 100px; 12 height: 100px; 13 } 14 #target { 15 width: 50px; 16 height: 50px; 17 } 18 @function --f() { 19 result: A; 20 @container (width = 100px) { 21 result: B; 22 } 23 @container (width = 50px) { 24 result: C; 25 } 26 } 27 #target { 28 --actual: --f(); 29 } 30 </style> 31 32 <div id=container> 33 <div id=target> 34 </div> 35 </div> 36 37 <script> 38 test(() => { 39 // Even though #target is a CQ container, the @container rules should 40 // not evaluate against that element. 41 assert_equals(getComputedStyle(target).getPropertyValue('--actual'), 'B'); 42 }); 43 </script>