<!DOCTYPE html> <!-- Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/ --> <html> <head> <meta charset="utf-8"> <title>CSS Reftest Reference</title> <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> <style> .flexbox { border: 1px solid black; margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ width: 40px; height: 40px; float: left; /* For testing in "rows" */ } br { clear: both; } .flexbox > * { /* Disable "min-width:auto"/"min-height:auto" to focus purely on later channels of influence. */ min-width: 0; min-height: 0; vertical-align: top; } </style> </head> <body> <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> <!-- Row 1: no special sizing: --> <div class="flexbox"> <img src="support/solidblue.png" style="width: 40px; height: 40px"> </div> <br> <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> <div class="flexbox"> <img src="support/solidblue.png" style="width: 40px; height: 40px"> </div> <div class="flexbox"> <img src="support/solidblue.png" style="width: 40px; height: 30px"> </div> <div class="flexbox"> <img src="support/solidblue.png" style="width: 40px; height: 40px"> </div> <br> <!-- Row 3: min main-size OR min cross-size, or both --> <div class="flexbox"> <img src="support/solidblue.png" style="width: 40px; height: 40px"> </div> <div class="flexbox"> <img src="support/solidblue.png" style="width: 40px; height: 40px"> </div> <div class="flexbox"> <img src="support/solidblue.png" style="width: 40px; height: 40px"> </div> <div class="flexbox"> <img src="support/solidblue.png" style="width: 40px; height: 40px"> </div> <br> <!-- Row 4: max main-size OR max cross-size, or both --> <div class="flexbox"> <img src="support/solidblue.png" style="width: 10px; height: 10px"> </div> <div class="flexbox"> <img src="support/solidblue.png" style="width: 40px; height: 10px"> </div> <div class="flexbox"> <img src="support/solidblue.png" style="width: 10px; height: 6px"> </div> <div class="flexbox"> <img src="support/solidblue.png" style="width: 6px; height: 6px"> </div> <br> <!-- Row 5: min main-size vs. max cross-size, & vice versa --> <div class="flexbox"> <img src="support/solidblue.png" style="width: 40px; height: 10px"> </div> <div class="flexbox"> <img src="support/solidblue.png" style="width: 10px; height: 30px"> </div> <br> <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> <div class="flexbox"> <img src="support/solidblue.png" style="width: 40px; height: 10px"> </div> <div class="flexbox"> <img src="support/solidblue.png" style="width: 40px; height: 10px"> </div> <div class="flexbox"> <img src="support/solidblue.png" style="width: 10px; height: 30px"> </div> <div class="flexbox"> <img src="support/solidblue.png" style="width: 40px; height: 40px"> </div> </body> </html>