relayout-align-items.html (2287B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Flexbox: Relayout align flex items</title> 5 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property"> 6 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#align-items-property"> 7 <meta name="assert" content="This test ensures that align items work properly after changing existing values with 'flex-end' and 'stretch'."> 8 <link href="support/flexbox.css" rel="stylesheet"> 9 <style> 10 .flexbox { 11 height: 100px; 12 position: relative; 13 } 14 .flexbox > div { 15 border: 5px solid green; 16 width: 50px; 17 } 18 </style> 19 <script src="/resources/testharness.js"></script> 20 <script src="/resources/testharnessreport.js"></script> 21 <script src="/resources/check-layout-th.js"></script> 22 </head> 23 <body> 24 <div id=log></div> 25 <div id="from-stretch" class="flexbox"> 26 <div data-expected-height="10" data-offset-y="90"></div> 27 <div data-expected-height="10" data-offset-y="90" class="align-self-auto"></div> 28 <div data-expected-height="10" data-offset-y="0" class="align-self-flex-start"></div> 29 <div data-expected-height="10" data-offset-y="90" class="align-self-flex-end"></div> 30 <div data-expected-height="10" data-offset-y="45" class="align-self-center"></div> 31 <div data-expected-height="10" data-offset-y="0" class="align-self-baseline"></div> 32 <div data-expected-height="100" data-offset-y="0" class="align-self-stretch"></div> 33 </div> 34 35 <div id="to-stretch" class="flexbox align-items-flex-start"> 36 <div data-expected-height="100" data-offset-y="0"></div> 37 <div data-expected-height="100" data-offset-y="0" class="align-self-auto"></div> 38 <div data-expected-height="10" data-offset-y="0" class="align-self-flex-start"></div> 39 <div data-expected-height="10" data-offset-y="90" class="align-self-flex-end"></div> 40 <div data-expected-height="10" data-offset-y="45" class="align-self-center"></div> 41 <div data-expected-height="10" data-offset-y="0" class="align-self-baseline"></div> 42 <div data-expected-height="100" data-offset-y="0" class="align-self-stretch"></div> 43 </div> 44 <script> 45 document.body.offsetLeft; 46 document.getElementById("from-stretch").style.alignItems = "flex-end"; 47 document.getElementById("to-stretch").style.alignItems = "stretch"; 48 checkLayout(".flexbox"); 49 </script> 50 </body> 51 </html>