layout/reftests/flexbox/flexbox-position-fixed-3.xhtml

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!--
   3      Any copyright is dedicated to the Public Domain.
   4      http://creativecommons.org/publicdomain/zero/1.0/
   5 -->
   6 <!--
   7      Testcase with fixed-position flex container.
   8      This positioning is with respect to the viewport.
   9 -->
  10 <html xmlns="http://www.w3.org/1999/xhtml">
  11   <head>
  12     <style>
  13       div.containingBlock {
  14         top: 15px;
  15         left: 20px;
  16         height: 400px;
  17         position: absolute;
  18         border: 2px dashed purple;
  19       }
  20       div.flexbox {
  21         top: 30px;
  22         left: 40px;
  23         width: 200px;
  24         height: 100px;
  25         display: flex;
  26         position: fixed;
  27         border: 1px solid black;
  28       }
  29       div.a {
  30         flex: 1 0 30px;
  31         height: 100px;
  32         background: lightgreen;
  33       }
  34       div.b {
  35         flex: 2 0 20px;
  36         height: 100px;
  37         background: yellow;
  38       }
  39     </style>
  40   </head>
  41   <body>
  42     <div class="containingBlock">
  43       <div class="flexbox"><div class="a"/><div class="b"/></div>
  44     </div>
  45   </body>
  46 </html>