| <!DOCTYPE html> |
| <html> |
| <style> |
| body { |
| margin: 0; |
| } |
| .flexbox { |
| display: flex; |
| background-color: #aaa; |
| position: relative; |
| } |
| |
| .flexbox > :nth-child(1) { |
| background-color: blue; |
| } |
| .flexbox > :nth-child(2) { |
| background-color: green; |
| } |
| |
| .absolute { |
| position: absolute; |
| width: 50px; |
| height: 50px; |
| background-color: yellow !important; |
| } |
| </style> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../../resources/check-layout-th.js"></script> |
| <body> |
| <div id=log></div> |
| |
| <p>This test verifies that changing order, align-content, align-items, align-self, or justify-content will relayout.</p> |
| |
| <div id="flexbox" class="flexbox" style="width: 300px; height: 300px;"> |
| <div id="a" style="flex: 0 0 auto; width: 100px; height: 100px;"></div> |
| <div id="b" style="flex: 0 0 auto; width: 100px; height: 100px;"></div> |
| </div> |
| <script> |
| |
| var flexbox = document.getElementById("flexbox"); |
| var aDiv = document.getElementById("a"); |
| var bDiv = document.getElementById("b"); |
| |
| function checkValues(aXOffset, aYOffset, bXOffset, bYOffset) |
| { |
| aDiv.setAttribute("data-offset-x", aXOffset); |
| aDiv.setAttribute("data-offset-y", aYOffset); |
| bDiv.setAttribute("data-offset-x", bXOffset); |
| bDiv.setAttribute("data-offset-y", bYOffset); |
| checkLayout('.flexbox'); |
| } |
| |
| checkValues(0, 0, 100, 0); |
| |
| flexbox.style.justifyContent = "flex-end"; |
| checkValues(100, 0, 200, 0); |
| |
| flexbox.style.alignItems = "flex-end"; |
| checkValues(100, 200, 200, 200); |
| |
| bDiv.style.order = -1; |
| checkValues(200, 200, 100, 200); |
| |
| aDiv.style.alignSelf = "flex-start"; |
| checkValues(200, 0, 100, 200); |
| |
| flexbox.style.width = "100px"; |
| flexbox.style.flexWrap = "wrap"; |
| flexbox.style.alignContent = "flex-end"; |
| checkValues(0, 200, 0, 100); |
| |
| </script> |
| |
| </body> |
| </html> |
