dynamic-change-inline-size-003.html (1305B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Test: Dynamic change to the inline-size of body</title> 4 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 5 <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> 6 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1731653"> 7 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1729122"> 8 <link rel="stylesheet" href="/fonts/ahem.css"> 9 <link rel="match" href="dynamic-change-inline-size-003-ref.html"> 10 <meta name="assert" content="This test verifies that the dynamic change to body's inline-size triggers the reflow of its children."> 11 12 <style> 13 .abs { 14 position: absolute; 15 background: green; 16 inline-size: 100px; 17 padding-top: 100px; 18 } 19 .layout { 20 font: 50px/1 Ahem; 21 color: red; 22 background-color: red; 23 width: 100px; 24 padding-top: 25%; /* This resolves against body's inline-size. */ 25 } 26 </style> 27 28 <body> 29 <!-- Test passes if there is a filled green square and no red. --> 30 <div class="abs"></div> 31 <div class="layout">XX</div> 32 </body> 33 34 <script> 35 /* Make sure the layout is up-to-date, which is essential to trigger the bug. */ 36 document.documentElement.offsetHeight; 37 38 /* Change body's inline-size to trigger incremental reflow. */ 39 document.body.style.inlineSize = "200px"; 40 </script>