| OLD | NEW |
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <title>CSS Rhythmic Sizing: line-height-step dynamic change</title> |
| 3 <link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com"> |
| 4 <link rel="help" href="https://drafts.csswg.org/css-rhythm-1/#line-height-step"> |
| 5 <meta name="assert" content="This test asserts changing the line-height-step pro
perty takes effects."> |
| 6 <meta name="flags" content="dom"> |
| 7 <script src="/resources/testharness.js"></script> |
| 8 <script src="/resources/testharnessreport.js"></script> |
| 9 <style> |
| 10 div { |
| 11 font-size: 20px; |
| 12 line-height: 1; |
| 13 } |
| 14 </style> |
| 15 <div id="log"></div> |
| 16 <div id="target">X</div> |
| 17 <div id="next">X</div> |
| 18 <script> |
| 19 runTests(); |
| 20 function runTests() { |
| 21 var before = next.offsetTop; |
| 22 target.style.lineHeightStep = "40px"; |
| 23 var after = next.offsetTop; |
| 24 forceRelayout(document.documentElement); |
| 25 var afterRelayout = next.offsetTop; |
| 26 |
| 27 test(function () { |
| 28 assert_not_equals(after, before); |
| 29 }, "Height must change when line-height-step changes"); |
| 30 test(function () { |
| 31 assert_equals(after, afterRelayout); |
| 32 }, "Height must not change after relayout"); |
| 33 } |
| 34 |
| 35 function forceRelayout(element) { |
| 36 var saved = element.style.display; |
| 37 element.style.display = "none"; |
| 38 element.offsetTop; |
| 39 element.style.display = saved; |
| 40 element.offsetTop; |
| 41 } |
| 42 </script> |
| OLD | NEW |