diff options
Diffstat (limited to 'layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-005v.html')
-rw-r--r-- | layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-005v.html | 129 |
1 files changed, 0 insertions, 129 deletions
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-005v.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-005v.html deleted file mode 100644 index ed1dcace0f..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-005v.html +++ /dev/null @@ -1,129 +0,0 @@ -<!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 Test: Testing how explicit main-size & cross-size constraints - influence sizing on non-stretched flexible flex item w/ intrinsic ratio - (with a vertical writing-mode on the flex items). - </title> - <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> - <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size"> - <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size"> - <link rel="match" href="flexbox-intrinsic-ratio-005-ref.html"> - <style> - .flexbox { - display: flex; - flex-direction: row; - border: 1px solid black; - margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ - width: 40px; - height: 40px; - - justify-content: flex-start; - align-items: flex-start; - - float: left; /* For testing in "rows" */ - } - br { clear: both; } - - .flexbox > * { - flex: 1; - writing-mode: vertical-lr; - - /* Disable "min-width:auto"/"min-height:auto" to focus purely on - later channels of influence. */ - min-width: 0; - min-height: 0; - } - </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"> - </div> - <br> - - <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> - <div class="flexbox"> - <img src="support/solidblue.png" style="width: 30px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="height: 30px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="flex: 1 1 30px"> - </div> - <br> - - <!-- Row 3: min main-size OR min cross-size, or both --> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-width: 34px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-height: 34px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-width: 30px; - min-height: 34px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-width: 34px; - min-height: 30px"> - </div> - <br> - - <!-- Row 4: max main-size OR max cross-size, or both --> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-width: 10px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-height: 10px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-width: 10px; - max-height: 6px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-width: 6px; - max-height: 10px"> - </div> - <br> - - <!-- Row 5: min main-size vs. max cross-size, & vice versa --> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-width: 30px; - max-height: 10px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-width: 10px; - min-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="min-width: 30px; - height: 10px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="width: 30px; - max-height: 10px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-width: 10px; - height: 30px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="width: 10px; - min-height: 30px"> - </div> - </body> -</html> |