diff options
Diffstat (limited to 'layout/style/test/test_pixel_lengths.html')
-rw-r--r-- | layout/style/test/test_pixel_lengths.html | 75 |
1 files changed, 75 insertions, 0 deletions
diff --git a/layout/style/test/test_pixel_lengths.html b/layout/style/test/test_pixel_lengths.html new file mode 100644 index 000000000..37f9ec83f --- /dev/null +++ b/layout/style/test/test_pixel_lengths.html @@ -0,0 +1,75 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>Test that pixel lengths don't change based on DPI</title> + <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> +</head> +<body> +<div id="display"> + +<div id="pt" style="width:90pt; height:90pt; background:lime;">pt</div> +<div id="pc" style="width:5pc; height:5pc; background:yellow;">pc</div> +<div id="mm" style="width:25.4mm; height:25.4mm; background:orange;">mm</div> +<div id="cm" style="width:2.54cm; height:2.54cm; background:purple;">cm</div> +<div id="in" style="width:1in; height:1in; background:magenta;">in</div> +<div id="q" style="width:101.6q; height:101.6q; background:blue;">q</div> + +<div id="mozmm" style="width:25.4mozmm; height:25.4mozmm; background:cyan;">mozmm</div> + +</div> +<pre id="test"> +<script class="testbody" type="text/javascript"> + +var oldDPI = SpecialPowers.getIntPref("layout.css.dpi"); +var dpi = oldDPI; + +function check(id, val) { + var e = document.getElementById(id); + is(Math.round(e.getBoundingClientRect().width), Math.round(val), + "Checking width in " + id + " at " + dpi + " DPI"); + is(Math.round(e.getBoundingClientRect().height), Math.round(val), + "Checking height in " + id + " at " + dpi + " DPI"); +} + +function checkPixelRelativeUnits() { + check("pt", 120); + check("pc", 80); + check("mm", 96); + check("cm", 96); + check("in", 96); + check("q", 96); +} + +checkPixelRelativeUnits(); + +SimpleTest.waitForExplicitFinish(); + +SpecialPowers.pushPrefEnv({'set': [['layout.css.dpi', dpi=96]]}, test1); + +var mozmmSize; +function test1() { + var mozmm = document.getElementById("mozmm"); + mozmmSize = mozmm.getBoundingClientRect().width; + is(Math.round(mozmmSize), Math.round(mozmm.getBoundingClientRect().height), + "mozmm div should be square"); + + checkPixelRelativeUnits(); + + SpecialPowers.pushPrefEnv({'set': [['layout.css.dpi', dpi=192]]}, test2); +} + +function test2() { + // At 192 dpi, a one-inch box should be twice the number of device pixels, + // and since we haven't changed the device-pixels-per-CSS-pixel ratio, the + // mozmm box should be twice the size in CSS pixels. + check("mozmm", mozmmSize*2); + checkPixelRelativeUnits(); + + SimpleTest.finish(); +} + +</script> +</pre> +</body> +</html> |