function-media-dynamic.html (1541B)
1 <!DOCTYPE html> 2 <title>Custom Functions: @media responds to changes</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 iframe { 8 width: 50px; 9 height: 50px; 10 } 11 </style> 12 <iframe id="iframe" srcdoc=" 13 <div id=target></div> 14 <style> 15 @function --f() { 16 result: A; 17 @media (width = 100px) { 18 result: B; 19 } 20 @media ((width >= 110px) and (width <= 140px)) { 21 result: C; 22 } 23 @media (width = 150px) { 24 result: D; 25 } 26 } 27 #target { 28 --actual: --f(); 29 } 30 </style> 31 "></iframe> 32 33 <script> 34 function waitForLoad(w) { 35 return new Promise(resolve => w.addEventListener('load', resolve)); 36 } 37 38 promise_test(async () => { 39 await waitForLoad(window); 40 const target = iframe.contentDocument.querySelector('#target'); 41 let actualValue = () => getComputedStyle(target).getPropertyValue('--actual'); 42 43 assert_equals(actualValue(), 'A', '--actual before resize'); 44 45 // [<width of frame>, <expected function result>] 46 let data = [ 47 ['100px', 'B'], 48 ['105px', 'A'], 49 ['110px', 'C'], 50 ['125px', 'C'], 51 ['140px', 'C'], 52 ['145px', 'A'], 53 ['150px', 'D'], 54 ['155px', 'A'], 55 ]; 56 57 for (let d of data) { 58 iframe.style.width = d[0]; 59 let expected = d[1]; 60 assert_equals(actualValue(), expected, `--actual after resize to ${d[0]}`); 61 } 62 }); 63 </script>