1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/style/test/test_viewport_units.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,66 @@
1.4 +<!DOCTYPE HTML>
1.5 +<html>
1.6 +<!--
1.7 +https://bugzilla.mozilla.org/show_bug.cgi?id=804970
1.8 +-->
1.9 +<head>
1.10 + <title>Test for dynamic changes to CSS 'vh', 'vw', 'vmin', and 'vmax' units</title>
1.11 + <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
1.12 + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
1.13 +</head>
1.14 +<body>
1.15 +<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=804970">Mozilla Bug 804970</a>
1.16 +<iframe id="iframe" src="viewport_units_iframe.html"></iframe>
1.17 +<pre id="test">
1.18 +<script type="application/javascript">
1.19 +
1.20 +/** Test for CSS vh/vw/vmin/vmax units **/
1.21 +
1.22 +function px_to_num(str)
1.23 +{
1.24 + return Number(String(str).match(/^([\d.]+)px$/)[1]);
1.25 +}
1.26 +
1.27 +function width(elt)
1.28 +{
1.29 + return px_to_num(elt.ownerDocument.defaultView.getComputedStyle(elt, "").width);
1.30 +}
1.31 +
1.32 +SimpleTest.waitForExplicitFinish();
1.33 +
1.34 +function run() {
1.35 + var iframe = document.getElementById("iframe");
1.36 + var idoc = iframe.contentDocument;
1.37 + var vh = idoc.getElementById("vh");
1.38 + var vw = idoc.getElementById("vw");
1.39 + var vmin = idoc.getElementById("vmin");
1.40 + var vmax = idoc.getElementById("vmax");
1.41 +
1.42 + iframe.style.width = "100px";
1.43 + iframe.style.height = "250px";
1.44 + is(width(vh), 250, "vh should be 250px");
1.45 + is(width(vw), 100, "vw should be 100px");
1.46 + is(width(vmin), 100, "vmin should be 100px");
1.47 + is(width(vmax), 250, "vmax should be 250px");
1.48 +
1.49 + iframe.style.width = "300px";
1.50 + is(width(vh), 250, "vh should be 250px");
1.51 + is(width(vw), 300, "vw should be 300px");
1.52 + is(width(vmin), 250, "vmin should be 250px");
1.53 + is(width(vmax), 300, "vmax should be 300px");
1.54 +
1.55 + iframe.style.height = "200px";
1.56 + is(width(vh), 200, "vh should be 200px");
1.57 + is(width(vw), 300, "vw should be 300px");
1.58 + is(width(vmin), 200, "vmin should be 200px");
1.59 + is(width(vmax), 300, "vmax should be 300px");
1.60 +
1.61 + SimpleTest.finish();
1.62 +}
1.63 +
1.64 +window.addEventListener("load", run, false);
1.65 +
1.66 +</script>
1.67 +</pre>
1.68 +</body>
1.69 +</html>
