| <!DOCTYPE HTML> |
| <script src="../../resources/js-test.js"></script> |
| <style> |
| #control {font: 1.5em/63px sans-serif;} |
| #calc-size {font: calc(1.5em)/63px sans-serif} |
| #calc-height {font: 1.5em/calc(126px / 2) sans-serif} |
| #calc-both {font: calc(1.5em)/calc(63px) sans-serif} |
| #calc-percent-size {font: calc(100% + 0.5em)/63px sans-serif} |
| </style> |
| |
| <div id="test-container"> |
| <span id="control">The font size and line height of these lines should be identical</span> |
| <hr/> |
| <span class="fonttest" id="calc-size">The font size and line height of these lines should be identical</span> |
| <hr/> |
| <span class="fonttest" id="calc-height">The font size and line height of these lines should be identical</span> |
| <hr/> |
| <span class="fonttest" id="calc-both">The font size and line height of these lines should be identical</span> |
| <hr/> |
| <span class="fonttest" id="calc-percent-size">The font size and line height of these lines should be identical</span> |
| </div> |
| |
| <script> |
| description("Tests that CSS3 calc() can be used with the font property"); |
| |
| var spans = document.getElementsByClassName("fonttest"); |
| for (var i = 0; i < spans.length; ++i) { |
| var current = spans[i]; |
| shouldBeEqualToString('getComputedStyle(document.getElementById("' + current.id + '"), null).lineHeight', getComputedStyle(document.getElementById("control"), null).lineHeight); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("' + current.id + '"), null).fontSize', getComputedStyle(document.getElementById("control"), null).fontSize); |
| } |
| |
| if (window.testRunner) |
| document.body.removeChild(document.getElementById("test-container")); |
| </script> |
