| <!DOCTYPE html> |
| <html> |
| <link href="resources/flexbox.css" rel="stylesheet"> |
| <style> |
| .flexbox { |
| width: 600px; |
| background-color: #aaa; |
| position: relative; |
| min-height: 10px; |
| } |
| .flexbox > * { |
| flex: 1 0 0; |
| margin: 0; |
| border: 0; |
| padding: 0; |
| font-size: 12px; |
| min-width: 0; |
| } |
| </style> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../../resources/check-layout-th.js"></script> |
| <body onload="checkLayout('.flexbox')"> |
| <div id=log></div> |
| <div class="flexbox" style="height:200px"> |
| <button data-expected-display="block" data-expected-width="100" data-expected-height="200">button</button> |
| <canvas data-expected-display="block" data-expected-width="100" data-expected-height="200">canvas</canvas> |
| <iframe data-expected-display="block" data-expected-width="100" data-expected-height="200" src="data:text/html,<body bgcolor=%23fff>iframe</body>"></iframe> |
| <object data-expected-display="block" data-expected-width="100" data-expected-height="200">object</object> |
| <select data-expected-display="block" data-expected-width="100" data-expected-height="200"> |
| <option>select</option> |
| </select> |
| <textarea data-expected-display="block" data-expected-width="100" data-expected-height="200">textarea</textarea> |
| </div> |
| |
| |
| <div class="flexbox"> |
| <input data-expected-display="block" data-expected-width="75" type="checkbox" value="radio"></input> |
| <input data-expected-display="block" data-expected-width="75" type="file" value="file"></input> |
| <input data-expected-display="block" data-expected-width="75" type="image" value="image"></input> |
| <input data-expected-display="block" data-expected-width="75" type="password" value="password"></input> |
| <input data-expected-display="block" data-expected-width="75" type="radio" value="radio"></input> |
| <input data-expected-display="block" data-expected-width="75" type="reset" value="reset"></input> |
| <input data-expected-display="block" data-expected-width="75" type="submit" value="submit"></input> |
| <input data-expected-display="block" data-expected-width="75" type="text" value="text"></input> |
| </div> |
| |
| <div class="flexbox"> |
| <img data-expected-display="block" data-expected-width="200" style="flex: 1 0 auto;" src="../images/resources/blue-100.png"> |
| <img data-expected-display="block" data-expected-width="200" data-expected-height="200" style="flex: 2 0 0;" src="doesnotexist.png"> |
| <img data-expected-display="block" data-expected-width="200" data-expected-height="200" style="flex: 2 0 0;" src="doesnotexist.png" alt="placeholder text"> |
| </div> |
| |
| <div class="flexbox"> |
| <svg data-expected-display="block" data-expected-bounding-client-rect-width="100" style="flex: 1 0 auto; width: 100px; height: 100px"> |
| <circle cx="50" cy="50" r="50" fill="blue"> |
| </circle> |
| </svg> |
| <svg data-expected-display="block" data-expected-bounding-client-rect-width="500" style="flex: 1 1 auto; height: 100px; width: 100%"> |
| <circle cx="50" cy="50" r="50" fill="green"> |
| </circle> |
| </svg> |
| </div> |
| |
| <div class="flexbox"> |
| <span data-expected-display="block" data-expected-width="200" style="flex: 2 0 0"></span> |
| <button data-expected-display="block" data-expected-width="100" style="flex: 1 0 0">button</button> |
| <span data-expected-display="block" data-expected-width="300" style="flex: 2 2 100px"></span> |
| </div> |
| |
| <div class="flexbox" style="width: 700px"> |
| <div data-expected-display="block" data-expected-width="100" style="display: inline-block;"></div> |
| <div data-expected-display="-webkit-box" data-expected-width="100" style="display: -webkit-inline-box;"></div> |
| <div data-expected-display="flex" data-expected-width="100" style="display: inline-flex;"></div> |
| <div data-expected-display="block" data-expected-width="100" style="display: table-cell"></div> |
| <div data-expected-display="block" data-expected-width="100" style="display: compact"></div> |
| <div data-expected-display="block" data-expected-width="100" style="display: run-in"></div> |
| <div data-expected-display="block" data-expected-width="100" style="display: inline;"></div> |
| </div> |
| |
| <div class="flexbox"> |
| <!-- FIXME: This table should flex. --> |
| <div data-expected-display="table" data-expected-width="600" style="display: inline-table"></div> |
| </div> |
| |
| <div class="flexbox" style="height:200px"> |
| <iframe data-expected-display="block" data-expected-height="200" src="data:text/html,<body bgcolor=%23fff>iframe</body>"></iframe> |
| <iframe seamless data-expected-display="block" data-expected-height="200" src="data:text/html,<body bgcolor=%23fff>iframe</body>"></iframe> |
| </div> |
| |
| <div class="flexbox" style="height:100px"> |
| <iframe data-expected-display="block" data-expected-height="100" src="data:text/html,<body bgcolor=%23fff>iframe</body>"></iframe> |
| <iframe seamless data-expected-display="block" data-expected-height="100" src="data:text/html,<body bgcolor=%23fff>iframe</body>"></iframe> |
| </div> |
| |
| <div class="flexbox column" style="width:100px"> |
| <iframe data-expected-display="block" data-expected-width="100" src="data:text/html,<body bgcolor=%23fff>iframe</body>"></iframe> |
| <iframe seamless data-expected-display="block" data-expected-width="100" src="data:text/html,<body bgcolor=%23fff>iframe</body>"></iframe> |
| </div> |
| |
| <div class="flexbox column" style="height:210px"> |
| <button data-expected-display="block" data-expected-width="600" data-expected-height="30">button</button> |
| <canvas data-expected-display="block" data-expected-width="600" data-expected-height="30" style="height:30px">canvas</canvas> |
| <iframe data-expected-display="block" data-expected-width="600" data-expected-height="30" style="height:30px" src="data:text/html,<body bgcolor=%23fff>iframe</body>"></iframe> |
| <iframe seamless data-expected-display="block" data-expected-width="600" data-expected-height="30" style="height:30px" src="data:text/html,<body bgcolor=%23fff>iframe</body>"></iframe> |
| <object data-expected-display="block" data-expected-width="600" data-expected-height="30">object</object> |
| <select data-expected-display="block" data-expected-width="600" data-expected-height="30"> |
| <option>select</option> |
| </select> |
| <textarea data-expected-display="block" data-expected-width="600" data-expected-height="30">textarea</textarea> |
| </div> |
| |
| <!-- tests that min-height expands the height of flex items beyond the height of the flexbox --> |
| <div class="flexbox" style="height:50px"> |
| <img data-expected-height="60" style="min-height:60px" src="../images/resources/blue-100.png"> |
| <img data-expected-height="60" style="min-height:60px" src="../images/resources/green-10.png"> |
| <img data-expected-height="75" style="min-height:150%" src="../images/resources/blue-100.png"> |
| <img data-expected-height="75" style="min-height:150%" src="../images/resources/green-10.png"> |
| <img data-expected-height="10" style="min-height:min-content;height:1px" src="../images/resources/blue-10.png"> |
| <img data-expected-height="100" style="min-height:max-content;height:1px" src="../images/resources/green-100.png"> |
| <img data-expected-height="50" style="min-height:-webkit-fill-available" src="../images/resources/blue-10.png"> |
| <img data-expected-height="10" style="min-height:fit-content;height:1px" src="../images/resources/green-10.png"> |
| </div> |
| |
| <!-- tests that max-height shrinks the height of flex items less than the height of the flexbox --> |
| <div class="flexbox" style="height:50px"> |
| <img data-expected-height="40" style="max-height:40px" src="../images/resources/blue-100.png"> |
| <img data-expected-height="40" style="max-height:40px" src="../images/resources/green-10.png"> |
| <img data-expected-height="25" style="max-height:50%" src="../images/resources/blue-100.png"> |
| <img data-expected-height="25" style="max-height:50%" src="../images/resources/green-10.png"> |
| <img data-expected-height="10" style="max-height:min-content;height:1000px;" src="../images/resources/blue-10.png"> |
| <img data-expected-height="100" style="max-height:max-content;height:1000px;" src="../images/resources/green-100.png"> |
| <img data-expected-height="50" style="max-height:-webkit-fill-available" src="../images/resources/blue-100.png"> |
| <img data-expected-height="10" style="max-height:fit-content;height:1000px" src="../images/resources/green-10.png"> |
| </div> |
| |
| <!-- tests that images can shrink below their CSS height with min-height: min-content --> |
| <div class="flexbox column" style="height:50px"> |
| <img data-expected-height="50" style="flex-shrink:1;height:1000px;min-height:min-content;" src="../images/resources/blue-10.png"> |
| </div> |
| |
| <!-- tests that text can shrink below its CSS height with min-height: min-content --> |
| <div class="flexbox column" style="height:50px"> |
| <div data-expected-height="50" style="flex-shrink:1;height:1000px;min-height:min-content;" src="../images/resources/blue-10.png"> |
| Some text<br> |
| Some more text |
| </div> |
| </div> |
| |
| <!-- tests that images can shrink below their CSS width with min-width: min-content --> |
| <div class="flexbox" style="width:50px"> |
| <img data-expected-width="50" style="flex-shrink:1;width:1000px;min-width:min-content;" src="../images/resources/blue-10.png"> |
| </div> |
| |
| <!-- tests that min-width expands the width of flex items beyond the width of the flexbox --> |
| <div class="flexbox column" style="width:50px"> |
| <img data-expected-width="60" style="min-width:60px" src="../images/resources/blue-100.png"> |
| <img data-expected-width="60" style="min-width:60px" src="../images/resources/green-10.png"> |
| <img data-expected-width="75" style="min-width:150%" src="../images/resources/blue-100.png"> |
| <img data-expected-width="75" style="min-width:150%" src="../images/resources/green-10.png"> |
| <img data-expected-width="100" style="min-width:min-content" src="../images/resources/blue-100.png"> |
| <img data-expected-width="50" style="min-width:min-content" src="../images/resources/green-10.png"> |
| <img data-expected-width="100" style="min-width:max-content" src="../images/resources/blue-100.png"> |
| <img data-expected-width="50" style="min-width:max-content" src="../images/resources/green-10.png"> |
| <img data-expected-width="50" style="min-width:-webkit-fill-available" src="../images/resources/blue-100.png"> |
| <img data-expected-width="50" style="min-width:-webkit-fill-available" src="../images/resources/green-10.png"> |
| <img data-expected-width="100" style="min-width:fit-content" src="../images/resources/blue-100.png"> |
| <img data-expected-width="50" style="min-width:fit-content" src="../images/resources/green-10.png"> |
| </div> |
| |
| <!-- tests that max-width shrinks the width of flex items less than the width of the flexbox --> |
| <div class="flexbox column" style="width:50px"> |
| <img data-expected-width="40" style="max-width:40px" src="../images/resources/blue-100.png"> |
| <img data-expected-width="40" style="max-width:40px" src="../images/resources/green-10.png"> |
| <img data-expected-width="25" style="max-width:50%" src="../images/resources/blue-100.png"> |
| <img data-expected-width="25" style="max-width:50%" src="../images/resources/green-10.png"> |
| <img data-expected-width="50" style="max-width:min-content" src="../images/resources/blue-100.png"> |
| <img data-expected-width="10" style="max-width:min-content" src="../images/resources/green-10.png"> |
| <img data-expected-width="50" style="max-width:max-content" src="../images/resources/blue-100.png"> |
| <img data-expected-width="10" style="max-width:max-content" src="../images/resources/green-10.png"> |
| <img data-expected-width="50" style="max-width:-webkit-fill-available" src="../images/resources/blue-100.png"> |
| <img data-expected-width="50" style="max-width:-webkit-fill-available" src="../images/resources/green-10.png"> |
| <img data-expected-width="50" style="max-width:fit-content" src="../images/resources/blue-100.png"> |
| <img data-expected-width="10" style="max-width:fit-content" src="../images/resources/green-10.png"> |
| </div> |
| |
| </html> |
