layout/reftests/flexbox/flexbox-position-absolute-2.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 absolutely positioned children of a flex container.
   8      In this testcase, we simply specify "position: absolute" without
   9      actually doing any positioning, to test the "static position" of these
  10      children.
  11 -->
  12 <html xmlns="http://www.w3.org/1999/xhtml">
  13   <head>
  14     <style>
  15       div.containingBlock {
  16         top: 15px;
  17         left: 20px;
  18         height: 400px;
  19         position: absolute;
  20         border: 2px dashed purple;
  21       }
  22       .abspos {
  23         position: absolute;
  24         border: 2px dotted black;
  25       }
  26       div.flexbox {
  27         width: 200px;
  28         height: 100px;
  29         display: flex;
  30       }
  31       div.a {
  32         flex: 1 0 auto;
  33         width: 30px;
  34         height: 100px;
  35         background: lightgreen;
  36       }
  37       div.b {
  38         flex: 2 0 auto;
  39         width: 20px;
  40         height: 100px;
  41         background: yellow;
  42       }
  43       div.inflex {
  44         flex: none;
  45         width: 20px;
  46         height: 100px;
  47         background: gray;
  48       }
  49       div.noFlexFn {
  50         width: 15px;
  51         height: 15px;
  52         background: teal;
  53       }
  54     </style>
  55   </head>
  56   <body>
  57     <div class="containingBlock">
  58       <!-- First child abspos: -->
  59       <div class="flexbox"><div class="a abspos"/><div class="b"/></div>
  60       <!-- Second child abspos: -->
  61       <div class="flexbox"><div class="a"/><div class="b abspos"/></div>
  62       <!-- Middle child abspos: -->
  63       <div class="flexbox"
  64            ><div class="a"/><div class="inflex abspos"/><div class="b"/></div>
  65       <!-- Third child abspos, w/ inflexible items & justify-content: space-around: -->
  66       <div class="flexbox" style="justify-content: space-around"
  67            ><div class="inflex"/><div class="inflex"/><div class="inflex"
  68           /><div class="noFlexFn abspos"/><div class="inflex"/></div>
  69     </div>
  70   </body>
  71 </html>