src/third_party/WebKit/LayoutTests/css3/flexbox/percentage-sizes-quirks.html

   1 <style>
   2 .flexbox {
   3     display: -webkit-flex;
   4 }
   5 .column {
   6     height: 50px;
   7 }
   8 .row {
   9     width: 50px;
  10 }
  11 .container > div {
  12     outline: 2px solid blue;
  13 }
  14 .row > div > div {
  15     height: 20px;
  16     -webkit-flex: 0 0 auto;
  17 }
  18 .column > .flexbox {
  19     -webkit-flex-direction: column;
  20 }
  21 .container > div > :nth-child(1) {
  22     background-color: orange;
  23 }
  24 .container > div > :nth-child(2) {
  25     background-color: yellow;
  26 }
  27 .container > div > :nth-child(3) {
  28     background-color: salmon;
  29 }
  30 .container > div > :nth-child(4) {
  31     background-color: purple;
  32 }
  33 </style>
  34 <script src="../../resources/check-layout.js"></script>
  35 <body onload="checkLayout('.flexbox')">
  36
  37 <div>CompatMode: <script>document.write(document.compatMode)</script></div>
  38
  39 <div class="container row">
  40     <div class="flexbox">
  41         <div style='width: 10px; min-width: 50%;' data-expected-width=25></div>
  42         <div style='width: 50%;' data-expected-width=25></div>
  43         <div style='width: 10px; max-width: 50%;' data-expected-width=10></div>
  44         <div style='min-width: 10px; width: 100px; max-width: 50%;' data-expected-width=25></div>
  45     </div>
  46 </div>
  47
  48 <div class="container column" style='margin-bottom: 50px'>
  49     <div class="flexbox">
  50         <div style='height: 10px; min-height: 50%;' data-expected-height=25></div>
  51         <div style='height: 50%;' data-expected-height=25></div>
  52         <div style='height: 10px; max-height: 50%;' data-expected-height=10></div>
  53         <div style='min-height: 10px; height: 100px; max-height: 50%;' data-expected-height=25></div>
  54     </div>
  55 </div>
  56
  57 <div class="container row">
  58     <div class="flexbox">
  59         <div style="-webkit-flex: 0 0 50%" data-expected-width=25></div>
  60     </div>
  61 </div>
  62
  63 <div class="container column">
  64     <div class="flexbox">
  65         <div style="-webkit-flex: 0 0 50%" data-expected-height=0></div>
  66     </div>
  67 </div>
  68
  69 </body>