viewport-units-extreme-scale.html (1240B)
1 <!DOCTYPE html> 2 <title>Scaling with viewport units</title> 3 <link rel="help" href="https://drafts.csswg.org/css-values-4/#viewport-relative-lengths"> 4 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1860338"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 8 <iframe id=iframe width=640 height=480></iframe> 9 10 <script> 11 12 const doc = iframe.contentDocument; 13 const win = iframe.contentWindow; 14 15 function test_computed_value(value, expected) { 16 test((t) => { 17 t.add_cleanup(() => { doc.body.innerHTML = ''; }); 18 doc.body.innerHTML = ` 19 <!doctype html> 20 <style> 21 * { margin: 0; } 22 body { height: 100%; } 23 div { height: ${value}; } 24 </style> 25 <div></div> 26 `; 27 let div = doc.querySelector('div'); 28 assert_equals(win.getComputedStyle(div).height, expected); 29 }, `${value} computes to ${expected}`); 30 } 31 32 // Check the basic units are as expected 33 test_computed_value('100vw', '640px'); 34 test_computed_value('100vh', '480px'); 35 36 // Try some calculations involving extreme scaling 37 test_computed_value('calc((1vw - 6.3999px) * 10000000)', '1000px'); 38 test_computed_value('calc((100vh - 479px) * 60000)', '60000px'); 39 40 </script>