diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-flexbox/percentage-size.html')
-rw-r--r-- | testing/web-platform/tests/css/css-flexbox/percentage-size.html | 108 |
1 files changed, 108 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-size.html b/testing/web-platform/tests/css/css-flexbox/percentage-size.html new file mode 100644 index 0000000000..44c298672f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-size.html @@ -0,0 +1,108 @@ +<!DOCTYPE html> +<title>CSS Flexbox: Percentage size in flexbox children</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#percentage-sizing"> +<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=81809"> +<meta name="assert" content="This test checks that percentage height/width values are correctly resolved in flexbox children."> +<style> +.flexbox { + display: flex; +} +.column, .column .fixed { + height: 50px; +} +.row, .row .fixed { + width: 50px; +} +.container > div { + outline: 2px solid blue; +} +.row > div > div { + height: 20px; +} +.flexbox > div { + flex: 0 0 auto; +} +.column > .flexbox { + flex-direction: column; +} +.container > div > :nth-child(1) { + background-color: orange; +} +.container > div > :nth-child(2) { + background-color: yellow; +} +.container > div > :nth-child(3) { + background-color: salmon; +} +.container > div > :nth-child(4) { + background-color: purple; +} +</style> +<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="container row"> + <div class="flexbox"> + <div style='width: 10px; min-width: 50%;' data-expected-width=25></div> + <div style='width: 50%;' data-expected-width=25></div> + <div style='width: 10px; max-width: 50%;' data-expected-width=10></div> + <div style='min-width: 10px; width: 100px; max-width: 50%;' data-expected-width=25></div> + </div> +</div> + +<div class="container row" style='width: 100px'> + <div class="flexbox fixed"> + <div style='width: 10px; min-width: 50%;' data-expected-width=25></div> + <div style='width: 50%;' data-expected-width=25></div> + <div style='width: 10px; max-width: 50%;' data-expected-width=10></div> + <div style='min-width: 10px; width: 100px; max-width: 50%;' data-expected-width=25></div> + </div> +</div> + +<div class="container column" style='margin-bottom: 100px'> + <div class="flexbox" style="height: auto"> + <div style='height: 10px; min-height: 50%;' data-expected-height=10></div> + <div style='height: 50%;' data-expected-height=0></div> + <div style='height: 10px; max-height: 50%;' data-expected-height=10></div> + <div style='min-height: 10px; height: 100px; max-height: 50%;' data-expected-height=100></div> + </div> +</div> + +<div class="container column"> + <div class="flexbox fixed"> + <div style='height: 10px; min-height: 50%;' data-expected-height=25></div> + <div style='height: 50%;' data-expected-height=25></div> + <div style='height: 10px; max-height: 50%;' data-expected-height=10></div> + <div style='min-height: 10px; height: 100px; max-height: 50%;' data-expected-height=25></div> + </div> +</div> + +<div class="container row"> + <div class="flexbox"> + <div style="flex: 0 0 50%" data-expected-width=25></div> + </div> +</div> + +<div class="container column"> + <div class="flexbox"> + <div style="flex: 0 0 50%" data-expected-height=0></div> + </div> +</div> + +<div class="container row"> + <div class="flexbox fixed"> + <div style="flex: 0 0 50%" data-expected-width=25></div> + </div> +</div> + +<div class="container column"> + <div class="flexbox fixed"> + <div style="flex: 0 0 50%" data-expected-height=25></div> + </div> +</div> + +</body> |