layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2-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 <!--
   7      This reference case has inline blocks in a div, in place of
   8      flex items in a flex container.
   9 -->
  10 <html xmlns="http://www.w3.org/1999/xhtml">
  11   <head>
  12     <style>
  13       body { margin: 0; }
  14
  15       div.flexbox {
  16         width: max-content;
  17         /* We give the flex container a border and background so we can easily
  18          * see how large it is. */
  19         border: 2px dotted black;
  20         background: lime;
  21
  22         font-size: 0; /* to prevent whitespace from having an effect */
  23       }
  24
  25       div.wrapper {
  26         display: inline-block;
  27         border: 5px solid teal;
  28         width:  40px;
  29         height: 16px;
  30       }
  31       div.blueBlock {
  32         width:  16px;
  33         height: 16px;
  34         background: rgb(0, 19, 127); /* matches solidblue.png */
  35       }
  36   </style>
  37 </head>
  38 <body>
  39   <div class="flexbox">
  40     <div class="wrapper"><div class="blueBlock"/></div>
  41     <div class="wrapper"><div class="blueBlock"/></div>
  42     <div class="wrapper"><div class="blueBlock"/></div>
  43   </div>
  44 </body>
  45 </html>