layout/reftests/flexbox/flexbox-position-fixed-4-ref.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 <!-- Reference case for fixed-position flex container & children. -->
   7 <html xmlns="http://www.w3.org/1999/xhtml">
   8   <head>
   9     <style>
  10       div.containingBlock {
  11         top: 15px;
  12         left: 20px;
  13         height: 400px;
  14         position: absolute;
  15         border: 2px dashed purple;
  16       }
  17       .fixedpos {
  18         position: fixed;
  19         left: 5px;
  20         border: 2px dotted black;
  21       }
  22       div.flexbox {
  23         top: 30px;
  24         left: 40px;
  25         width: 200px;
  26         height: 100px;
  27         position: fixed;
  28         border: 2px dashed teal;
  29       }
  30       div.a {
  31         width: 30px;
  32         height: 100px;
  33         background: lightgreen;
  34         display: inline-block;
  35       }
  36       div.b {
  37         width: 100%;
  38         height: 100px;
  39         background: yellow;
  40         display: inline-block;
  41         vertical-align: top;
  42       }
  43     </style>
  44   </head>
  45   <body>
  46     <div class="containingBlock">
  47       <div class="flexbox"
  48            ><div class="a fixedpos"/><div class="b"/></div>
  49     </div>
  50   </body>
  51 </html>