third_party/WebKit/LayoutTests/fast/css-grid-layout/scrolled-grid-painting.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: green;
  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: 3"></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: 5; grid-row: 5"></div>
  45     </div>
  46 </div>
  47
  48 <!-- Scroll between 2 horizontal grid items. -->
  49 <div class="scrolledDiv" data-scroll-top="400" data-scroll-left="150">
  50     <div class="grid">
  51         <div class="gridItem" style="grid-column: 2; grid-row: 5"></div>
  52         <div class="gridItem" style="grid-column: 3; grid-row: 5"></div>
  53     </div>
  54 </div>
  55
  56 <!-- Scroll between 2 vertical grid items. -->
  57 <div class="scrolledDiv" data-scroll-top="150" data-scroll-left="400">
  58     <div class="grid">
  59         <div class="gridItem" style="grid-column: 5; grid-row: 2"></div>
  60         <div class="gridItem" style="grid-column: 5; grid-row: 3"></div>
  61     </div>
  62 </div>
  63
  64
  65 <div>Flipped writing mode (vertical-rl)</div>
  66
  67
  68 <!-- An item in the middle of the grid. -->
  69 <div class="scrolledDiv" data-scroll-top="100" data-scroll-left="200">
  70     <div class="grid verticalRL">
  71         <div class="gridItem" style="grid-column: 2; grid-row: 3"></div>
  72     </div>
  73 </div>
  74
  75 <!-- Bottom-right corner of the grid. -->
  76 <div class="scrolledDiv" data-scroll-top="400" data-scroll-left="400">
  77     <div class="grid verticalRL">
  78         <div class="gridItem" style="grid-column: 5; grid-row: 5"></div>
  79     </div>
  80 </div>
  81
  82 <!-- Scroll between 2 vertical grid items. -->
  83 <div class="scrolledDiv" data-scroll-top="150" data-scroll-left="400">
  84     <div class="grid verticalRL">
  85         <div class="gridItem" style="grid-column: 2; grid-row: 5"></div>
  86         <div class="gridItem" style="grid-column: 3; grid-row: 5"></div>
  87     </div>
  88 </div>
  89
  90 <!-- Scroll between 2 horizontal grid items. -->
  91 <div class="scrolledDiv" data-scroll-top="400" data-scroll-left="150">
  92     <div class="grid verticalRL">
  93         <div class="gridItem" style="grid-column: 5; grid-row: 2"></div>
  94         <div class="gridItem" style="grid-column: 5; grid-row: 3"></div>
  95     </div>
  96 </div>
  97
  98 <script>
  99     var scrolledDivs = document.getElementsByClassName("scrolledDiv");
 100     for (i = 0; i < scrolledDivs.length; ++i) {
 101         scrolledDiv = scrolledDivs[i];
 102         scrolledDiv.scrollTop = scrolledDiv.getAttribute("data-scroll-top");
 103         scrolledDiv.scrollLeft = scrolledDiv.getAttribute("data-scroll-left");
 104     }
 105 </script>
 106 </body>
 107 </html>