third_party/WebKit/LayoutTests/paint/invalidation/spv2/grid-item-z-index-change-repaint.html

   1 <!-- Based on fast/css-grid-layout/grid-item-z-index-change-repaint.html -->
   2 <!DOCTYPE html>
   3 <html>
   4 <head>
   5 <link href="../../../fast/css-grid-layout/resources/grid.css" rel="stylesheet">
   6 <style>
   7 .grid {
   8     grid-template-rows: 100px;
   9     grid-template-columns: 200px 200px;
  10     width: -webkit-fit-content;
  11     margin-top: 10px;
  12 }
  13 .red {
  14     background-color: red;
  15 }
  16 .green {
  17     background-color: green;
  18 }
  19 .negativeZIndex {
  20     z-index: -1;
  21 }
  22 </style>
  23 <script src="resources/paint-invalidation-test.js"></script>
  24 <script>
  25 window.expectedPaintInvalidationObjects = [
  26     "LayoutBlockFlow DIV id='item1' class='sizedToGridArea green negativeZIndex'",
  27     "LayoutBlockFlow DIV id='item2' class='sizedToGridArea green'",
  28 ];
  29 function paintInvalidationTest()
  30 {
  31     document.getElementById('item1').style.zIndex = 1;
  32     document.getElementById('item2').style.zIndex = 1;
  33 }
  34
  35 window.onload = runPaintInvalidationTest;
  36 </script>
  37 </head>
  38 <body>
  39 <div style="height: 100px">
  40     <p>This test checks that grid items correctly repaint when 'z-index' changes.</p>
  41     <p>For this test to pass, there should be no red below.</p>
  42 </div>
  43
  44 <div class="grid">
  45     <div id="item1" class="sizedToGridArea green negativeZIndex"></div>
  46     <div class="sizedToGridArea red"></div>
  47 </div>
  48
  49 <div class="grid">
  50     <div id="item2" class="sizedToGridArea green"></div>
  51     <div class="sizedToGridArea red"></div>
  52 </div>
  53
  54 </body>
  55 </html>