test_viewport_units.html (1913B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=804970 5 --> 6 <head> 7 <title>Test for dynamic changes to CSS 'vh', 'vw', 'vmin', and 'vmax' units</title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 10 </head> 11 <body> 12 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=804970">Mozilla Bug 804970</a> 13 <iframe id="iframe" src="viewport_units_iframe.html"></iframe> 14 <pre id="test"> 15 <script type="application/javascript"> 16 17 /** Test for CSS vh/vw/vmin/vmax units */ 18 19 function px_to_num(str) 20 { 21 return Number(String(str).match(/^([\d.]+)px$/)[1]); 22 } 23 24 function width(elt) 25 { 26 return px_to_num(elt.ownerDocument.defaultView.getComputedStyle(elt).width); 27 } 28 29 SimpleTest.waitForExplicitFinish(); 30 31 function run() { 32 var iframe = document.getElementById("iframe"); 33 var idoc = iframe.contentDocument; 34 var vh = idoc.getElementById("vh"); 35 var vw = idoc.getElementById("vw"); 36 var vmin = idoc.getElementById("vmin"); 37 var vmax = idoc.getElementById("vmax"); 38 39 iframe.style.width = "100px"; 40 iframe.style.height = "250px"; 41 is(width(vh), 250, "vh should be 250px"); 42 is(width(vw), 100, "vw should be 100px"); 43 is(width(vmin), 100, "vmin should be 100px"); 44 is(width(vmax), 250, "vmax should be 250px"); 45 46 iframe.style.width = "300px"; 47 is(width(vh), 250, "vh should be 250px"); 48 is(width(vw), 300, "vw should be 300px"); 49 is(width(vmin), 250, "vmin should be 250px"); 50 is(width(vmax), 300, "vmax should be 300px"); 51 52 iframe.style.height = "200px"; 53 is(width(vh), 200, "vh should be 200px"); 54 is(width(vw), 300, "vw should be 300px"); 55 is(width(vmin), 200, "vmin should be 200px"); 56 is(width(vmax), 300, "vmax should be 300px"); 57 58 SimpleTest.finish(); 59 } 60 61 window.addEventListener("load", run); 62 63 </script> 64 </pre> 65 </body> 66 </html>