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