Source code

Revision control

Copy as Markdown

Other Tools

<!doctype html>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>Tests metrics with dynamic toolbar</title>
const ok = opener.ok.bind(opener);
const is =;
const original_finish = opener.SimpleTest.finish;
const SimpleTest = opener.SimpleTest;
const add_task = opener.add_task;
SimpleTest.finish = function finish() {
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
html {
scrollbar-width: none;
#percent {
position: absolute;
height: 100%;
#vh {
position: absolute;
height: 100vh;
<div id="percent"></div>
<div id="vh"></div>
'use strict';
let percentHeight = getComputedStyle(percent).height;
let vhHeight = getComputedStyle(vh).height;
is(percentHeight, vhHeight,
"%-units and vh-units should be the same when the dynamic toolbar max " +
"height is zero");
percentHeight = getComputedStyle(percent).height;
vhHeight = getComputedStyle(vh).height;
is(parseInt(percentHeight) + 50, parseInt(vhHeight),
"vh units should be 50px greater than %-units");
is(document.documentElement.clientHeight, parseInt(percentHeight),
"documentElement.clientHeight should equal to %-units");
ok(matchMedia(`(height: ${percentHeight})`).matches,
"Media Queries' height is not including the dynamic toolbar max height");