file_dynamic_toolbar_max_height.html (1587B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> 4 <title>Tests metrics with dynamic toolbar</title> 5 <script> 6 const ok = opener.ok.bind(opener); 7 const is = opener.is.bind(opener); 8 const original_finish = opener.SimpleTest.finish; 9 const SimpleTest = opener.SimpleTest; 10 const add_task = opener.add_task; 11 SimpleTest.finish = function finish() { 12 self.close(); 13 original_finish(); 14 } 15 </script> 16 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"> 17 <style> 18 html { 19 scrollbar-width: none; 20 } 21 #percent { 22 position: absolute; 23 height: 100%; 24 } 25 #vh { 26 position: absolute; 27 height: 100vh; 28 } 29 </style> 30 <div id="percent"></div> 31 <div id="vh"></div> 32 <script> 33 'use strict'; 34 35 SpecialPowers.DOMWindowUtils.setDynamicToolbarMaxHeight(0); 36 37 let percentHeight = getComputedStyle(percent).height; 38 let vhHeight = getComputedStyle(vh).height; 39 is(percentHeight, vhHeight, 40 "%-units and vh-units should be the same when the dynamic toolbar max " + 41 "height is zero"); 42 43 SpecialPowers.DOMWindowUtils.setDynamicToolbarMaxHeight(50); 44 45 percentHeight = getComputedStyle(percent).height; 46 vhHeight = getComputedStyle(vh).height; 47 is(parseInt(percentHeight) + 50, parseInt(vhHeight), 48 "vh units should be 50px greater than %-units"); 49 is(document.documentElement.clientHeight, parseInt(percentHeight), 50 "documentElement.clientHeight should equal to %-units"); 51 ok(matchMedia(`(height: ${percentHeight})`).matches, 52 "Media Queries' height is not including the dynamic toolbar max height"); 53 54 SimpleTest.finish(); 55 56 </script>