diff options
Diffstat (limited to 'tests/wpt/web-platform-tests/css/css-flexbox')
12 files changed, 628 insertions, 2 deletions
diff --git a/tests/wpt/web-platform-tests/css/css-flexbox/columns-center-with-margins-and-wrap-001.html b/tests/wpt/web-platform-tests/css/css-flexbox/columns-center-with-margins-and-wrap-001.html new file mode 100644 index 00000000000..7bdc28776b6 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-flexbox/columns-center-with-margins-and-wrap-001.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Flexbox: Auto margins on column flex direction with wrap</title> +<link href="support/flexbox.css" rel="stylesheet"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-column"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-wrap"> +<link rel="match" href="reference/columns-center-with-margins-and-wrap-001-ref.html"> +<meta name="assert" content="This test ensures that auto margins for column flows are correctly calculated"/> + <style> + .flexbox { + border: 1px solid black; + width: 400px; + height: 200px; + } + .item1 { + margin: 0 auto; + background: lightblue; + } + .item2 { + background: lime; + } + </style> +</head> +<body> + <p>The test passes if the flex items are properly centered in each column</p> + <div class="flexbox column wrap"> + <div class="item1">centeredWithMargins</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + </div> +</body> +</html> diff --git a/tests/wpt/web-platform-tests/css/css-flexbox/cross-axis-scrollbar.html b/tests/wpt/web-platform-tests/css/css-flexbox/cross-axis-scrollbar.html new file mode 100644 index 00000000000..6bb32517556 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-flexbox/cross-axis-scrollbar.html @@ -0,0 +1,143 @@ +<!DOCTYPE html> +<html> +<title>CSS Flexbox: Scrollbars and flex-direction.</title> +<link href="support/flexbox.css" rel="stylesheet"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> +<link rel="help" href="https://www.w3.org/TR/css-overflow-4/#classic-scrollbars"> +<link rel="match" href="reference/cross-axis-scrollbar-ref.html"> +<meta name="assert" content="This test ensures that flexbox scrollbars take flex-direction into account."/> +<style> +body { + margin: 0; +} + +.flexbox { + background-color: red; +} + +.vertical-rl { + writing-mode: vertical-rl; +} + +.vertical-lr { + writing-mode: vertical-lr; +} + +.column > div { + flex: none; + background-color: green; + width: 100px; + height: 10px; +} + +.row > div { + background-color: green; + flex: 1; + height: 50px; + min-height: 0; +} + +.vertical-lr > .column > div { + flex: none; + height: 50px; + width: 20px; +} + +.vertical-lr > .row > div { + flex: 1; + width: 100px; +} + +</style> +<body> + +This test passes if no red is showing. + +<div style="position: relative;"> + +<div style="position: absolute; top: 0; left: 0;"> +<div class="flexbox column" style="overflow-x: scroll; overflow-y: hidden; border-bottom: 10px solid green;"> + <div class="align-self-flex-start"></div> + <div class="align-self-center"></div> + <div class="align-self-flex-end"></div> + <div class="align-self-baseline"></div> + <div class="align-self-stretch"></div> +</div> +</div> + +<div style="position: absolute; top: 0; left: 150px;"> +<div class="flexbox column" style="overflow-y: scroll; overflow-x: hidden; border-right: 10px solid green;"> + <div class="align-self-flex-start"></div> + <div class="align-self-center"></div> + <div class="align-self-flex-end"></div> + <div class="align-self-baseline"></div> + <div class="align-self-stretch"></div> +</div> +</div> + +<div style="position: absolute; top:0; left: 300px" class="vertical-lr"> +<div class="flexbox column" style="overflow-y: scroll; overflow-x: hidden; border-right: 10px solid green;"> + <div class="align-self-flex-start"></div> + <div class="align-self-center"></div> + <div class="align-self-flex-end"></div> + <div class="align-self-baseline"></div> + <div class="align-self-flex-start"></div> +</div> +</div> + +<div style="position: absolute; top:0; left: 450px;" class="vertical-lr"> +<div class="flexbox column" style="overflow-x: scroll; overflow-y: hidden; border-bottom: 10px solid green;"> + <div class="align-self-flex-start"></div> + <div class="align-self-center"></div> + <div class="align-self-flex-end"></div> + <div class="align-self-baseline"></div> + <div class="align-self-flex-start"></div> +</div> +</div> + +<div style="height: 20px; width: 100px; position: absolute; top: 100px; left: 0"> +<div class="flexbox row" style="overflow-x: scroll; overflow-y: hidden; border-bottom: 10px solid green;"> + <div class="align-self-flex-start"></div> + <div class="align-self-center"></div> + <div class="align-self-flex-end"></div> + <div class="align-self-baseline"></div> + <div class="align-self-stretch"></div> +</div> +</div> + +<div style="height: 20px; width: 100px; position: absolute; top: 100px; left: 150px"> +<div class="flexbox row" style="overflow-y: scroll; overflow-x: hidden; border-right: 10px solid green;"> + <div class="align-self-flex-start"></div> + <div class="align-self-center"></div> + <div class="align-self-flex-end"></div> + <div class="align-self-baseline"></div> + <div class="align-self-stretch"></div> +</div> +</div> + +<div style="height: 50px; width: 50px; position: absolute; top: 100px; left: 300px" class="vertical-lr"> +<div class="flexbox row" style="overflow-x: scroll; overflow-y: hidden; border-bottom: 10px solid green;"> + <div class="align-self-flex-start"></div> + <div class="align-self-center"></div> + <div class="align-self-flex-end"></div> + <div class="align-self-baseline"></div> + <div class="align-self-stretch"></div> +</div> +</div> + +<div style="height: 50px; width: 50px; position: absolute; top: 100px; left: 450px" class="vertical-lr"> +<div class="flexbox row" style="overflow-y: scroll; overflow-x: hidden; border-right: 10px solid green;"> + <div class="align-self-flex-start"></div> + <div class="align-self-center"></div> + <div class="align-self-flex-end"></div> + <div class="align-self-baseline"></div> + <div class="align-self-stretch"></div> +</div> +</div> + +</div> +<!-- FIXME: Add tests for vertical-rl. Setting the logical +bottom border on these tests cause additional scrollbars to appear. --> + +</body> +</html> diff --git a/tests/wpt/web-platform-tests/css/css-flexbox/flex-flow-013.html b/tests/wpt/web-platform-tests/css/css-flexbox/flex-flow-013.html new file mode 100644 index 00000000000..da6110a1c41 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-flexbox/flex-flow-013.html @@ -0,0 +1,158 @@ +<!DOCTYPE html> +<html> +<title>CSS Flexbox Test: flex-flow - column column-reverse and row-reverse</title> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow"> +<meta name="assert" content="Test ensures that setting 'flex-flow' property to either 'column', +'column-reverse' or 'row-reverse' in combination with different 'direction' and 'writing-mode' +values works properly."> +<style> +body { + margin: 0; +} +.flexbox { + width: 600px; + display: flex; + background-color: grey; +} +.flexbox > div { + height: 20px; + width: 20px; + border: 0; +} + +.rtl { + direction: rtl; +} + +.vertical-rl, .vertical-lr, .column, .column-reverse { + height: 600px; +} + +.vertical-rl { + writing-mode: vertical-rl; +} + +.vertical-lr { + writing-mode: vertical-lr; +} + +.row-reverse { + flex-flow: row-reverse; +} + +.column { + flex-flow: column; +} + +.column-reverse { + flex-flow: column-reverse; +} + +.flexbox > .first { + background-color: blue; +} +.flexbox > .second { + background-color: green; +} +.flexbox > .third { + background-color: red; +} + +.flexbox > div > div { + background-color: orange; + height: 10px; +} +</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="flexbox"> + <div class="first" data-expected-width="75" data-offset-x="0" style="flex: 1 0 0; margin: 0 auto;"></div> + <div class="second" data-expected-width="350" data-offset-x="75" style="flex: 2 0 0; padding-inline-start: 200px"><div data-offset-x="275"></div></div> + <div class="third" data-expected-width="75" data-offset-x="425" style="flex: 1 0 0; margin-inline-end: 100px;"></div> +</div> + +<div class="flexbox rtl"> + <div class="first" data-expected-width="75" data-offset-x="525" style="flex: 1 0 0; margin: 0 auto;"></div> + <div class="second" data-expected-width="350" data-offset-x="175" style="flex: 2 0 0; padding-inline-start: 200px"><div data-offset-x="175"></div></div> + <div class="third" data-expected-width="75" data-offset-x="100" style="flex: 1 0 0; margin-inline-end: 100px;"></div> +</div> + +<div class="flexbox row-reverse"> + <div class="first" data-expected-width="75" data-offset-x="525" style="flex: 1 0 0; margin: 0 auto;"></div> + <div class="second" data-expected-width="350" data-offset-x="175" style="flex: 2 0 0; padding-inline-start: 200px"><div data-offset-x="375"></div></div> + <div class="third" data-expected-width="75" data-offset-x="0" style="flex: 1 0 0; margin-inline-end: 100px;"></div> +</div> + +<div class="flexbox rtl row-reverse"> + <div class="first" data-expected-width="75" data-offset-x="0" style="flex: 1 0 0; margin: 0 auto;"></div> + <div class="second" data-expected-width="350" data-offset-x="75" style="flex: 2 0 0; padding-inline-start: 200px"><div data-offset-x="75"></div></div> + <div class="third" data-expected-width="75" data-offset-x="525" style="flex: 1 0 0; margin-inline-end: 100px;"></div> +</div> + +<div style="position: relative;"> +<div class="flexbox column"> + <div class="first" data-expected-height="150" data-offset-y="0" style="flex: 1 0 0; margin: auto 200px auto 150px;"></div> + <div class="second" data-expected-height="300" data-offset-y="150" style="flex: 2 0 0; padding-inline-start: 200px"><div data-offset-y="150" data-offset-x="200"></div></div> + <div class="third" data-expected-height="150" data-offset-y="450" style="flex: 1 0 0; margin-inline-end: 100px;"></div> +</div> +</div> + +<div style="position: relative;"> +<div class="flexbox column-reverse"> + <div class="first" data-expected-height="150" data-offset-y="450" style="flex: 1 0 0; margin: auto 200px auto 150px;"></div> + <div class="second" data-expected-height="300" data-offset-y="150" style="flex: 2 0 0; padding-inline-start: 200px"><div data-offset-y="150" data-offset-x="200"></div></div> + <div class="third" data-expected-height="150" data-offset-y="0" style="flex: 1 0 0; margin-inline-end: 100px;"></div> +</div> +</div> + +<div style="position: relative;"> +<div class="flexbox column rtl"> + <div class="first" data-expected-height="150" data-offset-y="0" data-offset-x="480" style="flex: 1 0 0; margin: auto 100px auto 50px;"></div> + <div class="second" data-expected-height="300" data-offset-y="150" style="flex: 2 0 0; padding-inline-start: 200px"><div data-offset-y="150" data-offset-x="380"></div></div> + <div class="third" data-expected-height="150" data-offset-y="450" data-offset-x="580" style="flex: 1 0 0; margin-inline-end: 100px;"></div> +</div> +</div> + +<div style="position: relative;"> +<div class="flexbox column-reverse rtl"> + <div class="first" data-expected-height="150" data-offset-y="450" data-offset-x="480" style="flex: 1 0 0; margin: auto 100px auto 50px;"></div> + <div class="second" data-expected-height="300" data-offset-y="150" style="flex: 2 0 0; padding-inline-start: 200px"><div data-offset-y="150" data-offset-x="380"></div></div> + <div class="third" data-expected-height="150" data-offset-y="0" data-offset-x="580" style="flex: 1 0 0; margin-inline-end: 100px;"></div> +</div> +</div> + +<div style="position: relative;"> +<div data-expected-height="600" class="flexbox vertical-lr column"> + <div class="first" data-offset-x="0" data-expected-width="500" style="flex: 1 0 0; min-width: 300px"></div> + <div class="second" data-offset-x="500" data-offset-y="100" data-expected-width="100" style="flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;"></div> +</div> +</div> + +<div style="position: relative;"> +<div data-expected-height="600" class="flexbox vertical-lr column-reverse"> + <div class="first" data-offset-x="100" data-expected-width="500" style="flex: 1 0 0; min-width: 300px"></div> + <div class="second" data-offset-x="0" data-offset-y="100" data-expected-width="100" style="flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;"></div> +</div> +</div> + +<div style="position: relative;"> +<div data-expected-height="600" class="flexbox vertical-rl column"> + <div class="first" data-offset-x="100" data-expected-width="500" style="flex: 1 0 0; min-width: 300px; margin-bottom: 100px"></div> + <div class="second" data-offset-x="0" data-offset-y="100" data-expected-width="100" style="flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;"></div> +</div> +</div> + +<div style="position: relative;"> +<div data-expected-height="600" class="flexbox vertical-rl column-reverse"> + <div class="first" data-offset-x="0" data-expected-width="500" style="flex: 1 0 0; min-width: 300px; margin-bottom: 100px"></div> + <div class="second" data-offset-x="500" data-offset-y="100" data-expected-width="100" style="flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;"></div> +</div> +</div> + +</body> +</html> diff --git a/tests/wpt/web-platform-tests/css/css-flexbox/flex-flow-auto-margins-no-available-space-assert.html b/tests/wpt/web-platform-tests/css/css-flexbox/flex-flow-auto-margins-no-available-space-assert.html new file mode 100644 index 00000000000..0b7799f2052 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-flexbox/flex-flow-auto-margins-no-available-space-assert.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>CSS Flexbox: flex-flow auto margin with no available space</title> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-shrink-property"> +<link rel="help" href="https://crbug.com/380201"> +<meta name="assert" content="This test checks that a flexbox doesn't shrink below border/padding +when stretching children with no available space."> +<style> +* { + display: flex; + padding-bottom: 20pt; + min-height: 0.7%; + margin-top: 6000%; + flex-shrink: 0; + flex-basis: 7000%; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<abbr data-expected-height=30210272> + <input></input> +</abbr> +<script> + window.checkLayout('abbr'); +</script>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-flexbox/gap-009-ltr.html b/tests/wpt/web-platform-tests/css/css-flexbox/gap-009-ltr.html index 43a4cefc72e..462b5b69c66 100644 --- a/tests/wpt/web-platform-tests/css/css-flexbox/gap-009-ltr.html +++ b/tests/wpt/web-platform-tests/css/css-flexbox/gap-009-ltr.html @@ -5,7 +5,7 @@ <link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters"> <link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> <link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy"> -<link rel="match" href="gap-008-ltr-ref.html"> +<link rel="match" href="gap-009-ltr-ref.html"> <meta name="flags" content=""> <meta name="assert" content="The 'gap' property enables putting space exclusively between items"> <style> diff --git a/tests/wpt/web-platform-tests/css/css-flexbox/gap-010-ltr.html b/tests/wpt/web-platform-tests/css/css-flexbox/gap-010-ltr.html index f57a167e16d..85dba78db5a 100644 --- a/tests/wpt/web-platform-tests/css/css-flexbox/gap-010-ltr.html +++ b/tests/wpt/web-platform-tests/css/css-flexbox/gap-010-ltr.html @@ -5,7 +5,7 @@ <link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters"> <link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> <link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy"> -<link rel="match" href="gap-008-ltr-ref.html"> +<link rel="match" href="gap-010-ltr-ref.html"> <meta name="flags" content=""> <meta name="assert" content="The 'gap' property enables putting space exclusively between items"> <style> diff --git a/tests/wpt/web-platform-tests/css/css-flexbox/inline-flex.html b/tests/wpt/web-platform-tests/css/css-flexbox/inline-flex.html new file mode 100644 index 00000000000..1f21ae35a89 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-flexbox/inline-flex.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<title>CSS Flexbox: Ensure proper formatting with display: inline-flex</title> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-containers"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-property"> +<meta name="assert" content="This test checks that inline-flex generates a flex container box that is inline-level when placed in flow layout."> +<style> +#testcase > div { + height: 50px; + width: 50px; + background-color: green; + outline: 2px solid darkgreen; +} +#testcase > div > div { + flex: 1; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('#testcase')"> +<div id=log></div> +<p>This test passes if the three green boxes are on the same horizontal line.</p> + +<div id="testcase" style="position: relative"> +<div data-offset-y="0" data-offset-x="0" data-expected-width="50" data-expected-height="50" style="display: inline-block"> +</div><div data-offset-y="0" data-offset-x="50" data-expected-width="50" data-expected-height="50" style="display: inline-flex;"> + <div data-expected-width="25"></div> + <div data-expected-width="25"></div> +</div><div data-offset-y="0" data-offset-x="100" data-expected-width="50" data-expected-height="50" style="display: inline-block"></div> +</div> +</body> +</html> diff --git a/tests/wpt/web-platform-tests/css/css-flexbox/intrinsic-min-width-applies-with-fixed-width.html b/tests/wpt/web-platform-tests/css/css-flexbox/intrinsic-min-width-applies-with-fixed-width.html new file mode 100644 index 00000000000..080169b52d7 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-flexbox/intrinsic-min-width-applies-with-fixed-width.html @@ -0,0 +1,81 @@ +<!DOCTYPE html> +<title>CSS Flexbox: Proper min-width intrinsic size with display: flex</title> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-containers"> +<link rel="help" href="https://www.w3.org/TR/CSS2/visudet.html#min-max-widths"> +<meta name="assert" content="This test checks that min-width intrinsic size still applies if a fixed width is set."> +<style> +.min-content { + width: 10px; + min-width: -webkit-min-content; + min-width: -moz-min-content; + min-width: -ie-min-content; + min-width: -o-min-content; + min-width: min-content; + outline: 2px solid; + display: flex; + flex-wrap: wrap; +} +.max-content { + width: 10px; + min-width: -webkit-max-content; + min-width: -moz-max-content; + min-width: -ie-max-content; + min-width: -o-max-content; + min-width: max-content; + outline: 2px solid; + display: flex; + flex-wrap: wrap; +} +.fit-content { + width: 10px; + min-width: -webkit-fit-content; + min-width: -moz-fit-content; + min-width: -ie-fit-content; + min-width: -o-fit-content; + min-width: fit-content; + outline: 2px solid; + display: flex; + flex-wrap: wrap; +} +.child { + width: 20px; + height: 20px; + background-color: pink; +} +div { + display: inline-block; + line-height: 0; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('body > div')"> +<div id=log></div> + +<div class="min-content" data-expected-width=20> + <div class="child"></div><div class="child"></div> +</div> + +<div class="max-content" data-expected-width=40> + <div class="child"></div><div class="child"></div> +</div> + +<div class="fit-content" data-expected-width=40> + <div class="child"></div><div class="child"></div> +</div> + +<div style="width: 30px"> + <div class="fit-content" data-expected-width=30> + <div class="child"></div><div class="child"></div> + </div> +</div> + +<div style="width: 10px"> + <div class="fit-content" data-expected-width=20> + <div class="child"></div><div class="child"></div> + </div> +</div> + +</body> diff --git a/tests/wpt/web-platform-tests/css/css-flexbox/intrinsic-width-orthogonal-writing-mode.html b/tests/wpt/web-platform-tests/css/css-flexbox/intrinsic-width-orthogonal-writing-mode.html new file mode 100644 index 00000000000..79ce88a64c2 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-flexbox/intrinsic-width-orthogonal-writing-mode.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<title>CSS Flexbox: container widths & ortho items</title> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-containers"> +<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#block-flow"> +<link href="support/flexbox.css" rel="stylesheet"> +<meta name="assert" content="the correct width/height of ortho children is used to size flex containers"> +<style> +.vertical { + writing-mode: vertical-lr; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.inline-flexbox')"> +<div id=log></div> + +<div class="inline-flexbox" data-expected-width="20"> + <div class="vertical" style="width: 20px; height: 50px;"></div> +</div> + +<div class="inline-flexbox" data-expected-width="20"> + <div class="vertical" style="line-height: 20px;">Some text</div> +</div> + +<div class="inline-flexbox" data-expected-width="20"> + <span class="vertical" data-expected-width="20" style="line-height: 20px;">Some text</span> +</div> +</body>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-flexbox/justify-content_space-between.html b/tests/wpt/web-platform-tests/css/css-flexbox/justify-content_space-between-001.html index 7abfd4a6c3c..7abfd4a6c3c 100644 --- a/tests/wpt/web-platform-tests/css/css-flexbox/justify-content_space-between.html +++ b/tests/wpt/web-platform-tests/css/css-flexbox/justify-content_space-between-001.html diff --git a/tests/wpt/web-platform-tests/css/css-flexbox/reference/columns-center-with-margins-and-wrap-001-ref.html b/tests/wpt/web-platform-tests/css/css-flexbox/reference/columns-center-with-margins-and-wrap-001-ref.html new file mode 100644 index 00000000000..415a36f42de --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-flexbox/reference/columns-center-with-margins-and-wrap-001-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> +<link href="../support/flexbox.css" rel="stylesheet"> + <style> + .flexbox { + border: 1px solid black; + width: 400px; + height: 200px; + } + .item1 { + background: lightblue; + } + .item2 { + background: lime; + } + </style> +</head> +<body> + <p>The test passes if the flex items are properly centered in each column</p> + <div class="flexbox column wrap"> + <div class="item1 align-self-center">centeredWithMargins</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + </div> +</body> +</html> diff --git a/tests/wpt/web-platform-tests/css/css-flexbox/reference/cross-axis-scrollbar-ref.html b/tests/wpt/web-platform-tests/css/css-flexbox/reference/cross-axis-scrollbar-ref.html new file mode 100644 index 00000000000..f0a3225502e --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-flexbox/reference/cross-axis-scrollbar-ref.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html> +<head> +<style> +body { + margin: 0; +} + +.testcase { + position: absolute; +} + +.testcase div { + background-color: green; +} +</style> +</head> +<body> +This test passes if no red is showing. + +<div style="position: relative; background-color: transparent;"> + +<div class="testcase" style="top:0; left: 0"> + <div style="width: 100px; height: 50px"></div> + <div style="width: 100px; overflow-x: scroll"></div> + <div style="width: 100px; height: 10px; position: relative; z-index: -1"></div> +</div> + +<div class="testcase" style="height: 50px; writing-mode: vertical-lr; top: 0; left: 150px"> + <div style="width: 100px"></div> + <div style="overflow-y: scroll"></div> + <div style="width: 10px; position: relative; z-index: -1"></div> +</div> + +<div class="testcase" style="height: 50px; writing-mode: vertical-lr; top: 0; left: 300px"> + <div style="width: 100px"></div> + <div style="overflow-y: scroll"></div> + <div style="width: 10px; position: relative; z-index: -1"></div> +</div> + +<div class="testcase" style="top: 0; left: 450px"> + <div style="width: 100px; height: 50px"></div> + <div style="width: 100px; overflow-x: scroll"></div> + <div style="width: 100px; height: 10px; position: relative; z-index: -1"></div> +</div> + +<div class="testcase" style="top: 100px; left: 0"> + <div style="width: 100px; height: 50px; "></div> + <div style="width: 100px; overflow-x: scroll"></div> + <div style="width: 100px; height: 10px; position: relative; z-index: -1"></div> +</div> + +<div class="testcase" style="height: 50px; writing-mode: vertical-lr; top: 100px; left: 150px"> + <div style="width: 90px; overflow-y: scroll"></div> + <div style="width: 10px; position: relative; z-index: -1"></div> +</div> + +<div class="testcase" style="top: 100px; left: 300px"> + <div style="width: 100px; height: 40px; overflow-x: scroll"></div> + <div style="width: 100px; height: 10px; position: relative; z-index: -1"></div> +</div> + +<div class="testcase" style="height: 50px; writing-mode: vertical-lr; top: 100px; left: 450px"> + <div style="width: 100px"></div> + <div style="overflow-y: scroll"></div> + <div style="width: 10px; position: relative; z-index: -1"></div> +</div> + + +</body> +</html> |