layout/reftests/flexbox/flexbox-table-flex-items-2-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     width: 100px;
  16     border: 1px solid black;
  17   }
  18
  19   /* Two types of flex items: */
  20   .table {
  21     border: 2px solid teal;
  22   }
  23   .block {
  24     border: 2px solid brown;
  25   }
  26
  27   /* Each flex item gets one of these as its contents,
  28      to have a nonzero content size: */
  29   ib {
  30     display: inline-block;
  31     background: blue;
  32     border: 1px solid gray;
  33     width: 15px;
  34     height: 10px;
  35   }
  36   </style>
  37 </head>
  38 <body>
  39 <!-- auto size: -->
  40 <div class="container">
  41   <div class="table"><ib></ib></div>
  42   <div class="block"><ib></ib></div>
  43 </div>
  44
  45 <!-- px size: -->
  46 <div class="container">
  47   <div class="table" style="width: 30px"><ib></ib></div>
  48   <div class="block" style="width: 30px"><ib></ib></div>
  49 </div>
  50
  51 <!-- % size: -->
  52 <div class="container">
  53   <div class="table" style="width: 30%"><ib></ib></div>
  54   <div class="block" style="width: 30%"><ib></ib></div>
  55 </div>
  56
  57 <!-- calc() size: -->
  58 <div class="container">
  59   <div class="table" style="width: calc(10px + 20%)"><ib></ib></div>
  60   <div class="block" style="width: calc(10px + 20%)"><ib></ib></div>
  61 </div>
  62
  63 </body>
  64 </html>