diff options
| author | Yuri Kobets <yuri.kobets@gmail.com> | 2024-01-31 03:48:44 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-01-31 03:48:44 +0300 |
| commit | 6ca1ab0419e770e6d35a1ef690238773a1dafcee (patch) | |
| tree | 16df635edd594dc1d1b9d0044993e2ae4d0e0200 /test/render/flex/--multiline-shrink-to-fit.htm | |
| parent | 8c320007878795fe629de7fe1eaef9328ac9c719 (diff) | |
| parent | d85ebec101e77825e5708e58df0e2508ec4fd389 (diff) | |
Flex layout
Diffstat (limited to 'test/render/flex/--multiline-shrink-to-fit.htm')
| -rw-r--r-- | test/render/flex/--multiline-shrink-to-fit.htm | 77 |
1 files changed, 77 insertions, 0 deletions
diff --git a/test/render/flex/--multiline-shrink-to-fit.htm b/test/render/flex/--multiline-shrink-to-fit.htm new file mode 100644 index 00000000..f14c44a9 --- /dev/null +++ b/test/render/flex/--multiline-shrink-to-fit.htm @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<html> +<!-- Mirrored from test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/multiline-shrink-to-fit.htm by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 23 Dec 2023 16:15:11 GMT --> +<head><title>CSS Flexbox: multiline column flexboxes and shrink-to-fit.</title> +<link href="https://www.w3.org/TR/css-flexbox-1/#intrinsic-sizes" rel="help"> +<link href="http://test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/reference/multiline-shrink-to-fit-ref.htm" rel="match"> +<meta content="This test ensures that multiline column flexboxes shrink-to-fit works properly." name="assert"> +<style> +.flexbox { + display: flex; + background-color: #aaa; + position: relative; + flex-wrap: wrap; + flex-direction: column; + float: left; + align-content: flex-start; +} +.flexbox > * { + flex: none; +} +.flexbox :nth-child(1) { + background-color: lightblue; +} +.flexbox :nth-child(2) { + background-color: lightgreen; +} +.flexbox :nth-child(3) { + background-color: pink; +} +.flexbox :nth-child(4) { + background-color: yellow; +} +</style> +</head><body> + +<div class="flexbox"> + <div style="width: 100px; height: 20px"></div> + <div style="width: 100px; height: 10px"></div> + <div style="width: 100px; height: 10px"></div> + <div style="width: 100px; height: 20px"></div> +</div> +<p style="clear:left">The grey background should be 100px wide.</p> + +<div style="height: 30px" class="flexbox"> + <div style="width: 100px; height: 20px"></div> + <div style="width: 100px; height: 10px"></div> + <div style="width: 100px; height: 10px"></div> + <div style="width: 100px; height: 20px"></div> +</div> +<p style="clear:left">The grey background should be 100px wide.</p> + +<div style="width: 150px"> +<div class="flexbox"> + <div style="width: 100px; height: 20px"></div> + <div style="width: 100px; height: 10px"></div> + <div style="width: 100px; height: 10px"></div> + <div style="width: 100px; height: 20px"></div> +</div> +</div> +<p style="clear:left">The grey background should be 100px wide.</p> + +<div style="width: 150px"> +<div style="height: 35px" class="flexbox"> + <div style="width: 100px; height: 20px"></div> + <div style="width: 100px; height: 10px"></div> + <div style="width: 100px; height: 10px"></div> + <div style="width: 100px; height: 20px"></div> +</div> +</div> +<p style="clear:left">The grey background should be 100px wide and 5px should +stick out the bottom.</p> + + + +</body> +<!-- Mirrored from test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/multiline-shrink-to-fit.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 |