if-media-invalidation.html (1408B)
1 <!DOCTYPE html> 2 <title>CSS Values and Units Test: if() media() condition invalidation</title> 3 <meta name="assert" content="Test if() media() condition invalidation"> 4 <link rel="help" href="https://drafts.csswg.org/css-values-5/#if-notation"> 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 #target { 17 --actual: if(media((height < 100px) or ((height >= 200px) and (height < 300px))): true_value; else: false_value;); 18 } 19 </style> 20 "></iframe> 21 22 <script> 23 function waitForLoad(w) { 24 return new Promise(resolve => w.addEventListener('load', resolve)); 25 } 26 27 promise_test(async () => { 28 await waitForLoad(window); 29 const target = iframe.contentDocument.querySelector('#target'); 30 let actualValue = () => getComputedStyle(target).getPropertyValue('--actual'); 31 32 assert_equals(actualValue(), 'true_value', '--actual before resize'); 33 34 // [<height of frame>, <expected function result>] 35 let data = [ 36 ['100px', 'false_value'], 37 ['200px', 'true_value'], 38 ['300px', 'false_value'] 39 ]; 40 41 for (let d of data) { 42 iframe.style.height = d[0]; 43 let expected = d[1]; 44 assert_equals(actualValue(), expected, `--actual after resize to ${d[0]}`); 45 } 46 }); 47 </script>