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