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

   1 <!-- Based on fast/repaint/justify-items-legacy-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 DIV id='parentContainer'",
  12     "LayoutBlockFlow DIV id='parentContainer'",
  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('parentContainer').style.justifyItems = 'legacy center';
  21 }
  22 onload = runPaintInvalidationTest;
  23 </script>
  24 <style>
  25 body {
  26   margin: 0;
  27 }
  28 #parentContainer {
  29   justify-items: center;
  30   background-color: orange;
  31   width: 300px;
  32   height: 400px;
  33 }
  34
  35 #container {
  36   display: grid;
  37   grid: 100px 100px / 150px 150px;
  38   width: 200px;
  39   height: 300px;
  40   background-color: red;
  41 }
  42 .item1 {
  43   grid-row: 1;
  44   grid-column: 1;
  45   background-color: green;
  46   border: solid thin blue;
  47   width: 50px;
  48 }
  49 .item2 {
  50   grid-row: 1;
  51   grid-column: 2;
  52   background-color: green;
  53   border: solid thin blue;
  54   width: 50px;
  55 </style>
  56 <p style="height: 20px">Tests invalidation on justify-items style change (legacy value). Passes if green bars are centerd inside their red container.</p>
  57 <div id="parentContainer">
  58     <div id="container">
  59         <div class="item1">
  60             <div style="height: 50px"></div>
  61         </div>
  62         <div class="item2">
  63             <div style="height: 50px"></div>
  64         </div>
  65     </div>
  66 </div>