third_party/WebKit/LayoutTests/paint/invalidation/spv2/align-content-distribution-change-grid.html

   1 <!-- Based on fast/repaint/align-content-distribution-change-grid.html -->
   2 <!DOCTYPE HTML>
   3 <script src="resources/paint-invalidation-test.js"></script>
   4 <script>
   5 window.expectedPaintInvalidationObjects = [
   6     "LayoutGrid DIV id='container'",
   7     "LayoutBlockFlow DIV class='item'",
   8     "LayoutBlockFlow DIV",
   9     "LayoutBlockFlow DIV class='item'",
  10     "LayoutBlockFlow DIV",
  11     "LayoutBlockFlow DIV class='item'",
  12     "LayoutBlockFlow DIV",
  13 ];
  14 function paintInvalidationTest() {
  15   document.getElementById('container').style.alignContent = 'stretch';
  16 }
  17 onload = runPaintInvalidationTest;
  18 </script>
  19 <style>
  20 body {
  21   margin: 0;
  22 }
  23 #container {
  24   display: grid;
  25   grid-auto-columns: 200px;
  26   grid-auto-rows: auto;
  27   grid-auto-flow: row;
  28   align-content: space-around;
  29   width: 200px;
  30   height: 300px;
  31   background-color: red;
  32 }
  33 .item {
  34   background-color: green;
  35 }
  36 </style>
  37 <p style="height: 20px">Tests invalidation on align-content style change (distribution). Passes if there is no red.</p>
  38 <div id="container">
  39   <div class="item">
  40     <div style="height: 50px"></div>
  41   </div>
  42   <div class="item">
  43     <div style="height: 50px"></div>
  44   </div>
  45   <div class="item">
  46     <div style="height: 50px"></div>
  47   </div>
  48 </div>