src/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-grid.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5 <style>
   6     body {
   7         margin: 0;
   8         width: 2000px;
   9         overflow: hidden; /* hide scrollbars */
  10     }
  11
  12     p {
  13         position: relative;
  14         left: 100px;
  15     }
  16
  17     .group {
  18         position: relative;
  19         width: 500px;
  20         height: 200px;
  21     }
  22
  23     .grid-container {
  24         display: grid;
  25         grid-template-columns: 50% 50%;
  26         grid-template-rows: 100%;
  27         width: 200px;
  28         height: 180px;
  29         outline: 2px solid black;
  30     }
  31
  32     .box {
  33         width: 100px;
  34         height: 180px;
  35     }
  36
  37     .grid-item {
  38         width: 100%;
  39         height: 100%;
  40     }
  41
  42     .sticky {
  43         position: sticky;
  44         left: 100px;
  45         background-color: green;
  46     }
  47
  48     .indicator {
  49         position: absolute;
  50         top: 0;
  51         left: 0;
  52         background-color: red;
  53     }
  54 </style>
  55 <script>
  56     function doTest()
  57     {
  58         window.scrollTo(100, 0);
  59     }
  60     window.addEventListener('load', doTest, false);
  61 </script>
  62 </head>
  63 <body>
  64     <p>This test checks the behavior of position:sticky with grid items.
  65   There should be no red.</p>
  66
  67     <div class="group" style="left: 100px">
  68         <div class="indicator box" style="left: 100px;"></div>
  69         <div class="grid-container">
  70           <div class="sticky grid-item" style="grid-column: 1; grid-row: 1;"></div>
  71           <div class="grid-item" style="grid-column: 2; grid-row: 1;"></div>
  72         </div>
  73     </div>
  74
  75     <div class="group" style="left: 150px">
  76         <div class="indicator box" style="left: 50px;"></div>
  77         <div class="grid-container" style="left: 100px">
  78           <div class="sticky grid-item" style="grid-column: 1; grid-row: 1;"></div>
  79           <div class="grid-item" style="grid-column: 2; grid-row: 1;"></div>
  80         </div>
  81     </div>
  82
  83     <div class="group" style="left: 200px">
  84         <div class="indicator box" style="left: 0px;"></div>
  85         <div class="grid-container" style="left: 100px">
  86           <div class="sticky grid-item" style="grid-column: 1; grid-row: 1;"></div>
  87           <div class="grid-item" style="grid-column: 2; grid-row: 1;"></div>
  88         </div>
  89     </div>
  90
  91 </body>
  92 </html>