function-in-media.html (1286B)
1 <!DOCTYPE html> 2 <title>Custom Functions: @function inside @media</title> 3 <link rel="help" href="https://drafts.csswg.org/css-mixins-1"> 4 <link rel="help" href="https://drafts.csswg.org/css-conditional-3/#at-media"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 iframe { 9 width: 50px; 10 height: 50px; 11 } 12 </style> 13 <iframe id="iframe" srcdoc=" 14 <div id=target></div> 15 <style> 16 @media (width >= 50px) { 17 @function --f() { result: 50; } 18 } 19 @media (width >= 100px) { 20 @function --f() { result: 100; } 21 } 22 #target { 23 --actual: --f(); 24 } 25 </style> 26 "></iframe> 27 28 <script> 29 function waitForLoad(w) { 30 return new Promise(resolve => w.addEventListener('load', resolve)); 31 } 32 33 promise_test(async () => { 34 await waitForLoad(window); 35 const target = iframe.contentDocument.querySelector('#target'); 36 let actualValue = () => getComputedStyle(target).getPropertyValue('--actual'); 37 38 assert_equals(actualValue(), '50', '--actual before resize'); 39 iframe.style.width = '100px'; 40 assert_equals(actualValue(), '100', '--actual after resize'); 41 iframe.style.width = ''; 42 assert_equals(actualValue(), '50', '--actual after resizing back to original'); 43 }); 44 </script>