third_party/WebKit/LayoutTests/css3/flexbox/flexitem.html

   1 <!DOCTYPE html>
   2 <html>
   3 <link href="resources/flexbox.css" rel="stylesheet">
   4 <style>
   5 .flexbox {
   6     width: 600px;
   7     background-color: #aaa;
   8     position: relative;
   9     min-height: 10px;
  10 }
  11 .flexbox > * {
  12     flex: 1 0 0;
  13     margin: 0;
  14     border: 0;
  15     padding: 0;
  16     font-size: 12px;
  17     min-width: 0;
  18 }
  19 </style>
  20 <script src="../../resources/check-layout.js"></script>
  21 <body onload="checkLayout('.flexbox')">
  22 <div class="flexbox" style="height:200px">
  23   <button data-expected-display="block" data-expected-width="100" data-expected-height="200">button</button>
  24   <canvas data-expected-display="block" data-expected-width="100" data-expected-height="200">canvas</canvas>
  25   <iframe data-expected-display="block" data-expected-width="100" data-expected-height="200" src="data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
  26   <object data-expected-display="block" data-expected-width="100" data-expected-height="200">object</object>
  27   <select data-expected-display="block" data-expected-width="100" data-expected-height="200">
  28     <option>select</option>
  29   </select>
  30   <textarea data-expected-display="block" data-expected-width="100" data-expected-height="200">textarea</textarea>
  31 </div>
  32
  33
  34 <div class="flexbox">
  35   <input data-expected-display="block" data-expected-width="75" type="checkbox" value="radio"></input>
  36   <input data-expected-display="block" data-expected-width="75" type="file" value="file"></input>
  37   <input data-expected-display="block" data-expected-width="75" type="image" value="image"></input>
  38   <input data-expected-display="block" data-expected-width="75" type="password" value="password"></input>
  39   <input data-expected-display="block" data-expected-width="75" type="radio" value="radio"></input>
  40   <input data-expected-display="block" data-expected-width="75" type="reset" value="reset"></input>
  41   <input data-expected-display="block" data-expected-width="75" type="submit" value="submit"></input>
  42   <input data-expected-display="block" data-expected-width="75" type="text" value="text"></input>
  43 </div>
  44
  45 <div class="flexbox">
  46   <img data-expected-display="block" data-expected-width="200" style="flex: 1 0 auto;" src="../images/resources/blue-100.png">
  47   <img data-expected-display="block" data-expected-width="200" data-expected-height="100" style="flex: 2 0 0;" src="doesnotexist.png">
  48   <img data-expected-display="block" data-expected-width="200" data-expected-height="100" style="flex: 2 0 0;" src="doesnotexist.png" alt="placeholder text">
  49 </div>
  50
  51 <div class="flexbox">
  52   <svg data-expected-display="block" data-expected-width="100" style="flex: 1 0 auto; width: 100px; height: 100px">
  53     <circle cx="50" cy="50" r="50" fill="blue">
  54     </circle>
  55   </svg>
  56   <svg data-expected-display="block" data-expected-width="500" style="flex: 1 1 auto; height: 100px; width: 100%">
  57     <circle cx="50" cy="50" r="50" fill="green">
  58     </circle>
  59   </svg>
  60 </div>
  61
  62 <div class="flexbox">
  63   <span data-expected-display="block" data-expected-width="200" style="flex: 2 0 0"></span>
  64   <button data-expected-display="block" data-expected-width="100" style="flex: 1 0 0">button</button>
  65   <span data-expected-display="block" data-expected-width="300" style="flex: 2 2 100px"></span>
  66 </div>
  67
  68 <div class="flexbox" style="width: 700px">
  69   <div data-expected-display="block" data-expected-width="100" style="display: inline-block;"></div>
  70   <div data-expected-display="-webkit-box" data-expected-width="100" style="display: -webkit-inline-box;"></div>
  71   <div data-expected-display="flex" data-expected-width="100" style="display: inline-flex;"></div>
  72   <div data-expected-display="block" data-expected-width="100" style="display: table-cell"></div>
  73   <div data-expected-display="block" data-expected-width="100" style="display: compact"></div>
  74   <div data-expected-display="block" data-expected-width="100" style="display: run-in"></div>
  75   <div data-expected-display="block" data-expected-width="100" style="display: inline;"></div>
  76 </div>
  77
  78 <div class="flexbox">
  79   <!-- FIXME: This table should flex. -->
  80   <div data-expected-display="table" data-expected-width="600" style="display: inline-table"></div>
  81 </div>
  82
  83 <div class="flexbox" style="height:200px">
  84   <iframe data-expected-display="block" data-expected-height="200" src="data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
  85   <iframe seamless data-expected-display="block" data-expected-height="200" src="data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
  86 </div>
  87
  88 <div class="flexbox" style="height:100px">
  89   <iframe data-expected-display="block" data-expected-height="100" src="data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
  90   <iframe seamless data-expected-display="block" data-expected-height="100" src="data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
  91 </div>
  92
  93 <div class="flexbox column" style="width:100px">
  94   <iframe data-expected-display="block" data-expected-width="100" src="data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
  95   <iframe seamless data-expected-display="block" data-expected-width="100" src="data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
  96 </div>
  97
  98 <div class="flexbox column" style="height:210px">
  99   <button data-expected-display="block" data-expected-width="600" data-expected-height="30">button</button>
 100   <canvas data-expected-display="block" data-expected-width="600" data-expected-height="30" style="height:30px">canvas</canvas>
 101   <iframe data-expected-display="block" data-expected-width="600" data-expected-height="30" style="height:30px" src="data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
 102   <iframe seamless data-expected-display="block" data-expected-width="600" data-expected-height="30" style="height:30px" src="data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
 103   <object data-expected-display="block" data-expected-width="600" data-expected-height="30">object</object>
 104   <select data-expected-display="block" data-expected-width="600" data-expected-height="30">
 105     <option>select</option>
 106   </select>
 107   <textarea data-expected-display="block" data-expected-width="600" data-expected-height="30">textarea</textarea>
 108 </div>
 109
 110 <!-- tests that min-height expands the height of flex items beyond the height of the flexbox -->
 111 <div class="flexbox" style="height:50px">
 112     <img data-expected-height="60" style="min-height:60px" src="../images/resources/blue-100.png">
 113     <img data-expected-height="60" style="min-height:60px" src="../images/resources/green-10.png">
 114     <img data-expected-height="75" style="min-height:150%" src="../images/resources/blue-100.png">
 115     <img data-expected-height="75" style="min-height:150%" src="../images/resources/green-10.png">
 116     <img data-expected-height="10" style="min-height:-webkit-min-content;height:1px" src="../images/resources/blue-10.png">
 117     <img data-expected-height="100" style="min-height:-webkit-max-content;height:1px" src="../images/resources/green-100.png">
 118     <img data-expected-height="50" style="min-height:-webkit-fill-available" src="../images/resources/blue-10.png">
 119     <img data-expected-height="10" style="min-height:-webkit-fit-content;height:1px" src="../images/resources/green-10.png">
 120 </div>
 121
 122 <!-- tests that max-height shrinks the height of flex items less than the height of the flexbox -->
 123 <div class="flexbox" style="height:50px">
 124     <img data-expected-height="40" style="max-height:40px" src="../images/resources/blue-100.png">
 125     <img data-expected-height="40" style="max-height:40px" src="../images/resources/green-10.png">
 126     <img data-expected-height="25" style="max-height:50%" src="../images/resources/blue-100.png">
 127     <img data-expected-height="25" style="max-height:50%" src="../images/resources/green-10.png">
 128     <img data-expected-height="10" style="max-height:-webkit-min-content;height:1000px;" src="../images/resources/blue-10.png">
 129     <img data-expected-height="100" style="max-height:-webkit-max-content;height:1000px;" src="../images/resources/green-100.png">
 130     <img data-expected-height="50" style="max-height:-webkit-fill-available" src="../images/resources/blue-100.png">
 131     <img data-expected-height="10" style="max-height:-webkit-fit-content;height:1000px" src="../images/resources/green-10.png">
 132 </div>
 133
 134 <!-- tests that images can shrink below their CSS height with min-height: min-content -->
 135 <div class="flexbox column" style="height:50px">
 136     <img data-expected-height="50" style="flex-shrink:1;height:1000px;min-height:-webkit-min-content;" src="../images/resources/blue-10.png">
 137 </div>
 138
 139 <!-- tests that text can shrink below its CSS height with min-height: min-content -->
 140 <div class="flexbox column" style="height:50px">
 141     <div data-expected-height="50" style="flex-shrink:1;height:1000px;min-height:-webkit-min-content;" src="../images/resources/blue-10.png">
 142       Some text<br>
 143       Some more text
 144     </div>
 145 </div>
 146
 147 <!-- tests that images can shrink below their CSS width with min-width: min-content -->
 148 <div class="flexbox" style="width:50px">
 149     <img data-expected-width="50" style="flex-shrink:1;width:1000px;min-width:-webkit-min-content;" src="../images/resources/blue-10.png">
 150 </div>
 151
 152 <!-- tests that min-width expands the width of flex items beyond the width of the flexbox -->
 153 <div class="flexbox column" style="width:50px">
 154     <img data-expected-width="60" style="min-width:60px" src="../images/resources/blue-100.png">
 155     <img data-expected-width="60" style="min-width:60px" src="../images/resources/green-10.png">
 156     <img data-expected-width="75" style="min-width:150%" src="../images/resources/blue-100.png">
 157     <img data-expected-width="75" style="min-width:150%" src="../images/resources/green-10.png">
 158     <img data-expected-width="100" style="min-width:-webkit-min-content" src="../images/resources/blue-100.png">
 159     <img data-expected-width="50" style="min-width:-webkit-min-content" src="../images/resources/green-10.png">
 160     <img data-expected-width="100" style="min-width:-webkit-max-content" src="../images/resources/blue-100.png">
 161     <img data-expected-width="50" style="min-width:-webkit-max-content" src="../images/resources/green-10.png">
 162     <img data-expected-width="50" style="min-width:-webkit-fill-available" src="../images/resources/blue-100.png">
 163     <img data-expected-width="50" style="min-width:-webkit-fill-available" src="../images/resources/green-10.png">
 164     <img data-expected-width="100" style="min-width:-webkit-fit-content" src="../images/resources/blue-100.png">
 165     <img data-expected-width="50" style="min-width:-webkit-fit-content" src="../images/resources/green-10.png">
 166 </div>
 167
 168 <!-- tests that max-width shrinks the width of flex items less than the width of the flexbox -->
 169 <div class="flexbox column" style="width:50px">
 170     <img data-expected-width="40" style="max-width:40px" src="../images/resources/blue-100.png">
 171     <img data-expected-width="40" style="max-width:40px" src="../images/resources/green-10.png">
 172     <img data-expected-width="25" style="max-width:50%" src="../images/resources/blue-100.png">
 173     <img data-expected-width="25" style="max-width:50%" src="../images/resources/green-10.png">
 174     <img data-expected-width="50" style="max-width:-webkit-min-content" src="../images/resources/blue-100.png">
 175     <img data-expected-width="10" style="max-width:-webkit-min-content" src="../images/resources/green-10.png">
 176     <img data-expected-width="50" style="max-width:-webkit-max-content" src="../images/resources/blue-100.png">
 177     <img data-expected-width="10" style="max-width:-webkit-max-content" src="../images/resources/green-10.png">
 178     <img data-expected-width="50" style="max-width:-webkit-fill-available" src="../images/resources/blue-100.png">
 179     <img data-expected-width="50" style="max-width:-webkit-fill-available" src="../images/resources/green-10.png">
 180     <img data-expected-width="50" style="max-width:-webkit-fit-content" src="../images/resources/blue-100.png">
 181     <img data-expected-width="10" style="max-width:-webkit-fit-content" src="../images/resources/green-10.png">
 182 </div>
 183
 184 </html>