layout/reftests/webkit-box/webkit-box-with-modern-css-1.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   <title>
   9     CSS Test: "flex-basis" and "flex" shouldn't impact child sizing inside of
  10     horizontal "display: -webkit-box" container
  11   </title>
  12   <style>
  13     .box {
  14       display: -webkit-box;
  15       border: 1px solid black;
  16       margin: 5px 20px;
  17       width: 100px;
  18       float: left; /* For testing in "rows" */
  19       font: 10px serif;
  20     }
  21
  22     .box > *:nth-child(1) { background: turquoise; }
  23     .box > *:nth-child(2) { background: salmon;    }
  24
  25     .mw0 {
  26       /* Used in some children here, to disable modern-flexbox's
  27          "implied-minimum-size" feature, so that it can't inadvertantly
  28          be the thing that makes our rendering match the reference . */
  29       min-width: 0;
  30     }
  31
  32     br { clear: both; }
  33
  34     /* The point of this testcase is to verify that none of the modern-flexbox
  35        styles below have any effect on the rendering. (This is worth checking
  36        because we coopt our modern-flexbox implementation in our emulation of
  37        legacy -webkit-box behavior.) */
  38     .fb0 { flex-basis: 0; }
  39     .f1  { flex: 1;  /* This shorthand sets flex-grow:1; flex-basis: 0 */ }
  40
  41     .fb30px   { flex-basis: 30px; }
  42     .f1_30px  { flex: 1 30px;     }
  43   </style>
  44 </head>
  45 <body>
  46   <!-- FIRST ROW: flex-basis is 0 -->
  47   <div class="box">
  48     <div class="fb0">a</div>
  49     <div class="fb0 mw0">b</div>
  50   </div>
  51
  52   <div class="box">
  53     <div class="f1">a</div>
  54     <div class="f1 mw0">b</div>
  55   </div>
  56
  57   <br>
  58
  59   <!-- SECOND ROW: flex-basis is 30px -->
  60   <div class="box">
  61     <div class="fb30px">a</div>
  62     <div class="fb30px mw0">b</div>
  63   </div>
  64
  65   <div class="box">
  66     <div class="f1_30px">a</div>
  67     <div class="f1_30px mw0">b</div>
  68   </div>
  69
  70 </body>
  71 </html>