dynamic-viewport-units-rule-cache.html (1929B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> 4 <link rel="author" title="Mozilla" href="https://mozilla.org"> 5 <link rel="help" href="https://drafts.csswg.org/css-values/#viewport-relative-lengths"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <body style="display: none"> 9 <script> 10 promise_test(async function() { 11 let frame = document.createElement("iframe"); 12 let load = new Promise(resolve => { 13 frame.addEventListener("load", resolve); 14 }); 15 frame.setAttribute("scrolling", "no"); 16 frame.setAttribute("frameborder", "0"); 17 frame.style.width = "100px"; 18 frame.style.height = "100px"; 19 frame.srcdoc = ` 20 <!doctype html> 21 <style> 22 body { margin: 0 } 23 #parent, #child { width: 100vw; height: 100vh; } 24 </style> 25 <div id="parent"> 26 <div id="child"></div> 27 </div> 28 `; 29 document.body.appendChild(frame); 30 31 await load; 32 33 { 34 let resize = new Promise(resolve => { 35 frame.contentWindow.addEventListener("resize", resolve); 36 }); 37 document.body.style.display = ""; 38 await resize; 39 } 40 41 let doc = frame.contentDocument; 42 function assertDimensions(expected, description) { 43 for (let id of ["parent", "child"]) { 44 let element = doc.getElementById(id); 45 let rect = element.getBoundingClientRect(); 46 assert_equals(rect.width, expected, `${description}: ${id} width`); 47 assert_equals(rect.height, expected, `${description}: ${id} height`); 48 } 49 } 50 assertDimensions(100, "before resize"); 51 let resize = new Promise(resolve => { 52 frame.contentWindow.addEventListener("resize", resolve); 53 }); 54 frame.style.width = "200px"; 55 frame.style.height = "200px"; 56 await resize; 57 assertDimensions(200, "after resize"); 58 }) 59 </script>