third_party/WebKit/LayoutTests/fast/repaint/justify-content-position-change-grid.html

   1 <!DOCTYPE HTML>
   2 <script src="resources/text-based-repaint.js"></script>
   3 <script>
   4 function repaintTest() {
   5   document.getElementById('container').style.justifyContent = 'end';
   6 }
   7 onload = runRepaintTest;
   8 </script>
   9 <style>
  10 body {
  11   margin: 0;
  12 }
  13 #container {
  14   display: grid;
  15   grid-auto-columns: auto;
  16   grid-auto-rows: 200px;
  17   grid-auto-flow: column;
  18   justify-content: start;
  19   width: 300px;
  20   height: 200px;
  21   background-color: red;
  22 }
  23 .item {
  24   background-color: green;
  25 }
  26 </style>
  27 <p style="height: 20px">Tests invalidation on justify-content style change (position). Passes if the red half is on the left.</p>
  28 <div id="container">
  29   <div class="item">
  30     <div style="width: 50px"></div>
  31   </div>
  32   <div class="item">
  33     <div style="width: 50px"></div>
  34   </div>
  35   <div class="item">
  36     <div style="width: 50px"></div>
  37   </div>
  38 </div>