src/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-flexbox.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     .flex-container {
  24         position: relative;
  25         display: flex;
  26         width: 200px;
  27         height: 180px;
  28         flex-flow: row wrap;
  29         outline: 2px solid black;
  30     }
  31
  32     .box {
  33         width: 100px;
  34         height: 180px;
  35     }
  36
  37     .flex-item {
  38         width: 100px;
  39         height: 180px;
  40         display: flex;
  41     }
  42
  43     .sticky {
  44         position: sticky;
  45         left: 100px;
  46         background-color: green;
  47     }
  48
  49     .indicator {
  50         position: absolute;
  51         top: 0;
  52         left: 0;
  53         background-color: red;
  54     }
  55 </style>
  56 <script>
  57     function doTest()
  58     {
  59         window.scrollTo(100, 0);
  60     }
  61     window.addEventListener('load', doTest, false);
  62 </script>
  63 </head>
  64 <body>
  65     <p>This test checks the behavior of position:sticky with flex box items.
  66   There should be no red.</p>
  67
  68     <div class="group" style="left: 100px">
  69         <div class="indicator box" style="left: 100px;"></div>
  70         <div class="flex-container" style="left: 0px;">
  71             <div class="sticky flex-item"></div>
  72             <div class="flex-item" style="background-color: green;"></div>
  73         </div>
  74     </div>
  75
  76     <div class="group" style="left: 150px">
  77         <div class="indicator box" style="left: 50px;"></div>
  78         <div class="flex-container" style="left: 0px;">
  79             <div class="sticky flex-item"></div>
  80             <div class="flex-item" style="background-color: green;"></div>
  81         </div>
  82     </div>
  83
  84     <div class="group" style="left: 200px">
  85         <div class="indicator box" style="left: 0;"></div>
  86         <div class="flex-container" style="left: 0px;">
  87             <div class="sticky flex-item"></div>
  88             <div class="flex-item" style="background-color: green;"></div>
  89         </div>
  90     </div>
  91
  92 </body>
  93 </html>