src/third_party/WebKit/LayoutTests/fast/repaint/align-self-change-keeping-geometry.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 .flex {
  12   display: flex;
  13   align-items: flex-start;
  14   width: 200px;
  15   height: 300px;
  16   background-color: red;
  17 }
  18 .item {
  19   background-color: green;
  20   border: solid thin blue;
  21   width: 100px;
  22   height: 300px;
  23 }
  24 </style>
  25 <p style="height: 20px">There should be no invalidations because align-self style change causes no visual change.</p>
  26 <div class="flex">
  27   <div class="item"></div>
  28   <div class="item"></div>
  29 </div>