align-content-block-simple-height-change.html (853B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-align/#distribution-block"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <style> 6 body { 7 margin: 0; 8 } 9 </style> 10 11 <div id="target" style="height: 200px;"> 12 <div style="align-content: center; height: 100%;"> 13 <div style="height: 60px;" id="content"></div> 14 </div> 15 </div> 16 17 <script> 18 // Blink has an optimization that it skips child layout if only the container 19 // height is changed. This test ensures the opmiziation is not used for 20 // a non-normal align-content value. 21 test(() => { 22 document.body.offsetTop; 23 assert_equals(content.offsetTop, (200 - 60) / 2); 24 target.style.height = '100px'; 25 assert_equals(content.offsetTop, (100 - 60) / 2); 26 }, 'Updating a container height should align the content again'); 27 </script>