| <!DOCTYPE html> |
| <meta name="viewport" content="width=800"> |
| <script src="../../resources/js-test.js"></script> |
| <script src="resources/autosizingTest.js"></script> |
| <style> |
| html { |
| font-size: 16px; |
| } |
| body { |
| width: 800px; |
| margin: 0; |
| overflow-y: hidden; |
| } |
| #inlineToBlock { |
| display: inline; |
| width: 200px; |
| line-height: 30px; |
| font-size: 30px; |
| } |
| </style> |
| <span id="inlineToBlock"> |
| <div> |
| This test verifies that lineHeight values are consistent after display changes. |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor |
| incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis |
| nostrud exercitation ullamco laboris nisiut aliquip ex ea commodo consequat. |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor |
| incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis |
| nostrud exercitation ullamco laboris nisiut aliquip ex ea commodo consequat. |
| </div> |
| </span> |
| <script> |
| var forceLayout1 = document.body.offsetTop; |
| var inlineToBlock = document.getElementById('inlineToBlock'); |
| inlineToBlock.style.display = "block"; |
| var forceLayout2 = document.body.offsetTop; |
| shouldBeEqualToString("window.getComputedStyle(inlineToBlock).lineHeight", "30px"); |
| </script> |
