src/third_party/WebKit/LayoutTests/fast/repaint/align-self-change.html

   1 <!DOCTYPE HTML>
   2 <script src="resources/text-based-repaint.js"></script>
   3 <script>
   4 function repaintTest() {
   5   document.getElementsByClassName('item')[0].style.alignSelf = 'stretch';
   6   document.getElementsByClassName('item')[1].style.alignSelf = 'stretch';
   7 }
   8 onload = runRepaintTest;
   9 </script>
  10 <style>
  11 body {
  12   margin: 0;
  13 }
  14 .flex {
  15   display: flex;
  16   align-items: flex-start;
  17   width: 200px;
  18   height: 300px;
  19   background-color: red;
  20 }
  21 .item {
  22   background-color: green;
  23   border: solid thin blue;
  24   width: 100px;
  25 }
  26 </style>
  27 <p style="height: 20px">Tests invalidation on align-self style change. Passes if there is no red.</p>
  28 <div class="flex">
  29   <div class="item">
  30     <div style="height: 100px"></div>
  31   </div>
  32   <div class="item">
  33     <div style="height: 150px"></div>
  34   </div>
  35 </div>