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 <div>This test checks that we correctly paint scrolled grid container.</div>
  30 <div>There should be no red below.</div>
  31
  32 <div>Default writing mode (horizontal-lr)</div>
  33
  34 <!-- An item in the middle of the grid. -->
  35 <div class="scrolledDiv" data-scroll-top="200" data-scroll-left="100">
  36     <div class="grid">
  37         <div class="gridItem" style="grid-column: 2; grid-row: 2; border-bottom: 100px green solid;"></div>
  38     </div>
  39 </div>
  40
  41 <!-- Bottom-right corner of the grid. -->
  42 <div class="scrolledDiv" data-scroll-top="400" data-scroll-left="400">
  43     <div class="grid">
  44         <div class="gridItem" style="grid-column: 4; grid-row: 5; border-right: 100px green solid;"></div>
  45     </div>
  46 </div>
  47
  48 <!-- Bottom-right corner of the grid. -->
  49 <div class="scrolledDiv" data-scroll-top="400" data-scroll-left="400">
  50     <div class="grid">
  51         <div class="gridItem" style="grid-column: 4; grid-row: 5; border-left: 100px purple solid; background-color: green;"></div>
  52     </div>
  53 </div>
  54
  55 <div>Flipped writing mode (vertical-rl)</div>
  56
  57 <!-- An item in the middle of the grid. -->
  58 <div class="scrolledDiv" data-scroll-top="100" data-scroll-left="200">
  59     <div class="grid verticalRL">
  60         <div class="gridItem" style="grid-column: 2; grid-row: 2; border-right: 100px green solid;"></div>
  61     </div>
  62 </div>
  63
  64 <!-- Bottom-right corner of the grid. -->
  65 <div class="scrolledDiv" data-scroll-top="400" data-scroll-left="400">
  66     <div class="grid verticalRL">
  67         <div class="gridItem" style="grid-column: 4; grid-row: 5; border-bottom: 100px green solid;"></div>
  68     </div>
  69 </div>
  70
  71 <!-- Bottom-right corner of the grid. -->
  72 <div class="scrolledDiv" data-scroll-top="400" data-scroll-left="400">
  73     <div class="grid verticalRL">
  74         <div class="gridItem" style="grid-column: 4; grid-row: 5; border-top: 100px purple solid; background-color: green;"></div>
  75     </div>
  76 </div>
  77
  78
  79 <script>
  80     var scrolledDivs = document.getElementsByClassName("scrolledDiv");
  81     for (i = 0; i < scrolledDivs.length; ++i) {
  82         scrolledDiv = scrolledDivs[i];
  83         scrolledDiv.scrollTop = scrolledDiv.getAttribute("data-scroll-top");
  84         scrolledDiv.scrollLeft = scrolledDiv.getAttribute("data-scroll-left");
  85     }
  86 </script>
  87 </body>
  88 </html>