third_party/WebKit/LayoutTests/fast/repaint/justify-items-overflow-change.html

   1 <!DOCTYPE HTML>
   2 <script src="resources/text-based-repaint.js"></script>
   3 <script>
   4 function repaintTest() {
   5   document.getElementById('container').style.justifyItems = 'end safe';
   6 }
   7 onload = runRepaintTest;
   8 </script>
   9 <style>
  10 body {
  11   margin: 0;
  12 }
  13 #container {
  14   display: grid;
  15   grid: 100px 100px / 300px;
  16   justify-items: end true;
  17   width: 200px;
  18   height: 300px;
  19   background-color: red;
  20 }
  21 .item1 {
  22   grid-row: 1;
  23   grid-column: 1;
  24   background-color: green;
  25   width: 160px;
  26 }
  27 .item2 {
  28   grid-row: 1;
  29   grid-column: 2;
  30   background-color: green;
  31   width: 50px;
  32 </style>
  33 <p style="height: 20px">Tests invalidation on justify-items style change. Passes if there is no red.</p>
  34 <div id="container">
  35   <div class="item1">
  36     <div style="height: 50px"></div>
  37   </div>
  38   <div class="item2">
  39     <div style="height: 50px"></div>
  40   </div>
  41 </div>