diff options
Diffstat (limited to 'test/render/flex/flexbox-align-self-baseline-horiz-005.htm')
| -rw-r--r-- | test/render/flex/flexbox-align-self-baseline-horiz-005.htm | 58 |
1 files changed, 58 insertions, 0 deletions
diff --git a/test/render/flex/flexbox-align-self-baseline-horiz-005.htm b/test/render/flex/flexbox-align-self-baseline-horiz-005.htm new file mode 100644 index 00000000..dfc3d606 --- /dev/null +++ b/test/render/flex/flexbox-align-self-baseline-horiz-005.htm @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- Testcase for behavior of the 'baseline' value for align-items (and + align-self, implicitly), in a wrap-reverse multi-line flex container. + This test baseline-aligns variously-sized flex items, and the container's + vertical size depends on the aggregate post-alignment height of its items. + --><html> + +<!-- Mirrored from test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/flexbox-align-self-baseline-horiz-005.htm by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 23 Dec 2023 16:15:11 GMT --> +<head> + <title>CSS Test: Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self' in a multi-line flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"> + <link rel="match" href="http://test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/reference/flexbox-align-self-baseline-horiz-005-ref.htm"> + <style> + .flexbox { + display: flex; + flex-wrap: wrap-reverse; + align-items: baseline; + width: 90px; + } + + .flexbox > * { + width: 28px; /* 3 items per Flex Line */ + background: yellow; + border: 1px solid black; + } + + .big { font: 24px sans-serif; } + .medium { font: 14px sans-serif; } + .small { font: 8px sans-serif; } + + </style> + </head> + <body> + <div class="flexbox"> + <!-- First flex line: Just 3 different sizes of text --> + <div class="big">a</div> + <div class="small">b</div> + <div class="medium">c</div> + + <!-- Second flex line: different margin/padding amounts on each item, + and one non-baseline-aligned item.--> + <div class="medium" style="padding-top: 10px">d</div> + <div class="medium" style="margin-bottom: 8px">e</div> + <div class="medium" style="align-self: stretch">f</div> + + <!-- Third flex line: other margin/padding amounts on each item --> + <div class="small" style="margin-top: 20px">g</div> + <div class="big">h</div> + <div class="medium" style="padding-bottom: 6px">i</div> + </div> + </body> + +<!-- Mirrored from test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/flexbox-align-self-baseline-horiz-005.htm by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 23 Dec 2023 16:15:11 GMT --> +</html>
\ No newline at end of file |