| <style> |
| body {font-size: 12px;} |
| #control {font: italic small-caps 900 150%/2em monospace;} |
| #calc {font: italic small-caps 900 calc(150%)/2em monospace;} |
| </style> |
| |
| <div> |
| <span id="control">The font size and line height of these lines should be identical</span> |
| <hr/> |
| <span id="calc">The font size and line height of these lines should be identical</span> |
| </div> |
| <hr/> |
| <div id="results"></div> |
| |
| <script> |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| var controlHeight = getComputedStyle(document.getElementById("control"), null).lineHeight; |
| var controlSize = getComputedStyle(document.getElementById("control"), null).fontSize; |
| |
| var spans = document.getElementsByTagName("span"); |
| var sameHeight = true; |
| var sameSize = true; |
| for (var i = 0; i < spans.length; ++i) { |
| var current = spans[i]; |
| if (sameHeight) |
| sameHeight = getComputedStyle(current, null).lineHeight == controlHeight; |
| if (sameSize) |
| sameSize = getComputedStyle(current, null).fontSize == controlSize; |
| } |
| |
| var results = document.getElementById("results"); |
| if (sameHeight && sameSize) { |
| results.style.color = "green"; |
| results.innerHTML = "PASS"; |
| } else { |
| results.style.color = "red"; |
| results.innerHTML = "FAIL"; |
| if (!sameHeight) |
| results.innerHTML += "<p>Line heights do not match</p>"; |
| if (!sameSize) |
| results.innerHTML += "<p>Font sizes do not match</p>"; |
| } |
| |
| </script> |