src/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-flexbox-expected.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: relative;
  45         background-color: green;
  46     }
  47
  48 </style>
  49 <script>
  50     function doTest()
  51     {
  52         window.scrollTo(100, 0);
  53     }
  54     window.addEventListener('load', doTest, false);
  55 </script>
  56 </head>
  57 <body>
  58     <p>This test checks the behavior of position:sticky with flex box items.
  59   There should be no red.</p>
  60
  61     <div class="group" style="left: 100px">
  62         <div class="flex-container" style="left: 0px;">
  63             <div class="sticky flex-item" style="left:100px"></div>
  64             <div class="flex-item" style="background-color: green;"></div>
  65         </div>
  66     </div>
  67
  68     <div class="group" style="left: 150px">
  69         <div class="flex-container" style="left: 0px;">
  70             <div class="sticky flex-item" style="left:50px"></div>
  71             <div class="flex-item" style="background-color: green;"></div>
  72         </div>
  73     </div>
  74
  75     <div class="group" style="left: 200px">
  76         <div class="flex-container" style="left: 0px;">
  77             <div class="sticky flex-item"></div>
  78             <div class="flex-item" style="background-color: green;"></div>
  79         </div>
  80     </div>
  81
  82 </body>
  83 </html>