test_rem_unit.html (2400B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=478321 5 --> 6 <head> 7 <title>Test for CSS 'rem' unit</title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 10 </head> 11 <body> 12 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=478321">Mozilla Bug 478321</a> 13 <p id="display"></p> 14 <p id="display2"></p> 15 <div id="content" style="display: none"> 16 17 </div> 18 <pre id="test"> 19 <script type="application/javascript"> 20 21 /** Test for CSS 'rem' unit */ 22 23 function px_to_num(str) 24 { 25 return Number(String(str).match(/^([\d.]+)px$/)[1]); 26 } 27 28 function fs(elt) 29 { 30 return px_to_num(getComputedStyle(elt, "").fontSize); 31 } 32 33 var html = document.documentElement; 34 var body = document.body; 35 var p = document.getElementById("display"); 36 var p2 = document.getElementById("display2"); 37 38 html.style.font = "initial"; 39 40 var defaultFontSize = fs(html); 41 42 // NOTE: This test assumes that the default font size is an 43 // integral number of pixels (which is always the case at present). 44 // If that ever becomes false, the calls to "is" may need to be replaced by 45 // calls to "isapprox" that allows errors of up to some small fraction 46 // of a pixel. 47 48 html.style.fontSize = "3rem"; 49 is(fs(html), 3 * defaultFontSize, 50 "3rem on root should triple root's font size"); 51 body.style.font = "initial"; 52 is(fs(body), defaultFontSize, 53 "initial should produce initial font size"); 54 body.style.fontSize = "1em"; 55 is(fs(body), 3 * defaultFontSize, "1em should inherit from parent"); 56 body.style.fontSize = "200%"; 57 is(fs(body), 6 * defaultFontSize, "200% should double parent"); 58 body.style.fontSize = "2rem"; 59 is(fs(body), 6 * defaultFontSize, "2rem should double root"); 60 p.style.font = "inherit"; 61 is(fs(p), 6 * defaultFontSize, "inherit should inherit from parent"); 62 p2.style.fontSize = "2rem"; 63 is(fs(p2), 6 * defaultFontSize, "2rem should double root"); 64 body.style.font = "initial"; 65 is(fs(p), defaultFontSize, "inherit should inherit from parent"); 66 is(fs(p2), 6 * defaultFontSize, "2rem should double root"); 67 body.style.fontSize = "5em"; 68 html.style.fontSize = "200%"; 69 is(fs(p), 10 * defaultFontSize, "inherit should inherit from parent"); 70 is(fs(p2), 4 * defaultFontSize, "2rem should double root"); 71 72 73 // Make things readable again. 74 html.style.fontSize = "1em"; 75 body.style.fontSize = "1em"; 76 77 </script> 78 </pre> 79 </body> 80 </html>