test_pixel_lengths.html (1710B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Test that pixel lengths don't change based on DPI</title> 5 <script src="/tests/SimpleTest/SimpleTest.js"></script> 6 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 7 </head> 8 <body> 9 <div id="display"> 10 11 <div id="pt" style="width:90pt; height:90pt; background:lime;">pt</div> 12 <div id="pc" style="width:5pc; height:5pc; background:yellow;">pc</div> 13 <div id="mm" style="width:25.4mm; height:25.4mm; background:orange;">mm</div> 14 <div id="cm" style="width:2.54cm; height:2.54cm; background:purple;">cm</div> 15 <div id="in" style="width:1in; height:1in; background:magenta;">in</div> 16 <div id="q" style="width:101.6q; height:101.6q; background:blue;">q</div> 17 18 </div> 19 <pre id="test"> 20 <script class="testbody" type="text/javascript"> 21 22 var oldDPI = SpecialPowers.getIntPref("layout.css.dpi"); 23 var dpi = oldDPI; 24 25 function check(id, val) { 26 var e = document.getElementById(id); 27 is(Math.round(e.getBoundingClientRect().width), Math.round(val), 28 "Checking width in " + id + " at " + dpi + " DPI"); 29 is(Math.round(e.getBoundingClientRect().height), Math.round(val), 30 "Checking height in " + id + " at " + dpi + " DPI"); 31 } 32 33 function checkPixelRelativeUnits() { 34 check("pt", 120); 35 check("pc", 80); 36 check("mm", 96); 37 check("cm", 96); 38 check("in", 96); 39 check("q", 96); 40 } 41 42 checkPixelRelativeUnits(); 43 44 SimpleTest.waitForExplicitFinish(); 45 46 SpecialPowers.pushPrefEnv({'set': [['layout.css.dpi', dpi=96]]}, test1); 47 48 function test1() { 49 checkPixelRelativeUnits(); 50 SpecialPowers.pushPrefEnv({'set': [['layout.css.dpi', dpi=192]]}, test2); 51 } 52 53 function test2() { 54 checkPixelRelativeUnits(); 55 SimpleTest.finish(); 56 } 57 58 </script> 59 </pre> 60 </body> 61 </html>