layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2b.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 test is like the -2a variant, but with a <div> instead of an <img>
   8      at the deepest level of nesting.
   9 -->
  10 <html xmlns="http://www.w3.org/1999/xhtml">
  11   <head>
  12     <style>
  13       body { margin: 0; }
  14
  15       div.flexbox {
  16         display: flex;
  17         width: max-content;
  18
  19         /* We give the flex container a border and background so we can easily
  20          * see how large it is. */
  21         border: 2px dotted black;
  22         background: lime;
  23       }
  24
  25       div.wrapper {
  26         border: 5px solid teal;
  27         width:  40px;
  28         height: 16px;
  29       }
  30       div.blueBlock {
  31         width:  16px;
  32         height: 16px;
  33         background: rgb(0, 19, 127); /* matches solidblue.png */
  34       }
  35   </style>
  36 </head>
  37 <body>
  38   <div class="flexbox">
  39     <div class="wrapper"><div class="blueBlock"/></div>
  40     <div class="wrapper"><div class="blueBlock"/></div>
  41     <div class="wrapper"><div class="blueBlock"/></div>
  42   </div>
  43 </body>
  44 </html>