| <!DOCTYPE HTML> |
| <script src="../resources/text-based-repaint.js"></script> |
| <script> |
| function repaintTest() { |
| document.getElementsByClassName('item1')[0].style.alignSelf = 'end'; |
| document.getElementsByClassName('item2')[0].style.alignSelf = 'center'; |
| } |
| onload = runRepaintAndPixelTest; |
| </script> |
| <style> |
| body { |
| margin: 0; |
| } |
| #container { |
| display: inline-grid; |
| grid: 100px / 50px 50px; |
| } |
| .item1 { |
| grid-row: 1; |
| grid-column: 1; |
| align-self: baseline; |
| height: 25px; |
| background-color: green; |
| } |
| .item2 { |
| grid-row: 1; |
| grid-column: 2; |
| align-self: baseline; |
| height: 50px; |
| background-color: green; |
| } |
| </style> |
| <p style="height: 20px">Tests invalidation on align-self style change from 'baseline'. Passes if there is no red.</p> |
| <div style="position: absolute; z-index: -1; background: green; width: 100px; height: 100px;"> |
| <div style="position: absolute; top: 75px; width: 50px; height: 25px; background: red;"></div> |
| <div style="position: absolute; left: 50px; top: 25px; width: 50px; height: 50px; background: red;"></div> |
| </div> |
| <div id="container"> |
| <div class="item1"></div> |
| <div class="item2"></div> |
| </div> |
