diff options
Diffstat (limited to 'tests')
5 files changed, 385 insertions, 0 deletions
diff --git a/tests/wpt/meta/MANIFEST.json b/tests/wpt/meta/MANIFEST.json index c847669c619..f428e76b966 100644 --- a/tests/wpt/meta/MANIFEST.json +++ b/tests/wpt/meta/MANIFEST.json @@ -586672,6 +586672,20 @@ {} ] ], + "flex-container-max-content-002.tentative.html": [ + "77a074b153a3b3fcb47c5665bab614c1720a73d2", + [ + null, + {} + ] + ], + "flex-container-min-content-002.tentative.html": [ + "92d37e3b9d8db7b57b813b49c26a3e9cd03b5179", + [ + null, + {} + ] + ], "flex-direction-column-overlap-001.html": [ "4d483a44fc630e46ddbe75ca79d8246eed67a94d", [ diff --git a/tests/wpt/meta/css/css-flexbox/flex-container-max-content-002.tentative.html.ini b/tests/wpt/meta/css/css-flexbox/flex-container-max-content-002.tentative.html.ini new file mode 100644 index 00000000000..8b9bd7fdf97 --- /dev/null +++ b/tests/wpt/meta/css/css-flexbox/flex-container-max-content-002.tentative.html.ini @@ -0,0 +1,12 @@ +[flex-container-max-content-002.tentative.html] + [.flex 2] + expected: FAIL + + [.flex 3] + expected: FAIL + + [.flex 5] + expected: FAIL + + [.flex 6] + expected: FAIL diff --git a/tests/wpt/meta/css/css-flexbox/flex-container-min-content-002.tentative.html.ini b/tests/wpt/meta/css/css-flexbox/flex-container-min-content-002.tentative.html.ini new file mode 100644 index 00000000000..408a853b460 --- /dev/null +++ b/tests/wpt/meta/css/css-flexbox/flex-container-min-content-002.tentative.html.ini @@ -0,0 +1,21 @@ +[flex-container-min-content-002.tentative.html] + [.flex 2] + expected: FAIL + + [.flex 3] + expected: FAIL + + [.flex 5] + expected: FAIL + + [.flex 6] + expected: FAIL + + [.flex 13] + expected: FAIL + + [.flex 14] + expected: FAIL + + [.flex 15] + expected: FAIL diff --git a/tests/wpt/tests/css/css-flexbox/flex-container-max-content-002.tentative.html b/tests/wpt/tests/css/css-flexbox/flex-container-max-content-002.tentative.html new file mode 100644 index 00000000000..77a074b153a --- /dev/null +++ b/tests/wpt/tests/css/css-flexbox/flex-container-max-content-002.tentative.html @@ -0,0 +1,169 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Flex Container Max-Content Sizes</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#intrinsic-main-sizes" + title="9.9.1. Flex Container Intrinsic Main Sizes"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#intrinsic-cross-sizes" + title="9.9.2. Flex Container Intrinsic Cross Sizes"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/12123"> + +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<style> +.flex { + display: inline-flex; + vertical-align: top; + border: 5px solid magenta; + width: max-content; + height: max-content; +} +.flex.min { + width: 0; + height: 0; + min-width: max-content; + min-height: max-content; +} +.flex.max { + width: 200px; + height: 200px; + max-width: max-content; + max-height: max-content; +} +.flex > div { + font: 25px/1 Ahem; + border: 5px solid cyan; +} +</style> + +<!-- Single-line row flex container --> +<div class="flex" style="flex-flow: row nowrap" + data-expected-width="45" data-expected-height="45"> + <div style="width: 25px; height: 25px">X</div> +</div> +<div class="flex min" style="flex-flow: row nowrap" + data-expected-width="45" data-expected-height="45"> + <div style="width: 25px; height: 25px">X</div> +</div> +<div class="flex max" style="flex-flow: row nowrap" + data-expected-width="45" data-expected-height="45"> + <div style="width: 25px; height: 25px">X</div> +</div> + +<div class="flex" style="flex-flow: row nowrap" + data-expected-width="180" data-expected-height="45"> + <div data-expected-width="85" data-expected-height="35">X X</div> + <div data-expected-width="85" data-expected-height="35">X X</div> +</div> +<div class="flex min" style="flex-flow: row nowrap" + data-expected-width="180" data-expected-height="45"> + <div data-expected-width="85" data-expected-height="35">X X</div> + <div data-expected-width="85" data-expected-height="35">X X</div> +</div> +<div class="flex max" style="flex-flow: row nowrap" + data-expected-width="180" data-expected-height="45"> + <div data-expected-width="85" data-expected-height="35">X X</div> + <div data-expected-width="85" data-expected-height="35">X X</div> +</div> + +<hr> + +<!-- Single-line column flex container --> +<div class="flex" style="flex-flow: column nowrap" + data-expected-width="45" data-expected-height="45"> + <div style="width: 25px; height: 25px">X</div> +</div> +<div class="flex min" style="flex-flow: column nowrap" + data-expected-width="45" data-expected-height="45"> + <div style="width: 25px; height: 25px">X</div> +</div> +<div class="flex max" style="flex-flow: column nowrap" + data-expected-width="45" data-expected-height="45"> + <div style="width: 25px; height: 25px">X</div> +</div> + +<div class="flex" style="flex-flow: column nowrap" + data-expected-width="95" data-expected-height="80"> + <div data-expected-width="85" data-expected-height="35">X X</div> + <div data-expected-width="85" data-expected-height="35">X X</div> +</div> +<div class="flex min" style="flex-flow: column nowrap" + data-expected-width="95" data-expected-height="80"> + <div data-expected-width="85" data-expected-height="35">X X</div> + <div data-expected-width="85" data-expected-height="35">X X</div> +</div> +<div class="flex max" style="flex-flow: column nowrap" + data-expected-width="95" data-expected-height="80"> + <div data-expected-width="85" data-expected-height="35">X X</div> + <div data-expected-width="85" data-expected-height="35">X X</div> +</div> + +<hr> + +<!-- Multi-line row flex container --> +<div class="flex" style="flex-flow: row wrap" + data-expected-width="45" data-expected-height="45"> + <div style="width: 25px; height: 25px">X</div> +</div> +<div class="flex min" style="flex-flow: row wrap" + data-expected-width="45" data-expected-height="45"> + <div style="width: 25px; height: 25px">X</div> +</div> +<div class="flex max" style="flex-flow: row wrap" + data-expected-width="45" data-expected-height="45"> + <div style="width: 25px; height: 25px">X</div> +</div> + +<div class="flex" style="flex-flow: row wrap" + data-expected-width="180" data-expected-height="45"> + <div data-expected-width="85" data-expected-height="35">X X</div> + <div data-expected-width="85" data-expected-height="35">X X</div> +</div> +<div class="flex min" style="flex-flow: row wrap" + data-expected-width="180" data-expected-height="45"> + <div data-expected-width="85" data-expected-height="35">X X</div> + <div data-expected-width="85" data-expected-height="35">X X</div> +</div> +<div class="flex max" style="flex-flow: row wrap" + data-expected-width="180" data-expected-height="45"> + <div data-expected-width="85" data-expected-height="35">X X</div> + <div data-expected-width="85" data-expected-height="35">X X</div> +</div> + +<hr> + +<!-- Multi-line column flex container --> +<div class="flex" style="flex-flow: column wrap" + data-expected-width="45" data-expected-height="45"> + <div style="width: 25px; height: 25px">X</div> +</div> +<div class="flex min" style="flex-flow: column wrap" + data-expected-width="45" data-expected-height="45"> + <div style="width: 25px; height: 25px">X</div> +</div> +<div class="flex max" style="flex-flow: column wrap" + data-expected-width="45" data-expected-height="45"> + <div style="width: 25px; height: 25px">X</div> +</div> + +<div class="flex" style="flex-flow: column wrap" + data-expected-width="95" data-expected-height="80"> + <div data-expected-width="85" data-expected-height="35">X X</div> + <div data-expected-width="85" data-expected-height="35">X X</div> +</div> +<div class="flex min" style="flex-flow: column wrap" + data-expected-width="95" data-expected-height="80"> + <div data-expected-width="85" data-expected-height="35">X X</div> + <div data-expected-width="85" data-expected-height="35">X X</div> +</div> +<div class="flex max" style="flex-flow: column wrap" + data-expected-width="95" data-expected-height="80"> + <div data-expected-width="85" data-expected-height="35">X X</div> + <div data-expected-width="85" data-expected-height="35">X X</div> +</div> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script> +checkLayout(".flex"); +</script> diff --git a/tests/wpt/tests/css/css-flexbox/flex-container-min-content-002.tentative.html b/tests/wpt/tests/css/css-flexbox/flex-container-min-content-002.tentative.html new file mode 100644 index 00000000000..92d37e3b9d8 --- /dev/null +++ b/tests/wpt/tests/css/css-flexbox/flex-container-min-content-002.tentative.html @@ -0,0 +1,169 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Flex Container Min-Content Sizes</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#intrinsic-main-sizes" + title="9.9.1. Flex Container Intrinsic Main Sizes"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#intrinsic-cross-sizes" + title="9.9.2. Flex Container Intrinsic Cross Sizes"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/12123"> + +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<style> +.flex { + display: inline-flex; + vertical-align: top; + border: 5px solid magenta; + width: min-content; + height: min-content; +} +.flex.min { + width: 0; + height: 0; + min-width: min-content; + min-height: min-content; +} +.flex.max { + width: 200px; + height: 200px; + max-width: min-content; + max-height: min-content; +} +.flex > div { + font: 25px/1 Ahem; + border: 5px solid cyan; +} +</style> + +<!-- Single-line row flex container --> +<div class="flex" style="flex-flow: row nowrap" + data-expected-width="45" data-expected-height="45"> + <div style="width: 25px; height: 25px">X</div> +</div> +<div class="flex min" style="flex-flow: row nowrap" + data-expected-width="45" data-expected-height="45"> + <div style="width: 25px; height: 25px">X</div> +</div> +<div class="flex max" style="flex-flow: row nowrap" + data-expected-width="45" data-expected-height="45"> + <div style="width: 25px; height: 25px">X</div> +</div> + +<div class="flex" style="flex-flow: row nowrap" + data-expected-width="80" data-expected-height="70"> + <div data-expected-width="35" data-expected-height="60">X X</div> + <div data-expected-width="35" data-expected-height="60">X X</div> +</div> +<div class="flex min" style="flex-flow: row nowrap" + data-expected-width="80" data-expected-height="70"> + <div data-expected-width="35" data-expected-height="60">X X</div> + <div data-expected-width="35" data-expected-height="60">X X</div> +</div> +<div class="flex max" style="flex-flow: row nowrap" + data-expected-width="80" data-expected-height="70"> + <div data-expected-width="35" data-expected-height="60">X X</div> + <div data-expected-width="35" data-expected-height="60">X X</div> +</div> + +<hr> + +<!-- Single-line column flex container --> +<div class="flex" style="flex-flow: column nowrap" + data-expected-width="45" data-expected-height="45"> + <div style="width: 25px; height: 25px">X</div> +</div> +<div class="flex min" style="flex-flow: column nowrap" + data-expected-width="45" data-expected-height="45"> + <div style="width: 25px; height: 25px">X</div> +</div> +<div class="flex max" style="flex-flow: column nowrap" + data-expected-width="45" data-expected-height="45"> + <div style="width: 25px; height: 25px">X</div> +</div> + +<div class="flex" style="flex-flow: column nowrap" + data-expected-width="45" data-expected-height="130"> + <div data-expected-width="35" data-expected-height="60">X X</div> + <div data-expected-width="35" data-expected-height="60">X X</div> +</div> +<div class="flex min" style="flex-flow: column nowrap" + data-expected-width="45" data-expected-height="130"> + <div data-expected-width="35" data-expected-height="60">X X</div> + <div data-expected-width="35" data-expected-height="60">X X</div> +</div> +<div class="flex max" style="flex-flow: column nowrap" + data-expected-width="45" data-expected-height="130"> + <div data-expected-width="35" data-expected-height="60">X X</div> + <div data-expected-width="35" data-expected-height="60">X X</div> +</div> + +<hr> + +<!-- Multi-line row flex container --> +<div class="flex" style="flex-flow: row wrap" + data-expected-width="45" data-expected-height="45"> + <div style="width: 25px; height: 25px">X</div> +</div> +<div class="flex min" style="flex-flow: row wrap" + data-expected-width="45" data-expected-height="45"> + <div style="width: 25px; height: 25px">X</div> +</div> +<div class="flex max" style="flex-flow: row wrap" + data-expected-width="45" data-expected-height="45"> + <div style="width: 25px; height: 25px">X</div> +</div> + +<div class="flex" style="flex-flow: row wrap" + data-expected-width="45" data-expected-height="130"> + <div data-expected-width="35" data-expected-height="60">X X</div> + <div data-expected-width="35" data-expected-height="60">X X</div> +</div> +<div class="flex min" style="flex-flow: row wrap" + data-expected-width="45" data-expected-height="130"> + <div data-expected-width="35" data-expected-height="60">X X</div> + <div data-expected-width="35" data-expected-height="60">X X</div> +</div> +<div class="flex max" style="flex-flow: row wrap" + data-expected-width="45" data-expected-height="130"> + <div data-expected-width="35" data-expected-height="60">X X</div> + <div data-expected-width="35" data-expected-height="60">X X</div> +</div> + +<hr> + +<!-- Multi-line column flex container --> +<div class="flex" style="flex-flow: column wrap" + data-expected-width="45" data-expected-height="45"> + <div style="width: 25px; height: 25px">X</div> +</div> +<div class="flex min" style="flex-flow: column wrap" + data-expected-width="45" data-expected-height="45"> + <div style="width: 25px; height: 25px">X</div> +</div> +<div class="flex max" style="flex-flow: column wrap" + data-expected-width="45" data-expected-height="45"> + <div style="width: 25px; height: 25px">X</div> +</div> + +<div class="flex" style="flex-flow: column wrap" + data-expected-width="45" data-expected-height="130"> + <div data-expected-width="35" data-expected-height="60">X X</div> + <div data-expected-width="35" data-expected-height="60">X X</div> +</div> +<div class="flex min" style="flex-flow: column wrap" + data-expected-width="45" data-expected-height="130"> + <div data-expected-width="35" data-expected-height="60">X X</div> + <div data-expected-width="35" data-expected-height="60">X X</div> +</div> +<div class="flex max" style="flex-flow: column wrap" + data-expected-width="45" data-expected-height="130"> + <div data-expected-width="35" data-expected-height="60">X X</div> + <div data-expected-width="35" data-expected-height="60">X X</div> +</div> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script> +checkLayout(".flex"); +</script> |