| <!DOCTYPE html> |
| <script src="../../resources/js-test.js"></script> |
| <style> |
| span { font-size: 16px; } |
| #control { line-height: 200%; } |
| #calc-percent { line-height: calc(100% * 2); } |
| #calc-percent-pixels { line-height: calc(100% + 16px); } |
| #calc-percent-ems { line-height: calc(100% + 1em); } |
| </style> |
| <div id="test-container"> |
| <span id="control">The line height of these lines should be identical</span><hr/> |
| <span id="calc-percent">The line height of these lines should be identical</span><hr/> |
| <span id="calc-percent-pixels">The line height of these lines should be identical</span><hr/> |
| <span id="calc-percent-ems">The line height of these lines should be identical</span><hr/> |
| </div> |
| <script> |
| description("Tests that CSS3 calc() can be used for the line-height property"); |
| |
| shouldEvaluateTo('getComputedStyle(document.getElementById("calc-percent"), null).lineHeight', 'getComputedStyle(document.getElementById("control"), null).lineHeight'); |
| shouldEvaluateTo('getComputedStyle(document.getElementById("calc-percent-pixels"), null).lineHeight', 'getComputedStyle(document.getElementById("control"), null).lineHeight'); |
| shouldEvaluateTo('getComputedStyle(document.getElementById("calc-percent-ems"), null).lineHeight', 'getComputedStyle(document.getElementById("control"), null).lineHeight'); |
| |
| document.body.style.zoom = 1.75; |
| |
| shouldEvaluateTo('getComputedStyle(document.getElementById("calc-percent"), null).lineHeight', 'getComputedStyle(document.getElementById("control"), null).lineHeight'); |
| shouldEvaluateTo('getComputedStyle(document.getElementById("calc-percent-pixels"), null).lineHeight', 'getComputedStyle(document.getElementById("control"), null).lineHeight'); |
| shouldEvaluateTo('getComputedStyle(document.getElementById("calc-percent-ems"), null).lineHeight', 'getComputedStyle(document.getElementById("control"), null).lineHeight'); |
| |
| if (window.testRunner) { |
| var testContainer = document.getElementById("test-container"); |
| if (testContainer) |
| document.body.removeChild(testContainer); |
| } |
| </script> |
