src/third_party/WebKit/LayoutTests/fast/css-grid-layout/scrolled-grid-painting-overflow.html

   1 <!DOCTYPE html>
   2 <html>
   3 <link href="resources/grid.css" rel="stylesheet">
   4 <body>
   5 <style>
   6     .grid {
   7         grid-template-rows: repeat(5, 100px);
   8         grid-template-columns: repeat(5, 100px);
   9         width: -webkit-fit-content;
  10         background-color: red;
  11     }
  12
  13     .verticalRL {
  14         -webkit-writing-mode: vertical-lr;
  15     }
  16
  17     .gridItem {
  18         height: 100%;
  19         width: 100%;
  20         background-color: purple;
  21     }
  22
  23     .scrolledDiv {
  24         height: 100px;
  25         width: 100px;
  26         overflow: hidden;
  27     }
  28 </style>
  29 <script>
  30 if (window.testRunner) {
  31     testRunner.testRepaint();
  32     testRunner.repaintSweepHorizontally();
  33 }
  34 </script>
  35 <div>This test checks that we correctly paint scrolled grid container.</div>
  36 <div>There should be no red below.</div>
  37
  38 <div>Default writing mode (horizontal-lr)</div>
  39
  40 <!-- An item in the middle of the grid. -->
  41 <div class="scrolledDiv" data-scroll-top="200" data-scroll-left="100">
  42     <div class="grid">
  43         <div class="gridItem" style="grid-column: 2; grid-row: 2; border-bottom: 100px green solid;"></div>
  44     </div>
  45 </div>
  46
  47 <!-- Bottom-right corner of the grid. -->
  48 <div class="scrolledDiv" data-scroll-top="400" data-scroll-left="400">
  49     <div class="grid">
  50         <div class="gridItem" style="grid-column: 4; grid-row: 5; border-right: 100px green solid;"></div>
  51     </div>
  52 </div>
  53
  54 <!-- Bottom-right corner of the grid. -->
  55 <div class="scrolledDiv" data-scroll-top="400" data-scroll-left="400">
  56     <div class="grid">
  57         <div class="gridItem" style="grid-column: 4; grid-row: 5; border-left: 100px purple solid; background-color: green;"></div>
  58     </div>
  59 </div>
  60
  61 <div>Flipped writing mode (vertical-rl)</div>
  62
  63 <!-- An item in the middle of the grid. -->
  64 <div class="scrolledDiv" data-scroll-top="100" data-scroll-left="200">
  65     <div class="grid verticalRL">
  66         <div class="gridItem" style="grid-column: 2; grid-row: 2; border-right: 100px green solid;"></div>
  67     </div>
  68 </div>
  69
  70 <!-- Bottom-right corner of the grid. -->
  71 <div class="scrolledDiv" data-scroll-top="400" data-scroll-left="400">
  72     <div class="grid verticalRL">
  73         <div class="gridItem" style="grid-column: 4; grid-row: 5; border-bottom: 100px green solid;"></div>
  74     </div>
  75 </div>
  76
  77 <!-- Bottom-right corner of the grid. -->
  78 <div class="scrolledDiv" data-scroll-top="400" data-scroll-left="400">
  79     <div class="grid verticalRL">
  80         <div class="gridItem" style="grid-column: 4; grid-row: 5; border-top: 100px purple solid; background-color: green;"></div>
  81     </div>
  82 </div>
  83
  84
  85 <script>
  86     var scrolledDivs = document.getElementsByClassName("scrolledDiv");
  87     for (i = 0; i < scrolledDivs.length; ++i) {
  88         scrolledDiv = scrolledDivs[i];
  89         scrolledDiv.scrollTop = scrolledDiv.getAttribute("data-scroll-top");
  90         scrolledDiv.scrollLeft = scrolledDiv.getAttribute("data-scroll-left");
  91     }
  92 </script>
  93 </body>
  94 </html>