third_party/WebKit/LayoutTests/paint/invalidation/spv2/justify-items-overflow-change.html

   1 <!-- Based on fast/repaint/justify-items-overflow-change.html -->
   2 <!DOCTYPE HTML>
   3 <script src="resources/paint-invalidation-test.js"></script>
   4 <script>
   5 window.expectedPaintInvalidationObjects = [
   6     "LayoutBlockFlow DIV",
   7     "LayoutBlockFlow DIV class='item1'",
   8     "LayoutBlockFlow DIV",
   9     "LayoutBlockFlow DIV class='item2'",
  10     "LayoutGrid DIV id='container'",
  11     "LayoutBlockFlow HTML",
  12     "LayoutBlockFlow BODY",
  13     "LayoutGrid DIV id='container'",
  14     "LayoutBlockFlow DIV class='item1'",
  15     "LayoutBlockFlow DIV",
  16     "LayoutBlockFlow DIV class='item2'",
  17     "LayoutBlockFlow DIV",
  18 ];
  19 function paintInvalidationTest() {
  20   document.getElementById('container').style.justifyItems = 'end safe';
  21 }
  22 onload = runPaintInvalidationTest;
  23 </script>
  24 <style>
  25 body {
  26   margin: 0;
  27 }
  28 #container {
  29   display: grid;
  30   grid: 100px 100px / 300px;
  31   justify-items: end true;
  32   width: 200px;
  33   height: 300px;
  34   background-color: red;
  35 }
  36 .item1 {
  37   grid-row: 1;
  38   grid-column: 1;
  39   background-color: green;
  40   width: 160px;
  41 }
  42 .item2 {
  43   grid-row: 1;
  44   grid-column: 2;
  45   background-color: green;
  46   width: 50px;
  47 </style>
  48 <p style="height: 20px">Tests invalidation on justify-items style change. Passes if there is no red.</p>
  49 <div id="container">
  50   <div class="item1">
  51     <div style="height: 50px"></div>
  52   </div>
  53   <div class="item2">
  54     <div style="height: 50px"></div>
  55   </div>
  56 </div>