layout/reftests/flexbox/flexbox-position-absolute-3-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 absolutely positioned flex container. -->
   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       div.flexbox {
  18         top: 30px;
  19         left: 40px;
  20         width: 200px;
  21         height: 100px;
  22         position: absolute;
  23         border: 1px solid black;
  24       }
  25       div.a {
  26         width: 80px;
  27         height: 100px;
  28         background: lightgreen;
  29         display: inline-block;
  30       }
  31       div.b {
  32         width: 120px;
  33         height: 100px;
  34         background: yellow;
  35         display: inline-block;
  36       }
  37     </style>
  38   </head>
  39   <body>
  40     <div class="containingBlock">
  41       <div class="flexbox"><div class="a"/><div class="b"/></div>
  42     </div>
  43   </body>
  44 </html>