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