summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-011.html
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-011.html')
-rw-r--r--testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-011.html77
1 files changed, 77 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-011.html b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-011.html
new file mode 100644
index 0000000000..f716d5ad6c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-011.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<title>CSS Flexbox: images' aspect ratio in flex box with flex-direction: column for min-size: auto</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#replaced-intrinsic">
+<link rel="help" href="https://crbug.com/581535">
+<link rel="help" href="https://crbug.com/581361">
+<link href="support/flexbox.css" rel="stylesheet">
+<meta name="assert" content="Images maintain aspect ratio in flex box with column direction with min-size: auto.">
+
+<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="width: 10px;" data-expected-width="10">
+ <!-- should use content width, clamped by converted max-height, as minimum width. -->
+ <img src="support/100x100-green.png" style="max-height: 5px;"
+ data-expected-width="5" data-expected-height="5">
+</div>
+
+<div class="flexbox" style="width: 10px;" data-expected-width="10">
+ <!-- should use min(specified, content width) = 10px as minimum width,
+ which the image will shrink to due to default flex-shrink. -->
+ <img src="support/10x10-green.png" style="width: 100px;" data-expected-width="10">
+</div>
+
+<div class="flexbox" style="width: 10px;" data-expected-width="10">
+ <!-- should use content width, clamped by converted min-height, as minimum width. -->
+ <img src="support/100x100-green.png" style="max-height: 5px;"
+ data-expected-width="5" data-expected-height="5">
+</div>
+
+<div class="flexbox" style="width: 10px;" data-expected-width="10">
+ <!-- should use content width, clamped by converted min-height, as minimum width. -->
+ <img src="support/100x100-green.png" style="max-height: 5px; min-height: 10px;"
+ data-expected-width="10" data-expected-height="10">
+</div>
+
+<div class="flexbox" style="width: 10px;" data-expected-width="10">
+ <!-- transferred and content suggestions are both 100px here, so minimum
+ width is min(transferred, content width) = 100px. -->
+ <img src="support/10x10-green.png" style="height: 100px;" data-expected-width="100">
+</div>
+
+<div class="flexbox column" style="height: 10px;" data-expected-height="10">
+ <!-- should use content height, clamped by converted max-width, as minimum height. -->
+ <img src="support/100x100-green.png" style="max-width: 5px;"
+ data-expected-width="5" data-expected-height="5">
+</div>
+
+<div class="flexbox column" style="height: 10px; width: 50px;" data-expected-height="10">
+ <!-- should use min(specified=100, content height=50) = 50px as minimum height,
+ which the image will shrink to due to default flex-shrink. -->
+ <img src="support/10x10-green.png" style="height: 100px;" data-expected-height="50">
+</div>
+
+<div class="flexbox" style="height: 10px;" data-expected-height="10">
+ <!-- should use content height, clamped by converted min-height, as minimum height. -->
+ <img src="support/100x100-green.png" style="max-height: 5px;"
+ data-expected-height="5" data-expected-height="5">
+</div>
+
+<div class="flexbox" style="height: 10px;" data-expected-height="10">
+ <!-- should use content height, clamped by converted min-width, as minimum height. -->
+ <img src="support/100x100-green.png" style="max-width: 5px; min-width: 10px;"
+ data-expected-height="10" data-expected-width="10">
+</div>
+
+<div class="flexbox column" style="height: 10px;" data-expected-height="10">
+ <!-- should use min(transferred (100), content height (100)) = 100px as
+ minimum height, which will be final height of the image -->
+ <img src="support/10x10-green.png" style="width: 100px;" data-expected-height="100">
+</div>