layout/reftests/flexbox/flexbox-table-flex-items-3-ref.html

   1 <!DOCTYPE html>
   2 <!--
   3      Any copyright is dedicated to the Public Domain.
   4      http://creativecommons.org/publicdomain/zero/1.0/
   5 -->
   6 <html>
   7 <head>
   8   <meta charset="utf-8">
   9   <title>CSS Reftest Reference</title>
  10   <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
  11   <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-base-size">
  12   <style>
  13   .container {
  14     display: flex;
  15     flex-direction: column;
  16     height: 100px;
  17     float: left;
  18     border: 1px solid black;
  19   }
  20
  21   /* Two types of flex items: */
  22   .table {
  23     border: 2px solid teal;
  24   }
  25   .block {
  26     border: 2px solid brown;
  27   }
  28
  29   /* Each flex item gets one of these as its contents,
  30      to have a nonzero content size: */
  31   ib {
  32     display: inline-block;
  33     background: blue;
  34     border: 1px solid gray;
  35     width: 15px;
  36     height: 10px;
  37   }
  38   </style>
  39 </head>
  40 <body>
  41 <!-- auto size: -->
  42 <div class="container">
  43   <div class="table"><ib></ib></div>
  44   <div class="block"><ib></ib></div>
  45 </div>
  46
  47 <!-- px size: -->
  48 <div class="container">
  49   <div class="table" style="height: 30px"><ib></ib></div>
  50   <div class="block" style="height: 30px"><ib></ib></div>
  51 </div>
  52
  53 <!-- % size: -->
  54 <div class="container">
  55   <div class="table" style="height: 30%"><ib></ib></div>
  56   <div class="block" style="height: 30%"><ib></ib></div>
  57 </div>
  58
  59 <!-- calc() size: -->
  60 <div class="container">
  61   <div class="table" style="height: calc(10px + 20%)"><ib></ib></div>
  62   <div class="block" style="height: calc(10px + 20%)"><ib></ib></div>
  63 </div>
  64
  65 </body>
  66 </html>