relative-units.html (1428B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <meta name="viewport" content="width=device-width"> 4 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> 5 <link rel="author" title="Mozilla" href="https://mozilla.org"> 6 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1892676"> 7 <link rel="help" href="https://drafts.csswg.org/css-viewport/#zoom-property"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <style> 11 :root, 12 #zoomed { 13 font-size: 10px; 14 line-height: 10px; 15 zoom: 2; 16 } 17 </style> 18 <div id="outside"></div> 19 <div id="zoomed"> 20 <div id="inside"></div> 21 </div> 22 <script> 23 function test_unit(unit, outside, zoomed, inside = zoomed) { 24 test(function() { 25 let values = { outside, zoomed, inside }; 26 for (let id of ["outside", "zoomed", "inside"]) { 27 let el = document.getElementById(id); 28 el.style.height = "1" + unit; 29 // approx_equals is needed because innerHeight / innerWidth round. 30 assert_approx_equals(el.getBoundingClientRect().height, values[id], 1, `${unit} in ${id}`); 31 el.style.height = ""; 32 } 33 }); 34 } 35 36 test_unit("em", 20, 40); 37 test_unit("rem", 20, 40); 38 test_unit("lh", 20, 40); 39 test_unit("rlh", 20, 40); 40 test_unit("vh", 2 * innerHeight / 100, 4 * innerHeight / 100); 41 test_unit("vw", 2 * innerWidth / 100, 4 * innerWidth / 100); 42 </script>