diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-026.html | |
| parent | Initial commit. (diff) | |
| download | firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-026.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-026.html | 94 |
1 files changed, 94 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-026.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-026.html new file mode 100644 index 0000000000..ff6bf2aa56 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-026.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<html> + <title>CSS aspect-ratio: Test flex item's resolved height/min-height with border-box box-sizing in a column flex container</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> + <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto"> + <link rel="match" href="../../reference/ref-filled-green-200px-square.html" /> + <style> + .flexContainer { + display: flex; + flex-direction: column; + float: left; + height: 1px; + } + .item { + background: green; + padding-left: 15px; + padding-top: 10px; + box-sizing: border-box; + } + .item > div { + height: 190px; /* Set the content size suggestion for flex item. */ + } + </style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <!-- In all of the subtests here, each flex item's automatic minimum height is + resolved directly from its content size suggestion. Notably, these items + *do not* get a "transferred size suggestion", because they are all + *non-replaced* elements; and "transferred size suggestion" is only used + for resolving automatic minimum sizes on *replaced* elements. However, + note that we do "transfer" sizes through the aspect ratio, as part of + computing the content size suggestion and/or flex base size. --> + + <!-- In the following four flex containers, the aspect-ratio works with border-box. --> + <div class="flexContainer" style="height: auto;"> + <!-- The border-box width 25px is transferred to the main axis, + yielding a resolved flex base size (border-box) of 200px. --> + <div class="item" style="min-height:0; width: 25px; aspect-ratio: 1/8;"><div></div></div> + </div> + + <div class="flexContainer"> + <!-- The content size suggestion is 190px, i.e. the height of the item's + child div. --> + <div class="item" style="width: 25px; aspect-ratio: 1/1;"><div></div></div> + </div> + + <div class="flexContainer"> + <!-- The content size suggestion is 190px, i.e. the height of the item's + child div. --> + <div class="item" style="min-width: 25px; aspect-ratio: 1/1;"><div></div></div> + </div> + + <div class="flexContainer"> + <!-- The content size suggestion is 200px because the border-box max-width + 25px is transferred to the main axis as the upper bound of its + border-box height. --> + <div class="item" style="max-width: 25px; width: 100px; aspect-ratio: 1/8;"> + <div style="height: 500px"></div> + </div> + </div> + + <!-- In the following four flex containers, the aspect-ratio works with content-box + because its value contains 'auto'. --> + <div class="flexContainer" style="height: auto;"> + <!-- The content-box width 10px is transferred to the main axis, + yielding a resolved flex base size (content-box) of 190px. --> + <div class="item" style="min-height:0; width: 25px; aspect-ratio: auto 1/19;"><div></div></div> + </div> + + <div class="flexContainer"> + <!-- The content size suggestion is 190px, i.e. the height of the item's + child div. --> + <div class="item" style="width: 25px; aspect-ratio: auto 1/1;"><div></div></div> + </div> + + <div class="flexContainer"> + <!-- The content size suggestion is 190px, i.e. the height of the item's + child div. --> + <div class="item" style="min-width: 25px; aspect-ratio: auto 1/1;"><div></div></div> + </div> + + <div class="flexContainer"> + <!-- The content size suggestion is 190px because the content-box max-width + 10px is transferred to the main axis as the upper bound of its + content-box height.--> + <div class="item" style="max-width: 25px; width: 100px; aspect-ratio: auto 1/19;"> + <div style="height: 500px"></div> + </div> + </div> +</html> |