| OLD | NEW |
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <title>CSS Snap Size: snap-height 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/#snap-height"> | |
| 5 <meta name="assert" content="This test asserts changing the snap-height property
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 var before = next.offsetTop; | |
| 20 target.style.snapHeight = "40px"; | |
| 21 var after = next.offsetTop; | |
| 22 forceRelayout(document.documentElement); | |
| 23 var afterRelayout = next.offsetTop; | |
| 24 | |
| 25 test(function () { | |
| 26 assert_not_equals(after, before, "Height must change when snap-height changes"
); | |
| 27 assert_equals(after, afterRelayout, "Height must not change after relayout"); | |
| 28 }); | |
| 29 | |
| 30 function forceRelayout(element) { | |
| 31 var saved = element.style.display; | |
| 32 element.style.display = "none"; | |
| 33 element.offsetTop; | |
| 34 element.style.display = saved; | |
| 35 element.offsetTop; | |
| 36 } | |
| 37 </script> | |
| OLD | NEW |