diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-flexbox')
1807 files changed, 87260 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-flexbox/META.yml b/testing/web-platform/tests/css/css-flexbox/META.yml new file mode 100644 index 0000000000..503fc08f57 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/META.yml @@ -0,0 +1,8 @@ +spec: https://drafts.csswg.org/css-flexbox/ +suggested_reviewers: + - kojiishi + - plinss + - cbiesinger + - fantasai + - rachelandrew + - tabatkins diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/abspos-autopos-htb-ltr.html b/testing/web-platform/tests/css/css-flexbox/abspos/abspos-autopos-htb-ltr.html new file mode 100644 index 0000000000..53229296ff --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/abspos-autopos-htb-ltr.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>Absolutely positioned child with auto position in vertical-rl ltr flexbox</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#abspos-items" title="4.1. Absolutely-Positioned Flex Children"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> +<style> + .flex { + display: flex; + position: relative; + writing-mode: horizontal-tb; + direction: ltr; + width: 100px; + height: 100px; + border: solid white; + border-left-width: 20px; + left: -20px; + border-top-width: 5px; + top: -5px; + border-right-width: 10px; + border-bottom-width: 15px; + background: red; + } + .flex > div { + position: absolute; + width: 100%; + height: 100%; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="flex"> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/abspos-autopos-htb-rtl.html b/testing/web-platform/tests/css/css-flexbox/abspos/abspos-autopos-htb-rtl.html new file mode 100644 index 0000000000..1788c0d3b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/abspos-autopos-htb-rtl.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>Absolutely positioned child with auto position in vertical-rl ltr flexbox</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#abspos-items" title="4.1. Absolutely-Positioned Flex Children"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> +<style> + .flex { + display: flex; + position: relative; + writing-mode: horizontal-tb; + direction: rtl; + width: 100px; + height: 100px; + border: solid white; + border-left-width: 20px; + left: -20px; + border-top-width: 5px; + top: -5px; + border-right-width: 10px; + border-bottom-width: 15px; + background: red; + } + .flex > div { + position: absolute; + width: 100%; + height: 100%; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="flex"> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/abspos-autopos-vlr-ltr.html b/testing/web-platform/tests/css/css-flexbox/abspos/abspos-autopos-vlr-ltr.html new file mode 100644 index 0000000000..c3435235aa --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/abspos-autopos-vlr-ltr.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>Absolutely positioned child with auto position in vertical-rl ltr flexbox</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#abspos-items" title="4.1. Absolutely-Positioned Flex Children"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> +<style> + .flex { + display: flex; + position: relative; + writing-mode: vertical-lr; + direction: ltr; + width: 100px; + height: 100px; + border: solid white; + border-left-width: 20px; + left: -20px; + border-top-width: 5px; + top: -5px; + border-right-width: 10px; + border-bottom-width: 15px; + background: red; + } + .flex > div { + position: absolute; + width: 100%; + height: 100%; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="flex"> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/abspos-autopos-vlr-rtl.html b/testing/web-platform/tests/css/css-flexbox/abspos/abspos-autopos-vlr-rtl.html new file mode 100644 index 0000000000..0c7b701a47 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/abspos-autopos-vlr-rtl.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>Absolutely positioned child with auto position in vertical-rl ltr flexbox</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#abspos-items" title="4.1. Absolutely-Positioned Flex Children"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> +<style> + .flex { + display: flex; + position: relative; + writing-mode: vertical-lr; + direction: rtl; + width: 100px; + height: 100px; + border: solid white; + border-left-width: 20px; + left: -20px; + border-top-width: 5px; + top: -5px; + border-right-width: 10px; + border-bottom-width: 15px; + background: red; + } + .flex > div { + position: absolute; + width: 100%; + height: 100%; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="flex"> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/abspos-autopos-vrl-ltr.html b/testing/web-platform/tests/css/css-flexbox/abspos/abspos-autopos-vrl-ltr.html new file mode 100644 index 0000000000..618bda4387 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/abspos-autopos-vrl-ltr.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>Absolutely positioned child with auto position in vertical-rl ltr flexbox</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#abspos-items" title="4.1. Absolutely-Positioned Flex Children"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> +<style> + .flex { + display: flex; + position: relative; + writing-mode: vertical-rl; + direction: ltr; + width: 100px; + height: 100px; + border: solid white; + border-left-width: 20px; + left: -20px; + border-top-width: 5px; + top: -5px; + border-right-width: 10px; + border-bottom-width: 15px; + background: red; + } + .flex > div { + position: absolute; + width: 100%; + height: 100%; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="flex"> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/abspos-autopos-vrl-rtl.html b/testing/web-platform/tests/css/css-flexbox/abspos/abspos-autopos-vrl-rtl.html new file mode 100644 index 0000000000..0c7b701a47 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/abspos-autopos-vrl-rtl.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>Absolutely positioned child with auto position in vertical-rl ltr flexbox</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#abspos-items" title="4.1. Absolutely-Positioned Flex Children"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> +<style> + .flex { + display: flex; + position: relative; + writing-mode: vertical-lr; + direction: rtl; + width: 100px; + height: 100px; + border: solid white; + border-left-width: 20px; + left: -20px; + border-top-width: 5px; + top: -5px; + border-right-width: 10px; + border-bottom-width: 15px; + background: red; + } + .flex > div { + position: absolute; + width: 100%; + height: 100%; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="flex"> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/abspos-descendent-001.html b/testing/web-platform/tests/css/css-flexbox/abspos/abspos-descendent-001.html new file mode 100644 index 0000000000..ecba51e8ef --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/abspos-descendent-001.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Flexbox: removing abspos descendents</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> +<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=167566"> +<meta name="assert" content="This test ensures that flex item's padding doesn't disappear when an abspos descendent is removed."> +<link href="../support/flexbox.css" rel="stylesheet"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script> +window.onload = function() { + document.body.offsetHeight; + + document.getElementById('to-hide').style.display = "none"; + checkLayout(".flexbox"); +}; +</script> +</head> +<body> +<div id=log></div> +<div class="flexbox" style="height: 100px;" data-expected-height="100"> + <div style="width: 100%; overflow: auto; padding-bottom: 100px; background-color: red;" data-expected-height="100"> + <div style="position: relative; height: 100px; background-color: green;" data-expected-height="100"> + <div id="to-hide" style="position: absolute;" data-expected-height="0"></div> + </div> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/dynamic-align-self-001.html b/testing/web-platform/tests/css/css-flexbox/abspos/dynamic-align-self-001.html new file mode 100644 index 0000000000..208c006d2d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/dynamic-align-self-001.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://crbug.com/1306037"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" + content="Abspos child of a flexbox moves after script changes its alignment."> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #parent { + position: relative; + display: flex; + width: 200px; + height: 200px; + } + + #child { + display: flex; + position: absolute; + width: 100px; + height: 100px; + background-color: green; + align-self: end; + } + +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> + +<div id=reference-overlapped-red></div> + +<div id="parent"> + <div id="child"></div> +</div> + +<script> + document.body.offsetTop; + child.style.alignSelf = 'start'; +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-001.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-001.html new file mode 100644 index 0000000000..6e99510cd1 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-001.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a row flex container, with various "align-content" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> + <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7596#issuecomment-1225952646"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + position: relative; + flex-flow: row wrap; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + /* This "align-self" is actually the only alignment that matters here. + The flex containers' various "align-content" values have no impact on + the positioning of absolutely-positioned flex children. */ + align-self: center; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('.container > div')"> + <div class="big"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="align-content: normal"><div data-offset-x="2" data-offset-y="3"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="3"></div></div> + <div class="container" style="align-content: last baseline"><div data-offset-x="2" data-offset-y="3"></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="align-content: space-between"><div data-offset-x="2" data-offset-y="3"></div></div> + <div class="container" style="align-content: space-around"><div data-offset-x="2" data-offset-y="3"></div></div> + <div class="container" style="align-content: space-evenly"><div data-offset-x="2" data-offset-y="3"></div></div> + <div class="container" style="align-content: stretch"><div data-offset-x="2" data-offset-y="3"></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="align-content: center"><div data-offset-x="2" data-offset-y="3"></div></div> + <div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="3"></div></div> + <div class="container" style="align-content: end"><div data-offset-x="2" data-offset-y="3"></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="align-content: flex-start"><div data-offset-x="2" data-offset-y="3"></div></div> + <div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="3"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="align-content: normal"><div data-offset-x="2" data-offset-y="-1"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="-1"></div></div> + <div class="container" style="align-content: last baseline"><div data-offset-x="2" data-offset-y="-1"></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="align-content: space-between"><div data-offset-x="2" data-offset-y="-1"></div></div> + <div class="container" style="align-content: space-around"><div data-offset-x="2" data-offset-y="-1"></div></div> + <div class="container" style="align-content: space-evenly"><div data-offset-x="2" data-offset-y="-1"></div></div> + <div class="container" style="align-content: stretch"><div data-offset-x="2" data-offset-y="-1"></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="align-content: center"><div data-offset-x="2" data-offset-y="-1"></div></div> + <div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="-1"></div></div> + <div class="container" style="align-content: end"><div data-offset-x="2" data-offset-y="-1"></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="align-content: flex-start"><div data-offset-x="2" data-offset-y="-1"></div></div> + <div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="-1"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-001.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-001.html new file mode 100644 index 0000000000..7fb82d4f92 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-001.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a row flex container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + position: relative; + flex-flow: row; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + align-items: center; /* To exercise 'align-self: auto' on children */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('.container > div')"> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto" data-offset-x="2" data-offset-y="3"></div></div> + <div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="1"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: last baseline" data-offset-x="2" data-offset-y="5"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center" data-offset-x="2" data-offset-y="3"></div></div> + <div class="container"><div style="align-self: start" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: end" data-offset-x="2" data-offset-y="5"></div></div> + <div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: self-end" data-offset-x="2" data-offset-y="5"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="5"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto" data-offset-x="2" data-offset-y="-1"></div></div> + <div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="1"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: last baseline" data-offset-x="2" data-offset-y="-3"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center" data-offset-x="2" data-offset-y="-1"></div></div> + <div class="container"><div style="align-self: start" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: end" data-offset-x="2" data-offset-y="-3"></div></div> + <div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: self-end" data-offset-x="2" data-offset-y="-3"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="-3"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-002.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-002.html new file mode 100644 index 0000000000..c570a9f79d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-002.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a row wrap-reverse flex container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + position: relative; + flex-flow: row wrap-reverse; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + align-items: center; /* To exercise 'align-self: auto' on children */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('.container > div')"> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto" data-offset-x="2" data-offset-y="3"></div></div> + <div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="5"></div></div> + <div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="5"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: last baseline" data-offset-x="2" data-offset-y="5"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center" data-offset-x="2" data-offset-y="3"></div></div> + <div class="container"><div style="align-self: start" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: end" data-offset-x="2" data-offset-y="5"></div></div> + <div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: self-end" data-offset-x="2" data-offset-y="5"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start" data-offset-x="2" data-offset-y="5"></div></div> + <div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="1"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto" data-offset-x="2" data-offset-y="-1"></div></div> + <div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="-3"></div></div> + <div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="-3"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: last baseline" data-offset-x="2" data-offset-y="-3"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center" data-offset-x="2" data-offset-y="-1"></div></div> + <div class="container"><div style="align-self: start" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: end" data-offset-x="2" data-offset-y="-3"></div></div> + <div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: self-end" data-offset-x="2" data-offset-y="-3"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start" data-offset-x="2" data-offset-y="-3"></div></div> + <div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="1"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-003.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-003.html new file mode 100644 index 0000000000..4208ff25e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-003.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a row-reverse flex container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + position: relative; + flex-flow: row-reverse; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + align-items: center; /* To exercise 'align-self: auto' on children */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('.container > div')"> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto" data-offset-x="10" data-offset-y="3"></div></div> + <div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="1"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: last baseline" data-offset-x="10" data-offset-y="5"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center" data-offset-x="10" data-offset-y="3"></div></div> + <div class="container"><div style="align-self: start" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: end" data-offset-x="10" data-offset-y="5"></div></div> + <div class="container"><div style="align-self: self-start" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: self-end" data-offset-x="10" data-offset-y="5"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: flex-end" data-offset-x="10" data-offset-y="5"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto" data-offset-x="-2" data-offset-y="-1"></div></div> + <div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="1"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: last baseline" data-offset-x="-2" data-offset-y="-3"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center" data-offset-x="-2" data-offset-y="-1"></div></div> + <div class="container"><div style="align-self: start" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: end" data-offset-x="-2" data-offset-y="-3"></div></div> + <div class="container"><div style="align-self: self-start" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: self-end" data-offset-x="-2" data-offset-y="-3"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: flex-end" data-offset-x="-2" data-offset-y="-3"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-004.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-004.html new file mode 100644 index 0000000000..3cf1318d70 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-004.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a row-reverse wrap-reverse flex container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + position: relative; + flex-flow: row-reverse wrap-reverse; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + align-items: center; /* To exercise 'align-self: auto' on children */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('.container > div')"> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto" data-offset-x="10" data-offset-y="3"></div></div> + <div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="5"></div></div> + <div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="5"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: last baseline" data-offset-x="10" data-offset-y="5"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center" data-offset-x="10" data-offset-y="3"></div></div> + <div class="container"><div style="align-self: start" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: end" data-offset-x="10" data-offset-y="5"></div></div> + <div class="container"><div style="align-self: self-start" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: self-end" data-offset-x="10" data-offset-y="5"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start" data-offset-x="10" data-offset-y="5"></div></div> + <div class="container"><div style="align-self: flex-end" data-offset-x="10" data-offset-y="1"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto" data-offset-x="-2" data-offset-y="-1"></div></div> + <div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="-3"></div></div> + <div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="-3"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: last baseline" data-offset-x="-2" data-offset-y="-3"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center" data-offset-x="-2" data-offset-y="-1"></div></div> + <div class="container"><div style="align-self: start" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: end" data-offset-x="-2" data-offset-y="-3"></div></div> + <div class="container"><div style="align-self: self-start" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: self-end" data-offset-x="-2" data-offset-y="-3"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start" data-offset-x="-2" data-offset-y="-3"></div></div> + <div class="container"><div style="align-self: flex-end" data-offset-x="-2" data-offset-y="1"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-005.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-005.html new file mode 100644 index 0000000000..ae9d263ea0 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-005.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a column flex container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + position: relative; + flex-flow: column; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + align-items: center; /* To exercise 'align-self: auto' on children */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('.container > div')"> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto" data-offset-x="6" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="1"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: last baseline" data-offset-x="10" data-offset-y="1"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center" data-offset-x="6" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: start" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: end" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: self-end" data-offset-x="10" data-offset-y="1"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: flex-end" data-offset-x="10" data-offset-y="1"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto" data-offset-x="0" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="1"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: last baseline" data-offset-x="-2" data-offset-y="1"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center" data-offset-x="0" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: start" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: end" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: self-end" data-offset-x="-2" data-offset-y="1"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: flex-end" data-offset-x="-2" data-offset-y="1"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-006.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-006.html new file mode 100644 index 0000000000..3c03636b35 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-006.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a column wrap-reverse flex container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + position: relative; + flex-flow: column wrap-reverse; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + align-items: center; /* To exercise 'align-self: auto' on children */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('.container > div')"> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto" data-offset-x="6" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y=""></div></div> + <div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="1"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: last baseline" data-offset-x="10" data-offset-y="1"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center" data-offset-x="6" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: start" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: end" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: self-end" data-offset-x="10" data-offset-y="1"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="1"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto" data-offset-x="0" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="1"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: last baseline" data-offset-x="-2" data-offset-y="1"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center" data-offset-x="0" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: start" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: end" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: self-end" data-offset-x="-2" data-offset-y="1"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="1"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-007.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-007.html new file mode 100644 index 0000000000..7e09b41d79 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-007.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a column-reverse flex container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + position: relative; + flex-flow: column-reverse; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + align-items: center; /* To exercise 'align-self: auto' on children */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('.container > div')"> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto" data-offset-x="6" data-offset-y="5"></div></div> + <div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="5"></div></div> + <div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="5"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="5"></div></div> + <div class="container"><div style="align-self: last baseline" data-offset-x="10" data-offset-y="5"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center" data-offset-x="6" data-offset-y="5"></div></div> + <div class="container"><div style="align-self: start" data-offset-x="2" data-offset-y="5"></div></div> + <div class="container"><div style="align-self: end" data-offset-x="10" data-offset-y="5"></div></div> + <div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="5"></div></div> + <div class="container"><div style="align-self: self-end" data-offset-x="10" data-offset-y="5"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start" data-offset-x="2" data-offset-y="5"></div></div> + <div class="container"><div style="align-self: flex-end" data-offset-x="10" data-offset-y="5"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto" data-offset-x="0" data-offset-y="-3"></div></div> + <div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="-3"></div></div> + <div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="-3"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="-3"></div></div> + <div class="container"><div style="align-self: last baseline" data-offset-x="-2" data-offset-y="-3"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center" data-offset-x="0" data-offset-y="-3"></div></div> + <div class="container"><div style="align-self: start" data-offset-x="2" data-offset-y="-3"></div></div> + <div class="container"><div style="align-self: end" data-offset-x="-2" data-offset-y="-3"></div></div> + <div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="-3"></div></div> + <div class="container"><div style="align-self: self-end" data-offset-x="-2" data-offset-y="-3"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start" data-offset-x="2" data-offset-y="-3"></div></div> + <div class="container"><div style="align-self: flex-end" data-offset-x="-2" data-offset-y="-3"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-008.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-008.html new file mode 100644 index 0000000000..8ea47aadda --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-008.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a column-reverse wrap-reverse flex container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + position: relative; + flex-flow: column-reverse wrap-reverse; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + align-items: center; /* To exercise 'align-self: auto' on children */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('.container > div')"> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto" data-offset-x="6" data-offset-y="5"></div></div> + <div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="5"></div></div> + <div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="5"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="5"></div></div> + <div class="container"><div style="align-self: last baseline" data-offset-x="10" data-offset-y="5"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center" data-offset-x="6" data-offset-y="5"></div></div> + <div class="container"><div style="align-self: start" data-offset-x="2" data-offset-y="5"></div></div> + <div class="container"><div style="align-self: end" data-offset-x="10" data-offset-y="5"></div></div> + <div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="5"></div></div> + <div class="container"><div style="align-self: self-end" data-offset-x="10" data-offset-y="5"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start" data-offset-x="10" data-offset-y="5"></div></div> + <div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="5"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto" data-offset-x="0" data-offset-y="-3"></div></div> + <div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="-3"></div></div> + <div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="-3"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="-3"></div></div> + <div class="container"><div style="align-self: last baseline" data-offset-x="-2" data-offset-y="-3"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center" data-offset-x="0" data-offset-y="-3"></div></div> + <div class="container"><div style="align-self: start" data-offset-x="2" data-offset-y="-3"></div></div> + <div class="container"><div style="align-self: end" data-offset-x="-2" data-offset-y="-3"></div></div> + <div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="-3"></div></div> + <div class="container"><div style="align-self: self-end" data-offset-x="-2" data-offset-y="-3"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start" data-offset-x="-2" data-offset-y="-3"></div></div> + <div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="-3"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-001.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-001.html new file mode 100644 index 0000000000..703b9bb2f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-001.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a RTL row flex container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + position: relative; + flex-flow: row; + direction: rtl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('.container > div')"> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="1"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: last baseline" data-offset-x="10" data-offset-y="5"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center" data-offset-x="10" data-offset-y="3"></div></div> + <div class="container"><div style="align-self: start" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: end" data-offset-x="10" data-offset-y="5"></div></div> + <div class="container"><div style="align-self: self-start" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: self-end" data-offset-x="10" data-offset-y="5"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: flex-end" data-offset-x="10" data-offset-y="5"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="1"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: last baseline" data-offset-x="-2" data-offset-y="-3"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center" data-offset-x="-2" data-offset-y="-1"></div></div> + <div class="container"><div style="align-self: start" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: end" data-offset-x="-2" data-offset-y="-3"></div></div> + <div class="container"><div style="align-self: self-start" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: self-end" data-offset-x="-2" data-offset-y="-3"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: flex-end" data-offset-x="-2" data-offset-y="-3"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-002.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-002.html new file mode 100644 index 0000000000..c09c6fa167 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-002.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos LTR children in a RTL row flex container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + position: relative; + flex-flow: row; + direction: rtl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + direction: ltr; + background: teal; + height: 6px; + width: 8px; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('.container > div')"> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="1"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: last baseline" data-offset-x="10" data-offset-y="5"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center" data-offset-x="10" data-offset-y="3"></div></div> + <div class="container"><div style="align-self: start" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: end" data-offset-x="10" data-offset-y="5"></div></div> + <div class="container"><div style="align-self: self-start" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: self-end" data-offset-x="10" data-offset-y="5"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: flex-end" data-offset-x="10" data-offset-y="5"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="1"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: last baseline" data-offset-x="-2" data-offset-y="-3"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center" data-offset-x="-2" data-offset-y="-1"></div></div> + <div class="container"><div style="align-self: start" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: end" data-offset-x="-2" data-offset-y="-3"></div></div> + <div class="container"><div style="align-self: self-start" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: self-end" data-offset-x="-2" data-offset-y="-3"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: flex-end" data-offset-x="-2" data-offset-y="-3"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-003.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-003.html new file mode 100644 index 0000000000..39038b95f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-003.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a RTL column flex container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + position: relative; + flex-flow: column; + direction: rtl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('.container > div')"> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="1"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: last baseline" data-offset-x="2" data-offset-y="1"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center" data-offset-x="6" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: start" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: end" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: self-start" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: self-end" data-offset-x="2" data-offset-y="1"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="1"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="1"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: last baseline" data-offset-x="2" data-offset-y="1"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center" data-offset-x="0" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: start" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: end" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: self-start" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: self-end" data-offset-x="2" data-offset-y="1"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="1"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-004.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-004.html new file mode 100644 index 0000000000..fc61e6cf9b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-004.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos LTR children in a RTL column flex container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + position: relative; + flex-flow: column; + direction: rtl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + direction: ltr; + background: teal; + height: 6px; + width: 8px; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('.container > div')"> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="1"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: last baseline" data-offset-x="2" data-offset-y="1"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center" data-offset-x="6" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: start" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: end" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: self-end" data-offset-x="10" data-offset-y="1"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="1"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="1"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: last baseline" data-offset-x="2" data-offset-y="1"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center" data-offset-x="0" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: start" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: end" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: self-end" data-offset-x="-2" data-offset-y="1"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="1"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-safe-001-ref.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-safe-001-ref.html new file mode 100644 index 0000000000..fb1fb93ea9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-safe-001-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0 +--> +<html> +<head> + <title>Reference: Testing safe overflow-position for align-self in absolutely positioned boxes in flex containers</title> + <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> + <meta charset="utf-8"> + <style> + .flex { + display: flex; + height: 50px; + width: 50px; + border: 3px solid black; + vertical-align: top; + margin: 20px; + position: relative; + } + .child { + border: 2px dotted purple; + background: teal; + width: 65px; + height: 65px; + align-self: start; + position: absolute; + background: yellow; + } + .rowDir { + flex-direction: row; + } + .colDir { + flex-direction: column; + } + .vertRL { + writing-mode: vertical-rl; + } + </style> +</head> +<body> + <div class="flex rowDir"><div class="child"></div></div> + <div class="flex colDir"><div class="child"></div></div> + <div class="flex rowDir vertRL"><div class="child"></div></div> + <div class="flex colDir vertRL"><div class="child"></div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-safe-001.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-safe-001.html new file mode 100644 index 0000000000..b7302cb962 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-safe-001.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0 +--> +<html> +<head> + <title>CSS Test: Testing safe overflow-position for align-self in absolutely positioned boxes in flex containers</title> + <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> + <link rel="match" href="flex-abspos-staticpos-align-self-safe-001-ref.html"> + <meta charset="utf-8"> + <style> + .flex { + display: flex; + height: 50px; + width: 50px; + border: 3px solid black; + vertical-align: top; + margin: 20px; + position: relative; + } + .child { + border: 2px dotted purple; + background: teal; + width: 65px; + height: 65px; + align-self: safe center; + position: absolute; + background: yellow; + } + .rowDir { + flex-direction: row; + } + .colDir { + flex-direction: column; + } + .vertRL { + writing-mode: vertical-rl; + } + </style> +</head> +<body> + <div class="flex rowDir"><div class="child"></div></div> + <div class="flex colDir"><div class="child"></div></div> + <div class="flex rowDir vertRL"><div class="child"></div></div> + <div class="flex colDir vertRL"><div class="child"></div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-001.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-001.html new file mode 100644 index 0000000000..42aeb01907 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-001.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a vertical-rl row flex container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + position: relative; + flex-flow: row; + writing-mode: vertical-rl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('.container > div')"> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="1"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: last baseline" data-offset-x="2" data-offset-y="1"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center" data-offset-x="6" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: start" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: end" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: self-start" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: self-end" data-offset-x="2" data-offset-y="1"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: left" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: right" data-offset-x="10" data-offset-y="1"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="1"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: last baseline" data-offset-x="2" data-offset-y="1"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center" data-offset-x="0" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: start" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: end" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: self-start" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: self-end" data-offset-x="2" data-offset-y="1"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: left" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: right" data-offset-x="-2" data-offset-y="1"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-002.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-002.html new file mode 100644 index 0000000000..bb5b1f57a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-002.html @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos horizontal-tb children in a vertical-rl row flex container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + position: relative; + flex-flow: row; + writing-mode: vertical-rl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + writing-mode: horizontal-tb; + background: teal; + height: 6px; + width: 8px; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('.container > div')"> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="1"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: last baseline" data-offset-x="2" data-offset-y="1"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center" data-offset-x="6" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: start" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: end" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: self-end" data-offset-x="10" data-offset-y="1"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: left" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: right" data-offset-x="10" data-offset-y="1"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="1"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: last baseline" data-offset-x="2" data-offset-y="1"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center" data-offset-x="0" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: start" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: end" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: self-end" data-offset-x="-2" data-offset-y="1"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: left" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: right" data-offset-x="-2" data-offset-y="1"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-003.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-003.html new file mode 100644 index 0000000000..6d877c6280 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-003.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a vertical-rl column flex container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + position: relative; + flex-flow: column; + writing-mode: vertical-rl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('.container > div')"> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="1"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: last baseline" data-offset-x="10" data-offset-y="5"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center" data-offset-x="10" data-offset-y="3"></div></div> + <div class="container"><div style="align-self: start" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: end" data-offset-x="10" data-offset-y="5"></div></div> + <div class="container"><div style="align-self: self-start" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: self-end" data-offset-x="10" data-offset-y="5"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: flex-end" data-offset-x="10" data-offset-y="5"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="1"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: last baseline" data-offset-x="-2" data-offset-y="-3"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center" data-offset-x="-2" data-offset-y="-1"></div></div> + <div class="container"><div style="align-self: start" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: end" data-offset-x="-2" data-offset-y="-3"></div></div> + <div class="container"><div style="align-self: self-start" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: self-end" data-offset-x="-2" data-offset-y="-3"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: flex-end" data-offset-x="-2" data-offset-y="-3"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-004.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-004.html new file mode 100644 index 0000000000..3248871fe5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-004.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos vertical-lr + RTL children in a vertical-rl column flex container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + position: relative; + flex-flow: column; + writing-mode: vertical-rl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + writing-mode: vertical-lr; + direction: rtl; + background: teal; + height: 6px; + width: 8px; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('.container > div')"> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="1"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: last baseline" data-offset-x="10" data-offset-y="5"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center" data-offset-x="10" data-offset-y="3"></div></div> + <div class="container"><div style="align-self: start" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: end" data-offset-x="10" data-offset-y="5"></div></div> + <div class="container"><div style="align-self: self-start" data-offset-x="10" data-offset-y="5"></div></div> + <div class="container"><div style="align-self: self-end" data-offset-x="10" data-offset-y="1"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start" data-offset-x="10" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: flex-end" data-offset-x="10" data-offset-y="5"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="1"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: last baseline" data-offset-x="-2" data-offset-y="-3"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center" data-offset-x="-2" data-offset-y="-1"></div></div> + <div class="container"><div style="align-self: start" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: end" data-offset-x="-2" data-offset-y="-3"></div></div> + <div class="container"><div style="align-self: self-start" data-offset-x="-2" data-offset-y="-3"></div></div> + <div class="container"><div style="align-self: self-end" data-offset-x="-2" data-offset-y="1"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start" data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container"><div style="align-self: flex-end" data-offset-x="-2" data-offset-y="-3"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-justify-content-001-ref.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-justify-content-001-ref.html new file mode 100644 index 0000000000..0abf592d6d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-justify-content-001-ref.html @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big .alignStart { /* nothing special */ } + .big .alignCenter { margin-left: 4px } + .big .alignEnd { margin-left: 8px } + .small .alignStart { /* nothing special */ } + .small .alignCenter { margin-left: -2px } + .small .alignEnd { margin-left: -4px } + </style> +</head> +<body> + <div class="big"> + <!-- <content-distribution> with implied fallback --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <content-distribution> with explicit "flex-end" fallback --> + <div style="display: none"> + <div class="container"><div class="alignEnd"><!--space-between--></div></div> + <div class="container"><div class="alignEnd"><!--space-around--></div></div> + <div class="container"><div class="alignEnd"><!--space-evenly--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + </div> + <br> + </div> + <div class="small"> + <!-- <content-distribution> with implied fallback --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <content-distribution> with explicit "flex-end" fallback --> + <div style="display: none"> + <div class="container"><div class="alignEnd"><!--space-between--></div></div> + <div class="container"><div class="alignEnd"><!--space-around--></div></div> + <div class="container"><div class="alignEnd"><!--space-evenly--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + </div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-justify-content-001.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-justify-content-001.html new file mode 100644 index 0000000000..004ce831c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-justify-content-001.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a row flex container, with various "justify-content" values with explicit fallback values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> + <link rel="match" href="flex-abspos-staticpos-fallback-justify-content-001-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: row; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- <content-distribution> with implied fallback --> + <div class="container" style="justify-content: space-between"><div></div></div> + <div class="container" style="justify-content: space-around"><div></div></div> + <div class="container" style="justify-content: space-evenly"><div></div></div> + <div class="container" style="justify-content: stretch"><div></div></div> + <br> + <!-- <content-distribution> with explicit "flex-end" fallback --> + <!-- TODO: https://github.com/w3c/csswg-drafts/issues/1002 + <div class="container" style="justify-content: space-between flex-end"><div></div></div> + <div class="container" style="justify-content: space-around flex-end"><div></div></div> + <div class="container" style="justify-content: space-evenly flex-end"><div></div></div> + <div class="container" style="justify-content: stretch flex-end"><div></div></div> + --> + <!-- Note: specifically for flex containers, in the justify-content axis, + "stretch behaves as flex-start (ignoring the specified fallback + alignment, if any." https://drafts.csswg.org/css-align-3/#distribution-flex --> + <br> + </div> + <div class="small"> + <!-- <content-distribution> with implied fallback --> + <div class="container" style="justify-content: space-between"><div></div></div> + <div class="container" style="justify-content: space-around"><div></div></div> + <div class="container" style="justify-content: space-evenly"><div></div></div> + <div class="container" style="justify-content: stretch"><div></div></div> + <br> + <!-- <content-distribution> with explicit "flex-end" fallback --> + <!-- TODO: https://github.com/w3c/csswg-drafts/issues/1002 + <div class="container" style="justify-content: space-between flex-end"><div></div></div> + <div class="container" style="justify-content: space-around flex-end"><div></div></div> + <div class="container" style="justify-content: space-evenly flex-end"><div></div></div> + <div class="container" style="justify-content: stretch flex-end"><div></div></div> + --> + <!-- As noted above, the explicit fallback for "stretch" is ignored here. --> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-001.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-001.html new file mode 100644 index 0000000000..afcecaafd2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-001.html @@ -0,0 +1,97 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a row flex container, with various "justify-content" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + position: relative; + flex-flow: row; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('.container > div')"> + <div class="big"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="1"></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: space-around"><div data-offset-x="6" data-offset-y="1"></div></div> + <div class="container" style="justify-content: space-evenly"><div data-offset-x="6" data-offset-y="1"></div></div> + <div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="1"></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div data-offset-x="6" data-offset-y="1"></div></div> + <div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: end"><div data-offset-x="10" data-offset-y="1"></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: flex-end"><div data-offset-x="10" data-offset-y="1"></div></div> + <div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="1"></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="1"></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: space-around"><div data-offset-x="0" data-offset-y="1"></div></div> + <div class="container" style="justify-content: space-evenly"><div data-offset-x="0" data-offset-y="1"></div></div> + <div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="1"></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div data-offset-x="0" data-offset-y="1"></div></div> + <div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: end"><div data-offset-x="-2" data-offset-y="1"></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: flex-end"><div data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="1"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-002.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-002.html new file mode 100644 index 0000000000..db6f116fea --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-002.html @@ -0,0 +1,97 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a row wrap-reverse flex container, with various "justify-content" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + position: relative; + flex-flow: row wrap-reverse; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('.container > div')"> + <div class="big"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="5"></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="5"></div></div> + <div class="container" style="justify-content: space-around"><div data-offset-x="6" data-offset-y="5"></div></div> + <div class="container" style="justify-content: space-evenly"><div data-offset-x="6" data-offset-y="5"></div></div> + <div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="5"></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div data-offset-x="6" data-offset-y="5"></div></div> + <div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="5"></div></div> + <div class="container" style="justify-content: end"><div data-offset-x="10" data-offset-y="5"></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="5"></div></div> + <div class="container" style="justify-content: flex-end"><div data-offset-x="10" data-offset-y="5"></div></div> + <div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="5"></div></div> + <div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="5"></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="-3"></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="-3"></div></div> + <div class="container" style="justify-content: space-around"><div data-offset-x="0" data-offset-y="-3"></div></div> + <div class="container" style="justify-content: space-evenly"><div data-offset-x="0" data-offset-y="-3"></div></div> + <div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="-3"></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div data-offset-x="0" data-offset-y="-3"></div></div> + <div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="-3"></div></div> + <div class="container" style="justify-content: end"><div data-offset-x="-2" data-offset-y="-3"></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="-3"></div></div> + <div class="container" style="justify-content: flex-end"><div data-offset-x="-2" data-offset-y="-3"></div></div> + <div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="-3"></div></div> + <div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="-3"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-003.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-003.html new file mode 100644 index 0000000000..fc5a2cdab0 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-003.html @@ -0,0 +1,97 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a row-reverse flex container, with various "justify-content" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + position: relative; + flex-flow: row-reverse wrap; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('.container > div')"> + <div class="big"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div data-offset-x="10" data-offset-y="1"></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div data-offset-x="10" data-offset-y="1"></div></div> + <div class="container" style="justify-content: space-around"><div data-offset-x="6" data-offset-y="1"></div></div> + <div class="container" style="justify-content: space-evenly"><div data-offset-x="6" data-offset-y="1"></div></div> + <div class="container" style="justify-content: stretch"><div data-offset-x="10" data-offset-y="1"></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div data-offset-x="6" data-offset-y="1"></div></div> + <div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: end"><div data-offset-x="10" data-offset-y="1"></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div data-offset-x="10" data-offset-y="1"></div></div> + <div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="1"></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div data-offset-x="-2" data-offset-y="1"></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: space-around"><div data-offset-x="0" data-offset-y="1"></div></div> + <div class="container" style="justify-content: space-evenly"><div data-offset-x="0" data-offset-y="1"></div></div> + <div class="container" style="justify-content: stretch"><div data-offset-x="-2" data-offset-y="1"></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div data-offset-x="0" data-offset-y="1"></div></div> + <div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: end"><div data-offset-x="-2" data-offset-y="1"></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="1"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-004.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-004.html new file mode 100644 index 0000000000..38066fa32b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-004.html @@ -0,0 +1,97 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a row-reverse wrap-reverse flex container, with various "justify-content" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + position: relative; + flex-flow: row-reverse wrap-reverse; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('.container > div')"> + <div class="big"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div data-offset-x="10" data-offset-y="5"></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div data-offset-x="10" data-offset-y="5"></div></div> + <div class="container" style="justify-content: space-around"><div data-offset-x="6" data-offset-y="5"></div></div> + <div class="container" style="justify-content: space-evenly"><div data-offset-x="6" data-offset-y="5"></div></div> + <div class="container" style="justify-content: stretch"><div data-offset-x="10" data-offset-y="5"></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div data-offset-x="6" data-offset-y="5"></div></div> + <div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="5"></div></div> + <div class="container" style="justify-content: end"><div data-offset-x="10" data-offset-y="5"></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div data-offset-x="10" data-offset-y="5"></div></div> + <div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="5"></div></div> + <div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="5"></div></div> + <div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="5"></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div data-offset-x="-2" data-offset-y="-3"></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div data-offset-x="-2" data-offset-y="-3"></div></div> + <div class="container" style="justify-content: space-around"><div data-offset-x="0" data-offset-y="-3"></div></div> + <div class="container" style="justify-content: space-evenly"><div data-offset-x="0" data-offset-y="-3"></div></div> + <div class="container" style="justify-content: stretch"><div data-offset-x="-2" data-offset-y="-3"></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div data-offset-x="0" data-offset-y="-3"></div></div> + <div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="-3"></div></div> + <div class="container" style="justify-content: end"><div data-offset-x="-2" data-offset-y="-3"></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div data-offset-x="-2" data-offset-y="-3"></div></div> + <div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="-3"></div></div> + <div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="-3"></div></div> + <div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="-3"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-005.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-005.html new file mode 100644 index 0000000000..058d9e8fd8 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-005.html @@ -0,0 +1,97 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a column flex container, with various "justify-content" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + position: relative; + flex-flow: column; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('.container > div')"> + <div class="big"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="1"></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: space-around"><div data-offset-x="2" data-offset-y="3"></div></div> + <div class="container" style="justify-content: space-evenly"><div data-offset-x="2" data-offset-y="3"></div></div> + <div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="1"></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div data-offset-x="2" data-offset-y="3"></div></div> + <div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: end"><div data-offset-x="2" data-offset-y="5"></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="5"></div></div> + <div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: right"><div data-offset-x="2" data-offset-y="1"></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="1"></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: space-around"><div data-offset-x="2" data-offset-y="-1"></div></div> + <div class="container" style="justify-content: space-evenly"><div data-offset-x="2" data-offset-y="-1"></div></div> + <div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="1"></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div data-offset-x="2" data-offset-y="-1"></div></div> + <div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: end"><div data-offset-x="2" data-offset-y="-3"></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="-3"></div></div> + <div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: right"><div data-offset-x="2" data-offset-y="1"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-006.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-006.html new file mode 100644 index 0000000000..9b22ddd636 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-006.html @@ -0,0 +1,97 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a column wrap-reverse flex container, with various "justify-content" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + position: relative; + flex-flow: column wrap-reverse; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('.container > div')"> + <div class="big"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div data-offset-x="10" data-offset-y="1"></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div data-offset-x="10" data-offset-y="1"></div></div> + <div class="container" style="justify-content: space-around"><div data-offset-x="10" data-offset-y="3"></div></div> + <div class="container" style="justify-content: space-evenly"><div data-offset-x="10" data-offset-y="3"></div></div> + <div class="container" style="justify-content: stretch"><div data-offset-x="10" data-offset-y="1"></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div data-offset-x="10" data-offset-y="3"></div></div> + <div class="container" style="justify-content: start"><div data-offset-x="10" data-offset-y="1"></div></div> + <div class="container" style="justify-content: end"><div data-offset-x="10" data-offset-y="5"></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div data-offset-x="10" data-offset-y="1"></div></div> + <div class="container" style="justify-content: flex-end"><div data-offset-x="10" data-offset-y="5"></div></div> + <div class="container" style="justify-content: left"><div data-offset-x="10" data-offset-y="1"></div></div> + <div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="1"></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div data-offset-x="-2" data-offset-y="1"></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: space-around"><div data-offset-x="-2" data-offset-y="-1"></div></div> + <div class="container" style="justify-content: space-evenly"><div data-offset-x="-2" data-offset-y="-1"></div></div> + <div class="container" style="justify-content: stretch"><div data-offset-x="-2" data-offset-y="1"></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div data-offset-x="-2" data-offset-y="-1"></div></div> + <div class="container" style="justify-content: start"><div data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: end"><div data-offset-x="-2" data-offset-y="-3"></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: flex-end"><div data-offset-x="-2" data-offset-y="-3"></div></div> + <div class="container" style="justify-content: left"><div data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="1"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-007.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-007.html new file mode 100644 index 0000000000..6c51255b8a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-007.html @@ -0,0 +1,97 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a column-reverse flex container, with various "justify-content" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + position: relative; + flex-flow: column-reverse wrap; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('.container > div')"> + <div class="big"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="5"></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="5"></div></div> + <div class="container" style="justify-content: space-around"><div data-offset-x="2" data-offset-y="3"></div></div> + <div class="container" style="justify-content: space-evenly"><div data-offset-x="2" data-offset-y="3"></div></div> + <div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="5"></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div data-offset-x="2" data-offset-y="3"></div></div> + <div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: end"><div data-offset-x="2" data-offset-y="5"></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="5"></div></div> + <div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: right"><div data-offset-x="2" data-offset-y="1"></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="-3"></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="-3"></div></div> + <div class="container" style="justify-content: space-around"><div data-offset-x="2" data-offset-y="-1"></div></div> + <div class="container" style="justify-content: space-evenly"><div data-offset-x="2" data-offset-y="-1"></div></div> + <div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="-3"></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div data-offset-x="2" data-offset-y="-1"></div></div> + <div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: end"><div data-offset-x="2" data-offset-y="-3"></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="-3"></div></div> + <div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: right"><div data-offset-x="2" data-offset-y="1"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-008.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-008.html new file mode 100644 index 0000000000..b7ec27301f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-008.html @@ -0,0 +1,97 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a column-reverse wrap-reverse flex container, with various "justify-content" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + position: relative; + flex-flow: column-reverse wrap-reverse; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('.container > div')"> + <div class="big"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div data-offset-x="10" data-offset-y="5"></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div data-offset-x="10" data-offset-y="5"></div></div> + <div class="container" style="justify-content: space-around"><div data-offset-x="10" data-offset-y="3"></div></div> + <div class="container" style="justify-content: space-evenly"><div data-offset-x="10" data-offset-y="3"></div></div> + <div class="container" style="justify-content: stretch"><div data-offset-x="10" data-offset-y="5"></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div data-offset-x="10" data-offset-y="3"></div></div> + <div class="container" style="justify-content: start"><div data-offset-x="10" data-offset-y="1"></div></div> + <div class="container" style="justify-content: end"><div data-offset-x="10" data-offset-y="5"></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div data-offset-x="10" data-offset-y="5"></div></div> + <div class="container" style="justify-content: flex-end"><div data-offset-x="10" data-offset-y="1"></div></div> + <div class="container" style="justify-content: left"><div data-offset-x="10" data-offset-y="1"></div></div> + <div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="1"></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div data-offset-x="-2" data-offset-y="-3"></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div data-offset-x="-2" data-offset-y="-3"></div></div> + <div class="container" style="justify-content: space-around"><div data-offset-x="-2" data-offset-y="-1"></div></div> + <div class="container" style="justify-content: space-evenly"><div data-offset-x="-2" data-offset-y="-1"></div></div> + <div class="container" style="justify-content: stretch"><div data-offset-x="-2" data-offset-y="-3"></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div data-offset-x="-2" data-offset-y="-1"></div></div> + <div class="container" style="justify-content: start"><div data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: end"><div data-offset-x="-2" data-offset-y="-3"></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div data-offset-x="-2" data-offset-y="-3"></div></div> + <div class="container" style="justify-content: flex-end"><div data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: left"><div data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="1"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-001.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-001.html new file mode 100644 index 0000000000..0d7593b26b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-001.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a RTL row flex container, with various "justify-content" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + position: relative; + flex-flow: row; + direction: rtl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('.container > div')"> + <div class="big"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div data-offset-x="10" data-offset-y="1"></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div data-offset-x="10" data-offset-y="1"></div></div> + <div class="container" style="justify-content: space-around"><div data-offset-x="6" data-offset-y="1"></div></div> + <div class="container" style="justify-content: space-evenly"><div data-offset-x="6" data-offset-y="1"></div></div> + <div class="container" style="justify-content: stretch"><div data-offset-x="10" data-offset-y="1"></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div data-offset-x="6" data-offset-y="1"></div></div> + <div class="container" style="justify-content: start"><div data-offset-x="10" data-offset-y="1"></div></div> + <div class="container" style="justify-content: end"><div data-offset-x="2" data-offset-y="1"></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div data-offset-x="10" data-offset-y="1"></div></div> + <div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="1"></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div data-offset-x="-2" data-offset-y="1"></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: space-around"><div data-offset-x="0" data-offset-y="1"></div></div> + <div class="container" style="justify-content: space-evenly"><div data-offset-x="0" data-offset-y="1"></div></div> + <div class="container" style="justify-content: stretch"><div data-offset-x="-2" data-offset-y="1"></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div data-offset-x="0" data-offset-y="1"></div></div> + <div class="container" style="justify-content: start"><div data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: end"><div data-offset-x="2" data-offset-y="1"></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="1"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-002.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-002.html new file mode 100644 index 0000000000..7aa31aaabc --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-002.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a RTL column flex container, with various "justify-content" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + position: relative; + flex-flow: column; + direction: rtl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('.container > div')"> + <div class="big"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div data-offset-x="10" data-offset-y="1"></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div data-offset-x="10" data-offset-y="1"></div></div> + <div class="container" style="justify-content: space-around"><div data-offset-x="10" data-offset-y="3"></div></div> + <div class="container" style="justify-content: space-evenly"><div data-offset-x="10" data-offset-y="3"></div></div> + <div class="container" style="justify-content: stretch"><div data-offset-x="10" data-offset-y="1"></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div data-offset-x="10" data-offset-y="3"></div></div> + <div class="container" style="justify-content: start"><div data-offset-x="10" data-offset-y="1"></div></div> + <div class="container" style="justify-content: end"><div data-offset-x="10" data-offset-y="5"></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div data-offset-x="10" data-offset-y="1"></div></div> + <div class="container" style="justify-content: flex-end"><div data-offset-x="10" data-offset-y="5"></div></div> + <div class="container" style="justify-content: left"><div data-offset-x="10" data-offset-y="1"></div></div> + <div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="1"></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div data-offset-x="-2" data-offset-y="1"></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: space-around"><div data-offset-x="-2" data-offset-y="-1"></div></div> + <div class="container" style="justify-content: space-evenly"><div data-offset-x="-2" data-offset-y="-1"></div></div> + <div class="container" style="justify-content: stretch"><div data-offset-x="-2" data-offset-y="1"></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div data-offset-x="-2" data-offset-y="-1"></div></div> + <div class="container" style="justify-content: start"><div data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: end"><div data-offset-x="-2" data-offset-y="-3"></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: flex-end"><div data-offset-x="-2" data-offset-y="-3"></div></div> + <div class="container" style="justify-content: left"><div data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="1"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-001.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-001.html new file mode 100644 index 0000000000..f9038aad05 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-001.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a vertical-rl row flex container, with various "justify-content" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + position: relative; + flex-flow: row; + writing-mode: vertical-rl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('.container > div')"> + <div class="big"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div data-offset-x="10" data-offset-y="1"></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div data-offset-x="10" data-offset-y="1"></div></div> + <div class="container" style="justify-content: space-around"><div data-offset-x="10" data-offset-y="3"></div></div> + <div class="container" style="justify-content: space-evenly"><div data-offset-x="10" data-offset-y="3"></div></div> + <div class="container" style="justify-content: stretch"><div data-offset-x="10" data-offset-y="1"></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div data-offset-x="10" data-offset-y="3"></div></div> + <div class="container" style="justify-content: start"><div data-offset-x="10" data-offset-y="1"></div></div> + <div class="container" style="justify-content: end"><div data-offset-x="10" data-offset-y="5"></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div data-offset-x="10" data-offset-y="1"></div></div> + <div class="container" style="justify-content: flex-end"><div data-offset-x="10" data-offset-y="5"></div></div> + <div class="container" style="justify-content: left"><div data-offset-x="10" data-offset-y="1"></div></div> + <div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="5"></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div data-offset-x="-2" data-offset-y="1"></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: space-around"><div data-offset-x="-2" data-offset-y="-1"></div></div> + <div class="container" style="justify-content: space-evenly"><div data-offset-x="-2" data-offset-y="-1"></div></div> + <div class="container" style="justify-content: stretch"><div data-offset-x="-2" data-offset-y="1"></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div data-offset-x="-2" data-offset-y="-1"></div></div> + <div class="container" style="justify-content: start"><div data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: end"><div data-offset-x="-2" data-offset-y="-3"></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: flex-end"><div data-offset-x="-2" data-offset-y="-3"></div></div> + <div class="container" style="justify-content: left"><div data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="-3"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-002.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-002.html new file mode 100644 index 0000000000..690e6116d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-002.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a vertical-rl column flex container, with various "justify-content" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + position: relative; + flex-flow: column; + writing-mode: vertical-rl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('.container > div')"> + <div class="big"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div data-offset-x="10" data-offset-y="1"></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div data-offset-x="10" data-offset-y="1"></div></div> + <div class="container" style="justify-content: space-around"><div data-offset-x="6" data-offset-y="1"></div></div> + <div class="container" style="justify-content: space-evenly"><div data-offset-x="6" data-offset-y="1"></div></div> + <div class="container" style="justify-content: stretch"><div data-offset-x="10" data-offset-y="1"></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div data-offset-x="6" data-offset-y="1"></div></div> + <div class="container" style="justify-content: start"><div data-offset-x="10" data-offset-y="1"></div></div> + <div class="container" style="justify-content: end"><div data-offset-x="2" data-offset-y="1"></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div data-offset-x="10" data-offset-y="1"></div></div> + <div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="1"></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div data-offset-x="-2" data-offset-y="1"></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: space-around"><div data-offset-x="0" data-offset-y="1"></div></div> + <div class="container" style="justify-content: space-evenly"><div data-offset-x="0" data-offset-y="1"></div></div> + <div class="container" style="justify-content: stretch"><div data-offset-x="-2" data-offset-y="1"></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div data-offset-x="0" data-offset-y="1"></div></div> + <div class="container" style="justify-content: start"><div data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: end"><div data-offset-x="2" data-offset-y="1"></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div data-offset-x="-2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="1"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-self-001-ref.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-self-001-ref.html new file mode 100644 index 0000000000..d4f75a036a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-self-001-ref.html @@ -0,0 +1,93 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-self-001.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-self-001.html new file mode 100644 index 0000000000..1f826ca38f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-self-001.html @@ -0,0 +1,97 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a row flex container, with various "justify-self" values (which shouldn't have any effect) </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> + <link rel="match" href="flex-abspos-staticpos-justify-self-001-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: row; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <div class="container"><div style="justify-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <div class="container"><div style="justify-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-001-ref.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-001-ref.html new file mode 100644 index 0000000000..428aeae649 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-001-ref.html @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 10px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 14px; + width: 20px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- Margin just on one side: --> + <div class="container"><div style="margin-top: 3px"></div></div> + <div class="container"><div style="margin-right: 3px"></div></div> + <div class="container"><div style="margin-bottom: 3px"></div></div> + <div class="container"><div style="margin-left: 3px"></div></div> + <!-- Margin on all sides: --> + <div class="container"><div style="margin: 1px 2px 3px 4px"></div></div> + <br> + + <!-- "auto" margin on just one side (should be treated as 0): --> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <!-- "auto" margin on all sides (should be treated as 0): --> + <div class="container"><div></div></div> + <br> + </div> + <div class="small"> + <!-- Margin just on one side: --> + <div class="container"><div style="margin-top: 3px"></div></div> + <div class="container"><div style="margin-right: 3px"></div></div> + <div class="container"><div style="margin-bottom: 3px"></div></div> + <div class="container"><div style="margin-left: 3px"></div></div> + <!-- Margin on all sides: --> + <div class="container"><div style="margin: 1px 2px 3px 4px"></div></div> + <br> + + <!-- "auto" margin on just one side (should be treated as 0): --> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <!-- "auto" margin on all sides (should be treated as 0): --> + <div class="container"><div></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-001.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-001.html new file mode 100644 index 0000000000..535fa2ecbf --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-001.html @@ -0,0 +1,83 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a row flex container, with various margins applied</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> + <link rel="match" href="flex-abspos-staticpos-margin-001-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: row; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 10px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 14px; + width: 20px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- Margin just on one side: --> + <div class="container"><div style="margin-top: 3px"></div></div> + <div class="container"><div style="margin-right: 3px"></div></div> + <div class="container"><div style="margin-bottom: 3px"></div></div> + <div class="container"><div style="margin-left: 3px"></div></div> + <!-- Margin on all sides: --> + <div class="container"><div style="margin: 1px 2px 3px 4px"></div></div> + <br> + + <!-- "auto" margin on just one side (should be treated as 0): --> + <div class="container"><div style="margin-top: auto"></div></div> + <div class="container"><div style="margin-right: auto"></div></div> + <div class="container"><div style="margin-bottom: auto"></div></div> + <div class="container"><div style="margin-left: auto"></div></div> + <!-- "auto" margin on all sides (should be treated as 0): --> + <div class="container"><div style="margin: auto"></div></div> + <br> + </div> + <div class="small"> + <!-- Margin just on one side: --> + <div class="container"><div style="margin-top: 3px"></div></div> + <div class="container"><div style="margin-right: 3px"></div></div> + <div class="container"><div style="margin-bottom: 3px"></div></div> + <div class="container"><div style="margin-left: 3px"></div></div> + <!-- Margin on all sides: --> + <div class="container"><div style="margin: 1px 2px 3px 4px"></div></div> + <br> + + <!-- "auto" margin on just one side (should be treated as 0): --> + <div class="container"><div style="margin-top: auto"></div></div> + <div class="container"><div style="margin-right: auto"></div></div> + <div class="container"><div style="margin-bottom: auto"></div></div> + <div class="container"><div style="margin-left: auto"></div></div> + <!-- "auto" margin on all sides (should be treated as 0): --> + <div class="container"><div style="margin: auto"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-002-ref.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-002-ref.html new file mode 100644 index 0000000000..38cfdff074 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-002-ref.html @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 10px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 14px; + width: 20px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- Margin just on one side: --> + <div class="container"><div style="margin: 3px 0 0 12px"></div></div> + <div class="container"><div style="margin: 0 0 0 9px"></div></div> + <div class="container"><div style="margin: 0 0 0 12px"></div></div> + <div class="container"><div style="margin: 0 0 0 12px"></div></div> + <!-- Margin on all sides: --> + <div class="container"><div style="margin: 1px 0 0 10px"></div></div> + <br> + + <!-- "auto" margin on just one side (should be treated as 0): --> + <div class="container"><div style="margin: 0 0 0 12px"></div></div> + <div class="container"><div style="margin: 0 0 0 12px"></div></div> + <div class="container"><div style="margin: 0 0 0 12px"></div></div> + <div class="container"><div style="margin: 0 0 0 12px"></div></div> + <!-- "auto" margin on all sides (should be treated as 0): --> + <div class="container"><div style="margin: 0 0 0 12px"></div></div> + <br> + </div> + <div class="small"> + <!-- Margin just on one side: --> + <div class="container"><div style="margin: 3px 0 0 -4px"></div></div> + <div class="container"><div style="margin: 0 0 0 -7px"></div></div> + <div class="container"><div style="margin: 0 0 0 -4px"></div></div> + <div class="container"><div style="margin: 0 0 0 -4px"></div></div> + <!-- Margin on all sides: --> + <div class="container"><div style="margin: 1px 0 0 -6px"></div></div> + <br> + + <!-- "auto" margin on just one side (should be treated as 0): --> + <div class="container"><div style="margin: 0 0 0 -4px"></div></div> + <div class="container"><div style="margin: 0 0 0 -4px"></div></div> + <div class="container"><div style="margin: 0 0 0 -4px"></div></div> + <div class="container"><div style="margin: 0 0 0 -4px"></div></div> + <!-- "auto" margin on all sides (should be treated as 0): --> + <div class="container"><div style="margin: 0 0 0 -4px"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-002.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-002.html new file mode 100644 index 0000000000..624a9e8592 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-002.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a row flex container, with various margins applied, and "justify-content: flex-end"</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> + <link rel="match" href="flex-abspos-staticpos-margin-002-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: row; + justify-content: flex-end; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 10px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 14px; + width: 20px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- Margin just on one side: --> + <div class="container"><div style="margin-top: 3px"></div></div> + <div class="container"><div style="margin-right: 3px"></div></div> + <div class="container"><div style="margin-bottom: 3px"></div></div> + <div class="container"><div style="margin-left: 3px"></div></div> + <!-- Margin on all sides: --> + <div class="container"><div style="margin: 1px 2px 3px 4px"></div></div> + <br> + + <!-- "auto" margin on just one side (should be treated as 0): --> + <div class="container"><div style="margin-top: auto"></div></div> + <div class="container"><div style="margin-right: auto"></div></div> + <div class="container"><div style="margin-bottom: auto"></div></div> + <div class="container"><div style="margin-left: auto"></div></div> + <!-- "auto" margin on all sides (should be treated as 0): --> + <div class="container"><div style="margin: auto"></div></div> + <br> + </div> + <div class="small"> + <!-- Margin just on one side: --> + <div class="container"><div style="margin-top: 3px"></div></div> + <div class="container"><div style="margin-right: 3px"></div></div> + <div class="container"><div style="margin-bottom: 3px"></div></div> + <div class="container"><div style="margin-left: 3px"></div></div> + <!-- Margin on all sides: --> + <div class="container"><div style="margin: 1px 2px 3px 4px"></div></div> + <br> + + <!-- "auto" margin on just one side (should be treated as 0): --> + <div class="container"><div style="margin-top: auto"></div></div> + <div class="container"><div style="margin-right: auto"></div></div> + <div class="container"><div style="margin-bottom: auto"></div></div> + <div class="container"><div style="margin-left: auto"></div></div> + <!-- "auto" margin on all sides (should be treated as 0): --> + <div class="container"><div style="margin: auto"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-003-ref.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-003-ref.html new file mode 100644 index 0000000000..74e4066570 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-003-ref.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Static position of abspos children in a row flex container, with various margins applied, and "align-items: flex-end" reference</title> +<style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 10px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 14px; + width: 20px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } +</style> +<div class="big"> + <!-- Margin just on one side: --> + <div class="container"><div style="margin: 8px 0 0 0"></div></div> + <div class="container"><div style="margin: 8px 0 0 0"></div></div> + <div class="container"><div style="margin: 5px 0 0 0"></div></div> + <div class="container"><div style="margin: 8px 0 0 3px"></div></div> + <!-- Margin on all sides: --> + <div class="container"><div style="margin: 5px 0 0 4px"></div></div> + <br> + + <!-- "auto" margin on just one side (should be treated as 0): --> + <div class="container"><div style="margin: 8px 0 0 0"></div></div> + <div class="container"><div style="margin: 8px 0 0 0"></div></div> + <div class="container"><div style="margin: 8px 0 0 0"></div></div> + <div class="container"><div style="margin: 8px 0 0 0"></div></div> + <!-- "auto" margin on all sides (should be treated as 0): --> + <div class="container"><div style="margin: 8px 0 0 0"></div></div> + <br> +</div> +<div class="small"> + <!-- Margin just on one side: --> + <div class="container"><div style="margin: -4px 0 0 0"></div></div> + <div class="container"><div style="margin: -4px 0 0 0"></div></div> + <div class="container"><div style="margin: -7px 0 0 0"></div></div> + <div class="container"><div style="margin: -4px 0 0 3px"></div></div> + <!-- Margin on all sides: --> + <div class="container"><div style="margin: -7px 0 0 4px"></div></div> + <br> + + <!-- "auto" margin on just one side (should be treated as 0): --> + <div class="container"><div style="margin: -4px 0 0 0"></div></div> + <div class="container"><div style="margin: -4px 0 0 0"></div></div> + <div class="container"><div style="margin: -4px 0 0 0"></div></div> + <div class="container"><div style="margin: -4px 0 0 0"></div></div> + <!-- "auto" margin on all sides (should be treated as 0): --> + <div class="container"><div style="margin: -4px 0 0 0"></div></div> + <br> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-003.html b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-003.html new file mode 100644 index 0000000000..64ef7a7fe5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-003.html @@ -0,0 +1,74 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Static position of abspos children in a row flex container, with various margins applied, and "align-items: flex-end"</title> +<link rel="author" title="Vitaly Dyachkov" href="mailto:obyknovenius@me.com"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> +<link rel="match" href="flex-abspos-staticpos-margin-003-ref.html"> +<style> + .container { + display: flex; + flex-flow: row; + align-items: flex-end; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 10px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 14px; + width: 20px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } +</style> +<div class="big"> + <!-- Margin just on one side: --> + <div class="container"><div style="margin-top: 3px"></div></div> + <div class="container"><div style="margin-right: 3px"></div></div> + <div class="container"><div style="margin-bottom: 3px"></div></div> + <div class="container"><div style="margin-left: 3px"></div></div> + <!-- Margin on all sides: --> + <div class="container"><div style="margin: 1px 2px 3px 4px"></div></div> + <br> + + <!-- "auto" margin on just one side (should be treated as 0): --> + <div class="container"><div style="margin-top: auto"></div></div> + <div class="container"><div style="margin-right: auto"></div></div> + <div class="container"><div style="margin-bottom: auto"></div></div> + <div class="container"><div style="margin-left: auto"></div></div> + <!-- "auto" margin on all sides (should be treated as 0): --> + <div class="container"><div style="margin: auto"></div></div> + <br> +</div> +<div class="small"> + <!-- Margin just on one side: --> + <div class="container"><div style="margin-top: 3px"></div></div> + <div class="container"><div style="margin-right: 3px"></div></div> + <div class="container"><div style="margin-bottom: 3px"></div></div> + <div class="container"><div style="margin-left: 3px"></div></div> + <!-- Margin on all sides: --> + <div class="container"><div style="margin: 1px 2px 3px 4px"></div></div> + <br> + + <!-- "auto" margin on just one side (should be treated as 0): --> + <div class="container"><div style="margin-top: auto"></div></div> + <div class="container"><div style="margin-right: auto"></div></div> + <div class="container"><div style="margin-bottom: auto"></div></div> + <div class="container"><div style="margin-left: auto"></div></div> + <!-- "auto" margin on all sides (should be treated as 0): --> + <div class="container"><div style="margin: auto"></div></div> + <br> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flexbox-abspos-child-001-ref.html b/testing/web-platform/tests/css/css-flexbox/abspos/flexbox-abspos-child-001-ref.html new file mode 100644 index 0000000000..95c1f3341d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flexbox-abspos-child-001-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .tealBlock { + background: teal; + width: 20px; + height: 20px; + margin-bottom: 5px; + } + </style> +</head> +<body> + <div class="tealBlock"></div> + <div class="tealBlock"></div> + <div class="tealBlock"></div> + <div class="tealBlock"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flexbox-abspos-child-001a.html b/testing/web-platform/tests/css/css-flexbox/abspos/flexbox-abspos-child-001a.html new file mode 100644 index 0000000000..fabe204b27 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flexbox-abspos-child-001a.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing that "min-width", "max-width", "min-height", and "max-height" are applied on absolutely positioned children of a horizontal 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/#abspos-items"> + <link rel="match" href="flexbox-abspos-child-001-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + height: 10px; + width: 10px; + background: purple; + margin-bottom: 15px; + position: relative; + } + .absPos { + position: absolute; + background: teal; + } + .testMinWidth { + width: 10px; + height: 20px; + min-width: 20px; + } + .testMaxWidth { + width: 50px; + height: 20px; + max-width: 20px; + } + .testMinHeight { + width: 20px; + height: 10px; + min-height: 20px; + } + .testMaxHeight { + width: 20px; + height: 50px; + max-height: 20px; + } + </style> +</head> +<body> + <div class="flexContainer"><div class="absPos testMinWidth"></div></div> + <div class="flexContainer"><div class="absPos testMaxWidth"></div></div> + <div class="flexContainer"><div class="absPos testMinHeight"></div></div> + <div class="flexContainer"><div class="absPos testMaxHeight"></div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flexbox-abspos-child-001b.html b/testing/web-platform/tests/css/css-flexbox/abspos/flexbox-abspos-child-001b.html new file mode 100644 index 0000000000..30fc58c3d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flexbox-abspos-child-001b.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing that "min-width", "max-width", "min-height", and "max-height" are applied on absolutely positioned children of a vertical 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/#abspos-items"> + <link rel="match" href="flexbox-abspos-child-001-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + flex-direction: column; + height: 10px; + width: 10px; + background: purple; + margin-bottom: 15px; + position: relative; + } + .absPos { + position: absolute; + background: teal; + } + .testMinWidth { + width: 10px; + height: 20px; + min-width: 20px; + } + .testMaxWidth { + width: 50px; + height: 20px; + max-width: 20px; + } + .testMinHeight { + width: 20px; + height: 10px; + min-height: 20px; + } + .testMaxHeight { + width: 20px; + height: 50px; + max-height: 20px; + } + </style> +</head> +<body> + <div class="flexContainer"><div class="absPos testMinWidth"></div></div> + <div class="flexContainer"><div class="absPos testMaxWidth"></div></div> + <div class="flexContainer"><div class="absPos testMinHeight"></div></div> + <div class="flexContainer"><div class="absPos testMaxHeight"></div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flexbox-abspos-child-002-ref.html b/testing/web-platform/tests/css/css-flexbox/abspos/flexbox-abspos-child-002-ref.html new file mode 100644 index 0000000000..876e5d6c2c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flexbox-abspos-child-002-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .tealBlock { + background: teal; + width: 10px; + height: 10px; + margin-bottom: 5px; + } + .purpleBlock { + background: purple; + width: 10px; + height: 10px; + margin-bottom: 5px; + } + </style> +</head> +<body> + + <div class="purpleBlock"></div> + <div class="purpleBlock"></div> + <div class="purpleBlock"></div> + <div class="purpleBlock"></div> + + <div class="tealBlock"></div> + <div class="tealBlock"></div> + <div class="tealBlock"></div> + <div class="tealBlock"></div> + + <div class="tealBlock"></div> + <div class="tealBlock"></div> + <div class="tealBlock"></div> + <div class="tealBlock"></div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flexbox-abspos-child-002.html b/testing/web-platform/tests/css/css-flexbox/abspos/flexbox-abspos-child-002.html new file mode 100644 index 0000000000..8234085681 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flexbox-abspos-child-002.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Test: Test that "flex-basis" doesn't affect layout of abspos flex child + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#abspos-items"> + <link rel="match" href="flexbox-abspos-child-002-ref.html"> + <style> + .flex { + display: flex; + height: 10px; + width: 10px; + background: purple; + margin-bottom: 5px; + position: relative; + } + .flex > * { + position: absolute; + background: teal; + height: 10px; + } + .sized { + width: 10px; + } + .implied { + left: 0; + right: 0; + } + </style> +</head> +<body> + <!-- In all cases below, flex-basis should have no effect on layout (because + it's on an element that is abspos and hence not a flex item). --> + + <!-- Abspos child has auto width (which should end up 0): --> + <div class="flex"><div style="flex-basis: 2px"></div></div> + <div class="flex"><div style="flex-basis: 100px"></div></div> + <div class="flex"><div style="flex-basis: 80%"></div></div> + <div class="flex"><div style="flex-basis: content"></div></div> + + <!-- Abspos child has explicit 10px width: --> + <div class="flex"><div class="sized" style="flex-basis: 2px"></div></div> + <div class="flex"><div class="sized" style="flex-basis: 100px"></div></div> + <div class="flex"><div class="sized" style="flex-basis: 80%"></div></div> + <div class="flex"><div class="sized" style="flex-basis: content"></div></div> + + <!-- Abspos child has implicit 10px width (implied by auto width and + constrained left/right properties): --> + <div class="flex"><div class="implied" style="flex-basis: 2px"></div></div> + <div class="flex"><div class="implied" style="flex-basis: 100px"></div></div> + <div class="flex"><div class="implied" style="flex-basis: 80%"></div></div> + <div class="flex"><div class="implied" style="flex-basis: content"></div></div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flexbox_absolute-atomic-ref.html b/testing/web-platform/tests/css/css-flexbox/abspos/flexbox_absolute-atomic-ref.html new file mode 100644 index 0000000000..310ea204b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flexbox_absolute-atomic-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>flexbox | abspos atomic flexitems</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +body {margin: 0;} +body>div { + background: #ffcc00; + + display: flex; + justify-content: space-around; +} +div div { + background: #3366cc; + margin: 20px; +} +</style> + +<div> + <div>filler</div> + <div>filler</div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flexbox_absolute-atomic.html b/testing/web-platform/tests/css/css-flexbox/abspos/flexbox_absolute-atomic.html new file mode 100644 index 0000000000..dae6b3e43e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flexbox_absolute-atomic.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>flexbox | abspos atomic flexitems</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#abspos-items"> +<link rel="match" href="flexbox_absolute-atomic-ref.html"> +<style> +body {margin: 0;} +body>div { + background: #ffcc00; + + display: flex; + justify-content: space-around; +} +div div { + background: #3366cc; + margin: 20px; +} +#abs { + position: absolute; + top: -1000px; +} +</style> + +<div> + <div>filler</div> + <div id="abs">filler</div> + <div>filler</div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/flexbox_inline-abspos.html b/testing/web-platform/tests/css/css-flexbox/abspos/flexbox_inline-abspos.html new file mode 100644 index 0000000000..56077ae585 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/flexbox_inline-abspos.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>flexbox | absolutely positioned inline</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#abspos-items"> +<link rel="match" href="/css/reference/blank.html"> +<style> +div { + background: red; + margin-top: -20em; + position: absolute; + display: inline-flex; +} +</style> + +<div>FAIL</div> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-001.html b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-001.html new file mode 100644 index 0000000000..f601740846 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-001.html @@ -0,0 +1,709 @@ +<!DOCTYPE html> +<html> +<title>CSS Test: Absolutely positioned children of flexboxes</title> +<link rel="author" title="Google Inc." href="http://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> +<meta name="flags" content="dom"> +<meta name="assert" content="Checks that we correctly position abspos children +in a number of writing modes and alignments"> +<style> +body { + margin: 0; +} + +.title { + margin-top: 1em; +} + +.flexbox { + display: flex; + background-color: #aaa; + position: relative; +} +.flexbox div { + border: 0; + flex: none; +} + +.horizontal-tb { + writing-mode: horizontal-tb; +} +.vertical-rl { + writing-mode: vertical-rl; +} +.vertical-lr { + writing-mode: vertical-lr; +} + +.row { + flex-flow: row; +} +.row-reverse { + flex-flow: row-reverse; +} +.column { + flex-flow: column; +} +.column-reverse { + flex-flow: column-reverse; +} + +.flexbox :nth-child(1) { + background-color: blue; +} +.flexbox :nth-child(2) { + background-color: green; +} + +.rtl { + direction: rtl; +} +.ltr { + direction: ltr; +} + +.justify-content-flex-start { + justify-content: flex-start; +} +.justify-content-flex-end { + justify-content: flex-end; +} +.justify-content-center { + justify-content: center; +} +.justify-content-space-between { + justify-content: space-between; +} +.justify-content-space-around { + justify-content: space-around; +} +</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> +<script> +// Each flexbox has two abspos children - one is 40x10, the other 10x20. +// The flexbox itself is 80x20. +// All that is flipped for vertical flows. +var expectations = { + 'horizontal-tb': { + 'row': { + 'ltr': { + 'flex-start': { + 'child1': [0, 0], + 'child2': [0, 0], + }, + 'flex-end': { + 'child1': [40, 0], + 'child2': [70, 0], + }, + 'center': { + 'child1': [20, 0], + 'child2': [35, 0], + }, + 'space-between': { + 'child1': [0, 0], + 'child2': [0, 0], + }, + 'space-around': { + 'child1': [20, 0], + 'child2': [35, 0], + }, + }, + 'rtl': { + 'flex-start': { + 'child1': [40, 0], + 'child2': [70, 0], + }, + 'flex-end': { + 'child1': [0, 0], + 'child2': [0, 0], + }, + 'center': { + 'child1': [20, 0], + 'child2': [35, 0], + }, + 'space-between': { + 'child1': [40, 0], + 'child2': [70, 0], + }, + 'space-around': { + 'child1': [20, 0], + 'child2': [35, 0], + }, + }, + }, + 'column': { + 'ltr': { + 'flex-start': { + 'child1': [0, 0], + 'child2': [0, 0], + }, + 'flex-end': { + 'child1': [0, 40], + 'child2': [0, 70], + }, + 'center': { + 'child1': [0, 20], + 'child2': [0, 35], + }, + 'space-between': { + 'child1': [0, 0], + 'child2': [0, 0], + }, + 'space-around': { + 'child1': [0, 20], + 'child2': [0, 35], + }, + }, + 'rtl': { + 'flex-start': { + 'child1': [10, 0], + 'child2': [0, 0], + }, + 'flex-end': { + 'child1': [10, 40], + 'child2': [0, 70], + }, + 'center': { + 'child1': [10, 20], + 'child2': [0, 35], + }, + 'space-between': { + 'child1': [10, 0], + 'child2': [0, 0], + }, + 'space-around': { + 'child1': [10, 20], + 'child2': [0, 35], + }, + }, + }, + 'row-reverse': { + 'ltr': { + 'flex-start': { + 'child1': [40, 0], + 'child2': [70, 0], + }, + 'flex-end': { + 'child1': [0, 0], + 'child2': [0, 0], + }, + 'center': { + 'child1': [20, 0], + 'child2': [35, 0], + }, + 'space-between': { + 'child1': [40, 0], + 'child2': [70, 0], + }, + 'space-around': { + 'child1': [20, 0], + 'child2': [35, 0], + }, + }, + 'rtl': { + 'flex-start': { + 'child1': [0, 0], + 'child2': [0, 0], + }, + 'flex-end': { + 'child1': [40, 0], + 'child2': [70, 0], + }, + 'center': { + 'child1': [20, 0], + 'child2': [35, 0], + }, + 'space-between': { + 'child1': [0, 0], + 'child2': [0, 0], + }, + 'space-around': { + 'child1': [20, 0], + 'child2': [35, 0], + }, + }, + }, + 'column-reverse': { + 'ltr': { + 'flex-start': { + 'child1': [0, 40], + 'child2': [0, 70], + }, + 'flex-end': { + 'child1': [0, 0], + 'child2': [0, 0], + }, + 'center': { + 'child1': [0, 20], + 'child2': [0, 35], + }, + 'space-between': { + 'child1': [0, 40], + 'child2': [0, 70], + }, + 'space-around': { + 'child1': [0, 20], + 'child2': [0, 35], + }, + }, + 'rtl': { + 'flex-start': { + 'child1': [10, 40], + 'child2': [0, 70], + }, + 'flex-end': { + 'child1': [10, 0], + 'child2': [0, 0], + }, + 'center': { + 'child1': [10, 20], + 'child2': [0, 35], + }, + 'space-between': { + 'child1': [10, 40], + 'child2': [0, 70], + }, + 'space-around': { + 'child1': [10, 20], + 'child2': [0, 35], + }, + }, + }, + }, + 'vertical-rl': { + 'row': { + 'ltr': { + 'flex-start': { + 'child1': [10, 0], + 'child2': [0, 0], + }, + 'flex-end': { + 'child1': [10, 40], + 'child2': [0, 70], + }, + 'center': { + 'child1': [10, 20], + 'child2': [0, 35], + }, + 'space-between': { + 'child1': [10, 0], + 'child2': [0, 0], + }, + 'space-around': { + 'child1': [10, 20], + 'child2': [0, 35], + }, + }, + 'rtl': { + 'flex-start': { + 'child1': [10, 40], + 'child2': [0, 70], + }, + 'flex-end': { + 'child1': [10, 0], + 'child2': [0, 0], + }, + 'center': { + 'child1': [10, 20], + 'child2': [0, 35], + }, + 'space-between': { + 'child1': [10, 40], + 'child2': [0, 70], + }, + 'space-around': { + 'child1': [10, 20], + 'child2': [0, 35], + }, + }, + }, + 'column': { + 'ltr': { + 'flex-start': { + 'child1': [40, 0], + 'child2': [70, 0], + }, + 'flex-end': { + 'child1': [0, 0], + 'child2': [0, 0], + }, + 'center': { + 'child1': [20, 0], + 'child2': [35, 0], + }, + 'space-between': { + 'child1': [40, 0], + 'child2': [70, 0], + }, + 'space-around': { + 'child1': [20, 0], + 'child2': [35, 0], + }, + }, + 'rtl': { + 'flex-start': { + 'child1': [40, 10], + 'child2': [70, 0], + }, + 'flex-end': { + 'child1': [0, 10], + 'child2': [0, 0], + }, + 'center': { + 'child1': [20, 10], + 'child2': [35, 0], + }, + 'space-between': { + 'child1': [40, 10], + 'child2': [70, 0], + }, + 'space-around': { + 'child1': [20, 10], + 'child2': [35, 0], + }, + }, + }, + 'row-reverse': { + 'ltr': { + 'flex-start': { + 'child1': [10, 40], + 'child2': [0, 70], + }, + 'flex-end': { + 'child1': [10, 0], + 'child2': [0, 0], + }, + 'center': { + 'child1': [10, 20], + 'child2': [0, 35], + }, + 'space-between': { + 'child1': [10, 40], + 'child2': [0, 70], + }, + 'space-around': { + 'child1': [10, 20], + 'child2': [0, 35], + }, + }, + 'rtl': { + 'flex-start': { + 'child1': [10, 0], + 'child2': [0, 0], + }, + 'flex-end': { + 'child1': [10, 40], + 'child2': [0, 70], + }, + 'center': { + 'child1': [10, 20], + 'child2': [0, 35], + }, + 'space-between': { + 'child1': [10, 0], + 'child2': [0, 0], + }, + 'space-around': { + 'child1': [10, 20], + 'child2': [0, 35], + }, + }, + }, + 'column-reverse': { + 'ltr': { + 'flex-start': { + 'child1': [0, 0], + 'child2': [0, 0], + }, + 'flex-end': { + 'child1': [40, 0], + 'child2': [70, 0], + }, + 'center': { + 'child1': [20, 0], + 'child2': [35, 0], + }, + 'space-between': { + 'child1': [0, 0], + 'child2': [0, 0], + }, + 'space-around': { + 'child1': [20, 0], + 'child2': [35, 0], + }, + }, + 'rtl': { + 'flex-start': { + 'child1': [0, 10], + 'child2': [0, 0], + }, + 'flex-end': { + 'child1': [40, 10], + 'child2': [70, 0], + }, + 'center': { + 'child1': [20, 10], + 'child2': [35, 0], + }, + 'space-between': { + 'child1': [0, 10], + 'child2': [0, 0], + }, + 'space-around': { + 'child1': [20, 10], + 'child2': [35, 0], + }, + }, + }, + }, + 'vertical-lr': { + 'row': { + 'ltr': { + 'flex-start': { + 'child1': [0, 0], + 'child2': [0, 0], + }, + 'flex-end': { + 'child1': [0, 40], + 'child2': [0, 70], + }, + 'center': { + 'child1': [0, 20], + 'child2': [0, 35], + }, + 'space-between': { + 'child1': [0, 0], + 'child2': [0, 0], + }, + 'space-around': { + 'child1': [0, 20], + 'child2': [0, 35], + }, + }, + 'rtl': { + 'flex-start': { + 'child1': [0, 40], + 'child2': [0, 70], + }, + 'flex-end': { + 'child1': [0, 0], + 'child2': [0, 0], + }, + 'center': { + 'child1': [0, 20], + 'child2': [0, 35], + }, + 'space-between': { + 'child1': [0, 40], + 'child2': [0, 70], + }, + 'space-around': { + 'child1': [0, 20], + 'child2': [0, 35], + }, + }, + }, + 'column': { + 'ltr': { + 'flex-start': { + 'child1': [0, 0], + 'child2': [0, 0], + }, + 'flex-end': { + 'child1': [40, 0], + 'child2': [70, 0], + }, + 'center': { + 'child1': [20, 0], + 'child2': [35, 0], + }, + 'space-between': { + 'child1': [0, 0], + 'child2': [0, 0], + }, + 'space-around': { + 'child1': [20, 0], + 'child2': [35, 0], + }, + }, + 'rtl': { + 'flex-start': { + 'child1': [0, 10], + 'child2': [0, 0], + }, + 'flex-end': { + 'child1': [40, 10], + 'child2': [70, 0], + }, + 'center': { + 'child1': [20, 10], + 'child2': [35, 0], + }, + 'space-between': { + 'child1': [0, 10], + 'child2': [0, 0], + }, + 'space-around': { + 'child1': [20, 10], + 'child2': [35, 0], + }, + }, + }, + 'row-reverse': { + 'ltr': { + 'flex-start': { + 'child1': [0, 40], + 'child2': [0, 70], + }, + 'flex-end': { + 'child1': [0, 0], + 'child2': [0, 0], + }, + 'center': { + 'child1': [0, 20], + 'child2': [0, 35], + }, + 'space-between': { + 'child1': [0, 40], + 'child2': [0, 70], + }, + 'space-around': { + 'child1': [0, 20], + 'child2': [0, 35], + }, + }, + 'rtl': { + 'flex-start': { + 'child1': [0, 0], + 'child2': [0, 0], + }, + 'flex-end': { + 'child1': [0, 40], + 'child2': [0, 70], + }, + 'center': { + 'child1': [0, 20], + 'child2': [0, 35], + }, + 'space-between': { + 'child1': [0, 0], + 'child2': [0, 0], + }, + 'space-around': { + 'child1': [0, 20], + 'child2': [0, 35], + }, + }, + }, + 'column-reverse': { + 'ltr': { + 'flex-start': { + 'child1': [40, 0], + 'child2': [70, 0], + }, + 'flex-end': { + 'child1': [0, 0], + 'child2': [0, 0], + }, + 'center': { + 'child1': [20, 0], + 'child2': [35, 0], + }, + 'space-between': { + 'child1': [40, 0], + 'child2': [70, 0], + }, + 'space-around': { + 'child1': [20, 0], + 'child2': [35, 0], + }, + }, + 'rtl': { + 'flex-start': { + 'child1': [40, 10], + 'child2': [70, 0], + }, + 'flex-end': { + 'child1': [0, 10], + 'child2': [0, 0], + }, + 'center': { + 'child1': [20, 10], + 'child2': [35, 0], + }, + 'space-between': { + 'child1': [40, 10], + 'child2': [70, 0], + }, + 'space-around': { + 'child1': [20, 10], + 'child2': [35, 0], + }, + }, + }, + }, +}; + +var writingModes = ['horizontal-tb', 'vertical-rl', 'vertical-lr']; +var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse']; +var directions = ['ltr', 'rtl']; +var justifyContents = ['flex-start', 'flex-end', 'center', 'space-between', 'space-around']; + +function mainAxisDirection(writingMode, flexDirection) +{ + if ((writingMode.indexOf('horizontal') != -1 && flexDirection.indexOf('row') != -1) + || (writingMode.indexOf('vertical') != -1 && flexDirection.indexOf('column') != -1)) + return 'width'; + return 'height'; +} + +function addChild(flexbox, mainAxis, crossAxis, mainAxisLength, crossAxisLength, expectations) +{ + var child = document.createElement('div'); + child.setAttribute('style', mainAxis + ': ' + mainAxisLength + 'px;' + + crossAxis + ': ' + crossAxisLength + 'px; position: absolute;'); + + child.setAttribute("data-expected-" + mainAxis, mainAxisLength); + child.setAttribute("data-expected-" + crossAxis, crossAxisLength); + child.setAttribute("data-offset-x", expectations[0]); + child.setAttribute("data-offset-y", expectations[1]); + + flexbox.appendChild(child); +} + +writingModes.forEach(function(writingMode) { + flexDirections.forEach(function(flexDirection) { + directions.forEach(function(direction) { + justifyContents.forEach(function(justifyContent) { + var flexboxClassName = writingMode + ' ' + direction + ' ' + flexDirection + ' justify-content-' + justifyContent; + var title = document.createElement('div'); + title.className = 'title'; + title.innerHTML = flexboxClassName; + document.body.appendChild(title); + + var mainAxis = mainAxisDirection(writingMode, flexDirection); + var crossAxis = (mainAxis == 'width') ? 'height' : 'width'; + + var flexbox = document.createElement('div'); + flexbox.className = 'flexbox ' + flexboxClassName; + flexbox.setAttribute('style', mainAxis + ': 80px;' + crossAxis + ': 20px'); + + var baselineMargin = (flexDirection.indexOf('row') != -1) ? 'margin-block-start: 5px' : 'margin-inline-start: 5px'; + + var testExpectations = expectations[writingMode][flexDirection][direction][justifyContent]; + addChild(flexbox, mainAxis, crossAxis, 40, 10, testExpectations['child1']); + addChild(flexbox, mainAxis, crossAxis, 10, 20, testExpectations['child2']); + + document.body.appendChild(flexbox); + }) + }) + }) +}) + +</script> + +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-002.html b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-002.html new file mode 100644 index 0000000000..5c1cf08475 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-002.html @@ -0,0 +1,160 @@ +<!DOCTYPE html> +<html> +<title>CSS Test: Absolutely positioned children of flexboxes</title> +<link href="../support/flexbox.css" rel="stylesheet"> +<link rel="author" title="Google Inc." href="http://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> +<meta name="flags" content="dom"> +<meta name="assert" content="Checks that we correctly position abspos children +with different alignments and dynamic changes"> +<style> +body { + margin: 0; +} +.flexbox { + background-color: green; + height: 100px; + width: 100px; + margin: 10px; +} +.flexbox > * { + flex: none; +} +.relative { + position: relative; +} +.flexbox > div { + width: 20px; + height: 20px; +} +.absolute { + position: absolute; +} +#placed-absolute { + top: 20px; + left: 20px; +} + +.rtl { + direction: rtl; +} +.ltr { + direction: ltr; +} + +.flexbox :nth-child(1) { + background-color: blue; +} +.flexbox :nth-child(2) { + background-color: yellow; +} +.flexbox :nth-child(3) { + background-color: salmon; +} +.flexbox :nth-child(4) { + background-color: grey; +} +.flexbox :nth-child(5) { + background-color: red; +} +.flexbox :nth-child(6) { + background-color: orange; +} +.flexbox :nth-child(7) { + 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='flexbox relative align-items-center'> + <div id='placed-absolute' class='absolute' data-offset-x=20 data-offset-y=20></div> +</div> + +<div class='flexbox relative align-items-center'> + <div data-offset-x=0 data-offset-y=40></div> + <div class='absolute' data-offset-x=0 data-offset-y=40></div> + <div data-offset-x=20 data-offset-y=40></div> + <div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div> +</div> + +<div class="relative"> +<div class='flexbox align-items-center'> + <div data-offset-x=10 data-offset-y=40></div> + <div class='absolute' data-offset-x=10 data-offset-y=40></div> + <div data-offset-x=30 data-offset-y=40></div> + <div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div> +</div> +</div> + +<div class='flexbox relative column rtl'> + <div data-offset-x=80 data-offset-y=0></div> + <div class='absolute' data-offset-x=80 data-offset-y=0></div> + <div data-offset-x=80 data-offset-y=20></div> + <div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div> +</div> + +<div class="relative"> +<div class='flexbox wrap-reverse'> + <div style="width:90px" data-offset-x=10 data-offset-y=80></div> + <div class="absolute" data-offset-x=10 data-offset-y=80></div> + <div data-offset-x=10 data-offset-y=30></div> + <div class="absolute" data-offset-x=10 data-offset-y=80></div> + <div data-offset-x=30 data-offset-y=30></div> + <div class="absolute" data-offset-x=10 data-offset-y=80></div> + <div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div> +</div> +</div> + +<div class='flexbox relative'> + <div style="margin: auto;" data-offset-x=40 data-offset-y=40></div> + <div class="absolute" style="margin: auto;" data-offset-x=0 data-offset-y=0></div> + <div class="absolute" style="margin: auto;" data-offset-x=0 data-offset-y=0></div> + <div class="absolute" style="margin: auto; top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div> +</div> + +<div class='flexbox align-items-stretch relative'> + <div style="height: auto" data-offset-x=0 data-offset-y=0 data-expected-height=100></div> + <div class="absolute" style="height: auto" data-offset-x=0 data-offset-y=0 data-expected-height=0></div> + <div class="absolute" style="height: auto; top: 5px; left: 5px" data-offset-x=5 data-offset-y=5 data-expected-height=0></div> +</div> + +<div class="flexbox wrap relative"> + <div style="width: 100px;" data-offset-x=0 data-offset-y=0></div> + <div class="absolute" data-offset-x=0 data-offset-y=0></div> + <div style="width: 50px;" data-offset-x=0 data-offset-y=50></div> + <div class="absolute" data-offset-x=0 data-offset-y=0></div> + <div style="width: 50px;" data-offset-x=50 data-offset-y=50></div> + <div class="absolute" data-offset-x=0 data-offset-y=0></div> +</div> + +<div class="flexbox wrap relative align-items-flex-end"> + <div style="width: 100px;" data-offset-x=0 data-offset-y=30></div> + <div class="absolute" data-offset-x=0 data-offset-y=80></div> + <div style="width: 50px;" data-offset-x=0 data-offset-y=80></div> + <div class="absolute" data-offset-x=0 data-offset-y=80></div> + <div style="width: 50px;" data-offset-x=50 data-offset-y=80></div> + <div class="absolute" data-offset-x=0 data-offset-y=80></div> +</div> + + +<script> +var absolute = document.getElementById('placed-absolute'); +var beforePosition = absolute.getBoundingClientRect(); +document.querySelector('.flexbox').style.height = '101px'; +var afterPosition = absolute.getBoundingClientRect(); + +// Positioned element should not change position when the height of it's parent flexbox is changed. +for (key in beforePosition) { + test(function() { + assert_equals(beforePosition[key], afterPosition[key]); + }, 'position of ' + key); +} +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-003.html b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-003.html new file mode 100644 index 0000000000..a858bac9fc --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-003.html @@ -0,0 +1,96 @@ +<!DOCTYPE html> +<title>CSS Test: Absolutely positioned children of flexboxes</title> +<link rel="author" title="Google Inc." href="http://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> +<meta name="flags" content="dom"> +<meta name="assert" content="Checks that we correctly handle border and +padding in combination with abspos items"> +<style> +.rect { + position: absolute; + width: 50px; + height: 50px; + background-color: green; +} + +.flexbox { + position: relative; + width: 100px; + height: 100px; + outline: 3px solid black; +} +</style> + +<link rel="stylesheet" href="../support/flexbox.css"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.rect')"> +<div id=log></div> + +<div class="flexbox" style="padding-top: 10px; padding-left: 20px;"> + <div class="rect" data-offset-x="20" data-offset-y="10"></div> +</div> + +<div class="flexbox column" style="padding-top: 10px; padding-left: 20px;"> + <div class="rect" data-offset-x="20" data-offset-y="10"></div> +</div> + +<div class="flexbox" style="writing-mode: vertical-lr; padding-top: 10px; padding-left: 20px;"> + <div class="rect" data-offset-x="20" data-offset-y="10"></div> +</div> + +<div class="flexbox column" style="writing-mode: vertical-lr; padding-top: 10px; padding-left: 20px;"> + <div class="rect" data-offset-x="20" data-offset-y="10"></div> +</div> + +<div class="flexbox" style="direction: rtl; padding-top: 10px; padding-right: 20px;"> + <div class="rect" data-offset-x="50" data-offset-y="10"></div> +</div> + +<div class="flexbox column" style="direction: rtl; padding-top: 10px; padding-right: 20px;"> + <div class="rect" data-offset-x="50" data-offset-y="10"></div> +</div> + +<div class="flexbox" style="direction: rtl; writing-mode: vertical-lr; padding-bottom: 10px; padding-left: 20px;"> + <div class="rect" data-offset-x="20" data-offset-y="50"></div> +</div> + +<div class="flexbox column" style="direction: rtl; writing-mode: vertical-lr; padding-bottom: 10px; padding-left: 20px;"> + <div class="rect" data-offset-x="20" data-offset-y="50"></div> +</div> + +<hr> +<div class="flexbox" style="border-top: 10px solid; border-left: 20px solid;"> + <div class="rect" data-offset-x="0" data-offset-y="0"></div> +</div> + +<div class="flexbox column" style="border-top: 10px solid; border-left: 20px solid;"> + <div class="rect" data-offset-x="0" data-offset-y="0"></div> +</div> + +<div class="flexbox" style="writing-mode: vertical-lr; border-top: 10px solid; border-left: 20px solid;"> + <div class="rect" data-offset-x="0" data-offset-y="0"></div> +</div> + +<div class="flexbox column" style="writing-mode: vertical-lr; border-top: 10px solid; border-left: 20px solid;"> + <div class="rect" data-offset-x="0" data-offset-y="0"></div> +</div> + +<div class="flexbox" style="direction: rtl; border-top: 10px solid; border-right: 20px solid;"> + <div class="rect" data-offset-x="50" data-offset-y="0"></div> +</div> + +<div class="flexbox column" style="direction: rtl; border-top: 10px solid; border-right: 20px solid;"> + <div class="rect" data-offset-x="50" data-offset-y="0"></div> +</div> + +<div class="flexbox" style="direction: rtl; writing-mode: vertical-lr; border-bottom: 10px solid; border-left: 20px solid;"> + <div class="rect" data-offset-x="0" data-offset-y="50"></div> +</div> + +<div class="flexbox column" style="direction: rtl; writing-mode: vertical-lr; border-bottom: 10px solid; border-left: 20px solid;"> + <div class="rect" data-offset-x="0" data-offset-y="50"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-004.html b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-004.html new file mode 100644 index 0000000000..af8bc6284c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-004.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<title>CSS Test: Absolutely positioned children of flexboxes</title> +<link rel="author" title="Google Inc." href="http://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> +<meta name="flags" content="dom"> +<meta name="assert" content="Checks that we correctly handle when a flex item +becomes absolutely positioned"> +<style> +#flex { + display: flex; + position: relative; + background: red; + width: 500px; + height: 200px; +} + +#item { + background: green; + left: 0; + right: 0; + top: 0; + bottom: 0; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<script> +function update() { + var item = document.getElementById("item"); + item.offsetHeight; + item.style.position = "absolute"; + item.offsetHeight; + checkLayout("#flex"); +} +</script> + +<body onload="update();"> + +<div id="flex"> + <div id="item" data-expected-width="500"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-005-ref.html b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-005-ref.html new file mode 100644 index 0000000000..2f7e669c72 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-005-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Google Inc." href="http://www.google.com/"> +<p>This test should not have a horizontal scrollbar</p> + +<div style="width: 400px; height: 100px; overflow-x: hidden; overflow-y: scroll;"> +<br> +<br> +<br> +<br> +<br> +<br> +<br> +<br> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-005.html b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-005.html new file mode 100644 index 0000000000..3199dfb9a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-005.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<title>CSS Test: Absolutely positioned children of flexboxes</title> +<link rel="author" title="Google Inc." href="http://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> +<link rel="match" href="position-absolute-005-ref.html"> +<meta name="assert" content="Checks that we correctly handle overflow: auto in +abspos nodes in flexbox"> + +<style> + body { + width: 400px; + height: 300px; + } + + .flexbox { + display: flex; + } + + .column { + flex-direction: column; + } + + .flex11a { + flex: 1 1 auto; + } + + .root { + height: 100px; + overflow-y: auto; + position: relative; + } + + #abspos { + position: absolute; + left: 0; + right: 0; + top: 0; + height: 10px; + } +</style> + + +<p>This test should not have a horizontal scrollbar</p> + +<div class="flexbox column"> + <div class="flexbox"> + <div class="flex11a"> + <div class="root"> + <div> + <div> + <div id="history"></div> + <div id="abspos"></div> + </div> + </div> + </div> + </div> + </div> +</div> + +<script> +onload = function() { + var historyEl = document.getElementById('history'); + historyEl.offsetWidth; + historyEl.innerText = '\n\n\n\n\n\n\n\n'; +}; +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-006.html b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-006.html new file mode 100644 index 0000000000..bc9bc2c0e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-006.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>abspos items</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> +<link rel="bookmark" href="https://crbug.com/1066859"> +<meta name="assert" content="Flex sets correct static position for abspos item when containing block is grid." /> + +<style> +div { + height: 100px; + width: 100px; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: grid; position: relative;"> + <div style="display: flex; align-items: center; background: red"> + <div style="position: absolute; background: green"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-007.html b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-007.html new file mode 100644 index 0000000000..3f7106c102 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-007.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>abspos items</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> +<link rel="bookmark" href="https://crbug.com/1066859"> +<meta name="assert" content="Flex sets correct static position for abspos item when containing block is root element." /> + +<style> +div { + height: 100px; + width: 100px; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: flex; align-items: center; background: red"> + <div style="position: absolute; background: green"> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-008.html b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-008.html new file mode 100644 index 0000000000..7a9f8b6dfe --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-008.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>abspos items</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> +<link rel="bookmark" href="https://crbug.com/1066859"> +<meta name="assert" content="Flex sets correct static position for abspos item when containing block is grid and alignment is flex-end." /> + +<style> +div { + height: 100px; + width: 100px; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: grid; position: relative;"> + <div style="display: flex; align-items: flex-end; background: red"> + <div style="position: absolute; background: green"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-009.html b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-009.html new file mode 100644 index 0000000000..5751bea1b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-009.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>abspos items</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> +<link rel="bookmark" href="https://crbug.com/1066859"> +<meta name="assert" content="Flex sets correct static position for abspos item when containing block is grid and abspos item is also grid." /> +<style> +div { + height: 100px; + width: 100px; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: grid; position: relative;"> + <div style="display: flex; align-items: center; background: red"> + <div style="position: absolute; background: green; display: grid"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-010.html b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-010.html new file mode 100644 index 0000000000..c59cc7d67d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-010.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>abspos items</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> +<link rel="bookmark" href="https://crbug.com/1066859"> +<meta name="assert" content="Flex sets correct static position for grid abspos item when containg block is regular block flow." /> +<style> +div { + height: 100px; + width: 100px; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="position: relative;"> + <div style="display: flex; align-items: center; background: red"> + <div style="position: absolute; background: green; display: grid"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-011.html b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-011.html new file mode 100644 index 0000000000..142cd4b416 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-011.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>abspos items</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> +<link rel="bookmark" href="https://crbug.com/1066859"> +<meta name="assert" content="Flex sets correct static position for abspos item when containing block is grid and weird abspos edge is due to justify-content, not alignment." /> + +<style> +div { + height: 100px; + width: 100px; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: grid; position: relative;"> + <div style="display: flex; justify-content: flex-end; background: red"> + <div style="position: absolute; background: green"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-012.html b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-012.html new file mode 100644 index 0000000000..4660674012 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-012.html @@ -0,0 +1,116 @@ +<!DOCTYPE html> +<html> +<title>CSS Test: Absolutely positioned children of flexboxes</title> +<link rel="author" title="Google Inc." href="http://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> +<meta name="assert" content="Checks that we correctly position abspos children in a number of writing modes and alignments when containing block is grid."> +<style> + +.abspos { + height: 50px; + width: 50px; + background: lightblue; + position: absolute; + flex: none; +} + +.grid { + display: grid; + position: relative; +} + +.title { + margin-top: 1em; +} + +.flexbox { + display: flex; + background-color: #aaa; + height: 100px; + width: 100px; +} + +.horizontal-tb { + writing-mode: horizontal-tb; +} +.vertical-rl { + writing-mode: vertical-rl; +} +.vertical-lr { + writing-mode: vertical-lr; +} + +.rtl { + direction: rtl; +} +.ltr { + direction: ltr; +} + +.align-items-flex-start { + align-items: flex-start; +} +.align-items-flex-end { + align-items: flex-end; +} +.justify-content-flex-start { + justify-content: flex-start; +} +.justify-content-flex-end { + justify-content: flex-end; +} +</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> +<script> + +var writingModes = ['horizontal-tb', 'vertical-rl', 'vertical-lr']; +var directions = ['ltr', 'rtl']; +var justifyContents = ['flex-start', 'flex-end']; +var alignItems = ['flex-start', 'flex-end']; +var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse']; + +// These were harvested from Firefox 76.0b4. +var x = [0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50]; + +var y = [0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0]; + +var test_number = 1; + +writingModes.forEach(function(flexWritingMode) { + flexDirections.forEach(function(flexDirection) { + directions.forEach(function(direction) { + justifyContents.forEach(function(justifyContent) { + alignItems.forEach(function(alignment) { + var flexboxClassName = flexWritingMode + ' ' + direction + ' ' + flexDirection + ' justify-content-' + justifyContent + ' align-items-' + alignment; + var title = document.createElement('div'); + title.className = 'title'; + title.innerHTML = flexboxClassName + " .flexbox " + (test_number++); + document.body.appendChild(title); + + var flexbox = document.createElement('div'); + flexbox.className = 'flexbox ' + flexboxClassName; + + var child = document.createElement('div'); + child.setAttribute('class', 'abspos'); + child.setAttribute("data-offset-x", x.shift()); + child.setAttribute("data-offset-y", y.shift()); + flexbox.appendChild(child); + + var relpos = document.createElement('div'); + relpos.className = 'grid'; + relpos.appendChild(flexbox); + + document.body.appendChild(relpos); + }) + }) + }) + }) +}) + +</script> + +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-013.html b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-013.html new file mode 100644 index 0000000000..cdbdfcfbf7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-013.html @@ -0,0 +1,154 @@ +<!DOCTYPE html> +<title>CSS Test: Absolutely positioned children of flexboxes</title> +<link rel="author" title="Google Inc." href="http://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> +<meta name="assert" content="Checks the abspos position of flex children in a number of writing modes, alignments, etc."> +<style> +.abspos { + height: 50px; + width: 50px; + background: lightblue; + position: absolute; + flex: none; +} + +.relpos { + position: relative; +} + +.title { + margin-top: 1em; +} + +.flexbox { + display: flex; + background-color: #aaa; + height: 100px; + width: 100px; +} + +.horizontal-tb { + writing-mode: horizontal-tb; +} +.vertical-rl { + writing-mode: vertical-rl; +} +.vertical-lr { + writing-mode: vertical-lr; +} + +.rtl { + direction: rtl; +} +.ltr { + direction: ltr; +} + +.align-items-flex-start { + align-items: flex-start; +} +.align-items-flex-end { + align-items: flex-end; +} +.align-items-stretch { + align-items: stretch; +} +.justify-content-flex-start { + justify-content: flex-start; +} +.justify-content-flex-end { + justify-content: flex-end; +} + +.row { + flex-direction: row; +} +.row-reverse { + flex-direction: row-reverse; +} +.column { + flex-direction: column; +} +.column-reverse { + flex-direction: column-reverse; +} + +.nowrap { + flex-wrap: nowrap; +} +.wrap { + flex-wrap: wrap; +} +.wrap-reverse { + flex-wrap: wrap-reverse; +} + +</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> +<script> + +var writingModes = ['horizontal-tb', 'vertical-rl', 'vertical-lr']; +var directions = ['ltr', 'rtl']; +var justifyContents = ['flex-start', 'flex-end']; +var alignItems = ['flex-start', 'flex-end', 'stretch']; +var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse']; +var wraps = ['nowrap', 'wrap', 'wrap-reverse']; + +// These expected values were harvested from Chrome 85. Firefox 78b6 agrees +// except when align-items:stretch and flex-wrap:wrap-reverse are both in +// effect. +// Chrome 83 and FF 78b6 agree with these values when the lone flex child is +// position:static instead of position:absolute. That is evidence that these +// values are all correct, because the position of a staticpos child is +// specified to be identical to the abspos position when there are no other +// children or specified offsets. +var x = [0,0,0,50,50,50,50,50,50,0,0,0,0,50,0,0,50,0,50,0,50,50,0,50,50,50,50,0,0,0,0,0,0,50,50,50,0,50,0,0,50,0,50,0,50,50,0,50,0,0,0,50,50,50,50,50,50,0,0,0,0,50,0,0,50,0,50,0,50,50,0,50,50,50,50,0,0,0,0,0,0,50,50,50,0,50,0,0,50,0,50,0,50,50,0,50,0,0,0,50,50,50,50,50,50,0,0,0,50,0,50,50,0,50,0,50,0,0,50,0,50,50,50,0,0,0,0,0,0,50,50,50,50,0,50,50,0,50,0,50,0,0,50,0,50,0,50,50,0,50,50,0,50,50,0,50,50,50,50,0,0,0,50,50,50,0,0,0,50,0,50,50,0,50,50,0,50,50,0,50,0,0,0,50,50,50,0,0,0,50,50,50,50,0,50,50,0,50,50,0,50,50,0,50,50,50,50,0,0,0,50,50,50,0,0,0,50,0,50,50,0,50,50,0,50,50,0,50,0,0,0,50,50,50,0,0,0,50,50,50,0,50,0,0,50,0,0,50,0,0,50,0,50,50,50,0,0,0,50,50,50,0,0,0,0,50,0,0,50,0,0,50,0,0,50,0,0,0,0,50,50,50,0,0,0,50,50,50,0,50,0,0,50,0,0,50,0,0,50,0,0,0,0,50,50,50,0,0,0,50,50,50,0,50,0,0,50,0,0,50,0,0,50,0,50,50,50,0,0,0,50,50,50,0,0,0,0,50,0,0,50,0,0,50,0,0,50,0,0,0,0,50,50,50,0,0,0,50,50,50,0,50,0,0,50,0,0,50,0,0,50,0,50,50,50,0,0,0,50,50,50,0,0,0,50,0,50,50,0,50,50,0,50,50,0,50,0,0,0,50,50,50,0,0,0,50,50,50,50,0,50,50,0,50,50,0,50,50,0,50,50,50,50,0,0,0,50,50,50,0,0,0]; + +var y = [0,50,0,0,50,0,0,50,0,0,50,0,0,0,0,50,50,50,0,0,0,50,50,50,0,50,0,0,50,0,0,50,0,0,50,0,50,50,50,0,0,0,50,50,50,0,0,0,0,50,0,0,50,0,0,50,0,0,50,0,0,0,0,50,50,50,0,0,0,50,50,50,0,50,0,0,50,0,0,50,0,0,50,0,50,50,50,0,0,0,50,50,50,0,0,0,50,0,50,50,0,50,50,0,50,50,0,50,0,0,0,50,50,50,0,0,0,50,50,50,50,0,50,50,0,50,50,0,50,50,0,50,50,50,50,0,0,0,50,50,50,0,0,0,0,0,0,50,50,50,50,50,50,0,0,0,0,50,0,0,50,0,50,0,50,50,0,50,50,50,50,0,0,0,0,0,0,50,50,50,0,50,0,0,50,0,50,0,50,50,0,50,0,0,0,50,50,50,50,50,50,0,0,0,0,50,0,0,50,0,50,0,50,50,0,50,50,50,50,0,0,0,0,0,0,50,50,50,0,50,0,0,50,0,50,0,50,50,0,50,0,0,0,50,50,50,50,50,50,0,0,0,50,0,50,50,0,50,0,50,0,0,50,0,50,50,50,0,0,0,0,0,0,50,50,50,50,0,50,50,0,50,0,50,0,0,50,0,0,0,0,50,50,50,50,50,50,0,0,0,0,50,0,0,50,0,50,0,50,50,0,50,50,50,50,0,0,0,0,0,0,50,50,50,0,50,0,0,50,0,50,0,50,50,0,50,0,0,0,50,50,50,50,50,50,0,0,0,0,50,0,0,50,0,50,0,50,50,0,50,50,50,50,0,0,0,0,0,0,50,50,50,0,50,0,0,50,0,50,0,50,50,0,50,0,0,0,50,50,50,50,50,50,0,0,0,50,0,50,50,0,50,0,50,0,0,50,0,50,50,50,0,0,0,0,0,0,50,50,50,50,0,50,50,0,50,0,50,0,0,50,0]; + +var test_number = 1; + +writingModes.forEach(function(flexWritingMode) { + wraps.forEach(function(wrap) { + flexDirections.forEach(function(flexDirection) { + directions.forEach(function(direction) { + justifyContents.forEach(function(justifyContent) { + alignItems.forEach(function(alignment) { + var flexboxClassName = flexWritingMode + ' ' + direction + ' ' + flexDirection + ' justify-content-' + justifyContent + ' align-items-' + alignment + ' ' + wrap; + var title = document.createElement('div'); + title.className = 'title'; + title.innerHTML = flexboxClassName + " .flexbox " + (test_number++); + document.body.appendChild(title); + + var flexbox = document.createElement('div'); + flexbox.className = 'flexbox ' + flexboxClassName; + + var child = document.createElement('div'); + child.setAttribute('class', 'abspos'); + child.setAttribute("data-offset-x", x.shift()); + child.setAttribute("data-offset-y", y.shift()); + flexbox.appendChild(child); + + var relpos = document.createElement('div'); + relpos.className = 'relpos'; + relpos.appendChild(flexbox); + + document.body.appendChild(relpos); + }) + }) + }) + }) + }) +}) + +// Print the x,y offsets for pasting into above x,y arrays. +absposes = document.querySelectorAll('.abspos') +lefts = Array.from(absposes).map(x => x.offsetLeft) +tops = Array.from(absposes).map(x => x.offsetTop) + +</script> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-014.html b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-014.html new file mode 100644 index 0000000000..f02a268007 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-014.html @@ -0,0 +1,82 @@ +<!doctype html> +<title>abspos flex children with top margins</title> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.org"> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> +<link rel="bookmark" href="https://crbug.com/808750"> +<meta name="flags" content="dom"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<style> +.container { + display: flex; + background: lightgray; + width: 250px; + height: 48px; + + /* Add some margin so that overflowing things don't stomp on each other: */ + margin: 50px 10px; + float: left; + position: relative; +} + +.contentBox { + position: absolute; + /* Margin-box is 100px tall (2px of border + 98px of content): */ + border: 1px solid teal; + height: 98px; + + width: 98px; + left: 20px; +} +.marginBox { + position: absolute; + /* Margin-box is 100px tall + (60px of margin-top + 2px of border + 38px of content): */ + margin-top: 60px; + border: 1px solid orange; + height: 38px; + + width: 100px; + left: 120px; +} +</style> +<div class="container"> + <div class="contentBox"> + aaa + </div> + <div class="marginBox"> + bbb + </div> +</div> + +<div class="container" style="align-items: flex-end"> + <div class="contentBox"> + aaa + </div> + <div class="marginBox"> + bbb + </div> +</div> + +<div class="container" style="align-items: center"> + <div class="contentBox"> + aaa + </div> + <div class="marginBox"> + bbb + </div> +</div> +<div id=log style="clear:both"></div> + +<script> +test(function() { + var elements = document.querySelectorAll(".contentBox, .marginBox"); + for (var i = 0; i < elements.length; i+=2) { + assert_equals(elements[i].getBoundingClientRect().bottom, + elements[i+1].getBoundingClientRect().bottom); + } +}, "The bottom of each pair of boxes should be the same"); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-015.html b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-015.html new file mode 100644 index 0000000000..1c0f3bc4c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-015.html @@ -0,0 +1,19 @@ +<!doctype html> +<title>abspos flex children with top margins</title> +<link rel="author" title="Manuel Rego" href="mailto:rego@igalia.com"> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> +<link rel="bookmark" href="https://crbug.com/886592"> +<meta name="assert" content="Check abspos position of flex children with margins in justify-content: flex-end container."> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<div style="display: flex; width: 200px; height: 100px; justify-content: flex-end; border: solid thick; position: relative;"> + <div style="background: cyan; margin: 20px; position: absolute; width: 30px; height: 40px;" data-offset-x="150" id="abspos"></div> +</div> + +<script> +checkLayout('#abspos'); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-containing-block-001-ref.html b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-containing-block-001-ref.html new file mode 100644 index 0000000000..5f8bcaf539 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-containing-block-001-ref.html @@ -0,0 +1,25 @@ +<!doctype html> +<title>CSS Test Reference</title> +<meta charset="utf-8"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<style> +.parent { + position: fixed; + top: 0; + left: 0; + display: block; + width: 200px; + height: 200px; + background: yellow; +} + +.child { + position: absolute; + left: 50px; + top: 50px; + width: 100px; + height: 100px; + background: green; +} +</style> +<div class="parent"><div class="child"></div></div> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-containing-block-001.html b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-containing-block-001.html new file mode 100644 index 0000000000..1edfdb04ca --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-containing-block-001.html @@ -0,0 +1,28 @@ +<!doctype html> +<title>CSS Test: Absolutely positioned children of flex container with CSS align</title> +<meta charset="utf-8"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1386654"> +<link rel="match" href="position-absolute-containing-block-001-ref.html"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<style> +.parent { + position: fixed; + top: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; + width: 200px; + height: 200px; + background: yellow; +} + +.child { + position: absolute; + width: 100px; + height: 100px; + background: green; +} +</style> +<div class="parent"><div class="child"></div></div> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-containing-block-002-ref.html b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-containing-block-002-ref.html new file mode 100644 index 0000000000..90ee38856c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-containing-block-002-ref.html @@ -0,0 +1,25 @@ +<!doctype html> +<title>CSS Test Reference</title> +<meta charset="utf-8"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<style> +.parent { + position: fixed; + top: 0; + left: 0; + display: block; + width: 200px; + height: 200px; + background: yellow; +} + +.child { + position: absolute; + left: 60px; + top: 60px; + width: 100px; + height: 100px; + background: green; +} +</style> +<div class="parent"><div class="child"></div></div> diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-containing-block-002.html b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-containing-block-002.html new file mode 100644 index 0000000000..aecbf0b4c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-containing-block-002.html @@ -0,0 +1,36 @@ +<!doctype html> +<title>CSS Test: Absolutely positioned children of flex container with CSS align</title> +<meta charset="utf-8"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1386654"> +<link rel="match" href="position-absolute-containing-block-002-ref.html"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<style> +.parent { + position: fixed; + top: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; + width: 180px; + height: 180px; + + /* Expand the background area to 200px, without touching the content-box, + which is what flex absolute children should be aligned relative to. */ + border-top: 5px solid yellow; + padding-top: 15px; + border-left: 5px solid yellow; + padding-left: 15px; + + background: yellow; +} + +.child { + position: absolute; + width: 100px; + height: 100px; + background: green; +} +</style> +<div class="parent"><div class="child"></div></div> diff --git a/testing/web-platform/tests/css/css-flexbox/align-baseline.html b/testing/web-platform/tests/css/css-flexbox/align-baseline.html new file mode 100644 index 0000000000..31bcca6977 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-baseline.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<link href="support/flexbox.css" rel="stylesheet"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#valdef-align-items-baseline"> +<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-reverse"> +<link rel="match" href="reference/align-baseline-ref.html"> +<style> +body { + margin: 0; +} +</style> + +<body> +<div class='flexbox column align-items-baseline'> + <h1>This text</h1> + <p>should be left aligned.</p> +</div> + +<div class='flexbox column align-items-baseline wrap-reverse'> + <h1>This text</h1> + <p>should be right aligned.</p> +</div> +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/align-content-001.htm b/testing/web-platform/tests/css/css-flexbox/align-content-001.htm new file mode 100644 index 0000000000..5fd6035124 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-content-001.htm @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: A multi-line flex container with the 'align-content' property set to 'center'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" /> + <link rel="match" href="reference/align-content-001-ref.html" /> + <meta name="assert" content="This test checks that a multi-line flex container with 'align-content: center' centers lines in the flex container." /> + <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-6217" /> + <style type="text/css"> + #flexbox + { + background: linear-gradient(to bottom, green 0, green 25px, red 25px, red 75px, green 75px, green 100px); + align-content: center; + display: flex; + flex-flow: wrap; + height: 100px; + width: 300px; + } + div div + { + background-color: green; + height: 26px; + width: 150px; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div id="flexbox"> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/align-content-002.htm b/testing/web-platform/tests/css/css-flexbox/align-content-002.htm new file mode 100644 index 0000000000..0945308614 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-content-002.htm @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: A multi-line flex container with the 'align-content' property set to 'flex-start'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" /> + <link rel="match" href="reference/align-content-001-ref.html" /> + <meta name="assert" content="This test checks that a multi-line flex container with 'align-content: flex-start' packs lines toward the start of the flex container." /> + <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-6225" /> + <style type="text/css"> + #flexbox + { + background: linear-gradient(to bottom, red 0, red 50px, green 50px, green 100px); + align-content: flex-start; + display: flex; + flex-flow: wrap; + height: 100px; + width: 300px; + } + div div + { + background-color: green; + height: 26px; + width: 150px; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div id="flexbox"> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/align-content-003.htm b/testing/web-platform/tests/css/css-flexbox/align-content-003.htm new file mode 100644 index 0000000000..df6033bca9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-content-003.htm @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: A multi-line flex container with the 'align-content' property set to 'flex-end'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" /> + <link rel="match" href="reference/align-content-001-ref.html" /> + <meta name="assert" content="This test checks that a multi-line flex container with 'align-content: flex-end' packs lines toward the end of the flex container." /> + <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-6225" /> + <style type="text/css"> + #flexbox + { + background: linear-gradient(to bottom, green 0, green 50px, red 50px, red 100px); + align-content: flex-end; + display: flex; + flex-flow: wrap; + height: 100px; + width: 300px; + } + div div + { + background-color: green; + height: 26px; + width: 150px; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div id="flexbox"> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/align-content-004.htm b/testing/web-platform/tests/css/css-flexbox/align-content-004.htm new file mode 100644 index 0000000000..4c39bfcc33 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-content-004.htm @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: A multi-line flex container with the 'align-content' property set to 'space-between'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" /> + <link rel="match" href="reference/align-content-001-ref.html" /> + <meta name="assert" content="This test checks that a multi-line flex container with 'align-content: space-between' distributes lines evenly in the flex container." /> + <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-4835" /> + <style type="text/css"> + #flexbox + { + background: repeating-linear-gradient(to bottom, red 0, red 20px, green 20px, green 40px); + align-content: space-between; + display: flex; + flex-flow: wrap; + height: 100px; + width: 300px; + } + div div + { + background-color: green; + height: 21px; + width: 150px; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div id="flexbox"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/align-content-005.htm b/testing/web-platform/tests/css/css-flexbox/align-content-005.htm new file mode 100644 index 0000000000..a9b70b742b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-content-005.htm @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: A multi-line flex container with the 'align-content' property set to 'space-around'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" /> + <link rel="match" href="reference/align-content-001-ref.html" /> + <meta name="assert" content="This test checks that a multi-line flex container with 'align-content: space-around' distributes lines evenly in the flex container, with half-size spaces on either end." /> + <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-7236" /> + <style type="text/css"> + #flexbox + { + background: linear-gradient(to bottom, green 0, green 15px, red 15px, red 35px, green 35px, green 65px, red 65px, red 85px, green 85px, green 100px); + align-content: space-around; + display: flex; + flex-flow: wrap; + height: 100px; + width: 300px; + } + div div + { + background-color: green; + height: 22px; + width: 150px; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div id="flexbox"> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/align-content-006.htm b/testing/web-platform/tests/css/css-flexbox/align-content-006.htm new file mode 100644 index 0000000000..703b3b0f89 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-content-006.htm @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: A multi-line flex container with the 'align-content' property set to 'stretch'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" /> + <link rel="match" href="reference/align-content-001-ref.html" /> + <meta name="assert" content="This test checks that a multi-line flex container with 'align-content: stretch' stretches lines to take up the remaining space." /> + <style type="text/css"> + #flexbox + { + background: red; + align-content: center; + align-content: stretch; + display: flex; + flex-flow: wrap; + height: 100px; + width: 300px; + } + div div + { + background-color: green; + width: 150px; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div id="flexbox"> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/align-content-horiz-001a.html b/testing/web-platform/tests/css/css-flexbox/align-content-horiz-001a.html new file mode 100644 index 0000000000..c0f15b989c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-content-horiz-001a.html @@ -0,0 +1,182 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with a series of horizontal flex containers, with 1-3 flex lines, + testing each possible value of the 'align-content' property. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing 'align-content' in a horizontal flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"/> + <style> + div.flexbox { + width: 20px; /* Skinny, to force us to wrap */ + height: 200px; + display: flex; + flex-wrap: wrap; + margin-right: 2px; + float: left; + background: lightgray; + } + div.a { + width: 20px; + height: 10px; + flex: none; + background: lightgreen; + } + div.b { + width: 20px; + height: auto; /* height comes from contents */ + flex: none; + background: pink; + } + div.c { + width: 20px; + height: 40px; + flex: none; + background: orange; + } + + /* Inside of 'b': */ + div.fixedSizeChild { + width: 10px; + height: 30px; + background: purple; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> + </head> + <body onload="checkLayout('.flexbox div')"> + + <!-- default (stretch) --> + <div class="flexbox"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="8" data-offset-y="8"></div> + </div> + <div class="flexbox"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="30" data-offset-y="8"></div> + <div class="b" data-expected-width="20" data-expected-height="110" data-offset-x="30" data-offset-y="98"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="30" data-offset-y="98"></div></div> + </div> + <div class="flexbox"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="52" data-offset-y="8"></div> + <div class="b" data-expected-width="20" data-expected-height="70" data-offset-x="52" data-offset-y="58"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="52" data-offset-y="58"></div></div> + <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="52" data-offset-y="128"></div> + </div> + + <!-- flex-start --> + <div class="flexbox" style="align-content: flex-start"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="74" data-offset-y="8"></div> + </div> + <div class="flexbox" style="align-content: flex-start"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="96" data-offset-y="8"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="96" data-offset-y="18"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="96" data-offset-y="18"></div></div> + </div> + <div class="flexbox" style="align-content: flex-start"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="118" data-offset-y="8"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="118" data-offset-y="18"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="118" data-offset-y="18"></div></div> + <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="118" data-offset-y="48"></div> + </div> + + <!-- flex-end --> + <div class="flexbox" style="align-content: flex-end"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="140" data-offset-y="198"></div> + </div> + <div class="flexbox" style="align-content: flex-end"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="162" data-offset-y="168"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="162" data-offset-y="178"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="162" data-offset-y="178"></div></div> + </div> + <div class="flexbox" style="align-content: flex-end"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="184" data-offset-y="128"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="184" data-offset-y="138"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="184" data-offset-y="138"></div></div> + <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="184" data-offset-y="168"></div> + </div> + + <!-- center --> + <div class="flexbox" style="align-content: center"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="206" data-offset-y="103"></div> + </div> + <div class="flexbox" style="align-content: center"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="228" data-offset-y="88"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="228" data-offset-y="98"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="228" data-offset-y="98"></div></div> + </div> + <div class="flexbox" style="align-content: center"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="250" data-offset-y="68"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="250" data-offset-y="78"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="250" data-offset-y="78"></div></div> + <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="250" data-offset-y="108"></div> + </div> + + <!-- space-between --> + <div class="flexbox" style="align-content: space-between"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="272" data-offset-y="8"></div> + </div> + <div class="flexbox" style="align-content: space-between"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="294" data-offset-y="8"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="294" data-offset-y="178"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="294" data-offset-y="178"></div></div> + </div> + <div class="flexbox" style="align-content: space-between"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="316" data-offset-y="8"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="316" data-offset-y="78"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="316" data-offset-y="78"></div></div> + <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="316" data-offset-y="168"></div> + </div> + + <!-- space-around --> + <div class="flexbox" style="align-content: space-around"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="338" data-offset-y="103"></div> + </div> + <div class="flexbox" style="align-content: space-around"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="360" data-offset-y="48"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="360" data-offset-y="138"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="360" data-offset-y="138"></div></div> + </div> + <div class="flexbox" style="align-content: space-around"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="382" data-offset-y="28"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="382" data-offset-y="78"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="382" data-offset-y="78"></div></div> + <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="382" data-offset-y="148"></div> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="align-content: space-evenly"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="404" data-offset-y="103"></div> + </div> + <div class="flexbox" style="align-content: space-evenly"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="426" data-offset-y="61"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="426" data-offset-y="125"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="426" data-offset-y="125"></div></div> + </div> + <div class="flexbox" style="align-content: space-evenly"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="448" data-offset-y="38"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="448" data-offset-y="78"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="448" data-offset-y="78"></div></div> + <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="448" data-offset-y="138"></div> + </div> + + <!-- start --> + <div class="flexbox" style="align-content: start"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="470" data-offset-y="8"></div> + </div> + <div class="flexbox" style="align-content: start"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="492" data-offset-y="8"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="492" data-offset-y="18"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="492" data-offset-y="18"></div></div> + </div> + <div class="flexbox" style="align-content: start"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="514" data-offset-y="8"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="514" data-offset-y="18"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="514" data-offset-y="18"></div></div> + <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="514" data-offset-y="48"></div> + </div> + + <!-- end --> + <div class="flexbox" style="align-content: end"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="536" data-offset-y="198"></div> + </div> + <div class="flexbox" style="align-content: end"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="558" data-offset-y="168"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="558" data-offset-y="178"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="558" data-offset-y="178"></div></div> + </div> + <div class="flexbox" style="align-content: end"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="580" data-offset-y="128"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="580" data-offset-y="138"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="580" data-offset-y="138"></div></div> + <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="580" data-offset-y="168"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/align-content-horiz-001b.html b/testing/web-platform/tests/css/css-flexbox/align-content-horiz-001b.html new file mode 100644 index 0000000000..4b7f027003 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-content-horiz-001b.html @@ -0,0 +1,183 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with a series of horizontal flex containers, with 1-3 flex lines, + testing each possible value of the 'align-content' property. Additionally, + the flex container derives its width from the "max-width" property. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing 'align-content' in a horizontal flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"/> + <style> + div.flexbox { + max-width: 20px; /* Skinny, to force us to wrap */ + height: 200px; + display: flex; + flex-wrap: wrap; + margin-right: 2px; + float: left; + background: lightgray; + } + div.a { + height: 10px; + width: 20px; + flex: none; + background: lightgreen; + } + div.b { + height: auto; /* height comes from contents */ + width: 20px; + flex: none; + background: pink; + } + div.c { + height: 40px; + width: 20px; + flex: none; + background: orange; + } + + /* Inside of 'b': */ + div.fixedSizeChild { + width: 10px; + height: 30px; + background: purple; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> + </head> + <body onload="checkLayout('.flexbox div')"> + + <!-- default (stretch) --> + <div class="flexbox"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="8" data-offset-y="8"></div> + </div> + <div class="flexbox"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="30" data-offset-y="8"></div> + <div class="b" data-expected-width="20" data-expected-height="110" data-offset-x="30" data-offset-y="98"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="30" data-offset-y="98"></div></div> + </div> + <div class="flexbox"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="52" data-offset-y="8"></div> + <div class="b" data-expected-width="20" data-expected-height="70" data-offset-x="52" data-offset-y="58"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="52" data-offset-y="58"></div></div> + <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="52" data-offset-y="128"></div> + </div> + + <!-- flex-start --> + <div class="flexbox" style="align-content: flex-start"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="74" data-offset-y="8"></div> + </div> + <div class="flexbox" style="align-content: flex-start"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="96" data-offset-y="8"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="96" data-offset-y="18"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="96" data-offset-y="18"></div></div> + </div> + <div class="flexbox" style="align-content: flex-start"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="118" data-offset-y="8"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="118" data-offset-y="18"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="118" data-offset-y="18"></div></div> + <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="118" data-offset-y="48"></div> + </div> + + <!-- flex-end --> + <div class="flexbox" style="align-content: flex-end"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="140" data-offset-y="198"></div> + </div> + <div class="flexbox" style="align-content: flex-end"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="162" data-offset-y="168"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="162" data-offset-y="178"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="162" data-offset-y="178"></div></div> + </div> + <div class="flexbox" style="align-content: flex-end"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="184" data-offset-y="128"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="184" data-offset-y="138"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="184" data-offset-y="138"></div></div> + <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="184" data-offset-y="168"></div> + </div> + + <!-- center --> + <div class="flexbox" style="align-content: center"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="206" data-offset-y="103"></div> + </div> + <div class="flexbox" style="align-content: center"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="228" data-offset-y="88"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="228" data-offset-y="98"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="228" data-offset-y="98"></div></div> + </div> + <div class="flexbox" style="align-content: center"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="250" data-offset-y="68"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="250" data-offset-y="78"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="250" data-offset-y="78"></div></div> + <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="250" data-offset-y="108"></div> + </div> + + <!-- space-between --> + <div class="flexbox" style="align-content: space-between"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="272" data-offset-y="8"></div> + </div> + <div class="flexbox" style="align-content: space-between"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="294" data-offset-y="8"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="294" data-offset-y="178"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="294" data-offset-y="178"></div></div> + </div> + <div class="flexbox" style="align-content: space-between"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="316" data-offset-y="8"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="316" data-offset-y="78"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="316" data-offset-y="78"></div></div> + <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="316" data-offset-y="168"></div> + </div> + + <!-- space-around --> + <div class="flexbox" style="align-content: space-around"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="338" data-offset-y="103"></div> + </div> + <div class="flexbox" style="align-content: space-around"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="360" data-offset-y="48"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="360" data-offset-y="138"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="360" data-offset-y="138"></div></div> + </div> + <div class="flexbox" style="align-content: space-around"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="382" data-offset-y="28"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="382" data-offset-y="78"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="382" data-offset-y="78"></div></div> + <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="382" data-offset-y="148"></div> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="align-content: space-evenly"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="404" data-offset-y="103"></div> + </div> + <div class="flexbox" style="align-content: space-evenly"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="426" data-offset-y="61"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="426" data-offset-y="125"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="426" data-offset-y="125"></div></div> + </div> + <div class="flexbox" style="align-content: space-evenly"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="448" data-offset-y="38"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="448" data-offset-y="78"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="448" data-offset-y="78"></div></div> + <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="448" data-offset-y="138"></div> + </div> + + <!-- start --> + <div class="flexbox" style="align-content: start"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="470" data-offset-y="8"></div> + </div> + <div class="flexbox" style="align-content: start"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="492" data-offset-y="8"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="492" data-offset-y="18"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="492" data-offset-y="18"></div></div> + </div> + <div class="flexbox" style="align-content: start"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="514" data-offset-y="8"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="514" data-offset-y="18"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="514" data-offset-y="18"></div></div> + <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="514" data-offset-y="48"></div> + </div> + + <!-- end --> + <div class="flexbox" style="align-content: end"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="536" data-offset-y="198"></div> + </div> + <div class="flexbox" style="align-content: end"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="558" data-offset-y="168"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="558" data-offset-y="178"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="558" data-offset-y="178"></div></div> + </div> + <div class="flexbox" style="align-content: end"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="580" data-offset-y="128"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="580" data-offset-y="138"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="580" data-offset-y="138"></div></div> + <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="580" data-offset-y="168"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/align-content-horiz-002.html b/testing/web-platform/tests/css/css-flexbox/align-content-horiz-002.html new file mode 100644 index 0000000000..0ef076680b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-content-horiz-002.html @@ -0,0 +1,182 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with a series of row wrap-reverse flex containers, with 1-3 flex lines, + testing each possible value of the 'align-content' property. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing 'align-content' in a row wrap-reverse flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"/> + <style> + div.flexbox { + width: 20px; /* Skinny, to force us to wrap */ + height: 200px; + display: flex; + flex-wrap: wrap-reverse; + margin-right: 2px; + float: left; + background: lightgray; + } + div.a { + width: 20px; + height: 10px; + flex: none; + background: lightgreen; + } + div.b { + width: 20px; + height: auto; /* height comes from contents */ + flex: none; + background: pink; + } + div.c { + width: 20px; + height: 40px; + flex: none; + background: orange; + } + + /* Inside of 'b': */ + div.fixedSizeChild { + width: 10px; + height: 30px; + background: purple; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> + </head> + <body onload="checkLayout('.flexbox div')"> + + <!-- default (stretch) --> + <div class="flexbox"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="8" data-offset-y="198"></div> + </div> + <div class="flexbox"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="30" data-offset-y="198"></div> + <div class="b" data-expected-width="20" data-expected-height="110" data-offset-x="30" data-offset-y="8"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="30" data-offset-y="8"></div></div> + </div> + <div class="flexbox"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="52" data-offset-y="198"></div> + <div class="b" data-expected-width="20" data-expected-height="70" data-offset-x="52" data-offset-y="88"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="52" data-offset-y="88"></div></div> + <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="52" data-offset-y="48"></div> + </div> + + <!-- flex-start --> + <div class="flexbox" style="align-content: flex-start"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="74" data-offset-y="198"></div> + </div> + <div class="flexbox" style="align-content: flex-start"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="96" data-offset-y="198"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="96" data-offset-y="168"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="96" data-offset-y="168"></div></div> + </div> + <div class="flexbox" style="align-content: flex-start"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="118" data-offset-y="198"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="118" data-offset-y="168"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="118" data-offset-y="168"></div></div> + <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="118" data-offset-y="128"></div> + </div> + + <!-- flex-end --> + <div class="flexbox" style="align-content: flex-end"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="140" data-offset-y="8"></div> + </div> + <div class="flexbox" style="align-content: flex-end"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="162" data-offset-y="38"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="162" data-offset-y="8"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="162" data-offset-y="8"></div></div> + </div> + <div class="flexbox" style="align-content: flex-end"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="184" data-offset-y="78"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="184" data-offset-y="48"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="184" data-offset-y="48"></div></div> + <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="184" data-offset-y="8"></div> + </div> + + <!-- center --> + <div class="flexbox" style="align-content: center"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="206" data-offset-y="103"></div> + </div> + <div class="flexbox" style="align-content: center"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="228" data-offset-y="118"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="228" data-offset-y="88"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="228" data-offset-y="88"></div></div> + </div> + <div class="flexbox" style="align-content: center"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="250" data-offset-y="138"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="250" data-offset-y="108"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="250" data-offset-y="108"></div></div> + <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="250" data-offset-y="68"></div> + </div> + + <!-- space-between --> + <div class="flexbox" style="align-content: space-between"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="272" data-offset-y="198"></div> + </div> + <div class="flexbox" style="align-content: space-between"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="294" data-offset-y="198"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="294" data-offset-y="8"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="294" data-offset-y="8"></div></div> + </div> + <div class="flexbox" style="align-content: space-between"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="316" data-offset-y="198"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="316" data-offset-y="108"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="316" data-offset-y="108"></div></div> + <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="316" data-offset-y="8"></div> + </div> + + <!-- space-around --> + <div class="flexbox" style="align-content: space-around"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="338" data-offset-y="103"></div> + </div> + <div class="flexbox" style="align-content: space-around"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="360" data-offset-y="158"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="360" data-offset-y="48"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="360" data-offset-y="48"></div></div> + </div> + <div class="flexbox" style="align-content: space-around"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="382" data-offset-y="178"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="382" data-offset-y="108"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="382" data-offset-y="108"></div></div> + <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="382" data-offset-y="28"></div> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="align-content: space-evenly"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="404" data-offset-y="103"></div> + </div> + <div class="flexbox" style="align-content: space-evenly"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="426" data-offset-y="145"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="426" data-offset-y="61"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="426" data-offset-y="61"></div></div> + </div> + <div class="flexbox" style="align-content: space-evenly"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="448" data-offset-y="168"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="448" data-offset-y="108"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="448" data-offset-y="108"></div></div> + <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="448" data-offset-y="38"></div> + </div> + + <!-- start --> + <div class="flexbox" style="align-content: start"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="470" data-offset-y="8"></div> + </div> + <div class="flexbox" style="align-content: start"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="492" data-offset-y="38"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="492" data-offset-y="8"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="492" data-offset-y="8"></div></div> + </div> + <div class="flexbox" style="align-content: start"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="514" data-offset-y="78"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="514" data-offset-y="48"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="514" data-offset-y="48"></div></div> + <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="514" data-offset-y="8"></div> + </div> + + <!-- end --> + <div class="flexbox" style="align-content: end"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="536" data-offset-y="198"></div> + </div> + <div class="flexbox" style="align-content: end"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="558" data-offset-y="198"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="558" data-offset-y="168"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="558" data-offset-y="168"></div></div> + </div> + <div class="flexbox" style="align-content: end"> + <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="580" data-offset-y="198"></div> + <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="580" data-offset-y="168"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="580" data-offset-y="168"></div></div> + <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="580" data-offset-y="128"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/align-content-vert-001a.html b/testing/web-platform/tests/css/css-flexbox/align-content-vert-001a.html new file mode 100644 index 0000000000..90116e5497 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-content-vert-001a.html @@ -0,0 +1,182 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with a series of vertical flex containers, with 1-3 flex lines, + testing each possible value of the 'align-content' property. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing 'align-content' in a vertical flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"/> + <style> + div.flexbox { + width: 200px; + height: 10px; /* Short, to force us to wrap */ + display: flex; + flex-direction: column; + flex-wrap: wrap; + margin-bottom: 2px; + background: lightgray; + } + div.a { + width: 10px; + height: 10px; + flex: none; + background: lightgreen; + } + div.b { + width: auto; /* width comes from contents */ + height: 10px; + flex: none; + background: pink; + } + div.c { + width: 40px; + height: 10px; + flex: none; + background: orange; + } + + /* Inside of 'b': */ + div.fixedSizeChild { + width: 30px; + height: 5px; + background: purple; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> + </head> + <body onload="checkLayout('.flexbox div')"> + + <!-- default (stretch) --> + <div class="flexbox"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="8"></div> + </div> + <div class="flexbox"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="20"></div> + <div class="b" data-expected-width="110" data-expected-height="10" data-offset-x="98" data-offset-y="20"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="98" data-offset-y="20"></div></div> + </div> + <div class="flexbox"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="32"></div> + <div class="b" data-expected-width="70" data-expected-height="10" data-offset-x="58" data-offset-y="32"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="58" data-offset-y="32"></div></div> + <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="128" data-offset-y="32"></div> + </div> + + <!-- flex-start --> + <div class="flexbox" style="align-content: flex-start"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="44"></div> + </div> + <div class="flexbox" style="align-content: flex-start"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="56"></div> + <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="56"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="18" data-offset-y="56"></div></div> + </div> + <div class="flexbox" style="align-content: flex-start"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="68"></div> + <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="68"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="18" data-offset-y="68"></div></div> + <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="48" data-offset-y="68"></div> + </div> + + <!-- flex-end --> + <div class="flexbox" style="align-content: flex-end"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="198" data-offset-y="80"></div> + </div> + <div class="flexbox" style="align-content: flex-end"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="168" data-offset-y="92"></div> + <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="178" data-offset-y="92"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="178" data-offset-y="92"></div></div> + </div> + <div class="flexbox" style="align-content: flex-end"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="128" data-offset-y="104"></div> + <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="138" data-offset-y="104"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="138" data-offset-y="104"></div></div> + <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="168" data-offset-y="104"></div> + </div> + + <!-- center --> + <div class="flexbox" style="align-content: center"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="103" data-offset-y="116"></div> + </div> + <div class="flexbox" style="align-content: center"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="88" data-offset-y="128"></div> + <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="98" data-offset-y="128"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="98" data-offset-y="128"></div></div> + </div> + <div class="flexbox" style="align-content: center"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="68" data-offset-y="140"></div> + <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="140"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="78" data-offset-y="140"></div></div> + <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="108" data-offset-y="140"></div> + </div> + + <!-- space-between --> + <div class="flexbox" style="align-content: space-between"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="152"></div> + </div> + <div class="flexbox" style="align-content: space-between"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="164"></div> + <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="178" data-offset-y="164"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="178" data-offset-y="164"></div></div> + </div> + <div class="flexbox" style="align-content: space-between"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="176"></div> + <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="176"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="78" data-offset-y="176"></div></div> + <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="168" data-offset-y="176"></div> + </div> + + <!-- space-around --> + <div class="flexbox" style="align-content: space-around"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="103" data-offset-y="188"></div> + </div> + <div class="flexbox" style="align-content: space-around"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="48" data-offset-y="200"></div> + <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="138" data-offset-y="200"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="138" data-offset-y="200"></div></div> + </div> + <div class="flexbox" style="align-content: space-around"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="28" data-offset-y="212"></div> + <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="212"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="78" data-offset-y="212"></div></div> + <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="148" data-offset-y="212"></div> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="align-content: space-evenly"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="103" data-offset-y="224"></div> + </div> + <div class="flexbox" style="align-content: space-evenly"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="61" data-offset-y="236"></div> + <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="125" data-offset-y="236"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="125" data-offset-y="236"></div></div> + </div> + <div class="flexbox" style="align-content: space-evenly"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="38" data-offset-y="248"></div> + <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="248"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="78" data-offset-y="248"></div></div> + <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="138" data-offset-y="248"></div> + </div> + + <!-- start --> + <div class="flexbox" style="align-content: start"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="260"></div> + </div> + <div class="flexbox" style="align-content: start"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="272"></div> + <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="272"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="18" data-offset-y="272"></div></div> + </div> + <div class="flexbox" style="align-content: start"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="284"></div> + <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="284"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="18" data-offset-y="284"></div></div> + <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="48" data-offset-y="284"></div> + </div> + + <!-- end --> + <div class="flexbox" style="align-content: end"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="198" data-offset-y="296"></div> + </div> + <div class="flexbox" style="align-content: end"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="168" data-offset-y="308"></div> + <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="178" data-offset-y="308"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="178" data-offset-y="308"></div></div> + </div> + <div class="flexbox" style="align-content: end"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="128" data-offset-y="320"></div> + <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="138" data-offset-y="320"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="138" data-offset-y="320"></div></div> + <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="168" data-offset-y="320"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/align-content-vert-001b.html b/testing/web-platform/tests/css/css-flexbox/align-content-vert-001b.html new file mode 100644 index 0000000000..9a67cc4d99 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-content-vert-001b.html @@ -0,0 +1,183 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with a series of vertical flex containers, with 1-3 flex lines, + testing each possible value of the 'align-content' property. Additionally, + the flex container derives its height from the "max-height" property.--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing 'align-content' in a vertical flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"/> + <style> + div.flexbox { + width: 200px; + max-height: 10px; /* Short, to force us to wrap */ + display: flex; + flex-direction: column; + flex-wrap: wrap; + margin-bottom: 2px; + background: lightgray; + } + div.a { + width: 10px; + height: 10px; + flex: none; + background: lightgreen; + } + div.b { + width: auto; /* width comes from contents */ + height: 10px; + flex: none; + background: pink; + } + div.c { + width: 40px; + height: 10px; + flex: none; + background: orange; + } + + /* Inside of 'b': */ + div.fixedSizeChild { + width: 30px; + height: 5px; + background: purple; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> + </head> + <body onload="checkLayout('.flexbox div')"> + + <!-- default (stretch) --> + <div class="flexbox"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="8"></div> + </div> + <div class="flexbox"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="20"></div> + <div class="b" data-expected-width="110" data-expected-height="10" data-offset-x="98" data-offset-y="20"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="98" data-offset-y="20"></div></div> + </div> + <div class="flexbox"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="32"></div> + <div class="b" data-expected-width="70" data-expected-height="10" data-offset-x="58" data-offset-y="32"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="58" data-offset-y="32"></div></div> + <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="128" data-offset-y="32"></div> + </div> + + <!-- flex-start --> + <div class="flexbox" style="align-content: flex-start"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="44"></div> + </div> + <div class="flexbox" style="align-content: flex-start"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="56"></div> + <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="56"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="18" data-offset-y="56"></div></div> + </div> + <div class="flexbox" style="align-content: flex-start"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="68"></div> + <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="68"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="18" data-offset-y="68"></div></div> + <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="48" data-offset-y="68"></div> + </div> + + <!-- flex-end --> + <div class="flexbox" style="align-content: flex-end"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="198" data-offset-y="80"></div> + </div> + <div class="flexbox" style="align-content: flex-end"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="168" data-offset-y="92"></div> + <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="178" data-offset-y="92"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="178" data-offset-y="92"></div></div> + </div> + <div class="flexbox" style="align-content: flex-end"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="128" data-offset-y="104"></div> + <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="138" data-offset-y="104"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="138" data-offset-y="104"></div></div> + <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="168" data-offset-y="104"></div> + </div> + + <!-- center --> + <div class="flexbox" style="align-content: center"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="103" data-offset-y="116"></div> + </div> + <div class="flexbox" style="align-content: center"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="88" data-offset-y="128"></div> + <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="98" data-offset-y="128"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="98" data-offset-y="128"></div></div> + </div> + <div class="flexbox" style="align-content: center"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="68" data-offset-y="140"></div> + <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="140"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="78" data-offset-y="140"></div></div> + <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="108" data-offset-y="140"></div> + </div> + + <!-- space-between --> + <div class="flexbox" style="align-content: space-between"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="152"></div> + </div> + <div class="flexbox" style="align-content: space-between"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="164"></div> + <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="178" data-offset-y="164"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="178" data-offset-y="164"></div></div> + </div> + <div class="flexbox" style="align-content: space-between"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="176"></div> + <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="176"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="78" data-offset-y="176"></div></div> + <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="168" data-offset-y="176"></div> + </div> + + <!-- space-around --> + <div class="flexbox" style="align-content: space-around"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="103" data-offset-y="188"></div> + </div> + <div class="flexbox" style="align-content: space-around"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="48" data-offset-y="200"></div> + <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="138" data-offset-y="200"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="138" data-offset-y="200"></div></div> + </div> + <div class="flexbox" style="align-content: space-around"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="28" data-offset-y="212"></div> + <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="212"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="78" data-offset-y="212"></div></div> + <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="148" data-offset-y="212"></div> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="align-content: space-evenly"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="103" data-offset-y="224"></div> + </div> + <div class="flexbox" style="align-content: space-evenly"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="61" data-offset-y="236"></div> + <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="125" data-offset-y="236"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="125" data-offset-y="236"></div></div> + </div> + <div class="flexbox" style="align-content: space-evenly"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="38" data-offset-y="248"></div> + <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="248"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="78" data-offset-y="248"></div></div> + <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="138" data-offset-y="248"></div> + </div> + + <!-- start --> + <div class="flexbox" style="align-content: start"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="260"></div> + </div> + <div class="flexbox" style="align-content: start"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="272"></div> + <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="272"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="18" data-offset-y="272"></div></div> + </div> + <div class="flexbox" style="align-content: start"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="284"></div> + <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="284"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="18" data-offset-y="284"></div></div> + <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="48" data-offset-y="284"></div> + </div> + + <!-- end --> + <div class="flexbox" style="align-content: end"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="198" data-offset-y="296"></div> + </div> + <div class="flexbox" style="align-content: end"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="168" data-offset-y="308"></div> + <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="178" data-offset-y="308"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="178" data-offset-y="308"></div></div> + </div> + <div class="flexbox" style="align-content: end"> + <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="128" data-offset-y="320"></div> + <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="138" data-offset-y="320"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="138" data-offset-y="320"></div></div> + <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="168" data-offset-y="320"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/align-content-vert-002.html b/testing/web-platform/tests/css/css-flexbox/align-content-vert-002.html new file mode 100644 index 0000000000..3cffd3388b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-content-vert-002.html @@ -0,0 +1,182 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with a series of column wrap-reverse flex containers, with 1-3 flex lines, + testing each possible value of the 'align-content' property. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing 'align-content' in a column wrap-reverse flex container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"/> + <style> + div.flexbox { + width: 200px; + height: 20px; /* Short, to force us to wrap */ + display: flex; + flex-direction: column; + flex-wrap: wrap-reverse; + margin-bottom: 2px; + background: lightgray; + } + div.a { + width: 10px; + height: 20px; + flex: none; + background: lightgreen; + } + div.b { + width: auto; /* width comes from contents */ + height: 20px; + flex: none; + background: pink; + } + div.c { + width: 40px; + height: 20px; + flex: none; + background: orange; + } + + /* Inside of 'b': */ + div.fixedSizeChild { + width: 30px; + height: 10px; + background: purple; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> + </head> + <body onload="checkLayout('.flexbox div')"> + + <!-- default (stretch) --> + <div class="flexbox"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="8"></div> + </div> + <div class="flexbox"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="30"></div> + <div class="b" data-expected-width="110" data-expected-height="20" data-offset-x="8" data-offset-y="30"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="8" data-offset-y="30"></div></div> + </div> + <div class="flexbox"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="52"></div> + <div class="b" data-expected-width="70" data-expected-height="20" data-offset-x="88" data-offset-y="52"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="88" data-offset-y="52"></div></div> + <div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="48" data-offset-y="52"></div> + </div> + + <!-- flex-start --> + <div class="flexbox" style="align-content: flex-start"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="74"></div> + </div> + <div class="flexbox" style="align-content: flex-start"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="96"></div> + <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="168" data-offset-y="96"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="168" data-offset-y="96"></div></div> + </div> + <div class="flexbox" style="align-content: flex-start"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="118"></div> + <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="168" data-offset-y="118"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="168" data-offset-y="118"></div></div> + <div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="128" data-offset-y="118"></div> + </div> + + <!-- flex-end --> + <div class="flexbox" style="align-content: flex-end"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="140"></div> + </div> + <div class="flexbox" style="align-content: flex-end"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="38" data-offset-y="162"></div> + <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="8" data-offset-y="162"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="8" data-offset-y="162"></div></div> + </div> + <div class="flexbox" style="align-content: flex-end"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="78" data-offset-y="184"></div> + <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="48" data-offset-y="184"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="48" data-offset-y="184"></div></div> + <div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="8" data-offset-y="184"></div> + </div> + + <!-- center --> + <div class="flexbox" style="align-content: center"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="103" data-offset-y="206"></div> + </div> + <div class="flexbox" style="align-content: center"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="118" data-offset-y="228"></div> + <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="88" data-offset-y="228"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="88" data-offset-y="228"></div></div> + </div> + <div class="flexbox" style="align-content: center"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="138" data-offset-y="250"></div> + <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="108" data-offset-y="250"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="108" data-offset-y="250"></div></div> + <div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="68" data-offset-y="250"></div> + </div> + + <!-- space-between --> + <div class="flexbox" style="align-content: space-between"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="272"></div> + </div> + <div class="flexbox" style="align-content: space-between"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="294"></div> + <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="8" data-offset-y="294"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="8" data-offset-y="294"></div></div> + </div> + <div class="flexbox" style="align-content: space-between"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="316"></div> + <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="108" data-offset-y="316"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="108" data-offset-y="316"></div></div> + <div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="8" data-offset-y="316"></div> + </div> + + <!-- space-around --> + <div class="flexbox" style="align-content: space-around"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="103" data-offset-y="338"></div> + </div> + <div class="flexbox" style="align-content: space-around"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="158" data-offset-y="360"></div> + <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="48" data-offset-y="360"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="48" data-offset-y="360"></div></div> + </div> + <div class="flexbox" style="align-content: space-around"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="178" data-offset-y="382"></div> + <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="108" data-offset-y="382"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="108" data-offset-y="382"></div></div> + <div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="28" data-offset-y="382"></div> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="align-content: space-evenly"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="103" data-offset-y="404"></div> + </div> + <div class="flexbox" style="align-content: space-evenly"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="145" data-offset-y="426"></div> + <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="61" data-offset-y="426"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="61" data-offset-y="426"></div></div> + </div> + <div class="flexbox" style="align-content: space-evenly"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="168" data-offset-y="448"></div> + <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="108" data-offset-y="448"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="108" data-offset-y="448"></div></div> + <div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="38" data-offset-y="448"></div> + </div> + + <!-- start --> + <div class="flexbox" style="align-content: start"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="470"></div> + </div> + <div class="flexbox" style="align-content: start"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="38" data-offset-y="492"></div> + <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="8" data-offset-y="492"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="8" data-offset-y="492"></div></div> + </div> + <div class="flexbox" style="align-content: start"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="78" data-offset-y="514"></div> + <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="48" data-offset-y="514"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="48" data-offset-y="514"></div></div> + <div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="8" data-offset-y="514"></div> + </div> + + <!-- end --> + <div class="flexbox" style="align-content: end"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="536"></div> + </div> + <div class="flexbox" style="align-content: end"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="558"></div> + <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="168" data-offset-y="558"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="168" data-offset-y="558"></div></div> + </div> + <div class="flexbox" style="align-content: end"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="580"></div> + <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="168" data-offset-y="580"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="168" data-offset-y="580"></div></div> + <div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="128" data-offset-y="580"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/align-content-wmvert-001.html b/testing/web-platform/tests/css/css-flexbox/align-content-wmvert-001.html new file mode 100644 index 0000000000..474eb6d3f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-content-wmvert-001.html @@ -0,0 +1,182 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with a series of horizontal flex containers, with 1-3 flex lines, + testing each possible value of the 'align-content' property. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing 'align-content' in a vertical writing-mode flex container</title> + <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"/> + <style> + div.flexbox { + width: 200px; + height: 20px; /* Short, to force us to wrap */ + display: flex; + flex-wrap: wrap; + margin-bottom: 2px; + background: lightgray; + writing-mode: vertical-lr; + } + div.a { + width: 10px; + height: 20px; + flex: none; + background: lightgreen; + } + div.b { + width: auto; + height: 20px; /* height comes from contents */ + flex: none; + background: pink; + } + div.c { + width: 40px; + height: 20px; + flex: none; + background: orange; + } + + /* Inside of 'b': */ + div.fixedSizeChild { + width: 30px; + height: 10px; + background: purple; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> + </head> + <body onload="checkLayout('.flexbox div')"> + + <!-- default (stretch) --> + <div class="flexbox"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="8"></div> + </div> + <div class="flexbox"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="30"></div> + <div class="b" data-expected-width="110" data-expected-height="20" data-offset-x="98" data-offset-y="30"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="98" data-offset-y="30"></div></div> + </div> + <div class="flexbox"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="52"></div> + <div class="b" data-expected-width="70" data-expected-height="20" data-offset-x="58" data-offset-y="52"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="58" data-offset-y="52"></div></div> + <div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="128" data-offset-y="52"></div> + </div> + + <!-- flex-start --> + <div class="flexbox" style="align-content: flex-start"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="74"></div> + </div> + <div class="flexbox" style="align-content: flex-start"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="96"></div> + <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="18" data-offset-y="96"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="96"></div></div> + </div> + <div class="flexbox" style="align-content: flex-start"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="118"></div> + <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="18" data-offset-y="118"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="118"></div></div> + <div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="48" data-offset-y="118"></div> + </div> + + <!-- flex-end --> + <div class="flexbox" style="align-content: flex-end"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="140"></div> + </div> + <div class="flexbox" style="align-content: flex-end"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="168" data-offset-y="162"></div> + <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="178" data-offset-y="162"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="178" data-offset-y="162"></div></div> + </div> + <div class="flexbox" style="align-content: flex-end"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="128" data-offset-y="184"></div> + <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="138" data-offset-y="184"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="138" data-offset-y="184"></div></div> + <div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="168" data-offset-y="184"></div> + </div> + + <!-- center --> + <div class="flexbox" style="align-content: center"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="103" data-offset-y="206"></div> + </div> + <div class="flexbox" style="align-content: center"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="88" data-offset-y="228"></div> + <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="98" data-offset-y="228"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="98" data-offset-y="228"></div></div> + </div> + <div class="flexbox" style="align-content: center"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="68" data-offset-y="250"></div> + <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="78" data-offset-y="250"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="250"></div></div> + <div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="108" data-offset-y="250"></div> + </div> + + <!-- space-between --> + <div class="flexbox" style="align-content: space-between"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="272"></div> + </div> + <div class="flexbox" style="align-content: space-between"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="294"></div> + <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="178" data-offset-y="294"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="178" data-offset-y="294"></div></div> + </div> + <div class="flexbox" style="align-content: space-between"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="316"></div> + <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="78" data-offset-y="316"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="316"></div></div> + <div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="168" data-offset-y="316"></div> + </div> + + <!-- space-around --> + <div class="flexbox" style="align-content: space-around"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="103" data-offset-y="338"></div> + </div> + <div class="flexbox" style="align-content: space-around"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="48" data-offset-y="360"></div> + <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="138" data-offset-y="360"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="138" data-offset-y="360"></div></div> + </div> + <div class="flexbox" style="align-content: space-around"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="28" data-offset-y="382"></div> + <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="78" data-offset-y="382"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="382"></div></div> + <div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="148" data-offset-y="382"></div> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="align-content: space-evenly"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="103" data-offset-y="404"></div> + </div> + <div class="flexbox" style="align-content: space-evenly"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="61" data-offset-y="426"></div> + <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="125" data-offset-y="426"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="125" data-offset-y="426"></div></div> + </div> + <div class="flexbox" style="align-content: space-evenly"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="38" data-offset-y="448"></div> + <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="78" data-offset-y="448"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="448"></div></div> + <div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="138" data-offset-y="448"></div> + </div> + + <!-- start --> + <div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="470"></div> + </div> + <div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="38" data-offset-y="492"></div> + <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="8" data-offset-y="492"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="8" data-offset-y="492"></div></div> + </div> + <div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="78" data-offset-y="514"></div> + <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="48" data-offset-y="514"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="48" data-offset-y="514"></div></div> + <div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="8" data-offset-y="514"></div> + </div> + + <!-- end --> + <div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="536"></div> + </div> + <div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="558"></div> + <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="168" data-offset-y="558"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="168" data-offset-y="558"></div></div> + </div> + <div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse"> + <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="580"></div> + <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="168" data-offset-y="580"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="168" data-offset-y="580"></div></div> + <div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="128" data-offset-y="580"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/align-content-wrap-001.html b/testing/web-platform/tests/css/css-flexbox/align-content-wrap-001.html new file mode 100644 index 0000000000..1e0ce42c75 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-content-wrap-001.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-align-content" /> +<title>css-flexbox: Tests align-content with single-line flex-wrap: wrap</title> +<style> +.default { + display: flex; + flex-wrap: wrap; + position: relative; + height: 70px; + border: 1px solid red; + margin: 5px; +} + +.default > div { + height: 20px; +} + +.verticalWriting { + display: flex; + flex-wrap: wrap; + position: relative; + width: 70px; + border: 1px solid red; + margin: 5px; + writing-mode: vertical-lr; +} + +.verticalWriting > div { + width: 20px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('.default, .verticalWriting'); "> +<div id=log></div> +<p>Test that we honor align-content even in single-line flex containers</p> +<div class="default" style="align-content: flex-start"> +<div data-offset-y="0">This text should be at the top of its container</div> +</div> +<div class="default" style="align-content: flex-end"> +<div data-offset-y="50">This text should be at the bottom of its container</div> +</div> +<div class="default" style="align-content: center"> +<div data-offset-y="25">This text should be centered in its container</div> +</div> +<div class="default" style="align-content: space-between"> +<div data-offset-y="0">This text should be at the top of its container</div> +</div> +<div class="default" style="align-content: space-around"> +<div data-offset-y="25">This text should be centered in its container</div> +</div> +<div class="default" style="align-content: space-evenly"> +<div data-offset-y="25">This text should be centered in its container</div> +</div> +<div class="default" style="align-content: stretch"> +<div data-offset-y="0">This text should be at the top of its container</div> +</div> +<div class="verticalWriting" style="align-content: flex-start"> +<div data-offset-x="0">This text should be at the left of its container</div> +</div> +<div class="verticalWriting" style="align-content: flex-end"> +<div data-offset-x="50">This text should be at the right of its container</div> +</div> +<div class="verticalWriting" style="align-content: center"> +<div data-offset-x="25">This text should be centered in its container</div> +</div> +<div class="verticalWriting" style="align-content: space-between"> +<div data-offset-x="0">This text should be at the left of its container</div> +</div> +<div class="verticalWriting" style="align-content: space-around"> +<div data-offset-x="25">This text should be centered in its container</div> +</div> +<div class="verticalWriting" style="align-content: stretch"> +<div data-offset-x="0">This text should be at the left of its container</div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/align-content-wrap-002.html b/testing/web-platform/tests/css/css-flexbox/align-content-wrap-002.html new file mode 100644 index 0000000000..a15f7ea844 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-content-wrap-002.html @@ -0,0 +1,108 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-align-content" /> +<title>css-flexbox: Tests align-content with flex-wrap: wrap</title> +<style> +.flex-horizontal { + width:600px; + display:flex; + height:100px; + background:gray; + margin-bottom:100px; +} +.flex-vertical { + width:100px; + display:flex; + flex-direction: column; + height:600px; + background:gray; + margin-top:200px; + margin-bottom:100px; +} +.item-horizontal { + width:150px; + background:yellow; + margin:10px; + flex:none; +} +.item-vertical { + height:150px; + background:yellow; + margin:10px; + flex:none; +} +.content1-horizontal { + width:100px; + height:150px; + background:red; +} +.content2-horizontal { + width:100px; + height:100px; + background:red; +} +.content3-horizontal { + width:100px; + height:50px; + background:red; +} +.content1-vertical { + width:150px; + height:100px; + background:red; +} +.content2-vertical { + width:100px; + height:100px; + background:red; +} +.content3-vertical { + width:50px; + height:100px; + background:red; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.flex-horizontal, .flex-vertical');"> +<div id=log></div> +<p>Test for crbug.com/362848: Flex box word-wrap is not adhering to spec</p> +<div class="flex-horizontal"> + <div class="item-horizontal" data-expected-height="80"><div class="content1-horizontal"></div></div> + <div class="item-horizontal" data-expected-height="80"><div class="content2-horizontal"></div></div> + <div class="item-horizontal" data-expected-height="80"><div class="content3-horizontal"></div></div> +</div> + +<div class="flex-horizontal" style="flex-wrap:wrap;"> + <div class="item-horizontal" data-expected-height="150"><div class="content1-horizontal"></div></div> + <div class="item-horizontal" data-expected-height="150"><div class="content2-horizontal"></div></div> + <div class="item-horizontal" data-expected-height="150"><div class="content3-horizontal"></div></div> +</div> + +<div class="flex-horizontal" style="flex-wrap:wrap;"> + <div class="item-horizontal" data-expected-height="150"><div class="content1-horizontal"></div></div> + <div class="item-horizontal" data-expected-height="150"><div class="content2-horizontal"></div></div> + <div class="item-horizontal" data-expected-height="150"><div class="content3-horizontal"></div></div> + <div class="item-horizontal" data-expected-height="150"><div class="content1-horizontal"></div></div> + <div class="item-horizontal" data-expected-height="150"><div class="content2-horizontal"></div></div> +</div> + +<div class="flex-vertical"> + <div class="item-vertical" data-expected-width="80"><div class="content1-vertical"></div></div> + <div class="item-vertical" data-expected-width="80"><div class="content2-vertical"></div></div> + <div class="item-vertical" data-expected-width="80"><div class="content3-vertical"></div></div> +</div> + +<div class="flex-vertical" style="flex-wrap:wrap;"> + <div class="item-vertical" data-expected-width="150"><div class="content1-vertical"></div></div> + <div class="item-vertical" data-expected-width="150"><div class="content2-vertical"></div></div> + <div class="item-vertical" data-expected-width="150"><div class="content3-vertical"></div></div> +</div> + +<div class="flex-vertical" style="flex-wrap:wrap;"> + <div class="item-vertical" data-expected-width="150"><div class="content1-vertical"></div></div> + <div class="item-vertical" data-expected-width="150"><div class="content2-vertical"></div></div> + <div class="item-vertical" data-expected-width="150"><div class="content3-vertical"></div></div> + <div class="item-vertical" data-expected-width="150"><div class="content1-vertical"></div></div> + <div class="item-vertical" data-expected-width="150"><div class="content2-vertical"></div></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/align-content-wrap-003.html b/testing/web-platform/tests/css/css-flexbox/align-content-wrap-003.html new file mode 100644 index 0000000000..e46fca8187 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-content-wrap-003.html @@ -0,0 +1,330 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-align-content" /> +<title>css-flexbox: Tests align-content with flex-wrap: wrap</title> +<style> +.flexbox { + display: flex; + background-color: #aaa; + position: relative; + flex-wrap: wrap; +} + +.horizontal { + width: 200px; + height: 120px; +} +.horizontal > div { + min-height: 20px; +} +.horizontal > :nth-child(1) { + width: 100px; + min-height: 10px; +} +.horizontal > :nth-child(2) { + width: 100px; +} +.horizontal > :nth-child(3) { + width: 200px; +} +.horizontal > :nth-child(4) { + width: 50px; +} + +.vertical-rl { + writing-mode: vertical-rl; + width: 120px; + height: 20px; +} +.vertical-rl > div { + min-width: 20px; +} +.vertical-rl > :nth-child(1) { + height: 10px; + min-width: 10px; +} +.vertical-rl > :nth-child(2) { + height: 10px; +} +.vertical-rl > :nth-child(3) { + height: 20px; +} +.vertical-rl > :nth-child(4) { + height: 5px; +} + +.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> +<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> +<p>Test to make sure that align-content works properly.</p> + +<div data-expected-height="120" class="flexbox horizontal"> + <div data-offset-x="0" data-offset-y="0" data-expected-height="40"></div> + <div data-offset-x="100" data-offset-y="0" data-expected-height="40"></div> + <div data-offset-x="0" data-offset-y="40" data-expected-height="40"></div> + <div data-offset-x="0" data-offset-y="80" data-expected-height="40"></div> +</div> + +<div data-expected-height="120" class="flexbox horizontal" style="align-content: flex-start"> + <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div> + <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div> + <div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div> + <div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div> +</div> + +<div data-expected-height="120" class="flexbox horizontal" style="align-content: flex-end"> + <div data-offset-x="0" data-offset-y="60" data-expected-height="20"></div> + <div data-offset-x="100" data-offset-y="60" data-expected-height="20"></div> + <div data-offset-x="0" data-offset-y="80" data-expected-height="20"></div> + <div data-offset-x="0" data-offset-y="100" data-expected-height="20"></div> +</div> + +<div data-expected-height="120" class="flexbox horizontal" style="align-content: center"> + <div data-offset-x="0" data-offset-y="30" data-expected-height="20"></div> + <div data-offset-x="100" data-offset-y="30" data-expected-height="20"></div> + <div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div> + <div data-offset-x="0" data-offset-y="70" data-expected-height="20"></div> +</div> + +<div data-expected-height="120" class="flexbox horizontal" style="align-content: space-between"> + <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div> + <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div> + <div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div> + <div data-offset-x="0" data-offset-y="100" data-expected-height="20"></div> +</div> + +<div data-expected-height="120" class="flexbox horizontal" style="align-content: space-evenly"> + <div data-offset-x="0" data-offset-y="15" data-expected-height="20"></div> + <div data-offset-x="100" data-offset-y="15" data-expected-height="20"></div> + <div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div> + <div data-offset-x="0" data-offset-y="85" data-expected-height="20"></div> +</div> + +<div data-expected-height="120" class="flexbox horizontal" style="align-content: space-around"> + <div data-offset-x="0" data-offset-y="10" data-expected-height="20"></div> + <div data-offset-x="100" data-offset-y="10" data-expected-height="20"></div> + <div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div> + <div data-offset-x="0" data-offset-y="90" data-expected-height="20"></div> +</div> + +<div data-expected-height="120" class="flexbox horizontal" style="align-content: stretch"> + <div data-offset-x="0" data-offset-y="0" data-expected-height="40"></div> + <div data-offset-x="100" data-offset-y="0" data-expected-height="40"></div> + <div data-offset-x="0" data-offset-y="40" data-expected-height="40"></div> + <div data-offset-x="0" data-offset-y="80" data-expected-height="40"></div> +</div> + +<!-- Negative overflow goes out the top. --> +<div data-expected-height="30" class="flexbox horizontal" style="align-content: flex-end; height: 30px"> + <div data-offset-x="0" data-offset-y="-30" data-expected-height="20"></div> + <div data-offset-x="100" data-offset-y="-30" data-expected-height="20"></div> + <div data-offset-x="0" data-offset-y="-10" data-expected-height="20"></div> + <div data-offset-x="0" data-offset-y="10" data-expected-height="20"></div> +</div> + +<!-- If we overflow, we should true center. --> +<div data-expected-height="30" class="flexbox horizontal" style="align-content: center; height: 30px"> + <div data-offset-x="0" data-offset-y="-15" data-expected-height="20"></div> + <div data-offset-x="100" data-offset-y="-15" data-expected-height="20"></div> + <div data-offset-x="0" data-offset-y="5" data-expected-height="20"></div> + <div data-offset-x="0" data-offset-y="25" data-expected-height="20"></div> +</div> + +<!-- If we overflow, we should be the same as flex-start. --> +<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-between; height: 30px"> + <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div> + <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div> + <div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div> + <div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div> +</div> + +<!-- If we overflow, we should safe center. --> +<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-around; height: 30px"> + <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div> + <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div> + <div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div> + <div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div> +</div> + +<!-- If we overflow, we should true center. --> +<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-evenly; height: 30px"> + <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div> + <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div> + <div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div> + <div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div> +</div> + +<!-- Stretch should only grow, not shrink. --> +<div data-expected-height="30" class="flexbox horizontal" style="align-content: stretch; height: 30px"> + <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div> + <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div> + <div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div> + <div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div> +</div> + +<!-- 0 lines should not crash. --> +<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-between; height: 30px"> +</div> +<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-around; height: 30px"> +</div> +<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-evenly; height: 30px"> +</div> +<div data-expected-height="30" class="flexbox horizontal" style="align-content: stretch; height: 30px"> +</div> + +<!-- 1 line should not crash. --> +<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-between; height: 30px"> + <div data-offset-x="0" data-offset-y="0" data-expected-height="10"></div> +</div> +<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-around; height: 30px"> + <div data-offset-x="0" data-offset-y="10" data-expected-height="10"></div> +</div> +<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-evenly; height: 30px"> + <div data-offset-x="0" data-offset-y="10" data-expected-height="10"></div> +</div> +<div data-expected-height="30" class="flexbox horizontal" style="align-content: stretch; height: 30px"> + <div data-offset-x="0" data-offset-y="0" data-expected-height="30"></div> +</div> + + +<div data-expected-width="120" class="flexbox vertical-rl"> + <div data-offset-x="80" data-offset-y="0" data-expected-width="40"></div> + <div data-offset-x="80" data-offset-y="10" data-expected-width="40"></div> + <div data-offset-x="40" data-offset-y="0" data-expected-width="40"></div> + <div data-offset-x="0" data-offset-y="0" data-expected-width="40"></div> +</div> + +<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: flex-start"> + <div data-offset-x="100" data-offset-y="0" data-expected-width="20"></div> + <div data-offset-x="100" data-offset-y="10" data-expected-width="20"></div> + <div data-offset-x="80" data-offset-y="0" data-expected-width="20"></div> + <div data-offset-x="60" data-offset-y="0" data-expected-width="20"></div> +</div> + +<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: flex-end"> + <div data-offset-x="40" data-offset-y="0" data-expected-width="20"></div> + <div data-offset-x="40" data-offset-y="10" data-expected-width="20"></div> + <div data-offset-x="20" data-offset-y="0" data-expected-width="20"></div> + <div data-offset-x="0" data-offset-y="0" data-expected-width="20"></div> +</div> + +<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: center"> + <div data-offset-x="70" data-offset-y="0" data-expected-width="20"></div> + <div data-offset-x="70" data-offset-y="10" data-expected-width="20"></div> + <div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div> + <div data-offset-x="30" data-offset-y="0" data-expected-width="20"></div> +</div> + +<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: space-between"> + <div data-offset-x="100" data-offset-y="0" data-expected-width="20"></div> + <div data-offset-x="100" data-offset-y="10" data-expected-width="20"></div> + <div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div> + <div data-offset-x="0" data-offset-y="0" data-expected-width="20"></div> +</div> + +<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: space-around"> + <div data-offset-x="90" data-offset-y="0" data-expected-width="20"></div> + <div data-offset-x="90" data-offset-y="10" data-expected-width="20"></div> + <div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div> + <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div> +</div> + +<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: space-evenly"> + <div data-offset-x="85" data-offset-y="0" data-expected-width="20"></div> + <div data-offset-x="85" data-offset-y="10" data-expected-width="20"></div> + <div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div> + <div data-offset-x="15" data-offset-y="0" data-expected-width="20"></div> +</div> + +<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: stretch"> + <div data-offset-x="80" data-offset-y="0" data-expected-width="40"></div> + <div data-offset-x="80" data-offset-y="10" data-expected-width="40"></div> + <div data-offset-x="40" data-offset-y="0" data-expected-width="40"></div> + <div data-offset-x="0" data-offset-y="0" data-expected-width="40"></div> +</div> + +<!-- Negative overflow goes out the right. --> +<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: flex-end; width: 30px;"> + <div data-offset-x="40" data-offset-y="0" data-expected-width="20"></div> + <div data-offset-x="40" data-offset-y="10" data-expected-width="20"></div> + <div data-offset-x="20" data-offset-y="0" data-expected-width="20"></div> + <div data-offset-x="0" data-offset-y="0" data-expected-width="20"></div> +</div> + +<!-- If we overflow, we should true center. --> +<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: center; width: 30px;"> + <div data-offset-x="25" data-offset-y="0" data-expected-width="20"></div> + <div data-offset-x="25" data-offset-y="10" data-expected-width="20"></div> + <div data-offset-x="5" data-offset-y="0" data-expected-width="20"></div> + <div data-offset-x="-15" data-offset-y="0" data-expected-width="20"></div> +</div> + +<!-- If we overflow, we should be the same as flex-start. --> +<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-between; width: 30px;"> + <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div> + <div data-offset-x="10" data-offset-y="10" data-expected-width="20"></div> + <div data-offset-x="-10" data-offset-y="0" data-expected-width="20"></div> + <div data-offset-x="-30" data-offset-y="0" data-expected-width="20"></div> +</div> + +<!-- If we overflow, we should safe center. --> +<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-around; width: 30px;"> + <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div> + <div data-offset-x="10" data-offset-y="10" data-expected-width="20"></div> + <div data-offset-x="-10" data-offset-y="0" data-expected-width="20"></div> + <div data-offset-x="-30" data-offset-y="0" data-expected-width="20"></div> +</div> + +<!-- If we overflow, we should true center. --> +<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-evenly; width: 30px;"> + <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div> + <div data-offset-x="10" data-offset-y="10" data-expected-width="20"></div> + <div data-offset-x="-10" data-offset-y="0" data-expected-width="20"></div> + <div data-offset-x="-30" data-offset-y="0" data-expected-width="20"></div> +</div> + +<!-- Stretch should only grow, not shrink. --> +<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: stretch; width: 30px;"> + <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div> + <div data-offset-x="10" data-offset-y="10" data-expected-width="20"></div> + <div data-offset-x="-10" data-offset-y="0" data-expected-width="20"></div> + <div data-offset-x="-30" data-offset-y="0" data-expected-width="20"></div> +</div> + +<!-- 0 lines should not crash. --> +<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-between; width: 30px"> +</div> +<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-around; width: 30px"> +</div> +<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-evenly; width: 30px"> +</div> +<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: stretch; width: 30px"> +</div> + +<!-- 1 line should not crash. --> +<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-between; width: 30px"> + <div data-offset-x="20" data-offset-y="0" data-expected-width="10"></div> +</div> +<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-around; width: 30px"> + <div data-offset-x="10" data-offset-y="0" data-expected-width="10"></div> +</div> +<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-evenly; width: 30px"> + <div data-offset-x="10" data-offset-y="0" data-expected-width="10"></div> +</div> +<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: stretch; width: 30px"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="30"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/align-content-wrap-004.html b/testing/web-platform/tests/css/css-flexbox/align-content-wrap-004.html new file mode 100644 index 0000000000..161832190a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-content-wrap-004.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<link rel="author" title="Google LLC" href="http://www.google.com" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#cross-sizing" /> +<title>css-flexbox: Tests that we size items in a wrapping column flexbox as fit-content</title> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + +<style> +.flex { + display: flex; + flex-wrap: wrap; + align-content: center; + flex-direction: column; + align-items: flex-start; + width: 100px; + line-height: 1; +} +.flex > div { + min-height: 0; + background: green; +} +.flex * { + vertical-align: top; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div class="flex"> + <div style="align-self: stretch;"> + <div style="display: inline-block; width: 20px; height: 40px;"></div> + </div> + <div style="height: 60px;"> + <div style="display: inline-block; height: 15px; width: 20px;"></div> + <div style="display: inline-block; height: 15px; width: 100px;"></div> + <div style="display: inline-block; height: 15px; width: 100px;"></div> + <div style="display: inline-block; height: 15px; width: 100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/align-content-wrap-005.html b/testing/web-platform/tests/css/css-flexbox/align-content-wrap-005.html new file mode 100644 index 0000000000..1c77594b43 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-content-wrap-005.html @@ -0,0 +1,54 @@ +<!doctype html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-align-content" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#positional-values" /> +<meta name="assert" content="Flex items are positioned correctly in wrap-reverse align-content:start/end containers in either text direction."> + +<style> +.flexbox { + display: flex; + width: 75px; /* make the row flexbox wrap */ + height: 150px; + flex-wrap: wrap-reverse; + position: relative; + float: left; + margin-right: 20px; + border: 1px solid black; +} + +.flexitem { + width: 50px; + height: 50px; +} + +.flexbox :nth-child(1) { + background-color: blue; +} +.flexbox :nth-child(2) { + background-color: orange; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.flexitem')"> + +<div class=flexbox style="align-content: start;"> + <div class=flexitem data-offset-x=0 data-offset-y=50></div> + <div class=flexitem data-offset-x=0 data-offset-y=0></div> +</div> + +<div class=flexbox style="align-content: end;"> + <div class=flexitem data-offset-x=0 data-offset-y=100></div> + <div class=flexitem data-offset-x=0 data-offset-y=50></div> +</div> + +<div class=flexbox style="align-content: start; direction: rtl;"> + <div class=flexitem data-offset-x=25 data-offset-y=50></div> + <div class=flexitem data-offset-x=25 data-offset-y=0></div> +</div> + +<div class=flexbox style="align-content: end; direction: rtl"> + <div class=flexitem data-offset-x=25 data-offset-y=100></div> + <div class=flexitem data-offset-x=25 data-offset-y=50></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/align-content_center.html b/testing/web-platform/tests/css/css-flexbox/align-content_center.html new file mode 100644 index 0000000000..6f401a64ff --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-content_center.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Flexible Box Test: align-content_center</title> + <link rel="author" title="Intel" href="http://www.intel.com" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" /> + <link rel="match" href="reference/align-content_center-ref.html"> + <link rel="stylesheet" href="support/test-style.css"> + <meta name="assert" content="Check if the web engine can identify the align-content value center." /> + <style> + #test{ + height: 200px; + width: 80px; + display: flex; + flex-wrap: wrap; + align-content: center; + } + </style> + </head> + <body> + <p>Test passes if:<br> + 1. the rectangle 1, 2, 3 show up in a vertical column in a red rectangle and no gap between them.<br> + 2. the rectangle 1, 2, 3 appear in middle left of red rectangle.</p> + <div id=test><div id=test01>1</div><div id=test02>2</div><div id=test03>3</div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/align-content_flex-end.html b/testing/web-platform/tests/css/css-flexbox/align-content_flex-end.html new file mode 100644 index 0000000000..9024d05440 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-content_flex-end.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Flexible Box Test: align-content_flex-end</title> + <link rel="author" title="Intel" href="http://www.intel.com" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" /> + <link rel="match" href="reference/align-content_flex-end-ref.html"> + <link rel="stylesheet" href="support/test-style.css"> + <meta name="assert" content="Check if the web engine can identify the align-content value flex-end." /> + <style> + #test{ + height: 200px; + width: 80px; + display: flex; + flex-wrap: wrap; + align-content: flex-end; + } + </style> + </head> + <body> + <p>Test passes if:<br> + 1. the rectangle 1, 2, 3 show up in a vertical column in a red rectangle and no gap between them.<br> + 2. the rectangle 1, 2, 3 appear in bottom left of red rectangle.</p> + <div id=test><div id=test01>1</div><div id=test02>2</div><div id=test03>3</div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/align-content_flex-start.html b/testing/web-platform/tests/css/css-flexbox/align-content_flex-start.html new file mode 100644 index 0000000000..e86ac72756 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-content_flex-start.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Flexible Box Test: align-content_flex-start</title> + <link rel="author" title="Intel" href="http://www.intel.com" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" /> + <link rel="match" href="reference/align-content_flex-start-ref.html"> + <link rel="stylesheet" href="support/test-style.css"> + <meta name="assert" content="Check if the web engine can identify the align-content value flex-start." /> + <style> + #test{ + height: 200px; + width: 80px; + display: flex; + flex-wrap: wrap; + align-content: flex-start; + } + </style> + </head> + <body> + <p>Test passes if:<br> + 1. the rectangle 1, 2, 3 show up in a vertical column in a red rectangle and no gap between them.<br> + 2. the rectangle 1, 2, 3 appear in upper left of red rectangle.</p> + <div id=log></div> + <div id=test><div id=test01>1</div><div id=test02>2</div><div id=test03>3</div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/align-content_space-around.html b/testing/web-platform/tests/css/css-flexbox/align-content_space-around.html new file mode 100644 index 0000000000..8949a30132 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-content_space-around.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Flexible Box Test: align-content_space-around</title> + <link rel="author" title="Intel" href="http://www.intel.com" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" /> + <link rel="match" href="reference/align-content_space-around-ref.html"> + <link rel="stylesheet" href="support/test-style.css"> + <meta name="assert" content="Check if the web engine can identify align-content value space-around." /> + <style> + #test{ + height: 210px; + width: 80px; + display: flex; + flex-wrap: wrap; + align-content: space-around; + } + </style> + </head> + <body> + <p>Test passes if:<br> + 1. the rectangle 1, 2, 3 show up in a vertical column in a red rectangle.<br> + 2. the rectangle 1, 2, 3 are distributed such that the empty space between any two adjacent rectangle is the same, and the empty space of the column before the first and after the last rectangle are half the size of the other empty spaces.</p> + <div id=test><div id=test01>1</div><div id=test02>2</div><div id=test03>3</div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/align-content_space-between.html b/testing/web-platform/tests/css/css-flexbox/align-content_space-between.html new file mode 100644 index 0000000000..da3ba308b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-content_space-between.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Flexible Box Test: align-content_space-between</title> + <link rel="author" title="Intel" href="http://www.intel.com" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" /> + <link rel="match" href="reference/align-content_space-between-ref.html"> + <link rel="stylesheet" href="support/test-style.css"> + <meta name="assert" content="Check if the display can recognize inline-flex value." /> + <style> + #test{ + height: 200px; + width: 80px; + display: flex; + flex-wrap: wrap; + align-content: space-between; + } + </style> + </head> + <body> + <p>Test passes if:<br> + 1. the rectangle 1, 2, 3 show up in a vertical column in a red rectangle.<br> + 2. No gap between the top of red rectangle and the top of rectangle 1, no gap between the bottom of red rectangle and the bottom of rectangle 3 too, and rectangle 2 is distributed so that the empty space between rectangle 1 and rectangle 3 is the same.</p> + <div id=test><div id=test01>1</div><div id=test02>2</div><div id=test03>3</div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/align-content_stretch.html b/testing/web-platform/tests/css/css-flexbox/align-content_stretch.html new file mode 100644 index 0000000000..7c890e90e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-content_stretch.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Flexible Box Test: align-content_stretch</title> + <link rel="author" title="Intel" href="http://www.intel.com" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" /> + <link rel="match" href="reference/align-content_stretch-ref.html"> + <link rel="stylesheet" href="support/test-style.css"> + <meta name="assert" content="Check if the web engine can identify the align-content value stretch." /> + <style> + #test{ + height: 210px; + width: 80px; + display: flex; + flex-wrap: wrap; + align-content: stretch; + } + </style> + </head> + <body> + <p>Test passes if:<br> + 1. the rectangle 1, 2, 3 show up in a vertical column in a red rectangle.<br> + 2. No gap between the top of red rectangle and the top of rectangle 1, and rectangle 1 , 2, 3 are distributed so that the empty space in the column between 1 , 2 , 3 is the same. + <div id=test><div id=test01>1</div><div id=test02>2</div><div id=test03>3</div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/align-items-001.htm b/testing/web-platform/tests/css/css-flexbox/align-items-001.htm new file mode 100644 index 0000000000..fcd9205ef4 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-items-001.htm @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: A flex container with the 'align-items' property set to 'center'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" /> + <link rel="match" href="reference/align-content-001-ref.html" /> + <meta name="assert" content="This test checks that the flex container with 'align-items: center' centers each flex item's margin box in the cross-axis of its line." /> + <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-6217" /> + <style type="text/css"> + #flexbox + { + background: linear-gradient(to bottom, green 0, green 25px, red 25px, red 75px, green 75px, green 100px); + align-items: center; + display: flex; + height: 100px; + width: 300px; + } + div div + { + background-color: green; + height: 52px; + width: 150px; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div id="flexbox"> + <div></div> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/align-items-002.htm b/testing/web-platform/tests/css/css-flexbox/align-items-002.htm new file mode 100644 index 0000000000..751f803325 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-items-002.htm @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: A flex container with the 'align-items' property set to 'flex-start'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" /> + <link rel="match" href="reference/align-content-001-ref.html" /> + <meta name="assert" content="This test checks that the flex container with 'align-items: flex-start' places each flex item's margin box flush with the cross-start edge of line." /> + <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-6356" /> + <style type="text/css"> + #flexbox + { + background: linear-gradient(to bottom, red 0, red 50px, green 50px, green 100px); + align-items: center; + align-items: flex-start; + display: flex; + height: 100px; + width: 300px; + } + div div + { + background-color: green; + height: 51px; + width: 150px; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div id="flexbox"> + <div></div> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/align-items-003.htm b/testing/web-platform/tests/css/css-flexbox/align-items-003.htm new file mode 100644 index 0000000000..e2ddd3c334 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-items-003.htm @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: A flex container with the 'align-items' property set to 'flex-end'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" /> + <link rel="match" href="reference/align-content-001-ref.html" /> + <meta name="assert" content="This test checks that the flex container with 'align-items: flex-end' places each flex item's margin box flush with the cross-end edge of line." /> + <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-6347" /> + <style type="text/css"> + #flexbox + { + background: linear-gradient(to bottom, green 0, green 50px, red 50px, red 100px); + align-items: center; + align-items: flex-end; + display: flex; + height: 100px; + width: 300px; + } + div div + { + background-color: green; + height: 51px; + width: 150px; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div id="flexbox"> + <div></div> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/align-items-004.htm b/testing/web-platform/tests/css/css-flexbox/align-items-004.htm new file mode 100644 index 0000000000..c1464e1e0a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-items-004.htm @@ -0,0 +1,50 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: A flex container with the 'align-items' property set to 'baseline'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" /> + <link rel="match" href="reference/align-content-001-ref.html" /> + <meta name="flags" content="ahem"> + <meta name="assert" content="This test checks that the flex container with 'align-items: baseline' places each flex item's margin box so that their baselines align." /> + <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-6405" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #flexbox + { + background: linear-gradient(to bottom, green 0, green 16px, red 17px, red 35px, green 36px, green 66px, red 67px, red 85px, green 86px, green 100px); + align-items: flex-start; + align-items: baseline; + display: flex; + flex-flow: wrap; + height: 100px; + width: 300px; + } + div div + { + background-color: green; + color: green; + font: 20px/1em Ahem; + width: 75px; + } + #div3, #div7 + { + font-size: 40px; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div id="flexbox"> + <div id="div1">d1</div> + <div id="div2">d2</div> + <div id="div3">d3</div> + <div id="div4">d4</div> + <div id="div5">d5</div> + <div id="div6">d6</div> + <div id="div7">d7</div> + <div id="div8">d8</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/align-items-005.htm b/testing/web-platform/tests/css/css-flexbox/align-items-005.htm new file mode 100644 index 0000000000..7bfc2dc3e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-items-005.htm @@ -0,0 +1,34 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: A flex container with the 'align-items' property set to 'stretch'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" /> + <link rel="match" href="reference/align-content-001-ref.html" /> + <meta name="assert" content="This test checks that the flex container with 'align-items: stretch' places each flex item's margin box so that its cross size is the same as the cross size of the line." /> + <style type="text/css"> + #flexbox + { + background: red; + align-items: center; + align-items: stretch; + display: flex; + height: 100px; + width: 300px; + } + div div + { + background-color: green; + width: 150px; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div id="flexbox"> + <div></div> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/align-items-006.html b/testing/web-platform/tests/css/css-flexbox/align-items-006.html new file mode 100644 index 0000000000..ea8590b333 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-items-006.html @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: A flex container with 'column' direction and 'align-items' property set to 'flex-start'</title> + <link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property" /> + <link rel="match" href="reference/align-content-001-ref.html" /> + <meta name="assert" content="This test checks that 'align-items: flex-start' implies the flex item's 'auto' width to be resolved as 'fit-content'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .block { + position: absolute; + width: 300px; + height: 100px; + } + #flexbox + { + font: 50px/1 Ahem; + background: green; + flex-direction: column; + align-items: flex-start; + display: flex; + width: 300px; + height: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div class="block"> + <div style="width: 200px; height: 50px; background: green"></div> + </div> + <div id="flexbox"> + <div style="background: red; color: red">XXXX</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/align-items-007.html b/testing/web-platform/tests/css/css-flexbox/align-items-007.html new file mode 100644 index 0000000000..704c82fc6a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-items-007.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Google LLC" href="http://www.google.com" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#cross-sizing" /> +<title>css-flexbox: Tests that we size items in a wrapping column flexbox as fit-content</title> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="The image should fit wholly within the flexbox." /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<!-- This makes sure that we only see green if the flex items are sized correctly --> +<div style="position: absolute; width: 100px; height: 100px; background: green;"></div> + +<div style="display: flex; flex-direction: column; width: 100px; height: 100px; line-height: 20px; align-items: center;"> + <img src="../support/red-rect.svg"> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/align-items-008.html b/testing/web-platform/tests/css/css-flexbox/align-items-008.html new file mode 100644 index 0000000000..88aa10690b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-items-008.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<link rel="help" href="https://crbug.com/1081086" /> +<meta name="assert" content="Tests that certain dynamic changes don't lead to an incorrectly sized flex-item." /> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="target" style="display: flex; min-height: 200px;"> + <div style="width: 100px; min-height: 100px; background: green;"></div> +</div> +<script> +document.body.offsetTop; +document.getElementById('target').style.alignItems = 'flex-start'; +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/align-items-009.html b/testing/web-platform/tests/css/css-flexbox/align-items-009.html new file mode 100644 index 0000000000..dc89b0aa9e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-items-009.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/1100203"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#target { + font: 100px/1 'Ahem'; + color: green; + + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + width: 200px; + + position: relative; + left: -50px; +} +</style> +<p>Test passes if there is a filled green square.</p> +<div id="target">X</div> diff --git a/testing/web-platform/tests/css/css-flexbox/align-items-baseline-column-horz-ref.html b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-column-horz-ref.html new file mode 100644 index 0000000000..be74007df4 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-column-horz-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<style> +#target { + display: grid; + flex-direction: column; + grid-template-columns: 200px; + justify-items: baseline; + inline-size: 200px; + border: solid 3px; +} +#target > div { + margin: 5px 7px 9px 11px; +} +#target > :nth-child(1) { + background: lime; + font-size: 30px; + writing-mode: vertical-rl; +} +#target > :nth-child(2) { + background: hotpink; + font-size: 20px; + writing-mode: vertical-rl; +} +#target > :nth-child(3) { + background: cyan; + width: 40px; + height: 40px; +} +#target > :nth-child(4) { + background: lime; + font-size: 30px; + writing-mode: vertical-lr; +} +#target > :nth-child(5) { + background: hotpink; + font-size: 20px; + writing-mode: vertical-lr; +} +</style> +<div id="target"> + <div>line1<br>line2</div> + <div>line1<br>line2</div> + <div></div> + <div>line1<br>line2</div> + <div>line1<br>line2</div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/align-items-baseline-column-horz.html b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-column-horz.html new file mode 100644 index 0000000000..2e599afda0 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-column-horz.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-export"> +<link rel="match" href="align-items-baseline-column-horz-ref.html"> +<style> +#target { + display: flex; + flex-direction: column; + align-items: baseline; + inline-size: 200px; + border: solid 3px; +} +#target > div { + margin: 5px 7px 9px 11px; +} +#target > :nth-child(1) { + background: lime; + font-size: 30px; + writing-mode: vertical-rl; +} +#target > :nth-child(2) { + background: hotpink; + font-size: 20px; + writing-mode: vertical-rl; +} +#target > :nth-child(3) { + background: cyan; + width: 40px; + height: 40px; +} +#target > :nth-child(4) { + background: lime; + font-size: 30px; + writing-mode: vertical-lr; +} +#target > :nth-child(5) { + background: hotpink; + font-size: 20px; + writing-mode: vertical-lr; +} +</style> +<div id="target"> + <div>line1<br>line2</div> + <div>line1<br>line2</div> + <div></div> + <div>line1<br>line2</div> + <div>line1<br>line2</div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/align-items-baseline-column-vert-lr-flexbox-item.html b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-column-vert-lr-flexbox-item.html new file mode 100644 index 0000000000..d1a35af62f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-column-vert-lr-flexbox-item.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment"> +<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<style> +#target { + display: flex; + flex-direction: column; + width: 200px; + align-items: baseline; + border: 3px solid black; + font-family: monospace; + font-size: 10px; + line-height: 10px; +} +#target > :nth-child(1) { + background: hotpink; + writing-mode: vertical-lr; + padding-left: 30px; + margin-left: 10px; +} +#target > :nth-child(2) { + background: papayawhip; + writing-mode: vertical-lr; +} +.inner { + display: flex; + border: 5px solid black; + padding: 5px; +} +</style> +<body onload="checkLayout('#target > div')"> +<div id="target"> + <div class="inner" data-offset-x="21"> + <div>two<br>lines</div> + </div> + <div data-offset-x="56">hello</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/align-items-baseline-column-vert-lr-grid-item.html b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-column-vert-lr-grid-item.html new file mode 100644 index 0000000000..62fae7e565 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-column-vert-lr-grid-item.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment"> +<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<style> +#target { + display: flex; + flex-direction: column; + width: 200px; + align-items: baseline; + border: 3px solid black; + font-family: monospace; + font-size: 10px; + line-height: 10px; +} +#target > :nth-child(1) { + background: hotpink; + writing-mode: vertical-lr; + padding-left: 30px; + margin-left: 10px; +} +#target > :nth-child(2) { + background: papayawhip; + writing-mode: vertical-lr; +} +.inner { + display: grid; + grid-template: auto / auto; + border: 5px solid black; + padding: 5px; +} +</style> +<body onload="checkLayout('#target > div')"> +<div id="target"> + <div class="inner" data-offset-x="21"> + <div>two<br>lines</div> + </div> + <div data-offset-x="56">hello</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/align-items-baseline-column-vert-lr-items.html b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-column-vert-lr-items.html new file mode 100644 index 0000000000..4b268373d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-column-vert-lr-items.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment"> +<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<style> +#target { + display: flex; + flex-direction: column; + width: 200px; + align-items: baseline; + border: 3px solid black; + font-family: monospace; + font-size: 10px; + line-height: 10px; +} +#target > :nth-child(1) { + background: hotpink; + writing-mode: vertical-lr; + padding-left: 30px; + margin-left: 10px; +} +#target > :nth-child(2) { + background: papayawhip; + writing-mode: vertical-lr; +} +</style> +<body onload="checkLayout('#target > div')"> +<div id="target"> + <div data-offset-x="21">two<br>lines</div> + <div data-offset-x="51">hello</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/align-items-baseline-column-vert-lr-table-item.html b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-column-vert-lr-table-item.html new file mode 100644 index 0000000000..c19925cd81 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-column-vert-lr-table-item.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment"> +<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<style> +#target { + display: flex; + flex-direction: column; + width: 200px; + align-items: baseline; + border: 3px solid black; + font-family: monospace; + font-size: 10px; + line-height: 10px; +} +#target > :nth-child(1) { + background: hotpink; + writing-mode: vertical-lr; + padding-left: 30px; + margin-left: 10px; +} +#target > :nth-child(2) { + background: papayawhip; + writing-mode: vertical-lr; +} +.inner { + border: 5px solid black; + padding: 5px; +} +</style> +<body onload="checkLayout('#target > *')"> +<div id="target"> + <table class="inner" data-offset-x="21"> + <tr> + <td style="vertical-align: baseline;"> + <div>two<br>lines</div> + </td> + </tr> + </table> + <div data-offset-x="59">hello</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/align-items-baseline-column-vert-ref.html b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-column-vert-ref.html new file mode 100644 index 0000000000..a62c65b858 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-column-vert-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<style> +#target { + writing-mode: vertical-rl; + display: grid; + grid-template-columns: 200px; + justify-items: baseline; + inline-size: 200px; + border: solid 3px; +} +#target > div { + margin: 5px 7px 9px 11px; +} +#target > :nth-child(1) { + background: lime; + font-size: 30px; + writing-mode: horizontal-tb; +} +#target > :nth-child(2) { + background: hotpink; + font-size: 20px; + writing-mode: horizontal-tb; +} +#target > :nth-child(3) { + background: cyan; + width: 40px; + height: 40px; +} +</style> +<div id="target"> + <div>line1<br>line2</div> + <div>line1<br>line2</div> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/align-items-baseline-column-vert-rl-flexbox-item.html b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-column-vert-rl-flexbox-item.html new file mode 100644 index 0000000000..4304ebe01c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-column-vert-rl-flexbox-item.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment"> +<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<style> +#target { + font-size: 16px; + line-height: 16px; + display: flex; + flex-direction: column; + width: 200px; + align-items: baseline; + border: 3px solid black; + font-family: monospace; + font-size: 10px; + line-height: 10px; +} +#target > :nth-child(1) { + background: hotpink; + writing-mode: vertical-rl; + padding-left: 30px; + margin-left: 10px; +} +#target > :nth-child(2) { + background: papayawhip; + writing-mode: vertical-rl; +} +.inner { + display: flex; + border: 5px solid black; + padding: 5px; +} +</style> +<body onload="checkLayout('#target > div')"> +<div id="target"> + <div class="inner" data-offset-x="146"> + <div>two<br>lines</div> + </div> + <div data-offset-x="191">hello</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/align-items-baseline-column-vert-rl-grid-item.html b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-column-vert-rl-grid-item.html new file mode 100644 index 0000000000..3711a15942 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-column-vert-rl-grid-item.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment"> +<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<style> +#target { + display: flex; + flex-direction: column; + width: 200px; + align-items: baseline; + border: 3px solid black; + font-family: monospace; + font-size: 10px; + line-height: 10px; +} +#target > :nth-child(1) { + background: hotpink; + writing-mode: vertical-rl; + padding-left: 30px; + margin-left: 10px; +} +#target > :nth-child(2) { + background: papayawhip; + writing-mode: vertical-rl; +} +.inner { + display: grid; + grid-template: auto / auto; + border: 5px solid black; + padding: 5px; +} +</style> +<body onload="checkLayout('#target > div')"> +<div id="target"> + <div class="inner" data-offset-x="146"> + <div>two<br>lines</div> + </div> + <div data-offset-x="191">hello</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/align-items-baseline-column-vert-rl-items.html b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-column-vert-rl-items.html new file mode 100644 index 0000000000..14f165b8b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-column-vert-rl-items.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment"> +<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<style> +#target { + display: flex; + flex-direction: column; + width: 200px; + align-items: baseline; + border: 3px solid black; + font-family: monospace; + font-size: 10px; + line-height: 10px; +} +#target > :nth-child(1) { + background: hotpink; + writing-mode: vertical-rl; + padding-left: 30px; + margin-left: 10px; +} +#target > :nth-child(2) { + background: papayawhip; + writing-mode: vertical-rl; +} +</style> +<body onload="checkLayout('#target > div')"> +<div id="target"> + <div data-offset-x="161">two<br>lines</div> + <div data-offset-x="201">hello</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/align-items-baseline-column-vert-rl-table-item.html b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-column-vert-rl-table-item.html new file mode 100644 index 0000000000..0bf1ab95fd --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-column-vert-rl-table-item.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment"> +<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<style> +#target { + display: flex; + flex-direction: column; + width: 200px; + align-items: baseline; + border: 3px solid black; + font-family: monospace; + font-size: 10px; + line-height: 10px; +} +#target > :nth-child(1) { + background: hotpink; + writing-mode: vertical-rl; + padding-left: 30px; + margin-left: 10px; +} +#target > :nth-child(2) { + background: papayawhip; + writing-mode: vertical-rl; +} +.inner { + border: 5px solid black; + padding: 5px; +} +</style> +<body onload="checkLayout('#target > *')"> +<div id="target"> + <table class="inner" data-offset-x="140"> + <tr> + <td style="vertical-align: baseline;"> + <div>two<br>lines</div> + </td> + </tr> + </table> + <div data-offset-x="188">hello</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/align-items-baseline-column-vert.html b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-column-vert.html new file mode 100644 index 0000000000..3e4a322073 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-column-vert.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-export"> +<link rel="match" href="align-items-baseline-column-vert-ref.html"> +<style> +#target { + writing-mode: vertical-rl; + display: flex; + flex-direction: column; + align-items: baseline; + inline-size: 200px; + border: solid 3px; +} +#target > div { + margin: 5px 7px 9px 11px; +} +#target > :nth-child(1) { + background: lime; + font-size: 30px; + writing-mode: horizontal-tb; +} +#target > :nth-child(2) { + background: hotpink; + font-size: 20px; + writing-mode: horizontal-tb; +} +#target > :nth-child(3) { + background: cyan; + width: 40px; + height: 40px; +} +</style> +<div id="target"> + <div>line1<br>line2</div> + <div>line1<br>line2</div> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/align-items-baseline-overflow-non-visible.html b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-overflow-non-visible.html new file mode 100644 index 0000000000..48c34b365e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-overflow-non-visible.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>A block with 'overflow: hidden' should produce normal baseline</title> +<link rel="author" title="Koji Ishii" href="kojii@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-baselines"> +<link rel="match" href="reference/align-items-baseline-overflow-non-visible-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<style> +.flex { + display: flex; + align-items: baseline; + font: 25px/1 Ahem; +} +.overflow { + overflow: hidden; + height: 2em; +} +</style> + +<body> +<!-- +CSS2 states that: + The baseline of an 'inline-block' is the baseline of its last line box in + the normal flow, unless it has either no in-flow line boxes or if its + 'overflow' property has a computed value other than 'visible', in which case + the baseline is the bottom margin edge. + https://drafts.csswg.org/css2/visudet.html#propdef-vertical-align +This rule should apply only to 'inline-block', and not to normal block. +--> +<div class="flex"> + <span>XX</span> + <div><div class="overflow">YY</div></div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/align-items-baseline-row-horz-ref.html b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-row-horz-ref.html new file mode 100644 index 0000000000..5dae0a362e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-row-horz-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<style> +#target { + display: grid; + grid-auto-flow: column; + grid-template-rows: 100px; + align-items: baseline; + inline-size: min-content; + block-size: 100px; + border: solid 3px; +} +#target > div { + margin: 5px 7px 9px 11px; +} +#target > :nth-child(1) { + background: lime; + font-size: 30px; +} +#target > :nth-child(2) { + background: hotpink; + font-size: 20px; +} +#target > :nth-child(3) { + background: cyan; + writing-mode: vertical-rl; + width: 40px; + height: 40px; +} +</style> +<div id="target"> + <div>line1<br>line2</div> + <div>line1<br>line2</div> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/align-items-baseline-row-horz.html b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-row-horz.html new file mode 100644 index 0000000000..394e9f70cd --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-row-horz.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-export"> +<link rel="match" href="align-items-baseline-row-horz-ref.html"> +<style> +#target { + display: flex; + align-items: baseline; + inline-size: min-content; + block-size: 100px; + border: solid 3px; +} +#target > div { + margin: 5px 7px 9px 11px; +} +#target > :nth-child(1) { + background: lime; + font-size: 30px; +} +#target > :nth-child(2) { + background: hotpink; + font-size: 20px; +} +#target > :nth-child(3) { + background: cyan; + writing-mode: vertical-rl; + width: 40px; + height: 40px; +} +</style> +<div id="target"> + <div>line1<br>line2</div> + <div>line1<br>line2</div> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/align-items-baseline-row-vert-ref.html b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-row-vert-ref.html new file mode 100644 index 0000000000..c9cbc39416 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-row-vert-ref.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<style> +#target { + writing-mode: vertical-rl; + display: grid; + grid-auto-flow: column; + grid-template-rows: 200px; + align-items: baseline; + inline-size: min-content; + block-size: 200px; + border: solid 3px; +} +#target > div { + margin: 5px 7px 9px 11px; +} +#target > :nth-child(1) { + background: lime; + font-size: 30px; + writing-mode: vertical-rl; +} +#target > :nth-child(2) { + background: hotpink; + font-size: 20px; + writing-mode: vertical-rl; +} +#target > :nth-child(3) { + background: cyan; + width: 40px; + height: 40px; +} +#target > :nth-child(4) { + background: lime; + font-size: 30px; + writing-mode: vertical-lr; +} +#target > :nth-child(5) { + background: hotpink; + font-size: 20px; + writing-mode: vertical-lr; +} +</style> +<div id="target"> + <div>line1<br>line2</div> + <div>line1<br>line2</div> + <div></div> + <div>line1<br>line2</div> + <div>line1<br>line2</div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/align-items-baseline-row-vert.html b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-row-vert.html new file mode 100644 index 0000000000..4a6eb60e1d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-row-vert.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-export"> +<link rel="match" href="align-items-baseline-row-vert-ref.html"> +<style> +#target { + writing-mode: vertical-rl; + display: flex; + align-items: baseline; + inline-size: min-content; + block-size: 200px; + border: solid 3px; +} +#target > div { + margin: 5px 7px 9px 11px; +} +#target > :nth-child(1) { + background: lime; + font-size: 30px; + writing-mode: vertical-rl; +} +#target > :nth-child(2) { + background: hotpink; + font-size: 20px; + writing-mode: vertical-rl; +} +#target > :nth-child(3) { + background: cyan; + width: 40px; + height: 40px; + writing-mode: horizontal-tb; +} +#target > :nth-child(4) { + background: lime; + font-size: 30px; + writing-mode: vertical-lr; +} +#target > :nth-child(5) { + background: hotpink; + font-size: 20px; + writing-mode: vertical-lr; +} +</style> +<div id="target"> + <div>line1<br>line2</div> + <div>line1<br>line2</div> + <div></div> + <div>line1<br>line2</div> + <div>line1<br>line2</div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/align-items-baseline-vert-lr-column-horz-flexbox-item.html b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-vert-lr-column-horz-flexbox-item.html new file mode 100644 index 0000000000..14ec99809e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-vert-lr-column-horz-flexbox-item.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill"> +<style> +#target { + display: flex; + flex-direction: column; + writing-mode: vertical-lr; + align-items: baseline; + border: 3px solid black; + font-family: monospace; + font-size: 10px; + line-height: 10px; +} +#target > :nth-child(1) { + background: hotpink; + writing-mode: horizontal-tb; + padding-left: 30px; + margin-left: 10px; +} +#target > :nth-child(2) { + background: papayawhip; + writing-mode: horizontal-tb; +} +.inner { + display: flex; + border: 5px solid black; + padding: 5px; +} +</style> +<body onload="checkLayout('#target > div')"> +<div id="target"> + <div class="inner" data-offset-y="11"> + <div>two<br>lines</div> + </div> + <div data-offset-y="21">hello</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/align-items-baseline-vert-lr-column-horz-grid-item.html b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-vert-lr-column-horz-grid-item.html new file mode 100644 index 0000000000..a17c42a032 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-vert-lr-column-horz-grid-item.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment"> +<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<style> +#target { + display: flex; + flex-direction: column; + writing-mode: vertical-lr; + align-items: baseline; + border: 3px solid black; + font-family: monospace; + font-size: 10px; + line-height: 10px; +} +#target > :nth-child(1) { + background: hotpink; + writing-mode: horizontal-tb; + padding-left: 30px; + margin-left: 10px; +} +#target > :nth-child(2) { + background: papayawhip; + writing-mode: horizontal-tb; +} +.inner { + display: grid; + grid-template: auto / auto; + border: 5px solid black; + padding: 5px; +} +</style> +<body onload="checkLayout('#target > div')"> +<div id="target"> + <div class="inner" data-offset-y="11"> + <div>two<br>lines</div> + </div> + <div data-offset-y="21">hello</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/align-items-baseline-vert-lr-column-horz-items.html b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-vert-lr-column-horz-items.html new file mode 100644 index 0000000000..f1194f9955 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-vert-lr-column-horz-items.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment"> +<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<style> +#target { + display: flex; + flex-direction: column; + writing-mode: vertical-lr; + align-items: baseline; + border: 3px solid black; + font-family: monospace; + font-size: 10px; + line-height: 10px; +} +#target > :nth-child(1) { + background: hotpink; + writing-mode: horizontal-tb; + padding-left: 30px; + margin-left: 10px; +} +#target > :nth-child(2) { + background: papayawhip; + writing-mode: horizontal-tb; +} +</style> +<body onload="checkLayout('#target > div')"> +<div id="target"> + <div data-offset-y="11">two<br>lines</div> + <div data-offset-y="11">hello</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/align-items-baseline-vert-lr-column-horz-table-item.html b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-vert-lr-column-horz-table-item.html new file mode 100644 index 0000000000..817896cd4b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-vert-lr-column-horz-table-item.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment"> +<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<style> +#target { + display: flex; + flex-direction: column; + writing-mode: vertical-lr; + align-items: baseline; + border: 3px solid black; + font-family: monospace; + font-size: 10px; + line-height: 10px; +} +#target > :nth-child(1) { + background: hotpink; + writing-mode: horizontal-tb; + padding-left: 30px; + margin-left: 10px; +} +#target > :nth-child(2) { + background: papayawhip; + writing-mode: horizontal-tb; +} +.inner { + border: 5px solid black; + padding: 5px; +} +</style> +<body onload="checkLayout('#target > div')"> +<div id="target"> + <table class="inner" data-offset-y="130"> + <tr> + <td style="vertical-align: baseline;"> + <div>two<br>lines</div> + </td> + </tr> + </table> + <div data-offset-y="24">hello</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/align-items-baseline-vert-rl-column-horz-flexbox-item.html b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-vert-rl-column-horz-flexbox-item.html new file mode 100644 index 0000000000..249ba95f03 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-vert-rl-column-horz-flexbox-item.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment"> +<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<style> +#target { + display: flex; + flex-direction: column; + writing-mode: vertical-rl; + align-items: baseline; + border: 3px solid black; + font-family: monospace; + font-size: 10px; + line-height: 10px; +} +#target > :nth-child(1) { + background: hotpink; + writing-mode: horizontal-tb; + padding-left: 30px; + margin-left: 10px; +} +#target > :nth-child(2) { + background: papayawhip; + writing-mode: horizontal-tb; +} +.inner { + display: flex; + border: 5px solid black; + padding: 5px; +} +</style> +<body onload="checkLayout('#target > div')"> +<div id="target"> + <div class="inner" data-offset-y="11"> + <div>two<br>lines</div> + </div> + <div data-offset-y="21">hello</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/align-items-baseline-vert-rl-column-horz-grid-item.html b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-vert-rl-column-horz-grid-item.html new file mode 100644 index 0000000000..4efebabfb3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-vert-rl-column-horz-grid-item.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment"> +<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<style> +#target { + display: flex; + flex-direction: column; + writing-mode: vertical-rl; + align-items: baseline; + border: 3px solid black; + font-family: monospace; + font-size: 10px; + line-height: 10px; +} +#target > :nth-child(1) { + background: hotpink; + writing-mode: horizontal-tb; + padding-left: 30px; + margin-left: 10px; +} +#target > :nth-child(2) { + background: papayawhip; + writing-mode: horizontal-tb; +} +.inner { + display: grid; + grid-template: auto / auto; + border: 5px solid black; + padding: 5px; +} +</style> +<body onload="checkLayout('#target > div')"> +<div id="target"> + <div class="inner" data-offset-y="11"> + <div>two<br>lines</div> + </div> + <div data-offset-y="21">hello</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/align-items-baseline-vert-rl-column-horz-items.html b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-vert-rl-column-horz-items.html new file mode 100644 index 0000000000..a29e2d8f6d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-vert-rl-column-horz-items.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment"> +<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<style> +#target { + display: flex; + flex-direction: column; + width: 200px; + writing-mode: vertical-rl; + align-items: baseline; + border: 3px solid black; + font-family: monospace; + font-size: 10px; + line-height: 10px; +} +#target > :nth-child(1) { + background: hotpink; + writing-mode: horizontal-tb; + padding-left: 30px; + margin-left: 10px; +} +#target > :nth-child(2) { + background: papayawhip; + writing-mode: horizontal-tb; +} +</style> +<body onload="checkLayout('#target > div')"> +<div id="target"> + <div data-offset-y="11">two<br>lines</div> + <div data-offset-y="11">hello</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/align-items-baseline-vert-rl-column-horz-table-item.html b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-vert-rl-column-horz-table-item.html new file mode 100644 index 0000000000..bc69ad2dc2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-items-baseline-vert-rl-column-horz-table-item.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment"> +<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<style> +#target { + display: flex; + flex-direction: column; + writing-mode: vertical-rl; + align-items: baseline; + border: 3px solid black; + font-family: monospace; + font-size: 10px; + line-height: 10px; +} +#target > :nth-child(1) { + background: hotpink; + writing-mode: horizontal-tb; + padding-left: 30px; + margin-left: 10px; +} +#target > :nth-child(2) { + background: papayawhip; + writing-mode: horizontal-tb; +} +.inner { + border: 5px solid black; + padding: 5px; +} +</style> +<body onload="checkLayout('#target > div')"> +<div id="target"> + <table class="inner" data-offset-y="130"> + <tr> + <td style="vertical-align: baseline;"> + <div>two<br>lines</div> + </td> + </tr> + </table> + <div data-offset-y="24">hello</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/align-self-001.html b/testing/web-platform/tests/css/css-flexbox/align-self-001.html new file mode 100644 index 0000000000..77eb5a6b5c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-self-001.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: align-self - flex-start</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" /> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The 'align-self' property set 'flex-start' aligns the flex items to the start edge of cross axis"> +<style> + #test { + background-color: red; + display: flex; + height: 100px; + width: 100px; + } + #test div { + align-self: flex-start; + background-color: green; + height: 50px; + width: 25px; + } + #cover { + background-color: green; + height: 50px; + margin-top: -50px; + width: 100px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="test"> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + <div id="cover"></div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/align-self-002.html b/testing/web-platform/tests/css/css-flexbox/align-self-002.html new file mode 100644 index 0000000000..d4dbf6066f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-self-002.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: align-self - flex-end</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" /> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The 'align-self' property set 'flex-end' aligns the flex items to the end edge of cross axis"> +<style> + #test { + background-color: red; + display: flex; + height: 100px; + width: 100px; + } + #test div { + align-self: flex-end; + background-color: green; + height: 50px; + width: 25px; + } + #cover { + background-color: green; + height: 50px; + margin-top: -100px; + width: 100px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="test"> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + <div id="cover"></div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/align-self-003.html b/testing/web-platform/tests/css/css-flexbox/align-self-003.html new file mode 100644 index 0000000000..f049dcd0f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-self-003.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: align-self - center</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" /> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The 'align-self' property set 'center' centered the flex items in the cross axis within the line"> +<style> + #test { + background-color: red; + display: flex; + height: 100px; + width: 100px; + } + #test div { + align-self: center; + background-color: green; + height: 50px; + width: 25px; + } + #top { + background-color: green; + margin-top: -100px; + height: 25px; + width: 100px; + } + #bottom { + background-color: green; + height: 25px; + margin-top: 50px; + width: 100px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="test"> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + <div id="top"></div> + <div id="bottom"></div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/align-self-004.html b/testing/web-platform/tests/css/css-flexbox/align-self-004.html new file mode 100644 index 0000000000..7a0760f39b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-self-004.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: align-self - stretch</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" /> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The 'align-self' property set 'stretch' makes the cross size of the item's margin box +as close to the same size as the line as possible"> +<style> + #test { + align-items: center; + background-color: red; + display: flex; + height: 100px; + width: 100px; + } + #test div { + align-self: stretch; + background-color: green; + width: 25px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="test"> + <div></div> + <div></div> + <div></div> + <div></div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/align-self-005.html b/testing/web-platform/tests/css/css-flexbox/align-self-005.html new file mode 100644 index 0000000000..ec169060bf --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-self-005.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: align-self - stretch (height: number)</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" /> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The 'align-self' property set 'stretch' will be invalid while cross size of the flex item set exact number"> +<style> + #test { + background-color: green; + display: flex; + height: 100px; + width: 100px; + } + #test div { + align-self: stretch; + background-color: red; + height: 50px; + width: 25px; + } + #cover { + background-color: green; + height: 50px; + position: relative; + top: -100px; + width: 100px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="test"> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + <div id="cover"></div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/align-self-006.html b/testing/web-platform/tests/css/css-flexbox/align-self-006.html new file mode 100644 index 0000000000..f25788499c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-self-006.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: align-self - baseline</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" /> +<meta name="assert" content="The 'align-self' property set 'baseline' aligns the flex items to the baseline of content"> +<style> + #test { + border: 1px solid black; + display: flex; + } + #test div { + align-self: baseline; + } + #div1 { + height: 90px; + font-size: 20px; + width: 30px; + } + #div2 { + height: 50px; + font-size: 10px; + width: 30px; + } + #div3 { + height: 100px; + font-size: 30px; + width: 30px; + } + #div4 { + height: 80px; + font-size: 15px; + width: 30px; + } +</style> +<body> + <p>Test passes if the underline of all 'a' characters within black border box is horizontal and no breaking.</p> + <div id="test"> + <div id="div1"><a href="#">aaa</a></div> + <div id="div2"><a href="#">aaaaa</a></div> + <div id="div3"><a href="#">aa</a></div> + <div id="div4"><a href="#">aaa</a></div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/align-self-007.html b/testing/web-platform/tests/css/css-flexbox/align-self-007.html new file mode 100644 index 0000000000..4b7cb5cf16 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-self-007.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: align-self - auto and align-items - flex-start</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" /> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The 'align-self' property set 'auto' aligns flex items to start edge of cross-axis when 'align-items' set 'flex-start'"> +<style> + #test { + align-items: flex-start; + background-color: red; + display: flex; + height: 100px; + width: 100px; + } + #test div { + align-self: auto; + background-color: green; + height: 50px; + width: 25px; + } + #cover { + background-color: green; + height: 50px; + margin-top: -50px; + width: 100px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="test"> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + <div id="cover"></div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/align-self-008.html b/testing/web-platform/tests/css/css-flexbox/align-self-008.html new file mode 100644 index 0000000000..c62f231a33 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-self-008.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: align-self - auto and align-items - flex-end</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" /> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The 'align-self' property set 'auto' aligns flex items to end edge of cross-axis when 'align-items' set 'flex-end'"> +<style> + #test { + align-items: flex-end; + background-color: red; + display: flex; + height: 100px; + width: 100px; + } + #test div { + align-self: auto; + background-color: green; + height: 50px; + width: 25px; + } + #cover { + background-color: green; + height: 50px; + margin-top: -100px; + width: 100px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="test"> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + <div id="cover"></div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/align-self-009.html b/testing/web-platform/tests/css/css-flexbox/align-self-009.html new file mode 100644 index 0000000000..648d48785c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-self-009.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: align-self - auto and align-items - center</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" /> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The 'align-self' property set 'auto' will center flex items the flex items in the cross axis when 'align-items' set 'center'"> +<style> + #test { + align-items: center; + background-color: red; + display: flex; + height: 100px; + width: 100px; + } + #test div { + align-self: auto; + background-color: green; + height: 50px; + width: 25px; + } + #top { + background-color: green; + margin-top: -100px; + height: 25px; + width: 100px; + } + #bottom { + background-color: green; + height: 25px; + margin-top: 50px; + width: 100px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="test"> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + <div id="top"></div> + <div id="bottom"></div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/align-self-010.html b/testing/web-platform/tests/css/css-flexbox/align-self-010.html new file mode 100644 index 0000000000..20c280788b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-self-010.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: align-self - auto and align-items - baseline</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" /> +<meta name="assert" content="The 'align-self' property set 'auto' aligns the flex items to the baseline of content when 'align-items' set 'baseline'"> +<style> + #test { + align-items: baseline; + border: 1px solid black; + display: flex; + } + #test div { + align-self: auto; + } + #div1 { + height: 90px; + font-size: 20px; + width: 30px; + } + #div2 { + height: 50px; + font-size: 10px; + width: 30px; + } + #div3 { + height: 100px; + font-size: 30px; + width: 30px; + } + #div4 { + height: 80px; + font-size: 15px; + width: 30px; + } +</style> +<body> + <p>Test passes if the underline of all 'a' characters within black border box is horizontal and no breaking.</p> + <div id="test"> + <div id="div1"><a href="#">aaa</a></div> + <div id="div2"><a href="#">aaaaa</a></div> + <div id="div3"><a href="#">aa</a></div> + <div id="div4"><a href="#">aaa</a></div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/align-self-011.html b/testing/web-platform/tests/css/css-flexbox/align-self-011.html new file mode 100644 index 0000000000..5f8067176b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-self-011.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: align-self - auto and align-items - stretch</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" /> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The 'align-self' property set 'auto' makes the cross size of the item's margin box +as close to the same size as the line as possible when 'align-items' set 'stretch'"> +<style> + #test { + align-items: stretch; + background-color: red; + display: flex; + height: 100px; + width: 100px; + } + #test div { + align-self: auto; + background-color: green; + width: 25px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="test"> + <div></div> + <div></div> + <div></div> + <div></div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/align-self-012.html b/testing/web-platform/tests/css/css-flexbox/align-self-012.html new file mode 100644 index 0000000000..401e703fc3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-self-012.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: align-self - auto (initial value)</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" /> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The initial value of 'align-self' property is 'auto'"> +<style> + #test { + align-items: stretch; + background-color: red; + display: flex; + height: 100px; + width: 100px; + } + #test div { + background-color: green; + width: 25px; + } + .auto { + align-self: auto; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="test"> + <div class="auto"></div> + <div class="auto"></div> + <div></div> + <div></div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/align-self-013.html b/testing/web-platform/tests/css/css-flexbox/align-self-013.html new file mode 100644 index 0000000000..34711ac69d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-self-013.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: align-self - invalid if applied to flex container</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" /> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The 'align-self' property is invalid if applied to flex container"> +<style> + #test { + align-items: flex-start; + align-self: flex-end; + background-color: red; + display: flex; + height: 100px; + width: 100px; + } + #test div { + background-color: green; + height: 50px; + width: 25px; + } + #cover { + background-color: green; + height: 50px; + margin-top: -50px; + width: 100px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="test"> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + <div id="cover"></div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/align-self-014.html b/testing/web-platform/tests/css/css-flexbox/align-self-014.html new file mode 100644 index 0000000000..945d9d1935 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-self-014.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<title>CSS Flexbox: align-self: center content with flex-direction: column.</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property"> +<link rel="help" href="https://drafts.csswg.org/css-align/#align-self-property"> +<link rel="help" href="https://crbug.com/750553"/> +<meta name="assert" content="This test ensures that no unnecessary horizontal offset is applied to inline content in a 'align-self: center' box, inside of a flexbox with 'flex-direction: column'."/> + +<style> +html, body { + margin: 0; +} + +body { + display: flex; + flex-direction: column; +} + +.content { + align-self: center; +} + +.content > div { + width: 400px; + display: inline-block; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.content')"> + +<div class="content" data-offset-x="0"> + <div data-offset-x="0">X</div> + <div>X</div> + <div>X</div> + <div>X</div> + <div>X</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/align-self-015.html b/testing/web-platform/tests/css/css-flexbox/align-self-015.html new file mode 100644 index 0000000000..14ec361797 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/align-self-015.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://drafts.csswg.org/css-flexbox/#valdef-flex-direction-column"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#valdef-flex-wrap-wrap"> +<link rel="match" href="reference/align-self-015-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/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-001.html b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-001.html new file mode 100644 index 0000000000..9c5e3858cf --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-001.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment"> +<style> +#target { + display: flex; + flex-direction: column; + align-items: last baseline; + width: 200px; + border: solid 3px; + position: relative; +} +#target > :nth-child(1) { + background: lime; + margin-right: 20px; + padding-right: 20px; + font-size: 20px; + line-height: 20px; + align-self: first baseline; + writing-mode: vertical-rl; +} +#target > :nth-child(2) { + background: hotpink; + font-size: 30px; + line-height: 30px; + writing-mode: vertical-lr; +} +#target > :nth-child(3) { + background: papayawhip; + font-size: 16px; + line-height: 16px; + writing-mode: vertical-lr; +} +#target > :nth-child(4) { + background: orange; + margin-left: 20px; + padding-left: 20px; + font-size: 20px; + line-height: 20px; + align-self: first baseline; + writing-mode: vertical-lr; +} +#target > :nth-child(5) { + background: cyan; + font-size: 30px; + line-height: 30px; + writing-mode: vertical-rl; +} +#target > :nth-child(6) { + background: papayawhip; + font-size: 16px; + line-height: 16px; + writing-mode: vertical-rl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('#target > div')"> + +<div id="target"> + <div data-offset-x="120">line1<br>line2</div> + <div data-offset-x="105">line1<br>line2</div> + <div data-offset-x="126">line1<br>line2</div> + <div data-offset-x="20">line1<br>line2</div> + <div data-offset-x="35">line1<br>line2</div> + <div data-offset-x="42">line1<br>line2</div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-002.html b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-002.html new file mode 100644 index 0000000000..41a8319ae0 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-002.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment"> +<style> +#target { + display: flex; + align-items: last baseline; + width: 200px; + border: solid 3px; + position: relative; + writing-mode: vertical-lr; +} +#target > :nth-child(1) { + background: lime; + margin-right: 20px; + padding-right: 20px; + font-size: 20px; + line-height: 20px; + align-self: first baseline; + writing-mode: vertical-rl; +} +#target > :nth-child(2) { + background: hotpink; + font-size: 30px; + line-height: 30px; + writing-mode: vertical-lr; +} +#target > :nth-child(3) { + background: papayawhip; + font-size: 16px; + line-height: 16px; + writing-mode: vertical-lr; +} +#target > :nth-child(4) { + background: orange; + margin-left: 20px; + padding-left: 20px; + font-size: 20px; + line-height: 20px; + align-self: first baseline; + writing-mode: vertical-lr; +} +#target > :nth-child(5) { + background: cyan; + font-size: 30px; + line-height: 30px; + writing-mode: vertical-rl; +} +#target > :nth-child(6) { + background: papayawhip; + font-size: 16px; + line-height: 16px; + writing-mode: vertical-rl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('#target > div')"> + +<div id="target"> + <div data-offset-x="120">line1<br>line2</div> + <div data-offset-x="105">line1<br>line2</div> + <div data-offset-x="126">line1<br>line2</div> + <div data-offset-x="20">line1<br>line2</div> + <div data-offset-x="35">line1<br>line2</div> + <div data-offset-x="42">line1<br>line2</div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-003.html b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-003.html new file mode 100644 index 0000000000..e8be20c9cf --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-003.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment"> +<style> +#target { + display: flex; + align-items: last baseline; + width: 200px; + border: solid 3px; + position: relative; + writing-mode: vertical-rl; +} +#target > :nth-child(1) { + background: lime; + margin-right: 20px; + padding-right: 20px; + font-size: 20px; + line-height: 20px; + align-self: first baseline; + writing-mode: vertical-rl; +} +#target > :nth-child(2) { + background: hotpink; + font-size: 30px; + line-height: 30px; + writing-mode: vertical-lr; +} +#target > :nth-child(3) { + background: papayawhip; + font-size: 16px; + line-height: 16px; + writing-mode: vertical-lr; +} +#target > :nth-child(4) { + background: orange; + margin-left: 20px; + padding-left: 20px; + font-size: 20px; + line-height: 20px; + align-self: first baseline; + writing-mode: vertical-lr; +} +#target > :nth-child(5) { + background: cyan; + font-size: 30px; + line-height: 30px; + writing-mode: vertical-rl; +} +#target > :nth-child(6) { + background: papayawhip; + font-size: 16px; + line-height: 16px; + writing-mode: vertical-rl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('#target > div')"> + +<div id="target"> + <div data-offset-x="120">line1<br>line2</div> + <div data-offset-x="105">line1<br>line2</div> + <div data-offset-x="126">line1<br>line2</div> + <div data-offset-x="20">line1<br>line2</div> + <div data-offset-x="35">line1<br>line2</div> + <div data-offset-x="42">line1<br>line2</div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-004.html b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-004.html new file mode 100644 index 0000000000..cccf504784 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-004.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment"> +<style> +#target { + display: flex; + flex-wrap: wrap-reverse; + flex-direction: column; + align-items: last baseline; + width: 200px; + border: solid 3px; + position: relative; +} +#target > :nth-child(1) { + background: lime; + margin-right: 20px; + padding-right: 20px; + font-size: 20px; + line-height: 20px; + align-self: first baseline; + writing-mode: vertical-rl; +} +#target > :nth-child(2) { + background: hotpink; + font-size: 30px; + line-height: 30px; + writing-mode: vertical-lr; +} +#target > :nth-child(3) { + background: papayawhip; + font-size: 16px; + line-height: 16px; + writing-mode: vertical-lr; +} +#target > :nth-child(4) { + background: orange; + margin-left: 20px; + padding-left: 20px; + font-size: 20px; + line-height: 20px; + align-self: first baseline; + writing-mode: vertical-lr; +} +#target > :nth-child(5) { + background: cyan; + font-size: 30px; + line-height: 30px; + writing-mode: vertical-rl; +} +#target > :nth-child(6) { + background: papayawhip; + font-size: 16px; + line-height: 16px; + writing-mode: vertical-rl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('#target > div')"> + +<div id="target"> + <div data-offset-x="15">line1<br>line2</div> + <div data-offset-x="0">line1<br>line2</div> + <div data-offset-x="21">line1<br>line2</div> + <div data-offset-x="125">line1<br>line2</div> + <div data-offset-x="140">line1<br>line2</div> + <div data-offset-x="147">line1<br>line2</div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-005.html b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-005.html new file mode 100644 index 0000000000..187083c0b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-005.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment"> +<style> +#target { + display: flex; + align-items: last baseline; + width: 200px; + border: solid 3px; + position: relative; + line-height: 0; +} +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cornflowerblue 3px; + outline-offset: -3px; +} +#target > div { + flex: none; +} +#target > :nth-child(1) { + background: lime; + margin-bottom: 20px; + padding-bottom: 20px; + font-size: 20px; +} +#target > :nth-child(2) { + background: hotpink; + font-size: 30px; +} +#target > :nth-child(3) { + background: papayawhip; + font-size: 10px; + 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('#target > div')"> + +<div id="target"> + <div data-offset-y="20"><span></span><br><span></span></div> + <div data-offset-y="0"><span></span><br><span></span></div> + <div data-offset-y="50"><span></span><br><span></span></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-006.html b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-006.html new file mode 100644 index 0000000000..6d52ab783d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-006.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment"> +<style> +#target { + display: flex; + flex-direction: column; + height: 100px; + align-items: last baseline; + width: 200px; + border: solid 3px; + position: relative; + line-height: 0; + writing-mode: vertical-rl; +} +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cornflowerblue 3px; + outline-offset: -3px; +} +#target > div { + flex: none; +} +#target > :nth-child(1) { + background: lime; + margin-bottom: 20px; + padding-bottom: 20px; + font-size: 20px; + writing-mode: horizontal-tb; +} +#target > :nth-child(2) { + background: hotpink; + font-size: 30px; + writing-mode: horizontal-tb; +} +#target > :nth-child(3) { + background: papayawhip; + font-size: 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('#target > div')"> + +<div id="target"> + <div data-offset-y="20"><span></span><br><span></span></div> + <div data-offset-y="0"><span></span><br><span></span></div> + <div data-offset-y="55"><span></span><br><span></span></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-007.html b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-007.html new file mode 100644 index 0000000000..e4c03ed688 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-007.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment"> +<style> +#target { + display: flex; + flex-direction: column; + height: 100px; + align-items: last baseline; + width: 200px; + border: solid 3px; + position: relative; + line-height: 0; + writing-mode: vertical-lr; +} +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cornflowerblue 3px; + outline-offset: -3px; +} +#target > div { + flex: none; +} +#target > :nth-child(1) { + background: lime; + margin-bottom: 20px; + padding-bottom: 20px; + font-size: 20px; + writing-mode: horizontal-tb; +} +#target > :nth-child(2) { + background: hotpink; + font-size: 30px; + writing-mode: horizontal-tb; +} +#target > :nth-child(3) { + background: papayawhip; + font-size: 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('#target > div')"> + +<div id="target"> + <div data-offset-y="20"><span></span><br><span></span></div> + <div data-offset-y="0"><span></span><br><span></span></div> + <div data-offset-y="55"><span></span><br><span></span></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-fieldset-001.html b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-fieldset-001.html new file mode 100644 index 0000000000..2ffec5317a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-fieldset-001.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7656#issuecomment-1248617134"> +<style> +.target { + display: flex; + position: relative; + line-height: 0; +} +.target > div { + background: hotpink; + font-size: 30px; +} +fieldset { + padding: 10px; + border: solid 10px; + margin: 0; + font-size: 20px; +} +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="20"><span></span></div> + <fieldset data-offset-y="0"> + <legend><span></span></legend> + <span></span><br><span></span> + </table> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="40"><span></span></div> + <fieldset data-offset-y="0"> + <span></span><br><span></span> + <legend><span></span></legend> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-fieldset-002.html b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-fieldset-002.html new file mode 100644 index 0000000000..479237af62 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-fieldset-002.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7656#issuecomment-1248617134"> +<style> +.target { + display: flex; + position: relative; + line-height: 0; + writing-mode: vertical-rl; +} +.target > div { + background: hotpink; + font-size: 30px; +} +fieldset { + padding: 10px; + border: solid 10px; + margin: 0; + font-size: 20px; +} +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="35"><span></span></div> + <fieldset data-offset-x="0"> + <legend><span></span></legend> + <span></span><br><span></span> + </table> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="15"><span></span></div> + <fieldset data-offset-x="0"> + <span></span><br><span></span> + <legend><span></span></legend> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-fieldset-003.html b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-fieldset-003.html new file mode 100644 index 0000000000..c324380720 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-fieldset-003.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7656#issuecomment-1248617134"> +<style> +.target { + display: flex; + position: relative; + line-height: 0; + writing-mode: vertical-lr; +} +.target > div { + background: hotpink; + font-size: 30px; +} +fieldset { + padding: 10px; + border: solid 10px; + margin: 0; + font-size: 20px; +} +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="25"><span></span></div> + <fieldset data-offset-x="0"> + <legend><span></span></legend> + <span></span><br><span></span> + </table> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="45"><span></span></div> + <fieldset data-offset-x="0"> + <span></span><br><span></span> + <legend><span></span></legend> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-flex-001.html b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-flex-001.html new file mode 100644 index 0000000000..dda6c379eb --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-flex-001.html @@ -0,0 +1,260 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines"> +<style> +.target { + display: flex; + position: relative; + line-height: 0; + font-size: 20px; + inline-size: 200px; + margin-block: 10px; + padding: 10px; + border: solid 3px; +} + +.inner { + display: flex; + border: solid 5px; + padding: 10px; +} + +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="15"><span></span></div> + <div class="inner" data-offset-y="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="35"><span></span></div> + <div class="inner" data-offset-y="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="35"><span></span></div> + <div class="inner" style="flex-direction: row-reverse;" data-offset-y="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="15"><span></span></div> + <div class="inner" style="flex-direction: row-reverse;" data-offset-y="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="15"><span></span></div> + <div class="inner" style="flex-direction: column;" data-offset-y="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="45"><span></span></div> + <div class="inner" style="flex-direction: column;" data-offset-y="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="35"><span></span></div> + <div class="inner" style="flex-direction: column-reverse;" data-offset-y="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="45"><span></span></div> + <div class="inner" style="flex-direction: column-reverse;" data-offset-y="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + </div> +</div> + +<!-- flex-wrap: wrap --> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="25"><span></span></div> + <div class="inner" style="flex-wrap: wrap; inline-size: 50px;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="70"><span></span></div> + <div class="inner" style="flex-wrap: wrap; inline-size: 50px;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="35"><span></span></div> + <div class="inner" style="flex-wrap: wrap; flex-direction: row-reverse; inline-size: 50px;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="45"><span></span></div> + <div class="inner" style="flex-wrap: wrap; flex-direction: row-reverse; inline-size: 50px;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="25"><span></span></div> + <div class="inner" style="flex-wrap: wrap; flex-direction: column; block-size: 50px;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="50"><span></span></div> + <div class="inner" style="flex-wrap: wrap; flex-direction: column; block-size: 50px;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="35"><span></span></div> + <div class="inner" style="flex-wrap: wrap; flex-direction: column-reverse; block-size: 50px;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="55"><span></span></div> + <div class="inner" style="flex-wrap: wrap; flex-direction: column-reverse; block-size: 50px;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<!-- flex-wrap: wrap-reverse --> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="15"><span></span></div> + <div class="inner" style="flex-wrap: wrap-reverse; inline-size: 50px;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="70"><span></span></div> + <div class="inner" style="flex-wrap: wrap-reverse; inline-size: 50px;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="40"><span></span></div> + <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: row-reverse; inline-size: 50px;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="60"><span></span></div> + <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: row-reverse; inline-size: 50px;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="15"><span></span></div> + <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column; block-size: 50px;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="55"><span></span></div> + <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column; block-size: 50px;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="45"><span></span></div> + <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column-reverse; block-size: 50px;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="55"><span></span></div> + <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column-reverse; block-size: 50px;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-flex-002.html b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-flex-002.html new file mode 100644 index 0000000000..fc8e9f769c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-flex-002.html @@ -0,0 +1,261 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines"> +<style> +.target { + display: flex; + position: relative; + line-height: 0; + font-size: 20px; + inline-size: 200px; + margin-inline: 10px; + padding: 10px; + border: solid 3px; + writing-mode: vertical-rl; +} + +.inner { + display: flex; + border: solid 5px; + padding: 10px; +} + +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="40"><span></span></div> + <div class="inner" data-offset-x="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="30"><span></span></div> + <div class="inner" data-offset-x="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="30"><span></span></div> + <div class="inner" style="flex-direction: row-reverse;" data-offset-x="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="40"><span></span></div> + <div class="inner" style="flex-direction: row-reverse;" data-offset-x="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="50"><span></span></div> + <div class="inner" style="flex-direction: column;" data-offset-x="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="30"><span></span></div> + <div class="inner" style="flex-direction: column;" data-offset-x="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="40"><span></span></div> + <div class="inner" style="flex-direction: column-reverse;" data-offset-x="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="20"><span></span></div> + <div class="inner" style="flex-direction: column-reverse;" data-offset-x="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + </div> +</div> + +<!-- flex-wrap: wrap --> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="70"><span></span></div> + <div class="inner" style="flex-wrap: wrap; inline-size: 50px;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="33"><span></span></div> + <div class="inner" style="flex-wrap: wrap; inline-size: 50px;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="65"><span></span></div> + <div class="inner" style="flex-wrap: wrap; flex-direction: row-reverse; inline-size: 50px;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="45"><span></span></div> + <div class="inner" style="flex-wrap: wrap; flex-direction: row-reverse; inline-size: 50px;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="55"><span></span></div> + <div class="inner" style="flex-wrap: wrap; flex-direction: column; block-size: 50px;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="38"><span></span></div> + <div class="inner" style="flex-wrap: wrap; flex-direction: column; block-size: 50px;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="50"><span></span></div> + <div class="inner" style="flex-wrap: wrap; flex-direction: column-reverse; block-size: 50px;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="20"><span></span></div> + <div class="inner" style="flex-wrap: wrap; flex-direction: column-reverse; block-size: 50px;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<!-- flex-wrap: wrap-reverse --> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="75"><span></span></div> + <div class="inner" style="flex-wrap: wrap-reverse; inline-size: 50px;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="30"><span></span></div> + <div class="inner" style="flex-wrap: wrap-reverse; inline-size: 50px;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="63"><span></span></div> + <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: row-reverse; inline-size: 50px;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="35"><span></span></div> + <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: row-reverse; inline-size: 50px;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="60"><span></span></div> + <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column; block-size: 50px;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="30"><span></span></div> + <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column; block-size: 50px;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="43"><span></span></div> + <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column-reverse; block-size: 50px;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="25"><span></span></div> + <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column-reverse; block-size: 50px;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-flex-003.html b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-flex-003.html new file mode 100644 index 0000000000..0d2c2a72ae --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-flex-003.html @@ -0,0 +1,129 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines"> +<style> +.target { + display: flex; + position: relative; + line-height: 0; + font-size: 20px; + inline-size: 200px; + margin-block: 10px; + padding: 10px; + border: solid 3px; +} + +.inner { + display: flex; + border: solid 5px; + padding: 10px; + gap: 10px; +} + +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="45"><span></span></div> + <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-y="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div> + <div style="font-size: 50px;"><span></span></div> + <div style="font-size: 60px;"><span></span></div> + <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div> + <div style="font-size: 20px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="45"><span></span></div> + <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-y="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div> + <div style="font-size: 50px;"><span></span></div> + <div style="font-size: 60px;"><span></span></div> + <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div> + <div style="font-size: 20px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="55"><span></span></div> + <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-y="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div> + <div style="font-size: 50px;"><span></span></div> + <div style="font-size: 60px;"><span></span></div> + <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div> + <div style="font-size: 20px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="55"><span></span></div> + <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-y="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div> + <div style="font-size: 50px;"><span></span></div> + <div style="font-size: 60px;"><span></span></div> + <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div> + <div style="font-size: 20px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="115"><span></span></div> + <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-y="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div> + <div style="font-size: 50px;"><span></span></div> + <div style="font-size: 60px;"><span></span></div> + <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div> + <div style="font-size: 20px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="115"><span></span></div> + <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-y="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div> + <div style="font-size: 50px;"><span></span></div> + <div style="font-size: 60px;"><span></span></div> + <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div> + <div style="font-size: 20px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="115"><span></span></div> + <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-y="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div> + <div style="font-size: 50px;"><span></span></div> + <div style="font-size: 60px;"><span></span></div> + <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div> + <div style="font-size: 20px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="115"><span></span></div> + <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-y="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div> + <div style="font-size: 50px;"><span></span></div> + <div style="font-size: 60px;"><span></span></div> + <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div> + <div style="font-size: 20px;"><span></span></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-flex-004.html b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-flex-004.html new file mode 100644 index 0000000000..eaedd81728 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-flex-004.html @@ -0,0 +1,130 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines"> +<style> +.target { + display: flex; + position: relative; + line-height: 0; + font-size: 20px; + inline-size: 200px; + margin-block: 10px; + padding: 10px; + border: solid 3px; + writing-mode: vertical-rl; +} + +.inner { + display: flex; + border: solid 5px; + padding: 10px; + gap: 10px; +} + +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="110"><span></span></div> + <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-x="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div> + <div style="font-size: 50px;"><span></span></div> + <div style="font-size: 60px;"><span></span></div> + <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div> + <div style="font-size: 20px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="110"><span></span></div> + <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-x="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div> + <div style="font-size: 50px;"><span></span></div> + <div style="font-size: 60px;"><span></span></div> + <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div> + <div style="font-size: 20px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="105"><span></span></div> + <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-x="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div> + <div style="font-size: 50px;"><span></span></div> + <div style="font-size: 60px;"><span></span></div> + <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div> + <div style="font-size: 20px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="105"><span></span></div> + <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-x="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div> + <div style="font-size: 50px;"><span></span></div> + <div style="font-size: 60px;"><span></span></div> + <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div> + <div style="font-size: 20px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="45"><span></span></div> + <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-x="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div> + <div style="font-size: 50px;"><span></span></div> + <div style="font-size: 60px;"><span></span></div> + <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div> + <div style="font-size: 20px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="45"><span></span></div> + <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-x="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div> + <div style="font-size: 50px;"><span></span></div> + <div style="font-size: 60px;"><span></span></div> + <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div> + <div style="font-size: 20px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="40"><span></span></div> + <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-x="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div> + <div style="font-size: 50px;"><span></span></div> + <div style="font-size: 60px;"><span></span></div> + <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div> + <div style="font-size: 20px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="40"><span></span></div> + <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-x="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div> + <div style="font-size: 50px;"><span></span></div> + <div style="font-size: 60px;"><span></span></div> + <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div> + <div style="font-size: 20px;"><span></span></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-grid-001.html b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-grid-001.html new file mode 100644 index 0000000000..d4bba0871a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-grid-001.html @@ -0,0 +1,111 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-baselines"> +<style> +.target { + display: flex; + position: relative; + line-height: 0; + font-size: 20px; + inline-size: 300px; + margin-block: 10px; + padding: 10px; + border: solid 3px; +} + +.inner { + display: grid; + gap: 10px; + grid-template: 50px 50px / 50px 50px 50px; + border: solid 5px; + padding: 10px; +} + +.inner > div:first-child, +.inner > div:last-child { + align-self: start; +} + +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="35"><span></span></div> + <div class="inner" style="align-items: first baseline;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 15px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + <div style="font-size: 25px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="100"><span></span></div> + <div class="inner" style="align-items: first baseline;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 15px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + <div style="font-size: 25px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="55"><span></span></div> + <div class="inner" style="align-items: last baseline;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 15px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + <div style="font-size: 25px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="115"><span></span></div> + <div class="inner" style="align-items: last baseline;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 15px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + <div style="font-size: 25px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="25"><span></span></div> + <div class="inner" style="align-items: end;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 15px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + <div style="font-size: 25px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="90"><span></span></div> + <div class="inner" style="align-items: end;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 15px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + <div style="font-size: 25px;"><span></span></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-grid-002.html b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-grid-002.html new file mode 100644 index 0000000000..f8d0ef53eb --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-grid-002.html @@ -0,0 +1,112 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-baselines"> +<style> +.target { + display: flex; + position: relative; + line-height: 0; + font-size: 20px; + inline-size: 300px; + margin-block: 10px; + padding: 10px; + border: solid 3px; + writing-mode: vertical-rl; +} + +.inner { + display: grid; + gap: 10px; + grid-template: 50px 50px / 50px 50px 50px; + border: solid 5px; + padding: 10px; +} + +.inner > div:first-child, +.inner > div:last-child { + align-self: start; +} + +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="110"><span></span></div> + <div class="inner" style="align-items: first baseline;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 15px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + <div style="font-size: 25px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="48"><span></span></div> + <div class="inner" style="align-items: first baseline;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 15px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + <div style="font-size: 25px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="90"><span></span></div> + <div class="inner" style="align-items: last baseline;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 15px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + <div style="font-size: 25px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="33"><span></span></div> + <div class="inner" style="align-items: last baseline;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 15px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + <div style="font-size: 25px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="115"><span></span></div> + <div class="inner" style="align-items: end;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 15px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + <div style="font-size: 25px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="53"><span></span></div> + <div class="inner" style="align-items: end;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 15px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + <div style="font-size: 25px;"><span></span></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-grid-003.html b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-grid-003.html new file mode 100644 index 0000000000..41b86b407a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-grid-003.html @@ -0,0 +1,112 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-baselines"> +<style> +.target { + display: flex; + position: relative; + line-height: 0; + font-size: 20px; + inline-size: 300px; + margin-block: 10px; + padding: 10px; + border: solid 3px; + writing-mode: vertical-lr; +} + +.inner { + display: grid; + gap: 10px; + grid-template: 50px 50px / 50px 50px 50px; + border: solid 5px; + padding: 10px; +} + +.inner > div:first-child, +.inner > div:last-child { + align-self: start; +} + +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="30"><span></span></div> + <div class="inner" style="align-items: first baseline;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 15px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + <div style="font-size: 25px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="93"><span></span></div> + <div class="inner" style="align-items: first baseline;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 15px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + <div style="font-size: 25px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="50"><span></span></div> + <div class="inner" style="align-items: last baseline;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 15px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + <div style="font-size: 25px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="108"><span></span></div> + <div class="inner" style="align-items: last baseline;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 15px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + <div style="font-size: 25px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="25"><span></span></div> + <div class="inner" style="align-items: end;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 15px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + <div style="font-size: 25px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="88"><span></span></div> + <div class="inner" style="align-items: end;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 15px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + <div style="font-size: 25px;"><span></span></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-line-clamp-001.tentative.html b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-line-clamp-001.tentative.html new file mode 100644 index 0000000000..75da7e3a43 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-line-clamp-001.tentative.html @@ -0,0 +1,128 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-last-baseline"> +<style> +.target { + display: flex; + inline-size: 100px; + position: relative; + line-height: 0; + padding: 10px; +} +.target > div { + background: hotpink; + font-size: 30px; +} +.line-clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + border: solid 10px; + font-size: 40px !important; + overflow: hidden; +} +.line-clamp div { + background: orange; +} +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<!-- Five lines --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="30"><span></span></div> + <div class="line-clamp" data-offset-y="10"> + <span></span><br><span></span><br><span></span><br><span></span><br><span></span> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="110"><span></span></div> + <div class="line-clamp" data-offset-y="10"> + <span></span><br><span></span><br><span></span><br><span></span><br><span></span> + </div> +</div> + +<!-- Two lines --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="30"><span></span></div> + <div class="line-clamp" data-offset-y="10"> + <span></span><br><span></span> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="70"><span></span></div> + <div class="line-clamp" data-offset-y="10"> + <span></span><br><span></span> + </div> +</div> + +<!-- Three lines --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="30"><span></span></div> + <div class="line-clamp" data-offset-y="10"> + <span></span><br><span></span><br><span></span> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="110"><span></span></div> + <div class="line-clamp" data-offset-y="10"> + <span></span><br><span></span><br><span></span> + </div> +</div> + + +<!-- Wrapping div --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="30"><span></span></div> + <div class="line-clamp" data-offset-y="10"> + <div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="110"><span></span></div> + <div class="line-clamp" data-offset-y="10"> + <div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div> + </div> +</div> + +<!-- Nested div after first line --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="30"><span></span></div> + <div class="line-clamp" data-offset-y="10"> + <span></span><div><span></span><br><span></span><br><span></span><br><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="110"><span></span></div> + <div class="line-clamp" data-offset-y="10"> + <span></span><div><span></span><br><span></span><br><span></span><br><span></span></div> + </div> +</div> + +<!-- Block within inline. --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="30"><span></span></div> + <div class="line-clamp" data-offset-y="10"> + <span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="110"><span></span></div> + <div class="line-clamp" data-offset-y="10"> + <span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-line-clamp-002.tentative.html b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-line-clamp-002.tentative.html new file mode 100644 index 0000000000..4243f4a033 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-line-clamp-002.tentative.html @@ -0,0 +1,129 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-last-baseline"> +<style> +.target { + display: flex; + inline-size: 100px; + position: relative; + line-height: 0; + padding: 10px; + writing-mode: vertical-rl; +} +.target > div { + background: hotpink; + font-size: 30px; +} +.line-clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + border: solid 10px; + font-size: 40px !important; + overflow: hidden; +} +.line-clamp div { + background: orange; +} +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<!-- Five lines --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="105"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><br><span></span><br><span></span><br><span></span><br><span></span> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="25"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><br><span></span><br><span></span><br><span></span><br><span></span> + </div> +</div> + +<!-- Two lines --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="65"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><br><span></span> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="25"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><br><span></span> + </div> +</div> + +<!-- Three lines --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="105"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><br><span></span><br><span></span> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="25"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><br><span></span><br><span></span> + </div> +</div> + + +<!-- Wrapping div --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="105"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="25"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div> + </div> +</div> + +<!-- Nested div after first line --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="105"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><div><span></span><br><span></span><br><span></span><br><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="25"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><div><span></span><br><span></span><br><span></span><br><span></span></div> + </div> +</div> + +<!-- Block within inline. --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="105"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="25"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-line-clamp-003.tentative.html b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-line-clamp-003.tentative.html new file mode 100644 index 0000000000..20ab13ef5e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-line-clamp-003.tentative.html @@ -0,0 +1,129 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-last-baseline"> +<style> +.target { + display: flex; + inline-size: 100px; + position: relative; + line-height: 0; + padding: 10px; + writing-mode: vertical-lr; +} +.target > div { + background: hotpink; + font-size: 30px; +} +.line-clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + border: solid 10px; + font-size: 40px !important; + overflow: hidden; +} +.line-clamp div { + background: orange; +} +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<!-- Five lines --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="25"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><br><span></span><br><span></span><br><span></span><br><span></span> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="105"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><br><span></span><br><span></span><br><span></span><br><span></span> + </div> +</div> + +<!-- Two lines --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="25"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><br><span></span> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="65"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><br><span></span> + </div> +</div> + +<!-- Three lines --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="25"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><br><span></span><br><span></span> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="105"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><br><span></span><br><span></span> + </div> +</div> + + +<!-- Wrapping div --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="25"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="105"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div> + </div> +</div> + +<!-- Nested div after first line --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="25"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><div><span></span><br><span></span><br><span></span><br><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="105"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><div><span></span><br><span></span><br><span></span><br><span></span></div> + </div> +</div> + +<!-- Block within inline. --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="25"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="105"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-multicol-001.html b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-multicol-001.html new file mode 100644 index 0000000000..14db395889 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-multicol-001.html @@ -0,0 +1,142 @@ +<!DOCTYPE html> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7639"> +<style> +.target { + display: flex; + inline-size: 100px; + position: relative; + line-height: 0; + padding: 10px; +} +.target > div { + background: hotpink; + font-size: 20px; +} +.multicol { + columns: 3; + column-fill: auto; + padding: 10px; + border: solid 10px; +} +.multicol > div { + break-inside: avoid; + break-before: column; + break-after: column; +} +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<!-- Three columns, largest in the middle. --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="20"><span></span></div> + <div class="multicol" data-offset-y="10"> + <div style="font-size: 10px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 30px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 20px;"> + <span></span><br><span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="100"><span></span></div> + <div class="multicol" data-offset-y="10"> + <div style="font-size: 10px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 30px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 20px;"> + <span></span><br><span></span><br><span></span> + </div> + </div> +</div> + +<!-- Start spanning element. --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="30"><span></span></div> + <div class="multicol" data-offset-y="10"> + <div style="column-span: all; background: orange;"> + <span></span><br><span></span> + </div> + <div style="font-size: 10px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 30px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 20px;"> + <span></span><br><span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="140"><span></span></div> + <div class="multicol" data-offset-y="10"> + <div style="column-span: all; background: orange;"> + <span></span><br><span></span> + </div> + <div style="font-size: 10px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 30px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 20px;"> + <span></span><br><span></span><br><span></span> + </div> + </div> +</div> + +<!-- End spanning element. --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="20"><span></span></div> + <div class="multicol" data-offset-y="10"> + <div style="font-size: 10px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 30px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 20px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="column-span: all; background: orange;"> + <span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="140"><span></span></div> + <div class="multicol" data-offset-y="10"> + <div style="font-size: 10px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 30px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 20px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="column-span: all; background: orange;"> + <span></span><br><span></span> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-multicol-002.html b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-multicol-002.html new file mode 100644 index 0000000000..cf663a25dd --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-multicol-002.html @@ -0,0 +1,144 @@ +<!DOCTYPE html> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7639"> +<style> +.target { + display: flex; + inline-size: 200px; + position: relative; + line-height: 0; + margin: 40px; + padding: 10px; + writing-mode: vertical-rl; +} +.target > div { + background: hotpink; + font-size: 20px; +} +.multicol { + columns: 3; + column-fill: auto; + padding: 10px; + border: solid 10px; +} +.multicol > div { + break-inside: avoid; + break-before: column; + break-after: column; +} +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<!-- Three columns, largest in the middle. --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="105"><span></span></div> + <div class="multicol" data-offset-x="10"> + <div style="font-size: 10px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 30px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 20px;"> + <span></span><br><span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="35"><span></span></div> + <div class="multicol" data-offset-x="10"> + <div style="font-size: 10px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 30px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 20px;"> + <span></span><br><span></span><br><span></span> + </div> + </div> +</div> + +<!-- Start spanning element. --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="140"><span></span></div> + <div class="multicol" data-offset-x="10"> + <div style="column-span: all; background: orange;"> + <span></span><br><span></span> + </div> + <div style="font-size: 10px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 30px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 20px;"> + <span></span><br><span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="35"><span></span></div> + <div class="multicol" data-offset-x="10"> + <div style="column-span: all; background: orange;"> + <span></span><br><span></span> + </div> + <div style="font-size: 10px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 30px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 20px;"> + <span></span><br><span></span><br><span></span> + </div> + </div> +</div> + +<!-- End spanning element. --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="145"><span></span></div> + <div class="multicol" data-offset-x="10"> + <div style="font-size: 10px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 30px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 20px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="column-span: all; background: orange;"> + <span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="30"><span></span></div> + <div class="multicol" data-offset-x="10"> + <div style="font-size: 10px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 30px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 20px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="column-span: all; background: orange;"> + <span></span><br><span></span> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-multicol-003.html b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-multicol-003.html new file mode 100644 index 0000000000..663c351ede --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-multicol-003.html @@ -0,0 +1,144 @@ +<!DOCTYPE html> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7639"> +<style> +.target { + display: flex; + inline-size: 200px; + position: relative; + line-height: 0; + margin: 40px; + padding: 10px; + writing-mode: vertical-lr; +} +.target > div { + background: hotpink; + font-size: 20px; +} +.multicol { + columns: 3; + column-fill: auto; + padding: 10px; + border: solid 10px; +} +.multicol > div { + break-inside: avoid; + break-before: column; + break-after: column; +} +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<!-- Three columns, largest in the middle. --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="25"><span></span></div> + <div class="multicol" data-offset-x="10"> + <div style="font-size: 10px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 30px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 20px;"> + <span></span><br><span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="95"><span></span></div> + <div class="multicol" data-offset-x="10"> + <div style="font-size: 10px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 30px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 20px;"> + <span></span><br><span></span><br><span></span> + </div> + </div> +</div> + +<!-- Start spanning element. --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="30"><span></span></div> + <div class="multicol" data-offset-x="10"> + <div style="column-span: all; background: orange;"> + <span></span><br><span></span> + </div> + <div style="font-size: 10px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 30px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 20px;"> + <span></span><br><span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="135"><span></span></div> + <div class="multicol" data-offset-x="10"> + <div style="column-span: all; background: orange;"> + <span></span><br><span></span> + </div> + <div style="font-size: 10px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 30px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 20px;"> + <span></span><br><span></span><br><span></span> + </div> + </div> +</div> + +<!-- End spanning element. --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="25"><span></span></div> + <div class="multicol" data-offset-x="10"> + <div style="font-size: 10px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 30px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 20px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="column-span: all; background: orange;"> + <span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="140"><span></span></div> + <div class="multicol" data-offset-x="10"> + <div style="font-size: 10px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 30px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 20px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="column-span: all; background: orange;"> + <span></span><br><span></span> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-overflow-001.html b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-overflow-001.html new file mode 100644 index 0000000000..382112ed21 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-overflow-001.html @@ -0,0 +1,90 @@ +<!DOCTYPE html> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7660"> +<style> +.target { + display: flex; + position: relative; + line-height: 0; + font-size: 20px; + inline-size: 300px; + margin-block: 10px; + padding: 10px; + border: solid 3px; +} + +.inner { + overflow: hidden; + inline-size: 100px; + block-size: 80px; + margin: 10px; + border: solid 5px; + padding: 10px; + font-size: 30px; +} + +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="45"><span></span><br><span></span></div> + <div class="inner" data-offset-y="20"> + <div> + <span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="55"><span></span><br><span></span></div> + <div class="inner" data-offset-y="20"> + <div> + <span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="10"><span></span><br><span></span></div> + <div class="inner" data-offset-y="30"> + <div style="margin-block-start: -200px;"> + <span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="10"><span></span><br><span></span></div> + <div class="inner" data-offset-y="50"> + <div style="margin-block-start: -200px;"> + <span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="110"><span></span><br><span></span></div> + <div class="inner" data-offset-y="20"> + <div style="margin-block-start: 200px;"> + <span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="90"><span></span><br><span></span></div> + <div class="inner" data-offset-y="20"> + <div style="margin-block-start: 200px;"> + <span></span><br><span></span> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-overflow-002.html b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-overflow-002.html new file mode 100644 index 0000000000..d136159246 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-overflow-002.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7660"> +<style> +.target { + display: flex; + position: relative; + line-height: 0; + font-size: 20px; + inline-size: 300px; + margin-block: 10px; + padding: 10px; + border: solid 3px; + writing-mode: vertical-rl; +} + +.inner { + overflow: hidden; + inline-size: 100px; + block-size: 80px; + margin: 10px; + border: solid 5px; + padding: 10px; + font-size: 30px; +} + +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="70"><span></span><br><span></span></div> + <div class="inner" data-offset-x="20"> + <div> + <span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="60"><span></span><br><span></span></div> + <div class="inner" data-offset-x="20"> + <div> + <span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="100"><span></span><br><span></span></div> + <div class="inner" data-offset-x="20"> + <div style="margin-block-start: -200px;"> + <span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="120"><span></span><br><span></span></div> + <div class="inner" data-offset-x="20"> + <div style="margin-block-start: -200px;"> + <span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="10"><span></span><br><span></span></div> + <div class="inner" data-offset-x="40"> + <div style="margin-block-start: 200px;"> + <span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="10"><span></span><br><span></span></div> + <div class="inner" data-offset-x="20"> + <div style="margin-block-start: 200px;"> + <span></span><br><span></span> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-overflow-003.html b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-overflow-003.html new file mode 100644 index 0000000000..37d9ea26fd --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-overflow-003.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7660"> +<style> +.target { + display: flex; + position: relative; + line-height: 0; + font-size: 20px; + inline-size: 300px; + margin-block: 10px; + padding: 10px; + border: solid 3px; + writing-mode: vertical-lr; +} + +.inner { + overflow: hidden; + inline-size: 100px; + block-size: 80px; + margin: 10px; + border: solid 5px; + padding: 10px; + font-size: 30px; +} + +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="40"><span></span><br><span></span></div> + <div class="inner" data-offset-x="20"> + <div> + <span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="50"><span></span><br><span></span></div> + <div class="inner" data-offset-x="20"> + <div> + <span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="10"><span></span><br><span></span></div> + <div class="inner" data-offset-x="20"> + <div style="margin-block-start: -200px;"> + <span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="10"><span></span><br><span></span></div> + <div class="inner" data-offset-x="40"> + <div style="margin-block-start: -200px;"> + <span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="120"><span></span><br><span></span></div> + <div class="inner" data-offset-x="20"> + <div style="margin-block-start: 200px;"> + <span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="100"><span></span><br><span></span></div> + <div class="inner" data-offset-x="20"> + <div style="margin-block-start: 200px;"> + <span></span><br><span></span> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-table-001.html b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-table-001.html new file mode 100644 index 0000000000..7f9a9d5fca --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-table-001.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7655#issuecomment-1248528627"> +<style> +.target { + display: flex; + position: relative; +} +.target > div, .target td { + background: hotpink; + font-size: 20px; + line-height: 0; +} +.target table { border-spacing: 0; } +.target td { padding: 5px; min-width: 5px; min-height: 5px; } +.target caption { + margin: 10px; + background: lime; + block-size: 20px; +} +.target span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="45"><span></span></div> + <table data-offset-y="0"> + <caption>top</caption> + <tr style="vertical-align: baseline;"> + <td style="font-size: 10px;"><span></span><br><span></span></td> + <td><span></span><br><span></span></td> + </tr> + <tr style="vertical-align: baseline;"> + <td><span></span><br><span></span></td> + <td style="font-size: 10px;"><span></span><br><span></span></td> + </tr> + <caption style="caption-side: bottom;">bottom</caption> + </table> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="95"><span></span></div> + <table data-offset-y="0"> + <caption>top</caption> + <tr style="vertical-align: baseline;"> + <td style="font-size: 10px;"><span></span><br><span></span></td> + <td><span></span><br><span></span></td> + </tr> + <tr style="vertical-align: baseline;"> + <td><span></span><br><span></span></td> + <td style="font-size: 10px;"><span></span><br><span></span></td> + </tr> + <caption style="caption-side: bottom;">bottom</caption> + </table> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="20"><span></span></div> + <table data-offset-y="0"> + <tr> + <td style="border: solid 10px;"></td> + <td style="border: solid 5px;"></td> + <td style="border: solid 20px;"></td> + </tr> + <tr> + <td style="border: solid 10px;"></td> + <td style="border: solid 5px;"></td> + <td style="border: solid 20px;"></td> + </tr> + </table> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="70"><span></span></div> + <table data-offset-y="0"> + <tr> + <td style="border: solid 10px;"></td> + <td style="border: solid 5px;"></td> + <td style="border: solid 20px;"></td> + </tr> + <tr> + <td style="border: solid 10px;"></td> + <td style="border: solid 5px;"></td> + <td style="border: solid 20px;"></td> + </tr> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-table-002.html b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-table-002.html new file mode 100644 index 0000000000..80a3d22a03 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-table-002.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7655#issuecomment-1248528627"> +<style> +.target { + display: flex; + position: relative; + writing-mode: vertical-rl; +} +.target > div, .target td { + background: hotpink; + font-size: 20px; + line-height: 0; +} +.target table { border-spacing: 0; } +.target td { padding: 5px; min-width: 5px; min-height: 5px; } +.target caption { + margin: 10px; + background: lime; + block-size: 20px; +} +.target span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="115"><span></span></div> + <table data-offset-x="0"> + <caption>top</caption> + <tr style="vertical-align: baseline;"> + <td style="font-size: 10px;"><span></span><br><span></span></td> + <td><span></span><br><span></span></td> + </tr> + <tr style="vertical-align: baseline;"> + <td><span></span><br><span></span></td> + <td style="font-size: 10px;"><span></span><br><span></span></td> + </tr> + <caption style="caption-side: bottom;">bottom</caption> + </table> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="65"><span></span></div> + <table data-offset-x="0"> + <caption>top</caption> + <tr style="vertical-align: baseline;"> + <td style="font-size: 10px;"><span></span><br><span></span></td> + <td><span></span><br><span></span></td> + </tr> + <tr style="vertical-align: baseline;"> + <td><span></span><br><span></span></td> + <td style="font-size: 10px;"><span></span><br><span></span></td> + </tr> + <caption style="caption-side: bottom;">bottom</caption> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-table-003.html b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-table-003.html new file mode 100644 index 0000000000..07bc4d709c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/alignment/flex-align-baseline-table-003.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7655#issuecomment-1248528627"> +<style> +.target { + display: flex; + position: relative; + writing-mode: vertical-lr; +} +.target > div, .target td { + background: hotpink; + font-size: 20px; + line-height: 0; +} +.target table { border-spacing: 0; } +.target td { padding: 5px; min-width: 5px; min-height: 5px; } +.target caption { + margin: 10px; + background: lime; + block-size: 20px; +} +.target span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="45"><span></span></div> + <table data-offset-x="0"> + <caption>top</caption> + <tr style="vertical-align: baseline;"> + <td style="font-size: 10px;"><span></span><br><span></span></td> + <td><span></span><br><span></span></td> + </tr> + <tr style="vertical-align: baseline;"> + <td><span></span><br><span></span></td> + <td style="font-size: 10px;"><span></span><br><span></span></td> + </tr> + <caption style="caption-side: bottom;">bottom</caption> + </table> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="95"><span></span></div> + <table data-offset-x="0"> + <caption>top</caption> + <tr style="vertical-align: baseline;"> + <td style="font-size: 10px;"><span></span><br><span></span></td> + <td><span></span><br><span></span></td> + </tr> + <tr style="vertical-align: baseline;"> + <td><span></span><br><span></span></td> + <td style="font-size: 10px;"><span></span><br><span></span></td> + </tr> + <caption style="caption-side: bottom;">bottom</caption> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/animation/discrete-no-interpolation.html b/testing/web-platform/tests/css/css-flexbox/animation/discrete-no-interpolation.html new file mode 100644 index 0000000000..0a990373c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/animation/discrete-no-interpolation.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://github.com/w3c/csswg-drafts/issues/4441"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_no_interpolation({ + property: 'flex-direction', + from: 'initial', + to: 'column' +}); + +test_no_interpolation({ + property: 'flex-wrap', + from: 'initial', + to: 'wrap' +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/animation/flex-basis-composition.html b/testing/web-platform/tests/css/css-flexbox/animation/flex-basis-composition.html new file mode 100644 index 0000000000..122761e476 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/animation/flex-basis-composition.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>flex-basis composition</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-basis-property"> +<meta name="assert" content="flex-basis supports animation by computed value type"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_composition({ + property: 'flex-basis', + underlying: '50px', + addFrom: '100px', + addTo: '200px', +}, [ + {at: -0.3, expect: '120px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '200px'}, + {at: 1, expect: '250px'}, + {at: 1.5, expect: '300px'}, +]); + +test_composition({ + property: 'flex-basis', + underlying: '100px', + addFrom: '10px', + addTo: '2px', +}, [ + {at: -0.5, expect: '114px'}, + {at: 0, expect: '110px'}, + {at: 0.5, expect: '106px'}, + {at: 1, expect: '102px'}, + {at: 1.5, expect: '98px'}, // Value clamping should happen after composition. +]); + +test_composition({ + property: 'flex-basis', + underlying: '10%', + addFrom: '100px', + addTo: '20%', +}, [ + {at: -0.3, expect: 'calc(130px + 4%)'}, + {at: 0, expect: 'calc(100px + 10%)'}, + {at: 0.5, expect: 'calc(50px + 20%)'}, + {at: 1, expect: '30%'}, + {at: 1.5, expect: 'calc(-50px + 40%)'}, +]); + +test_composition({ + property: 'flex-basis', + underlying: '50px', + addFrom: '100px', + replaceTo: '200px', +}, [ + {at: -0.3, expect: '135px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '175px'}, + {at: 1, expect: '200px'}, + {at: 1.5, expect: '225px'}, +]); + +test_composition({ + property: 'flex-basis', + underlying: '100px', + addFrom: '100px', + addTo: 'auto', +}, [ + {at: -0.3, expect: '200px'}, + {at: 0, expect: '200px'}, + {at: 0.5, expect: 'auto'}, + {at: 1, expect: 'auto'}, + {at: 1.5, expect: 'auto'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/animation/flex-basis-interpolation.html b/testing/web-platform/tests/css/css-flexbox/animation/flex-basis-interpolation.html new file mode 100644 index 0000000000..d66e81d492 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/animation/flex-basis-interpolation.html @@ -0,0 +1,87 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>flex-basis interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-basis-property"> +<meta name="assert" content="flex-basis supports animation by computed value type"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + flex-basis: 3%; +} +.target { + flex-basis: 1%; +} +</style> + +<body></body> + +<script> +test_interpolation({ + property: 'flex-basis', + from: neutralKeyframe, + to: '2%', +}, [ + {at: -0.3, expect: '0.7%'}, + {at: 0, expect: '1%'}, + {at: 0.3, expect: '1.3%'}, + {at: 0.6, expect: '1.6%'}, + {at: 1, expect: '2%'}, + {at: 1.5, expect: '2.5%'}, +]); + +test_no_interpolation({ + property: 'flex-basis', + from: 'initial', + to: '2%', +}); + +test_interpolation({ + property: 'flex-basis', + from: 'inherit', + to: '2%', +}, [ + {at: -0.3, expect: '3.3%'}, + {at: 0, expect: '3%'}, + {at: 0.3, expect: '2.7%'}, + {at: 0.6, expect: '2.4%'}, + {at: 1, expect: '2%'}, + {at: 1.5, expect: '1.5%'}, +]); + +test_no_interpolation({ + property: 'flex-basis', + from: 'unset', + to: '2%', +}); + +test_interpolation({ + property: 'flex-basis', + from: '0px', + to: '100px' +}, [ + {at: -0.3, expect: '0px'}, + {at: 0, expect: '0px'}, + {at: 0.4, expect: '40px'}, + {at: 0.6, expect: '60px'}, + {at: 1, expect: '100px'}, + {at: 1.5, expect: '150px'} +]); + +test_interpolation({ + property: 'flex-basis', + from: '0%', + to: '100%' +}, [ + {at: -0.3, expect: '0%'}, + {at: 0, expect: '0%'}, + {at: 0.4, expect: '40%'}, + {at: 0.6, expect: '60%'}, + {at: 1, expect: '100%'}, + {at: 1.5, expect: '150%'} +]); +</script> + diff --git a/testing/web-platform/tests/css/css-flexbox/animation/flex-grow-interpolation.html b/testing/web-platform/tests/css/css-flexbox/animation/flex-grow-interpolation.html new file mode 100644 index 0000000000..bab5c82105 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/animation/flex-grow-interpolation.html @@ -0,0 +1,119 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>flex-grow interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-grow-property"> +<meta name="assert" content="flex-grow supports animation by computed value type"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + display: flex; + flex-grow: 3; +} +.target { + height: 10px; + background: black; + flex-grow: 1; +} +.filler { + height: 10px; + flex-grow: 1; +} +.expected { + background: green; +} +</style> + +<body> +<template id="target-template"> + <div class="parent"> + <div class="target"></div> + <div class="filler"></div> + </div> +</template> +</body> + +<script> +test_interpolation({ + property: 'flex-grow', + from: neutralKeyframe, + to: '2', +}, [ + {at: -0.3, expect: '0.7'}, + {at: 0, expect: '1'}, + {at: 0.3, expect: '1.3'}, + {at: 0.6, expect: '1.6'}, + {at: 1, expect: '2'}, + {at: 1.5, expect: '2.5'}, +]); + +test_interpolation({ + property: 'flex-grow', + from: 'initial', + to: '2', +}, [ + {at: -0.3, expect: '0'}, + {at: 0, expect: '0'}, + {at: 0.3, expect: '0.6'}, + {at: 0.6, expect: '1.2'}, + {at: 1, expect: '2'}, + {at: 1.5, expect: '3'}, +]); + +test_interpolation({ + property: 'flex-grow', + from: 'inherit', + to: '2', +}, [ + {at: -0.3, expect: '3.3'}, + {at: 0, expect: '3'}, + {at: 0.3, expect: '2.7'}, + {at: 0.6, expect: '2.4'}, + {at: 1, expect: '2'}, + {at: 1.5, expect: '1.5'}, +]); + +test_interpolation({ + property: 'flex-grow', + from: 'unset', + to: '2', +}, [ + {at: -0.3, expect: '0'}, + {at: 0, expect: '0'}, + {at: 0.3, expect: '0.6'}, + {at: 0.6, expect: '1.2'}, + {at: 1, expect: '2'}, + {at: 1.5, expect: '3'}, +]); + +test_interpolation({ + property: 'flex-grow', + from: '1', + to: '2', +}, [ + {at: -5, expect: '0'}, + {at: -0.3, expect: '0.7'}, + {at: 0, expect: '1'}, + {at: 0.3, expect: '1.3'}, + {at: 0.6, expect: '1.6'}, + {at: 1, expect: '2'}, + {at: 1.5, expect: '2.5'}, +]); + +test_interpolation({ + property: 'flex-grow', + from: '0', + to: '1', +}, [ + {at: -5, expect: '0'}, + {at: -0.3, expect: '0'}, + {at: 0, expect: '0'}, + {at: 0.3, expect: '0.3'}, + {at: 0.6, expect: '0.6'}, + {at: 1, expect: '1'}, + {at: 1.5, expect: '1.5'}, +]); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/animation/flex-shrink-interpolation.html b/testing/web-platform/tests/css/css-flexbox/animation/flex-shrink-interpolation.html new file mode 100644 index 0000000000..da69a06891 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/animation/flex-shrink-interpolation.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>flex-shrink interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-shrink-property"> +<meta name="assert" content="flex-shrink supports animation as a number"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + flex-shrink: 3; +} +.target { + flex-shrink: 1.5; +} +</style> + +<body></body> + +<script> +test_interpolation({ + property: 'flex-shrink', + from: neutralKeyframe, + to: '2', +}, [ + {at: -0.3, expect: '1.35'}, + {at: 0, expect: '1.5'}, + {at: 0.3, expect: '1.65'}, + {at: 0.6, expect: '1.8'}, + {at: 1, expect: '2'}, + {at: 1.5, expect: '2.25'}, +]); + +test_interpolation({ + property: 'flex-shrink', + from: 'initial', + to: '2', +}, [ + {at: -0.3, expect: '0.7'}, + {at: 0, expect: '1'}, + {at: 0.3, expect: '1.3'}, + {at: 0.6, expect: '1.6'}, + {at: 1, expect: '2'}, + {at: 1.5, expect: '2.5'}, +]); + +test_interpolation({ + property: 'flex-shrink', + from: 'inherit', + to: '2', +}, [ + {at: -0.3, expect: '3.3'}, + {at: 0, expect: '3'}, + {at: 0.3, expect: '2.7'}, + {at: 0.6, expect: '2.4'}, + {at: 1, expect: '2'}, + {at: 1.5, expect: '1.5'}, +]); + +test_interpolation({ + property: 'flex-shrink', + from: 'unset', + to: '2', +}, [ + {at: -0.3, expect: '0.7'}, + {at: 0, expect: '1'}, + {at: 0.3, expect: '1.3'}, + {at: 0.6, expect: '1.6'}, + {at: 1, expect: '2'}, + {at: 1.5, expect: '2.5'}, +]); + +test_interpolation({ + property: 'flex-shrink', + from: '1', + to: '2', +}, [ + {at: -5, expect: '0'}, + {at: -0.3, expect: '0.7'}, + {at: 0, expect: '1'}, + {at: 0.3, expect: '1.3'}, + {at: 0.6, expect: '1.6'}, + {at: 1, expect: '2'}, + {at: 1.5, expect: '2.5'}, +]); + +test_interpolation({ + property: 'flex-shrink', + from: '0', + to: '1', +}, [ + {at: -5, expect: '0'}, + {at: -0.3, expect: '0'}, + {at: 0, expect: '0'}, + {at: 0.3, expect: '0.3'}, + {at: 0.6, expect: '0.6'}, + {at: 1, expect: '1'}, + {at: 1.5, expect: '1.5'}, +]); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/animation/order-interpolation.html b/testing/web-platform/tests/css/css-flexbox/animation/order-interpolation.html new file mode 100644 index 0000000000..8096fc3db6 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/animation/order-interpolation.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>order interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property"> +<meta name="assert" content="order supports animation"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + order: 30; +} + +.target { + order: 10; +} +</style> +<body> +<script> +test_interpolation({ + property: 'order', + from: neutralKeyframe, + to: '20', +}, [ + {at: -3, expect: '-20'}, + {at: -0.5, expect: '5'}, + {at: 0, expect: '10'}, + {at: 0.3, expect: '13'}, + {at: 0.6, expect: '16'}, + {at: 1, expect: '20'}, + {at: 1.5, expect: '25'}, +]); + +test_interpolation({ + property: 'order', + from: 'initial', + to: '20', +}, [ + {at: -3, expect: '-60'}, + {at: -0.5, expect: '-10'}, + {at: 0, expect: '0'}, + {at: 0.3, expect: '6'}, + {at: 0.6, expect: '12'}, + {at: 1, expect: '20'}, + {at: 1.5, expect: '30'}, +]); + +test_interpolation({ + property: 'order', + from: 'inherit', + to: '20', +}, [ + {at: -3, expect: '60'}, + {at: -0.5, expect: '35'}, + {at: 0, expect: '30'}, + {at: 0.3, expect: '27'}, + {at: 0.6, expect: '24'}, + {at: 1, expect: '20'}, + {at: 1.5, expect: '15'}, +]); + +test_interpolation({ + property: 'order', + from: 'unset', + to: '20', +}, [ + {at: -3, expect: '-60'}, + {at: -0.5, expect: '-10'}, + {at: 0, expect: '0'}, + {at: 0.3, expect: '6'}, + {at: 0.6, expect: '12'}, + {at: 1, expect: '20'}, + {at: 1.5, expect: '30'}, +]); + +test_interpolation({ + property: 'order', + from: '10', + to: '20' +}, [ + {at: -3.0, expect: '-20'}, + {at: -0.5, expect: '5'}, + {at: 0, expect: '10'}, + {at: 0.3, expect: '13'}, + {at: 0.6, expect: '16'}, + {at: 1, expect: '20'}, + {at: 1.5, expect: '25'} +]); + +test_interpolation({ + property: 'order', + from: '2', + to: '4' +}, [ + {at: -3.0, expect: '-4'}, + {at: -0.5, expect: '1'}, + {at: 0, expect: '2'}, + {at: 0.3, expect: '3'}, + {at: 0.6, expect: '3'}, + {at: 1, expect: '4'}, + {at: 1.5, expect: '5'} +]); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/anonymous-block.html b/testing/web-platform/tests/css/css-flexbox/anonymous-block.html new file mode 100644 index 0000000000..915cca757d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/anonymous-block.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS Flexbox: anonymous block</title> +<html> +<link href="support/flexbox.css" rel="stylesheet"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-items"> +<link rel="match" href="reference/anonymous-block-ref.html"> +<body> +<p>This tests that text nodes that have a flexbox as a parent are wrapped in +anonymous blocks.</p> +<div class="flexbox">This text should be visible.</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/anonymous-flex-item-001.html b/testing/web-platform/tests/css/css-flexbox/anonymous-flex-item-001.html new file mode 100644 index 0000000000..3e749d43f7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/anonymous-flex-item-001.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: Flex item - contiguous text runs - node removal</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-items"> +<link rel="match" href="../reference/pass_if_two_words.html"> +<p>There should be a space between "two" and "words" below.</p> +<div style="display:flex">two <span id="spanRemove"></span>words</div> +<script> + document.body.offsetTop; + spanRemove.remove(); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/anonymous-flex-item-002.html b/testing/web-platform/tests/css/css-flexbox/anonymous-flex-item-002.html new file mode 100644 index 0000000000..8fdeb27110 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/anonymous-flex-item-002.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: Flex item - contiguous text runs - display:none</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-items"> +<link rel="match" href="../reference/pass_if_two_words.html"> +<p>There should be a space between "two" and "words" below.</p> +<div style="display:flex">two <span style="display:none"></span>words</div> diff --git a/testing/web-platform/tests/css/css-flexbox/anonymous-flex-item-003.html b/testing/web-platform/tests/css/css-flexbox/anonymous-flex-item-003.html new file mode 100644 index 0000000000..cc896e9410 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/anonymous-flex-item-003.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: Flex item - contiguous text runs - display:none dynamic</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-items"> +<link rel="match" href="../reference/pass_if_two_words.html"> +<p>There should be a space between "two" and "words" below.</p> +<div style="display:flex">two <span id="noneSpan"></span>words</div> +<script> + document.body.offsetTop; + noneSpan.style.display = "none"; +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/anonymous-flex-item-004.html b/testing/web-platform/tests/css/css-flexbox/anonymous-flex-item-004.html new file mode 100644 index 0000000000..a3dfbc3e4d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/anonymous-flex-item-004.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: Flex item - non-contiguous text runs - position:absolute</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-items"> +<link rel="match" href="anonymous-flex-item-split-ref.html"> +<p>The words "Two" and "lines" should not be on the same line.</p> +<div style="display:flex;flex-direction:column">Two <span style="position:absolute"></span>lines</div> diff --git a/testing/web-platform/tests/css/css-flexbox/anonymous-flex-item-005.html b/testing/web-platform/tests/css/css-flexbox/anonymous-flex-item-005.html new file mode 100644 index 0000000000..a7de7b7a85 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/anonymous-flex-item-005.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: Flex item - non-contiguous text runs - position:absolute dynamic</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-items"> +<link rel="match" href="anonymous-flex-item-split-ref.html"> +<p>The words "Two" and "lines" should not be on the same line.</p> +<div style="display:flex;flex-direction:column">Two <span id="absSpan"></span>lines</div> +<script> + absSpan.style.display = "none"; + document.body.offsetTop; + absSpan.style.position = "absolute"; + absSpan.style.display = "inline"; +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/anonymous-flex-item-006.html b/testing/web-platform/tests/css/css-flexbox/anonymous-flex-item-006.html new file mode 100644 index 0000000000..6320b81429 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/anonymous-flex-item-006.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: Flex item - non-contiguous text runs - position:absolute and node removal</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-items"> +<link rel="match" href="anonymous-flex-item-split-ref.html"> +<style>.abs { position:absolute }</style> +<p>The words "Two" and "lines" should not be on the same line.</p> +<div style="display:flex;flex-direction:column">Two <span class="abs"></span><span id="spanRemove"></span><span class="abs"></span>lines</div> +<script> + document.body.offsetTop; + spanRemove.remove(); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/anonymous-flex-item-split-ref.html b/testing/web-platform/tests/css/css-flexbox/anonymous-flex-item-split-ref.html new file mode 100644 index 0000000000..163efd401c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/anonymous-flex-item-split-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reftest Reference</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<p>The words "Two" and "lines" should not be on the same line.</p> +Two<br> +lines diff --git a/testing/web-platform/tests/css/css-flexbox/aspect-ratio-intrinsic-size-001.html b/testing/web-platform/tests/css/css-flexbox/aspect-ratio-intrinsic-size-001.html new file mode 100644 index 0000000000..76b74c5386 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/aspect-ratio-intrinsic-size-001.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="This checks that replaced element transfers its size when resolving against a flex-item with stretch alignment."> +<p>Test passes if there is a filled green square.</p> +<div style="display: inline-flex; height: 100px; background: green;"> + <div> + <canvas width=10 height=10 style="height: 100%;"></canvas> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/aspect-ratio-intrinsic-size-002.html b/testing/web-platform/tests/css/css-flexbox/aspect-ratio-intrinsic-size-002.html new file mode 100644 index 0000000000..0cbb662a4e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/aspect-ratio-intrinsic-size-002.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="This checks that replaced element transfers its size when resolving against a flex-item with stretch alignment."> +<p>Test passes if there is a filled green square.</p> +<div id="target" style="display: inline-flex; height: 50px; background: green;"> + <div> + <canvas width=10 height=10 style="height: 100%;"></canvas> + </div> +</div> +<script> +document.body.offsetTop; +document.getElementById('target').style.height = '100px'; +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/aspect-ratio-intrinsic-size-003.html b/testing/web-platform/tests/css/css-flexbox/aspect-ratio-intrinsic-size-003.html new file mode 100644 index 0000000000..7a23bbce30 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/aspect-ratio-intrinsic-size-003.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="This checks that an element with an aspect-ratio transfers its size when it also has stretch alignment."> +<p>Test passes if there is a filled green square.</p> +<div style="display: inline-flex; height: 100px; background: green;"> + <div style="aspect-ratio: 1/1;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/aspect-ratio-intrinsic-size-004.html b/testing/web-platform/tests/css/css-flexbox/aspect-ratio-intrinsic-size-004.html new file mode 100644 index 0000000000..9549de783d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/aspect-ratio-intrinsic-size-004.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="This checks that an element with an aspect-ratio transfers its size when it also has stretch alignment."> +<p>Test passes if there is a filled green square.</p> +<div id="target" style="display: inline-flex; height: 50px; background: green;"> + <div style="aspect-ratio: 1/1;"></div> +</div> +<script> +document.body.offsetTop; +document.getElementById('target').style.height = '100px'; +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/aspect-ratio-intrinsic-size-005.html b/testing/web-platform/tests/css/css-flexbox/aspect-ratio-intrinsic-size-005.html new file mode 100644 index 0000000000..225a58d4fb --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/aspect-ratio-intrinsic-size-005.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="This checks that an element with an aspect-ratio transfers its size when it also has stretch alignment."> +<p>Test passes if there is a filled green square.</p> +<div id="target" style="height: 50px; width: min-content; background: green;"> + <div style="display: flex; height: 100%; background: green;"> + <div style="aspect-ratio: 1/1;"></div> + </div> +</div> +<script> +document.body.offsetTop; +document.getElementById('target').style.height = '100px'; +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/aspect-ratio-intrinsic-size-006.html b/testing/web-platform/tests/css/css-flexbox/aspect-ratio-intrinsic-size-006.html new file mode 100644 index 0000000000..aa74d75726 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/aspect-ratio-intrinsic-size-006.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="This checks that replaced element transfers its size when resolving against a flex-item with stretch alignment."> +<p>Test passes if there is a filled green square.</p> +<div style="display: inline-flex; height: 100px; background: green;"> + <img src="support/60x60-green.png" style="align-self: stretch; opacity: 0" /> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/aspect-ratio-intrinsic-size-007-ref.html b/testing/web-platform/tests/css/css-flexbox/aspect-ratio-intrinsic-size-007-ref.html new file mode 100644 index 0000000000..6d560db597 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/aspect-ratio-intrinsic-size-007-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<svg viewBox="0 0 1000 500" style="background: green"></svg> diff --git a/testing/web-platform/tests/css/css-flexbox/aspect-ratio-intrinsic-size-007.html b/testing/web-platform/tests/css/css-flexbox/aspect-ratio-intrinsic-size-007.html new file mode 100644 index 0000000000..5a6b896e97 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/aspect-ratio-intrinsic-size-007.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#transferred-size-suggestion"> +<link rel="match" href="aspect-ratio-intrinsic-size-007-ref.html"> +<meta name="assert" content="This checks that an automatic preferred physical width is always considered definite whenever computing the transferred size suggestion. That size will be used instead of the flex-item's intrinsic size."> +<div style="display: flex; flex-direction: column;"> + <img src="support/large-green-rectangle.svg"/> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/auto-height-column-with-border-and-padding.html b/testing/web-platform/tests/css/css-flexbox/auto-height-column-with-border-and-padding.html new file mode 100644 index 0000000000..2151c21f61 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/auto-height-column-with-border-and-padding.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS Flexbox: auto-height with border and padding</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-direction-column-reverse"> +<link rel="match" href="reference/auto-height-column-with-border-and-padding-ref.html"> +Tests that auto-height column flexboxes with border and padding correctly size their height to their content. +<div class="flexbox column" style="border: 5px solid salmon; padding: 5px; overflow: scroll"> + <div class="flex-one-one-auto" style="min-height: 0"> + <div style="height: 50px; background-color: pink"> + <div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/auto-height-with-flex.html b/testing/web-platform/tests/css/css-flexbox/auto-height-with-flex.html new file mode 100644 index 0000000000..9151f8cd09 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/auto-height-with-flex.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-basis-property"> +<link rel="match" href="reference/auto-height-with-flex-ref.html"> +<meta name="assert" content="This test ensures that a vertical flexbox (with auto height) and a flexitem with flex: 1; will not have 0 set to the flex basis, but to auto instead."/> +<div style="display: flex; flex-direction: column; border: 1px solid purple;"> +<div>Header</div> +<div style="flex: 1">Flexible content<br> +</div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/auto-margins-001-ref.html b/testing/web-platform/tests/css/css-flexbox/auto-margins-001-ref.html new file mode 100644 index 0000000000..57f4307ca0 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/auto-margins-001-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" title="Google Inc." href="http://www.google.com/"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + +#circles, #circles div { + border: 1em solid blue; + border-radius:50%; + margin: auto; +} + +#circles { width:9em; height:9em; } + +</style> +</head> +<body> +<p>These tests are from the spec: <a href="http://dev.w3.org/csswg/css3-flexbox/#auto-margins">http://dev.w3.org/csswg/css3-flexbox/#auto-margins</a>.</p> + +<p>The black rectangle should be centered vertically and horizontally.</p> +<div style="width: 4em; height: 4em; background: silver"> + <table style="width: 100%; height: 100%;"><tr><td style="text-align: center; font-family: Ahem;">OK</td></tr></table> +</div> + +<div style="width: 4em; height: 4em; margin-top: 10px; background: silver; writing-mode: vertical-rl"> + <table style="width: 100%; height: 100%;"><tr><td style="text-align: center; font-family: Ahem;">OK</td></tr></table> +</div> + +<p>You should see 3 blue concentric circles.</p> +<div id="circles"> + <div style="width: 5em; height: 5em; margin-top: 1em;"> + <div style="width: 1em; height: 1em; margin-top: 1em;"></div> + </div> +</div> + +<p>The computed style of each margin should not be 0.<br>OK: PASS<br>Vertical OK: PASS</p> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/auto-margins-001.html b/testing/web-platform/tests/css/css-flexbox/auto-margins-001.html new file mode 100644 index 0000000000..a9ea45ee75 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/auto-margins-001.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Test: Aligning with auto margins</title> +<link href="support/flexbox.css" rel="stylesheet"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="author" title="Google Inc." href="http://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#auto-margins"> +<link rel="match" href="auto-margins-001-ref.html"> +<style> + +#circles, #circles div { + display: flex; + width: -webkit-calc(100% - 4em); + width: calc(100% - 4em); + height: -webkit-calc(100% - 4em); + height: calc(100% - 4em); + border: 1em solid blue; + border-radius:50%; + margin: auto; +} + +#circles { width:9em; height:9em; } + +</style> +</head> +<body> +<p>These tests are from the spec: <a href="http://dev.w3.org/csswg/css3-flexbox/#auto-margins">http://dev.w3.org/csswg/css3-flexbox/#auto-margins</a>.</p> + +<p>The black rectangle should be centered vertically and horizontally.</p> +<div class="flexbox" style="width: 4em; height: 4em; background: silver"> + <p id="ok" style="margin: auto; font-family: Ahem;">OK</p> +</div> + +<div class="flexbox" style="width: 4em; height: 4em; margin-top: 10px; background: silver; writing-mode: vertical-rl"> + <p id="okVertical" style="margin: auto; font-family: Ahem;">OK</p> +</div> + +<p>You should see 3 blue concentric circles.</p> +<div id="circles"><div><div></div></div></div> + +<p id="log">The computed style of each margin should not be 0.</p> +<script> +var okStyle = getComputedStyle(document.getElementById('ok')); +document.getElementById("log").innerHTML += "<br>OK: " + + ((parseInt(okStyle.marginTop) && parseInt(okStyle.marginRight) && parseInt(okStyle.marginBottom) && parseInt(okStyle.marginLeft)) ? "PASS" : "FAIL"); + +var okVerticalStyle = getComputedStyle(document.getElementById('okVertical')); +document.getElementById("log").innerHTML += "<br>Vertical OK: " + + ((parseInt(okVerticalStyle.marginTop) && parseInt(okVerticalStyle.marginRight) && parseInt(okVerticalStyle.marginBottom) && parseInt(okVerticalStyle.marginLeft)) ? "PASS" : "FAIL"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/auto-margins-002.html b/testing/web-platform/tests/css/css-flexbox/auto-margins-002.html new file mode 100644 index 0000000000..454bc922f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/auto-margins-002.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>css-flexbox: Tests that we correctly align an image with auto margins and max-height</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#auto-margins" title="8.1. Aligning with 'auto' margins"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<!-- we position this div on top of the flexbox to cover up the red where + we expect it to be; letting the red in the wrong places shine through --> +<div style="position: absolute; height: 100px; width: 100px; z-index: 1;"> + <div style="height: 25px; background: green;"></div> + <div style="height: 50px; background: transparent;"></div> + <div style="height: 25px; background: green;"></div> +</div> +<div style="width: 100px; height: 100px; background: red; display: flex;"> + <img src="support/300x150-green.png" style="margin: auto; max-width: 100%; max-height: 100px;"> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/auto-margins-003.html b/testing/web-platform/tests/css/css-flexbox/auto-margins-003.html new file mode 100644 index 0000000000..2e3e7ec209 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/auto-margins-003.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Flexbox: Change to auto-margin items in column flexbox</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#valdef-flex-direction-column"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-align-self"> +<link rel="match" href="reference/auto-margins-003-ref.html"> +<meta name="assert" content="This test ensures that auto margins for column flows are correctly calculated"/> +<link href="support/flexbox.css" rel="stylesheet"> + <style> + .flexbox { + border: 1px solid black; + width: 400px; + height: 200px; + } + .item1 { + margin: 0 auto; + background: lightblue; + } + .item1v { + margin: auto 0; + 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"> + <div class="item1">centeredWithMargins</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + </div> + <div style="writing-mode: vertical-lr;"> + <div class="flexbox column"> + <div class="item1v">centeredWithMargins</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/baseline-synthesis-001.html b/testing/web-platform/tests/css/css-flexbox/baseline-synthesis-001.html new file mode 100644 index 0000000000..b1fa84c94c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/baseline-synthesis-001.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#synthesize-baseline"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display: flex; writing-mode: vertical-rl; align-items: baseline; text-orientation: mixed;"> + <div style="background: green; line-height: 100px; height: 50px; color: transparent;">text</div> + <div style="background: green; width: 100px; height: 50px;"></div> <!-- text-orientation: mixed should synthesize the baseline in the block middle. --> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/baseline-synthesis-002.html b/testing/web-platform/tests/css/css-flexbox/baseline-synthesis-002.html new file mode 100644 index 0000000000..7cb1709fb3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/baseline-synthesis-002.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#synthesize-baseline"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display: flex; writing-mode: vertical-rl; align-items: baseline; text-orientation: sideways; position: relative; background: red;"> + <div style="background: green; line-height: 100px; font-size: 0; height: 50px;"><div style="display: inline-block;"></div></div> + <div style="background: green; width: 50px; height: 50px;"></div> <!-- text-orientation: sideways should synthesize the baseline at the block-end edge. --> + <div style="background: green; position: absolute; left: 0; bottom: 0; width: 50px; height: 50px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/baseline-synthesis-003.html b/testing/web-platform/tests/css/css-flexbox/baseline-synthesis-003.html new file mode 100644 index 0000000000..98f0e7c237 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/baseline-synthesis-003.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#synthesize-baseline"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display: flex; align-items: baseline; writing-mode: vertical-lr; text-orientation: sideways; background: red;"> + <div style="height: 50px; width: 100px; background: green;"></div> + <div style="height: 50px; width: 100px; background: green; line-height: 0;"> + <span style="width: 10px; height: 10px; display: inline-block;"></span> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/baseline-synthesis-004.html b/testing/web-platform/tests/css/css-flexbox/baseline-synthesis-004.html new file mode 100644 index 0000000000..36c116c2dc --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/baseline-synthesis-004.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#synthesize-baseline"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display: flex; align-items: baseline; writing-mode: vertical-lr; background: red;"> + <div style="height: 50px; width: 100px; background: green;"></div> + <div style="height: 50px; width: 100px; background: green; line-height: 0;"> + <span style="width: 100px; height: 10px; display: inline-block;"></span> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/baseline-synthesis-vert-lr-line-under.html b/testing/web-platform/tests/css/css-flexbox/baseline-synthesis-vert-lr-line-under.html new file mode 100644 index 0000000000..5fcb75e6cd --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/baseline-synthesis-vert-lr-line-under.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<head> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-export"> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#line-under"> +<meta name="assert" content="Line under edge of vertical-lr/sideways item is at its block start edge"> +<style> +.flexbox { + display: flex; + writing-mode: vertical-lr; + text-orientation: sideways; + align-items: baseline; + background-color: red; + position: relative; +} +.item { + width: 50px; + height: 50px; + background-color: green; +} +.wide { + width: 100px; +} +.absolute { + position: absolute; + top: 50px; + left: 50px; +} +</style> +</head> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<body> + <div class="flexbox"> + <div class="item wide"></div> + <div class="item"></div> + <div class="item absolute"></div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/box-sizing-001.html b/testing/web-platform/tests/css/css-flexbox/box-sizing-001.html new file mode 100644 index 0000000000..a11762696e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/box-sizing-001.html @@ -0,0 +1,108 @@ +<!DOCTYPE html> +<html> +<title>CSS Flexbox: box-sizing</title> +<link href="support/flexbox.css" rel="stylesheet"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-flow-property"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#box-sizing"> +<meta name="assert" content="This test checks the interactions between the flex layout mode and the two possible values for the box-sizing property: border-box and content-box" /> + +<style> +.flexbox { + border: 2px solid orange; +} +.h3 { + height: 300px; +} +.w3 { + width: 300px; +} +.h4 { + height: 400px; +} +.w4 { + width: 400px; +} +.border-box, .flexbox > div { + box-sizing: border-box; + height: 100px; + width: 100px; + border: 2px solid lightblue; + border-top-width: 4px; + padding: 3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body> +<div id=log></div> + +All blue boxes are 100x100px with box-sizing: border-box and 2px border (4px border-top), we expect offsetWidth/Height to be <b>100x100</b> + +<h3>flex-flow: default, orange box has width: 300px</h3> +<div class="flexbox" style="width: 300px"> + <div></div><div></div><div></div> +</div> + +<h3>flex-flow: default, orange box has width: 400px</h3> +<div class="flexbox" style="width: 400px"> + <div></div><div></div><div></div> +</div> + +<h3>flex-flow: default, orange box has width: auto</h3> +<div class="flexbox"> + <div></div><div></div><div></div> +</div> + +<h3>flex-flow: default, orange box has width: auto, flex-box has box-sizing: border-box</h3> +<div class="flexbox border-box"> + <div data-expected-width=30></div> + <div data-expected-width=30></div> + <div data-expected-width=30></div> +</div> + +<h3>flex-flow: column, red box has height: 300px</h3> +<div class="flexbox column" style="height: 300px"> + <div></div><div></div><div></div> +</div> + +<h3>flex-flow: column, red box has height: 400px</h3> +<div class="flexbox column" style="height: 400px"> + <div></div><div></div><div></div> +</div> + +<h3>flex-flow: column, red box has height: auto</h3> +<div class="flexbox column"> + <div></div><div></div><div></div> +</div> + +<h3>flex-box has box-sizing: border-box and flex-wrap: wrap;</h3> +<div class="flexbox column wrap" style="box-sizing: border-box; border: 2px solid lightblue; padding: 3px; height: 200px; width: 100px; position: relative" data-expected-width=100 data-expected-height=200> + <div data-offset-x=3></div><div data-offset-x=103></div><div data-offset-x=203></div> +</div> + +<h3>flex-box has box-sizing: default and flex-wrap: wrap;</h3> +<div class="flexbox column wrap" style="border: 2px solid lightblue; padding: 3px; height: 200px; width: 100px; position: relative" data-expected-width=110 data-expected-height=210> + <div data-offset-x=3></div><div data-offset-x=3></div><div data-offset-x=103></div> +</div> + +<h3>flex-flow: column, flex-box has box-sizing: border-box, flex items have flex: 1</h3> +<div class="flexbox column" style="box-sizing: border-box; border: 2px solid lightblue; padding: 3px; height: 343px; width: 100px;" data-expected-width=100 data-expected-height=343> + <div style="flex: 1;" data-expected-height=111></div> + <div style="flex: 1;" data-expected-height=111></div> + <div style="flex: 1;" data-expected-height=111></div> +</div> + +<script> + function addExpectedSizes(flexItem) { + if (!flexItem.hasAttribute('data-expected-height')) + flexItem.setAttribute('data-expected-height', 100); + if (!flexItem.hasAttribute('data-expected-width')) + flexItem.setAttribute('data-expected-width', 100); + } + [].forEach.call(document.querySelectorAll(".flexbox > div"), addExpectedSizes); + [].forEach.call(document.querySelectorAll(".border-box"), addExpectedSizes); + checkLayout('.flexbox'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/box-sizing-min-max-sizes-001.html b/testing/web-platform/tests/css/css-flexbox/box-sizing-min-max-sizes-001.html new file mode 100644 index 0000000000..3aa9ce6bdc --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/box-sizing-min-max-sizes-001.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>CSS Flexbox: minimum / maximum sizes with box-sizing: border-box</title> +<link href="support/flexbox.css" rel="stylesheet"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#box-model"> +<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#min-max-widths"> +<meta name="assert" content="This test checks that a minimum and maximum sizes are correctly computed for flexbox children."> + +<style> +.flexbox { + background-color: teal; +} +.flexbox > div { + box-sizing: border-box; +} +</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 style="border: 5px solid orange; padding: 5px; max-width: 30px; width: 40px;" data-expected-width=30></div> + <div style="border: 5px solid orange; padding: 5px; min-width: 30px; width: 10px;" data-expected-width=30></div> +</div> + +<div class="flexbox column"> + <div style="border: 5px solid orange; padding: 5px; max-height: 30px; height: 40px;" data-expected-height=30></div> + <div style="border: 5px solid orange; padding: 5px; min-height: 30px; height: 10px;" data-expected-height=30></div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/break-nested-float-in-flex-item-001-print.html b/testing/web-platform/tests/css/css-flexbox/break-nested-float-in-flex-item-001-print.html new file mode 100644 index 0000000000..2fbf939f6a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/break-nested-float-in-flex-item-001-print.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Test for pagination of a nested float element in a flex item in a printing context</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-break/#possible-breaks"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1559961"> + <link rel="match" href="break-nested-float-in-flex-item-print-ref.html"> + + <style> + @page { size:5in 3in; margin:0.5in; } + + html, body { + margin: 0; + } + #flex { + display: flex; + flex-wrap: nowrap; + flex-direction: column; + } + #target { + float: left; + background: green; + width: 2in; + height: 6in; /* Expected to cover 3 pages. */ + } + </style> + + <body> + <div id="flex"> + <div> + <div> + <div> + <!-- target needs to be deeply nested under a flex item. --> + <div id="target"></div> + </div> + </div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/break-nested-float-in-flex-item-002-print.html b/testing/web-platform/tests/css/css-flexbox/break-nested-float-in-flex-item-002-print.html new file mode 100644 index 0000000000..cc6037a871 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/break-nested-float-in-flex-item-002-print.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Test for pagination of a nested float element with clearance in a flex item in a printing context</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-break/#possible-breaks"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1559961"> + <link rel="match" href="break-nested-float-in-flex-item-print-ref.html"> + + <style> + @page { size:5in 3in; margin:0.5in; } + + html, body { + margin: 0; + } + #flex { + display: flex; + flex-wrap: nowrap; + flex-direction: column; + } + #target { + float: left; + background: green; + width: 2in; + height: 6in; /* Expected to cover 3 pages. */ + } + </style> + + <body> + <div id="flex"> + <div> + <div> + <div> + <!-- target needs to be deeply nested under a flex item. --> + <div id="target"></div> + <div style="clear:both"></div> + </div> + </div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/break-nested-float-in-flex-item-print-ref.html b/testing/web-platform/tests/css/css-flexbox/break-nested-float-in-flex-item-print-ref.html new file mode 100644 index 0000000000..d4a678d074 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/break-nested-float-in-flex-item-print-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test Reference: Test for pagination of a nested float element in a flex item in a printing context</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + @page { size:5in 3in; margin:0.5in; } + + html, body { + margin: 0; + } + #target { + background: green; + width: 2in; + height: 6in; /* Expected to cover 3 pages. */ + } + </style> + + <body> + <div id="target"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/button-column-wrap-crash.html b/testing/web-platform/tests/css/css-flexbox/button-column-wrap-crash.html new file mode 100644 index 0000000000..0741735d4e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/button-column-wrap-crash.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> + +<button style="flex-flow: column wrap;"> + <div style="width: 20%;"> + <div style="display: flow-root; min-width: 10px;"> diff --git a/testing/web-platform/tests/css/css-flexbox/canvas-contain-size.html b/testing/web-platform/tests/css/css-flexbox/canvas-contain-size.html new file mode 100644 index 0000000000..66fb7261e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/canvas-contain-size.html @@ -0,0 +1,14 @@ +<!doctype html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-cross-item" /> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#attributes-for-embedded-content-and-images" /> +<link rel="issue" href="https://crbug.com/1175526" /> +<meta name="assert" content="width and height attributes on canvas don't map to css width/height, but do map to css aspect ratio, which is honored by flexbox, even when the item has contain: size. " /> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> + +<p>Test passes if there is a filled green square.</p> + +<!-- align-items: flex-start so we don't have to think about stretching --> +<div style="display: flex; align-items: flex-start;"> + <canvas width=20 height=20 style="contain: size; background: green; width: 100px;"> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/canvas-dynamic-change-001.html b/testing/web-platform/tests/css/css-flexbox/canvas-dynamic-change-001.html new file mode 100644 index 0000000000..09d524e735 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/canvas-dynamic-change-001.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Canvas size dynamic change in flexbox layout</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-items"> +<meta name="assert" content="This test ensures proper layouting of canvas element as flex-items"/> +<link href="support/flexbox.css" rel="stylesheet"> +<style> +.red { + width: 600px; + height: 400px; + background: red; +} +canvas { + background: green; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<div id=log></div> + +<div class="red"> + <div class="flexbox column"> + <!-- The height=400 attribute makes the aspect ratio be 300x400. 300 from + the fallback width of replaced elements. 400 from the attribute. + After stretching to 600px wide, the height should be 800px. --> + <canvas id="canvas" data-expected-height="800"></canvas> + </div> +</div> + +<script> +var canvas = document.getElementById('canvas'); + +requestAnimationFrame(function() { + canvas.height = 400; + checkLayout('.flexbox'); +}); + +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/change-column-flex-width.html b/testing/web-platform/tests/css/css-flexbox/change-column-flex-width.html new file mode 100644 index 0000000000..8dc370ac9d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/change-column-flex-width.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>CSS Flexbox: flex items inside flex-direction:column</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property"> +<meta name="assert" content="This test ensures that when main axis is logical y, layout flex items before getting intrinsic size."/> +<link href="support/flexbox.css" rel="stylesheet"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script> +function change() { + document.body.offsetTop; + var flex = document.getElementById("flex"); + flex.style.width = "100px"; + checkLayout("#container"); +} +</script> +<body onload="change()"> +<p>There should be a green square below. No red.</p> +<!-- #container is just here to make sure the test fails more reliably visually if the bug is present. --> +<div id="container" style="width:500px;"> + <div id="flex" style="display:flex; flex-direction:column; width:70px;" data-expected-height="100"> + <div style="background:red;" data-expected-height="100"> + <div style="float:left; width:50px; height:100px; background:green;"></div> + <div style="float:left; width:50px; height:100px; background:green;"></div> + </div> + </div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/column-flex-child-with-overflow-scroll.html b/testing/web-platform/tests/css/css-flexbox/column-flex-child-with-overflow-scroll.html new file mode 100644 index 0000000000..4c84a25865 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/column-flex-child-with-overflow-scroll.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<title>Proper height of column flex children with overflow: scroll.</title> +<link href="support/flexbox.css" rel="stylesheet"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> +<meta name="assert" content="This test ensures children of flexbox with flex-direction: column|column-reverse does not shrink their height after applying the overflow: scroll style."/> +<style> +div { + box-sizing: border-box; +} + +.scroll { + overflow: scroll; +} + +.box { + width: 100px; + height: 75px; + padding: 5px; + border: 2px solid red; +} +</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 column"> + <div class="box" data-expected-width="100" data-expected-height="75"></div> + <div class="box scroll" id="box2" data-expected-width="100" data-expected-height="75"></div> +</div> + +<div class="flexbox column-reverse"> + <div class="box" data-expected-width="100" data-expected-height="75"></div> + <div class="box scroll" id="box4" data-expected-width="100" data-expected-height="75"></div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/column-intrinsic-size-aspect-ratio-crash.html b/testing/web-platform/tests/css/css-flexbox/column-intrinsic-size-aspect-ratio-crash.html new file mode 100644 index 0000000000..595324845a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/column-intrinsic-size-aspect-ratio-crash.html @@ -0,0 +1,6 @@ +<!doctype html> +<link rel="issue" href="https://crbug.com/1142587" /> + +<p>Test passes if it doesn't crash.</p> + +<div style="display: flex; aspect-ratio: 1/1; flex-flow: column; float: left"></div> diff --git a/testing/web-platform/tests/css/css-flexbox/column-reverse-gap.html b/testing/web-platform/tests/css/css-flexbox/column-reverse-gap.html new file mode 100644 index 0000000000..770ad6dfda --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/column-reverse-gap.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-column-reverse"> +<link rel="help" href="https://drafts.csswg.org/css-align/#gap-shorthand"> +<style> + .flexbox { + display: flex; + flex-direction: column-reverse; + gap: 5px; + position: relative; + background-color: blue; + } + .flexbox > * { + height: 10px; + background-color: green; + } +</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" data-expected-height="40"> + <div data-offset-y="30"></div> + <div data-offset-y="15"></div> + <div data-offset-y="0"></div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/columns-height-set-via-top-bottom.html b/testing/web-platform/tests/css/css-flexbox/columns-height-set-via-top-bottom.html new file mode 100644 index 0000000000..80cdcc6974 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/columns-height-set-via-top-bottom.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> +<title>Proper size of flex item in a column flexbox with height set via top/bottom.</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-flexbox-1/#propdef-flex-flow"> +<meta name="assert" content="This test ensures that when a 'display: flex' element with 'flex-flow: column' is itself sized by fitting to another container via setting position absolute + top, bottom, right, left all to 0, its flex items do not have natural size."/> +<style> +.container { + position: relative; + height: 100px; + width: 100px; + border: 2px solid orange; +} +.flexbox { + flex-direction: column; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + padding: 10px; +} +.flexbox > :nth-child(1) { + background-color: lightblue; +} +.flexbox > :nth-child(2) { + background-color: lightgreen; +} +</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"> + <div data-expected-height=100 class="flexbox column"> + <div data-expected-height=30 data-expected-width=80 style="height: 30px"></div> + <div data-expected-height=50 data-expected-width=80 style="flex: 1;"></div> + </div> +</div> + +<div class="container"> + <div class="flexbox column wrap"> + <div data-expected-height=50 data-expected-width=40 style="height: 50px"></div> + <div data-expected-height=80 data-expected-width=40 style="flex: 1 50px;"></div> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/contain-size-layout-abspos-flex-container-crash.html b/testing/web-platform/tests/css/css-flexbox/contain-size-layout-abspos-flex-container-crash.html new file mode 100644 index 0000000000..3197d5b796 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/contain-size-layout-abspos-flex-container-crash.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <meta charset="UTF-8"> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1678469"> + <meta name="assert" content="This test ensures that the browser does not crash after removing the element 'c'."> + + <style> + html { columns: 0 } + body { + transform: rotate(14deg); + } + #flex-container { + display: flex; + contain: size layout; + position: absolute; + width: 100px; + height: 100px; + } + </style> + + <script> + function boom() { + let flex = document.getElementById('flex-container'); + let c = document.getElementById('c'); + flex.removeChild(c); + } + </script> + + <body onload="boom()"> + <div id="flex-container"> + x + <div id="c"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/content-height-with-scrollbars.html b/testing/web-platform/tests/css/css-flexbox/content-height-with-scrollbars.html new file mode 100644 index 0000000000..1872d5f81d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/content-height-with-scrollbars.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> +<title>Ensure flexbox content-size excludes scrollbar.</title> +<link href="support/flexbox.css" rel="stylesheet"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#min-size-auto"> +<link rel="help" href="https://www.w3.org/TR/css-overflow-4/#classic-scrollbars"> +<link rel="match" href="reference/content-height-with-scrollbars-ref.html"> +<meta name="assert" content="This test ensures that content-size of a flexbox with scrollbars looks correct."/> +<style> +.flexbox { + height: 100px; + overflow: scroll; +} +.flexbox > div { + flex: none; +} +.flexbox > :nth-child(1) { + background-color: lightgreen; +} +.flexbox > :nth-child(2) { + background-color: lightblue; +} +</style> +<body> +<p>This tests that when setting the height of a flex item to a percentage +height, we use the content height with scrollbars. The content should not be +scrollable in any of the test cases below.</p> + +<div class="flexbox column"> + <div style="height: 100%"></div> +</div> + +<div class="flexbox column"> + <div style="height: 100%; box-sizing: border-box; border: 5px solid green"></div> +</div> + +<div class="flexbox column wrap"> + <div style="height: 50px; width: 50%;"></div> + <div style="height: 50px; width: 50%; background-color: lightblue"></div> +</div> + +<div class="flexbox column wrap align-content-flex-start" style="height: auto; max-height: 100px; padding: 10px;"> + <div style="height: 50px; width: 300px;"></div> + <div style="height: 50px; width: 300px; background-color: lightblue"></div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/cross-axis-scrollbar.html b/testing/web-platform/tests/css/css-flexbox/cross-axis-scrollbar.html new file mode 100644 index 0000000000..6bb3251755 --- /dev/null +++ b/testing/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/testing/web-platform/tests/css/css-flexbox/css-box-justify-content.html b/testing/web-platform/tests/css/css-flexbox/css-box-justify-content.html new file mode 100644 index 0000000000..d5c7244f08 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/css-box-justify-content.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>flexbox |css-box-justify-content</title> +<link rel="author" href="mailto:ava656094@gmail.com" title="xiaoxia"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> +<link rel="match" href="reference/css-box-justify-content-ref.html"> +<style> +#flexbox { + background: green; + width: 300px; + height: 40px; + display: flex; + flex-flow: row; + justify-content: flex-end; +} +.item{ + width:50px; + height: 30px; + } +</style> + +<p>This test passes if the DIV5's position in the end and the div is Horizontal layout</p> +<div id="flexbox"> + <div class="item" style="background-color: rgb(242, 210, 80); color: rgb(41, 119, 248);">DIV1</div> + + <div class="item" style="background-color: rgb(110, 8, 7); color: rgb(162, 152, 22);">DIV2</div> + + <div class="item" style="background-color: rgb(215, 172, 243); color: rgb(74, 123, 110);">DIV3</div> + + <div class="item" style="background-color: rgb(242, 133, 80); color: rgb(41, 119, 248);">DIV4</div> + + <div class="item" style="background-color: rgb(242, 50, 80); color: rgb(41, 119, 248);">DIV5</div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/css-flexbox-height-animation-stretch-ref.html b/testing/web-platform/tests/css/css-flexbox/css-flexbox-height-animation-stretch-ref.html new file mode 100644 index 0000000000..d7d3bff25c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/css-flexbox-height-animation-stretch-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>CSS Flexbox Test: Items stretch correctly while content is animating</title> + <link rel="author" title="Micky Brunetti" href="mailto:micky2be@gmail.com"> + <style> + @keyframes resize { + 0% {height: 100px;} + 100% {height: 50px;} + } + .test { + height: 100px; + width: 200px; + background-color: green; + animation: resize 500ms infinite alternate; + } + </style> +</head> +<body> + <p>The test passes if you keep seeing a green rectangle and no red.</p> + <div class="test"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-flexbox/css-flexbox-height-animation-stretch.html b/testing/web-platform/tests/css/css-flexbox/css-flexbox-height-animation-stretch.html new file mode 100644 index 0000000000..7aa16aaeec --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/css-flexbox-height-animation-stretch.html @@ -0,0 +1,47 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>CSS Flexbox Test: Items stretch correctly while content is animating</title> + <link rel="author" title="Micky Brunetti" href="mailto:micky2be@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"> + <link rel="match" href="css-flexbox-height-animation-stretch-ref.html"/> + <meta name="flags" content="animated"> + <meta name="assert" content="Items should stretch vertically in all time"> + <style> + @keyframes resize { + 0% {height: 100px;} + 100% {height: 50px;} + } + .container { + display: flex; + width: 200px; + background-color: red; + + } + .item { + background-color: green; + width: 50px; + + } + .content { + height: 50px; + } + .bigger.content { + height: 100px; + animation: resize 500ms infinite alternate; + } + </style> +</head> +<body> +<p>The test passes if you keep seeing a green rectangle and no red.</p> +<div class="test"> + <div class="container"> + <div class="item"><div class="bigger content"></div></div> + <div class="item"><div class="content"></div></div> + <div class="item"><div class="content"></div></div> + <div class="item"><div class="content"></div></div> + </div> +</div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/css-flexbox-img-expand-evenly.html b/testing/web-platform/tests/css/css-flexbox/css-flexbox-img-expand-evenly.html new file mode 100644 index 0000000000..b809d5b270 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/css-flexbox-img-expand-evenly.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Flexbox Test: Image Expansion</title> + <link rel="author" title="Eiji Kitamura" href="mailto:agektmr@gmail.com"> + <!-- You must have at least one spec link, but may have as many as are covered in the test. --> + <!-- Be sure to make the main testing area first in the order --> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-grow-property"> + <!-- The match link is only required if this is a reftest --> + <link rel="match" href="reference/css-flexbox-img-expand-evenly-ref.html"> + <meta name="assert" content="3 rectangular images fill out border."> + <style type="text/css"> + + /* ADD STYLE BLOCK HERE (PREFERRABLE TO INLINE STYLES) */ + div.flexbox { + height: 50px; + width: 300px; + border: 2px dotted black; + display: flex; + } + img { + width: 48px; + flex-grow: 1; + background: purple; + border: 1px solid white; + } + + </style> +</head> +<body> + <p>3 rectangular images fill out border.</p> + + <!-- PAGE CONTENT --> + <div class="flexbox"> + <img src="support/solidblue.png" /> + <img src="support/solidblue.png" /> + <img src="support/solidblue.png" /> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/css-flexbox-row-ref.html b/testing/web-platform/tests/css/css-flexbox/css-flexbox-row-ref.html new file mode 100644 index 0000000000..21e7a010c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/css-flexbox-row-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8" /> + <title>CSS Reftest Reference</title> + <link rel="author" title="Tsutomu ogaoga Ogasawara" href="mailto:info@ogaoga.org"> + + <style> + .item { + width: 15px; + height: 45px; + float: left; + } + </style> +</head> + +<p>Pass condition: 4 rectangles, with colors in clockwise order starting from top-left: grey, orange, blue, yellow. + +<div style="height: 90px; width: 30px; border: 2px solid black;"> + <div class="item" style="background: grey"></div> + <div class="item" style="background: orange"></div> + <div class="item" style="background: yellow"></div> + <div class="item" style="background: blue"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/css-flexbox-row-reverse-wrap-reverse.html b/testing/web-platform/tests/css/css-flexbox/css-flexbox-row-reverse-wrap-reverse.html new file mode 100644 index 0000000000..6e3ad38187 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/css-flexbox-row-reverse-wrap-reverse.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8" /> + <title>CSS Flexbox Test: flex direction: row, writing mode vertical</title> + <link rel="author" title="Tsutomu ogaoga Ogasawara" href="mailto:info@ogaoga.org" /> + <link rel="reviewer" title="Elika J Etemad" href="http://fantasai.inkedblade.net/contact" /> + <!-- You must have at least one spec link, but may have as many as are covered in the test. --> + <!-- Be sure to make the main testing area first in the order --> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> + <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow"> + <!-- The match link is only required if this is a reftest --> + <link rel="match" href="css-flexbox-row-ref.html"> + <meta name="assert" content="Test checks that when writing mode is vertical and flex-flow: row-reverse wrap-reverse, the flex container is vertical."> + <style type="text/css"> + .container { + display: flex; + flex-flow: row-reverse wrap-reverse; + writing-mode: vertical-rl; + border: 2px solid black; + height: 90px; + } + .item { + width: 15px; + height: 45px; + + /* make sure UA that doesn't support writing mode and flexbox fails. */ + float: right; + } + </style> +</head> +<body> +<p>Pass condition: 4 rectangles, with colors in clockwise order starting from top-left: grey, orange, blue, yellow. + + <div class="container"> + <div class="item" style="background: yellow"></div> + <div class="item" style="background: grey"></div> + <div class="item" style="background: blue"></div> + <div class="item" style="background: orange"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/css-flexbox-row-reverse-wrap.html b/testing/web-platform/tests/css/css-flexbox/css-flexbox-row-reverse-wrap.html new file mode 100644 index 0000000000..b24a380355 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/css-flexbox-row-reverse-wrap.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8" /> + <title>CSS Flexbox Test: flex direction: row, writing mode vertical</title> + <link rel="author" title="Tsutomu ogaoga Ogasawara" href="mailto:info@ogaoga.org" /> + <link rel="reviewer" title="Elika J Etemad" href="http://fantasai.inkedblade.net/contact" /> + <!-- You must have at least one spec link, but may have as many as are covered in the test. --> + <!-- Be sure to make the main testing area first in the order --> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> + <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow"> + <!-- The match link is only required if this is a reftest --> + <link rel="match" href="css-flexbox-row-ref.html"> + <meta name="assert" content="Test checks that when writing mode is vertical and flex-flow: row-reverse wrap, the flex container is vertical."> + <style type="text/css"> + .container { + display: flex; + flex-flow: row-reverse wrap; + writing-mode: vertical-rl; + border: 2px solid black; + height: 90px; + } + .item { + width: 15px; + height: 45px; + + /* make sure UA that doesn't support writing mode and flexbox fails. */ + float: right; + } + </style> +</head> +<body> +<p>Pass condition: 4 rectangles, with colors in clockwise order starting from top-left: grey, orange, blue, yellow. + + <div class="container"> + <div class="item" style="background: blue"></div> + <div class="item" style="background: orange"></div> + <div class="item" style="background: yellow"></div> + <div class="item" style="background: grey"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/css-flexbox-row-reverse.html b/testing/web-platform/tests/css/css-flexbox/css-flexbox-row-reverse.html new file mode 100644 index 0000000000..d8fac64ca1 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/css-flexbox-row-reverse.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8" /> + <title>CSS Flexbox Test: flex direction: row, writing mode vertical</title> + <link rel="author" title="Tsutomu ogaoga Ogasawara" href="mailto:info@ogaoga.org" /> + <link rel="reviewer" title="Elika J Etemad" href="http://fantasai.inkedblade.net/contact" /> + <!-- You must have at least one spec link, but may have as many as are covered in the test. --> + <!-- Be sure to make the main testing area first in the order --> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> + <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow"> + <!-- The match link is only required if this is a reftest --> + <link rel="match" href="css-flexbox-row-ref.html"> + <meta name="assert" content="Test checks that when writing mode is vertical and flex-flow: row-reverse, the flex container is vertical."> + <style type="text/css"> + .container { + display: flex; + flex-flow: row-reverse; + writing-mode: vertical-rl; + border: 2px solid black; + height: 90px; + } + .item { + line-height: 0; + + /* make sure UA that doesn't support writing mode and flexbox fails. */ + float: right; + } + .color-block { + display: inline-block; + width: 15px; + height: 45px; + } + </style> +</head> +<body> + <p>Pass condition: 4 rectangles, with colors in clockwise order starting from top-left: grey, orange, blue, yellow. + <div class="container"> + <div class="item"> + <span class=color-block style="background: blue;"></span> + <br /> + <span class=color-block style="background: yellow;"></span> + </div> + <div class="item"> + <span class=color-block style="background: orange;"></span> + <br /> + <span class=color-block style="background: grey;"></span> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/css-flexbox-row-wrap-reverse.html b/testing/web-platform/tests/css/css-flexbox/css-flexbox-row-wrap-reverse.html new file mode 100644 index 0000000000..5f8bcda0e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/css-flexbox-row-wrap-reverse.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8" /> + <title>CSS Flexbox Test: flex direction: row, writing mode vertical</title> + <link rel="author" title="Tsutomu ogaoga Ogasawara" href="mailto:info@ogaoga.org" /> + <link rel="reviewer" title="Elika J Etemad" href="http://fantasai.inkedblade.net/contact" /> + <!-- You must have at least one spec link, but may have as many as are covered in the test. --> + <!-- Be sure to make the main testing area first in the order --> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> + <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow"> + <!-- The match link is only required if this is a reftest --> + <link rel="match" href="css-flexbox-row-ref.html"> + <meta name="assert" content="Test checks that when writing mode is vertical and flex-flow: row wrap-reverse, the flex container is vertical."> + <style type="text/css"> + .container { + display: flex; + flex-flow: row wrap-reverse; + writing-mode: vertical-rl; + border: 2px solid black; + height: 90px; + } + .item { + width: 15px; + height: 45px; + + /* make sure UA that doesn't support writing mode and flexbox fails. */ + float: right; + } + </style> +</head> +<body> +<p>Pass condition: 4 rectangles, with colors in clockwise order starting from top-left: grey, orange, blue, yellow. + <div class="container"> + <div class="item" style="background: grey"></div> + <div class="item" style="background: yellow"></div> + <div class="item" style="background: orange"></div> + <div class="item" style="background: blue"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/css-flexbox-row-wrap.html b/testing/web-platform/tests/css/css-flexbox/css-flexbox-row-wrap.html new file mode 100644 index 0000000000..c5de361547 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/css-flexbox-row-wrap.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8" /> + <title>CSS Flexbox Test: flex direction: row, writing mode vertical</title> + <link rel="author" title="Tsutomu ogaoga Ogasawara" href="mailto:info@ogaoga.org" /> + <link rel="reviewer" title="Elika J Etemad" href="http://fantasai.inkedblade.net/contact" /> + <!-- You must have at least one spec link, but may have as many as are covered in the test. --> + <!-- Be sure to make the main testing area first in the order --> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> + <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow"> + <!-- The match link is only required if this is a reftest --> + <link rel="match" href="css-flexbox-row-ref.html"> + <meta name="assert" content="Test checks that when writing mode is vertical and flex-flow: row wrap, the flex container is vertical."> + <style type="text/css"> + .container { + display: flex; + flex-flow: row wrap; + writing-mode: vertical-rl; + border: 2px solid black; + height: 90px; + } + .item { + width: 15px; + height: 45px; + + /* make sure UA that doesn't support writing mode and flexbox fails. */ + float: right; + } + </style> +</head> +<body> +<p>Pass condition: 4 rectangles, with colors in clockwise order starting from top-left: grey, orange, blue, yellow. + + <div class="container"> + <div class="item" style="background: orange"></div> + <div class="item" style="background: blue"></div> + <div class="item" style="background: grey"></div> + <div class="item" style="background: yellow"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/css-flexbox-row.html b/testing/web-platform/tests/css/css-flexbox/css-flexbox-row.html new file mode 100644 index 0000000000..d32a84f2e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/css-flexbox-row.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8" /> + <title>CSS Flexbox Test: flex direction: row, writing mode vertical</title> + <link rel="author" title="Tsutomu ogaoga Ogasawara" href="mailto:info@ogaoga.org" /> + <link rel="reviewer" title="Elika J Etemad" href="http://fantasai.inkedblade.net/contact" /> + <!-- You must have at least one spec link, but may have as many as are covered in the test. --> + <!-- Be sure to make the main testing area first in the order --> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> + <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow"> + <!-- The match link is only required if this is a reftest --> + <link rel="match" href="css-flexbox-row-ref.html"> + <meta name="assert" content="Test checks that when writing mode is vertical and flex-flow: row, the flex container is vertical."> + <style type="text/css"> + .container { + display: flex; + flex-flow: row; + writing-mode: vertical-rl; + border: 2px solid black; + height: 90px; + } + .item { + line-height: 0; + + /* make sure UA that doesn't support writing mode and flexbox fails. */ + float: right; + } + .color-block { + display: inline-block; + width: 15px; + height: 45px; + } + </style> +</head> +<body> + <p>Pass condition: 4 rectangles, with colors in clockwise order starting from top-left: grey, orange, blue, yellow. + <div class="container"> + <div class="item"> + <span class=color-block style="background: orange;"></span> + <br /> + <span class=color-block style="background: grey;"></span> + </div> + <div class="item"> + <span class=color-block style="background: blue;"></span> + <br /> + <span class=color-block style="background: yellow;"></span> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/css-flexbox-test1-ref.html b/testing/web-platform/tests/css/css-flexbox/css-flexbox-test1-ref.html new file mode 100644 index 0000000000..ef2d7661be --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/css-flexbox-test1-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8" /> + <title>CSS Reftest Reference</title> + <link rel="author" title="Tsutomu ogaoga Ogasawara" href="mailto:info@ogaoga.org"> + <style type="text/css"> + .container { + color: white; + } + .item { + writing-mode: vertical-rl; + background: green; + height: 3em; + width: 3em; + } + </style> +</head> +<body> + + <p>The test passes if you see a tall green box with pairs of the digits 1-9 listed top to bottom in two columns.</p> + + <div class="container"> + <div class="item">１２３<br />１２３</div> + <div class="item">４５６<br />４５６</div> + <div class="item">７８９<br />７８９</div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/css-flexbox-test1.html b/testing/web-platform/tests/css/css-flexbox/css-flexbox-test1.html new file mode 100644 index 0000000000..534b3d79d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/css-flexbox-test1.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> <!-- coding:utf-8 --> +<html> +<head> + <meta charset="utf-8" /> + <title>CSS Flexbox Test: flex direction: row, writing mode vertical</title> + <link rel="author" title="Tsutomu ogaoga Ogasawara" href="mailto:info@ogaoga.org" /> + <link rel="reviewer" title="Elika J Etemad" href="http://fantasai.inkedblade.net/contact" /> + <!-- You must have at least one spec link, but may have as many as are covered in the test. --> + <!-- Be sure to make the main testing area first in the order --> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> + <!-- The match link is only required if this is a reftest --> + <link rel="match" href="css-flexbox-test1-ref.html"> + <meta name="assert" content="Test checks that when writing mode is vertical and flex-flow: row, the flex container is vertical."> + <style type="text/css"> + .container { + display: flex; + flex-flow: row; + writing-mode: vertical-rl; + color: white; + } + .item { + background: green; + height: 3em; + width: 3em; + + /* make sure UA that doesn't support writing mode and flexbox fails. */ + float: right; + } + .error { + position: absolute; + background: red; + height: 9em; + width: 3em; + z-index: -1; + } + </style> +</head> +<body> + <p>The test passes if you see a tall green box with pairs of the digits 1-9 listed top to bottom in two columns.</p> + + <div class="error"></div> + <div class="container"> + <div class="item">１２３<br />１２３</div> + <div class="item">４５６<br />４５６</div> + <div class="item">７８９<br />７８９</div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/display-flex-001.htm b/testing/web-platform/tests/css/css-flexbox/display-flex-001.htm new file mode 100644 index 0000000000..7d0f6c9fda --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/display-flex-001.htm @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: An element with the 'display' property set to 'flex' establishes a new block-level flex container</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers" /> + <link rel="match" href="reference/align-content-001-ref.html" /> + <meta name="assert" content="This test checks that an element with 'display' property set to 'flex' establishes a new block-level flex container." /> + <style type="text/css"> + #flexbox + { + background-color: red; + display: flex; + height: 100px; + width: 300px; + } + div div + { + background-color: green; + width: 150px; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div id="flexbox"> + <div></div> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/dynamic-baseline-change-nested.html b/testing/web-platform/tests/css/css-flexbox/dynamic-baseline-change-nested.html new file mode 100644 index 0000000000..803b31410d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/dynamic-baseline-change-nested.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#baseline-participation"> +<link rel="match" href="dynamic-baseline-change-ref.html"> +<meta name="assert" content="This test ensures proper baseline alignment for a sub-tree which adds a scrollbar."> +<div style="display: flex; width: 100px; border: solid; align-items: baseline;"> + <div style="width: 50px; height: 50px;"> + <div style="width: 50px; height: 50px; position: relative; overflow: auto;"> + <canvas width=10 height=10 style="width: 80%; background: green;"></canvas> <!-- Baseline of the canvas will move when a scrollbar is added. --> + <div id="target" style="position: absolute; width: 10px; height: 10px; background: red; top: 0;"></div> + </div> + </div> + <div style="width: 50px; height: 50px; background: green;"></div> <!-- Baseline is synthesized at the block-end edge. --> +</div> +<script> + document.body.offsetTop; + document.getElementById('target').style.top = '100px'; +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/dynamic-baseline-change-ref.html b/testing/web-platform/tests/css/css-flexbox/dynamic-baseline-change-ref.html new file mode 100644 index 0000000000..af030931dd --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/dynamic-baseline-change-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<div style="display: flex; width: 100px; border: solid; align-items: baseline;"> + <div style="width: 50px; height: 50px;"> + <div style="width: 50px; height: 50px; position: relative; overflow: auto;"> + <canvas width=10 height=10 style="width: 80%; background: green;"></canvas> + <div id="target" style="position: absolute; width: 10px; height: 10px; background: red; top: 100px;"></div> + </div> + </div> + <div style="width: 50px; height: 50px; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/dynamic-baseline-change.html b/testing/web-platform/tests/css/css-flexbox/dynamic-baseline-change.html new file mode 100644 index 0000000000..f13b87f0c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/dynamic-baseline-change.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#baseline-participation"> +<link rel="match" href="dynamic-baseline-change-ref.html"> +<meta name="assert" content="This test ensures proper baseline alignment for a sub-tree which adds a scrollbar."> +<div style="display: flex; width: 100px; border: solid; align-items: baseline;"> + <div style="width: 50px; height: 50px; position: relative; overflow: auto;"> + <canvas width=10 height=10 style="width: 80%; background: green;"></canvas> <!-- Baseline of the canvas will move when a scrollbar is added. --> + <div id="target" style="position: absolute; width: 10px; height: 10px; background: red; top: 0;"></div> + </div> + <div style="width: 50px; height: 50px; background: green;"></div> <!-- Baseline is synthesized at the block-end edge. --> +</div> +<script> + document.body.offsetTop; + document.getElementById('target').style.top = '100px'; +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/dynamic-bsize-change-ref.html b/testing/web-platform/tests/css/css-flexbox/dynamic-bsize-change-ref.html new file mode 100644 index 0000000000..b8db7ea2c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/dynamic-bsize-change-ref.html @@ -0,0 +1,18 @@ +<!doctype html> +<title>CSS Test Reference</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<style> + div { + border: 1px solid; + } + #myHeightChanges { + width: 100px; + height: 200px; + background: green; + } +</style> +<div style="display:flex; flex-direction:column"> + <div style="height:auto"> + <div id="myHeightChanges"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/dynamic-bsize-change.html b/testing/web-platform/tests/css/css-flexbox/dynamic-bsize-change.html new file mode 100644 index 0000000000..7148f26e27 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/dynamic-bsize-change.html @@ -0,0 +1,28 @@ +<!doctype html> +<title>CSS Test: Dynamic change to the block size inside an auto-sized flex item</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1496833"> +<link rel="match" href="dynamic-bsize-change-ref.html"> +<style> + div { + border: 1px solid; + } + #myHeightChanges { + width: 100px; + height: 100px; + background: green; + } +</style> +<div style="display:flex; flex-direction:column"> + <div style="height:auto"> + <div id="myHeightChanges"></div> + </div> +</div> +<script> +onload = function() { + window.unused = myHeightChanges.offsetTop; + myHeightChanges.style.height = "200px"; +} +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/dynamic-change-simplified-layout-002.html b/testing/web-platform/tests/css/css-flexbox/dynamic-change-simplified-layout-002.html new file mode 100644 index 0000000000..d419bb3c70 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/dynamic-change-simplified-layout-002.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/" /> +<meta name="assert" content="Tests that certain dynamic changes don't lead to a flex item being sized as zero, instead of its stretched size." /> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display: flex; width: 100px; height: 100px; background: red;"> + <div style="contain: layout size; height: 100px; flex: 1; background: green;"> + <div id="target"></div> + </div> +</div> +<script> +document.body.offsetTop; +document.getElementById('target').style.width = '1px'; +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/dynamic-change-simplified-layout.html b/testing/web-platform/tests/css/css-flexbox/dynamic-change-simplified-layout.html new file mode 100644 index 0000000000..5d15e22c5e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/dynamic-change-simplified-layout.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<link rel="author" title="Google LLC" href="http://www.google.com" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#cross-sizing" /> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=992010" /> +<title>Tests that certain dynamic changes don't lead to a flex item being sized as shrink to fit when it should stretch in the cross axis</title> + +<style> +#flex { + display: flex; + flex-direction: column; + flex-wrap: wrap; + position: absolute; + top: 20px; + width: 100px; +} + +#it1 { + background: green; + flex: none; + height: 100px; + min-height: 0; + position: relative; +} + +#child { + position: absolute; + top: 0; + left: 0; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="position: relative;"> + <div id="flex"> + <div id="it1" style=""><div id="child"></div></div> + <div id="it2"></div> + </div> +</div> + +<script> +var flex = document.getElementById("flex"); +flex.offsetWidth; +var it2 = document.getElementById("it2"); +it2.style.width = "50px"; +flex.offsetWidth; +flex.style.top = "0px"; +var child = document.getElementById("child"); +child.style.top = "1px"; +flex.offsetWidth; +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/dynamic-grid-flex-abspos.html b/testing/web-platform/tests/css/css-flexbox/dynamic-grid-flex-abspos.html new file mode 100644 index 0000000000..73318466f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/dynamic-grid-flex-abspos.html @@ -0,0 +1,82 @@ +<!DOCTYPE html> +<title>grid items and abspos flex children</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-overview" title="Note at bottom of this section: 'the size of a grid item which is stretched is also considered definite.'"> +<link rel="bookmark" href="https://crbug.com/1091588" /> +<link rel="bookmark" href="https://crbug.com/1018439" /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<style> +.grid { + display: grid; +} + +.flexbox { + display: flex; +} + +.relpos { + position: relative; +} + +.abspos { + position: absolute; + border: 1px solid; +} + +/* These are just for making the test look better. */ +p { + margin: 0px; +} +p + div { + margin-bottom: 40px; +} +</style> + +<p>This crashed Chrome 84.</p> +<div class=grid> + <div class="relpos flexbox" data-expected-height=20> + <div class=abspos>Test</div> + <div style="height: 20px;"></div> + </div> +</div> + +<p>Outer is a regular div.</p> +<div> + <div class="relpos flexbox" data-expected-height=20> + <div class=abspos>Test</div> + <div style="height: 20px;"></div> + </div> +</div> + +<p>relpos element is a regular div, not flexbox.</p> +<div class=grid> + <div class="relpos" data-expected-height=20> + <div class=abspos>Test</div> + <div style="height: 20px;"></div> + </div> +</div> + +<p>Relpos flexbox has a % height descendant. The height of the flexbox grid item is supposed to be definite, allowing the %height flex item to resolve. + +This fails in chrome because of https://crbug.com/1018439</p> +<div class=grid> + <div class="relpos flexbox" data-expected-height=20> + <div class=abspos>Test</div> + <div style="height: 20px;"></div> + <div style="height: 50%" data-expected-height=10></div> + </div> +</div> + +<script> + checkLayout('.relpos'); + // Changing the abspos border shouldn't change the size of any inflow element. + for (abspos of document.querySelectorAll(".abspos")) { + abspos.style.borderWidth = "10px"; + } + checkLayout('.relpos'); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/dynamic-isize-change-001-ref.html b/testing/web-platform/tests/css/css-flexbox/dynamic-isize-change-001-ref.html new file mode 100644 index 0000000000..58b34c43fe --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/dynamic-isize-change-001-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Reference: Dynamic change to the inline-size of a container containing a inline-flex child</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + + <style> + #container { + border: 1px solid black; + font: 30px monospace; + width: 400px; + } + .inline-flex { + display: inline-flex; + width: 100px; + border: 1px solid gray; + } + + .small { + display: flex; + align-items: flex-end; + font: 8px monospace; + background: pink; + } + </style> + + <body> + <div id="container"> + abc + <div class="inline-flex"> + <div class="small">D</div> + <div>efg</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/dynamic-isize-change-001.html b/testing/web-platform/tests/css/css-flexbox/dynamic-isize-change-001.html new file mode 100644 index 0000000000..cf4a030043 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/dynamic-isize-change-001.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Test: Dynamic change to the inline-size of a container containing a inline-flex child</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1686961"> + <link rel="match" href="dynamic-isize-change-001-ref.html"> + + <style> + #container { + border: 1px solid black; + font: 30px monospace; + width: 200px; + } + .inline-flex { + display: inline-flex; + width: 100px; + border: 1px solid gray; + } + + .small { + display: flex; + align-items: flex-end; + font: 8px monospace; + background: pink; + } + </style> + + <script> + function test() { + let container = document.getElementById("container"); + container.offsetTop; + + /* Change the width to trigger incremental reflow. */ + container.style.width = "400px"; + } + </script> + + <body onload="test()"> + <div id="container"> + abc + <div class="inline-flex"> + <div class="small">D</div> + <div>efg</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/dynamic-isize-change-002.html b/testing/web-platform/tests/css/css-flexbox/dynamic-isize-change-002.html new file mode 100644 index 0000000000..cc859b73f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/dynamic-isize-change-002.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: Dynamic change to the inline-size of a row flex container</title> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1700580"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="This test verifies that the dynamic change to the flex container's inline-size triggers the reflow for flex items with percentage padding."> + +<style> +#flexbox { + display: flex; + inline-size: 50px; + block-size: 100px; + background: red; +} + +#flexbox > div { + box-sizing: border-box; + + /* The following flex-basis and padding will give our flex item a content-box + inline-size of 25px, both before and after this test's dynamic change. */ + flex-basis: 100%; + padding-right: calc(100% - 25px); + background: green; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="flexbox"> + <div></div> +</div> + +<script> +/* Make sure the layout is up-to-date, which is essential to trigger the bug. */ +document.documentElement.offsetHeight; + +/* Change the flexbox's inline-size to trigger incremental reflow. */ +document.getElementById("flexbox").style.inlineSize = "100px"; +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/dynamic-isize-change-003.html b/testing/web-platform/tests/css/css-flexbox/dynamic-isize-change-003.html new file mode 100644 index 0000000000..9df13e313f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/dynamic-isize-change-003.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: Dynamic change to the inline-size of a column flexbox container</title> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1700580"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="This test verifies that the dynamic change to the flex container's inline-size triggers the reflow for flex items with percentage padding."> + +<style> +#flexbox { + display: flex; + flex-direction: column; + inline-size: 50px; + block-size: 100px; + background: red; +} + +#flexbox > div { + box-sizing: border-box; + flex-basis: 100px; + + /* The following padding will give our flex item a content-box inline-size of + 25px, both before and after this test's dynamic change. (Note that the + horizontal axis is the flex container's cross axis, so the item stretches + its width by default to fill the available space.) */ + padding-right: calc(100% - 25px); + background: green; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="flexbox"> + <div></div> +</div> + +<script> +/* Make sure the layout is up-to-date, which is essential to trigger the bug. */ +document.documentElement.offsetHeight; + +/* Change the flexbox's inline-size to trigger incremental reflow. */ +document.getElementById("flexbox").style.inlineSize = "100px"; +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/dynamic-isize-change-004.html b/testing/web-platform/tests/css/css-flexbox/dynamic-isize-change-004.html new file mode 100644 index 0000000000..1627e32d96 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/dynamic-isize-change-004.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: Dynamic change to the inline-size of a row flex container</title> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1700580"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="This test verifies that the dynamic change to the flex container's inline-size triggers the reflow for flex items with percentage padding."> + +<style> +#flexbox { + display: flex; + inline-size: 100px; + block-size: 100px; + font: 50px/1 Ahem; + color: green; + word-break: break-all; +} + +#flexbox > div { + /* The following flex-basis and padding will give our flex item a border-box + inline-size of 100px, both before and after this test's dynamic + modification. */ + flex-basis: 50%; + padding-right: calc(100px - 50%); + background: red; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="flexbox"> + <div>XXXX</div> +</div> + +<script> +/* Make sure the layout is up-to-date, which is essential to trigger the bug. */ +document.documentElement.offsetHeight; + +/* Change the flexbox's inline-size to trigger incremental reflow. */ +document.getElementById("flexbox").style.inlineSize = "200px"; +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/dynamic-orthogonal-flex-item.html b/testing/web-platform/tests/css/css-flexbox/dynamic-orthogonal-flex-item.html new file mode 100644 index 0000000000..90791f0be8 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/dynamic-orthogonal-flex-item.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1456196"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<style> +span { + display: inline-block; + inline-size: 100px; + block-size: 50px; +} +</style> +<p>Test passes if there is a filled green square.</p> +<div id="target" style="width: 100px; height: 200px; line-height: 0;"> + <div style="display: inline-flex; height: 100%; background: green;"> + <div style="writing-mode: vertical-rl;"> + <span></span><span></span> + </div> + </div> +</div> +<script> +document.body.offsetTop; +document.getElementById('target').style.height = '100px'; +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/dynamic-stretch-change.html b/testing/web-platform/tests/css/css-flexbox/dynamic-stretch-change.html new file mode 100644 index 0000000000..f2fdf1b24f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/dynamic-stretch-change.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div id="target" style="display: flex; width: 100px; height: 200px;"> + <div style="display: flex; flex-grow: 1; min-height: 100px;"> + <div style="background: green; flex: 1;"></div> + </div> +</div> +<script> +document.body.offsetTop; +document.getElementById('target').style.alignItems = 'start'; +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/fieldset-as-container-justify-center.tentative.html b/testing/web-platform/tests/css/css-flexbox/fieldset-as-container-justify-center.tentative.html new file mode 100644 index 0000000000..a1d7564e8a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/fieldset-as-container-justify-center.tentative.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://crbug.com/1229458"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/8690"> +<link rel="help" href="https://github.com/whatwg/html/issues/9123"> +<link rel="help" + href="https://html.spec.whatwg.org/multipage/rendering.html#anonymous-fieldset-content-box"> +<meta name="assert" + content="justify-content: center is ignored in a column flexbox fieldset when the anonymous fieldset content box has no height or min-height."> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<style> + fieldset { + display: flex; + flex-flow: column; + justify-content: center; + align-items: center; + width: 200px; + min-height: 200px; + padding: 0px; + border: 1px solid; + position: relative; + } + + .item { + height: 100px; + width: 100px; + background: orange; + } + +</style> +<p>Pass Condition: orange square is at top of black square.<br> + Safari 16.4 and Firefox 111 fail -- orange box is vertically centered as if + the anonymous fieldset content box and the fieldset were the same box. +</p> + +<fieldset> + <div class="item" data-offset-y="0"></div> +</fieldset> + +<script> + checkLayout('.item'); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/fieldset-as-item-dynamic.html b/testing/web-platform/tests/css/css-flexbox/fieldset-as-item-dynamic.html new file mode 100644 index 0000000000..814b228e36 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/fieldset-as-item-dynamic.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div id="target" style="display: flex; width: 100px; height: 0; background: green;"> + <fieldset style="border: none; padding: 0;"> + <div style="height: 100px;"></div> + </fieldset> +</div> +<script> +document.body.offsetTop; +document.getElementById('target').style.height = 'auto'; +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/fieldset-as-item-overflow-ref.html b/testing/web-platform/tests/css/css-flexbox/fieldset-as-item-overflow-ref.html new file mode 100644 index 0000000000..94e64dd1b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/fieldset-as-item-overflow-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; border: solid;"> + <div style="overflow-y: scroll; max-height: 100%;"> + <div style="height: 200px; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/fieldset-as-item-overflow.html b/testing/web-platform/tests/css/css-flexbox/fieldset-as-item-overflow.html new file mode 100644 index 0000000000..17bc82a0b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/fieldset-as-item-overflow.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1149714"> +<link rel="match" href="fieldset-as-item-overflow-ref.html"> +<meta name="assert" content="A fieldset element when flex-shrink is applied has scrollable overflow."> +<div style="display: flex; flex-direction: column; width: 100px; height: 100px; border: solid;"> + <fieldset style="margin: 0; border: none; padding: 0; overflow-y: scroll; overflow-x: hidden; flex-grow: 1;"> + <div style="height: 200px; background: green;"></div> + </fieldset> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/fieldset-baseline-alignment-ref.html b/testing/web-platform/tests/css/css-flexbox/fieldset-baseline-alignment-ref.html new file mode 100644 index 0000000000..d68e033342 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/fieldset-baseline-alignment-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<div style="display: block;"> + baseline<fieldset style="display: inline-block;"><legend>legend</legend>content</fieldset> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/fieldset-baseline-alignment.html b/testing/web-platform/tests/css/css-flexbox/fieldset-baseline-alignment.html new file mode 100644 index 0000000000..d3fdba3d7f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/fieldset-baseline-alignment.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1305890"> +<link rel="match" href="fieldset-baseline-alignment-ref.html"> +<div style="display: flex; align-items: baseline;"> + baseline<fieldset><legend>legend</legend>content</fieldset> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/fit-content-item-001.html b/testing/web-platform/tests/css/css-flexbox/fit-content-item-001.html new file mode 100644 index 0000000000..ac5c340699 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/fit-content-item-001.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-base-size"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-cross-item"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="A column flex container shrink wraps items both when determining their flex base sizes and when laying them out after their flexed size has been determined." /> + +<style> + +x-flexbox { + display: flex; + flex-direction: column; +} + +x-item { + display: block; + background: red; + /* Override default alignment of "stretch" because items don't shrink to fit + when they are stretched. */ + align-self: start; +} + +#mainSizeDependsOnCrossSize { + padding-bottom: 50%; + background: green; +} + +#widthSetter { + width: 100px; + height: 50px; + background: green; +} + +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<x-flexbox> + <x-item> <!-- If fit-content is skipped when determining flex base size, this item gets a main size of 50px + 100vw / 2. --> + <div id=widthSetter></div> + <div id=mainSizeDependsOnCrossSize></div> + </x-item> +</x-flexbox> diff --git a/testing/web-platform/tests/css/css-flexbox/fit-content-item-002.html b/testing/web-platform/tests/css/css-flexbox/fit-content-item-002.html new file mode 100644 index 0000000000..c1be5ff5a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/fit-content-item-002.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-base-size"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="A flex container's block cross size of min-content is treated as indefinite when setting fit-content on an item for flex base sizing"> + +<style> +x-flexbox { + display: flex; + height: min-content; +} + +.fit-content-item { + background: green; + width: 100px; + writing-mode: vertical-lr; +} + +.height-setting-item { + height: 100px; +} + +</style> + +<!-- This has to be a row flexbox whose item stretches and has vertical writing + mode to trigger: + * a cross size is needed to determine the main size (row flexbox's cross size + is vertical, which is the item's inline size because it has a vertical + writing mode) + * the flex item’s cross size is [...] not definite (if the item didn't + stretch, the definiteness of the container's cross size wouldn't matter + because the cross size would never be definite and the item would always get + fit-content) +--> + +<p>Test passes if there is a filled green square.</p> + +<x-flexbox> + <div class="fit-content-item"></div> + <div class="height-setting-item"></div> +</x-flexbox> diff --git a/testing/web-platform/tests/css/css-flexbox/fit-content-item-003.html b/testing/web-platform/tests/css/css-flexbox/fit-content-item-003.html new file mode 100644 index 0000000000..2cc310d729 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/fit-content-item-003.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-base-size"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="A flex container's block cross size of max-content is treated as indefinite when setting fit-content on an item for flex base sizing"> + +<style> +x-flexbox { + display: flex; + height: max-content; +} + +.fit-content-item { + background: green; + width: 100px; + writing-mode: vertical-lr; +} + +.height-setting-item { + height: 100px; +} + +</style> + +<!-- This has to be a row flexbox whose item stretches and has vertical writing + mode to trigger: + * a cross size is needed to determine the main size (row flexbox's cross size + is vertical, which is the item's inline size because it has a vertical + writing mode) + * the flex item’s cross size is [...] not definite (if the item didn't + stretch, the definiteness of the container's cross size wouldn't matter + because the cross size would never be definite and the item would always get + fit-content) +--> + +<p>Test passes if there is a filled green square.</p> + +<x-flexbox> + <div class="fit-content-item"></div> + <div class="height-setting-item"></div> +</x-flexbox> diff --git a/testing/web-platform/tests/css/css-flexbox/fit-content-item-004.html b/testing/web-platform/tests/css/css-flexbox/fit-content-item-004.html new file mode 100644 index 0000000000..5fbbf4bd51 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/fit-content-item-004.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-base-size"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="A flex container's block cross size of fit-content is treated as indefinite when setting fit-content on an item for flex base sizing"> + +<style> +x-flexbox { + display: flex; + height: fit-content; +} + +.fit-content-item { + background: green; + width: 100px; + writing-mode: vertical-lr; +} + +.height-setting-item { + height: 100px; +} + +</style> + +<!-- This has to be a row flexbox whose item stretches and has vertical writing + mode to trigger: + * a cross size is needed to determine the main size (row flexbox's cross size + is vertical, which is the item's inline size because it has a vertical + writing mode) + * the flex item’s cross size is [...] not definite (if the item didn't + stretch, the definiteness of the container's cross size wouldn't matter + because the cross size would never be definite and the item would always get + fit-content) +--> + +<p>Test passes if there is a filled green square.</p> + +<x-flexbox> + <div class="fit-content-item"></div> + <div class="height-setting-item"></div> +</x-flexbox> diff --git a/testing/web-platform/tests/css/css-flexbox/fixed-table-layout-with-percentage-width-in-flex-item-ref.html b/testing/web-platform/tests/css/css-flexbox/fixed-table-layout-with-percentage-width-in-flex-item-ref.html new file mode 100644 index 0000000000..8e3e616717 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/fixed-table-layout-with-percentage-width-in-flex-item-ref.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Reference: Test flex items containing table-layout:fixed with percentage width</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + + <style> + .container { + display: flex; + width: 300px; + margin-bottom: 5px; + border: 1px solid black; + background: red; + } + .tbl { + width: 100%; + height: 30px; + border: 1px solid blue; + box-sizing: border-box; + background: lightgray; + } + </style> + + <div class="container"> + <div class="tbl"></div> + </div> + + <div class="container"> + <div class="tbl"></div> + <div class="tbl"></div> + </div> + + <div class="container"> + <div class="tbl"></div> + <div class="tbl"></div> + <div class="tbl"></div> + </div> + + <div class="container"> + <div class="tbl"></div> + <div class="tbl"></div> + <div class="tbl"></div> + <div class="tbl"></div> + </div> + + <div class="container"> + <div class="tbl"></div> + <div class="tbl"></div> + <div class="tbl"></div> + <div class="tbl"></div> + <div class="tbl"></div> + </div> + + <div class="container"> + <div class="tbl"></div> + <div class="tbl"></div> + <div class="tbl"></div> + <div class="tbl"></div> + <div class="tbl"></div> + <div class="tbl"></div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/fixed-table-layout-with-percentage-width-in-flex-item.html b/testing/web-platform/tests/css/css-flexbox/fixed-table-layout-with-percentage-width-in-flex-item.html new file mode 100644 index 0000000000..507e0e9fce --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/fixed-table-layout-with-percentage-width-in-flex-item.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Test flex items containing table-layout:fixed with percentage width</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1469649"> + <link rel="match" href="fixed-table-layout-with-percentage-width-in-flex-item-ref.html"> + <meta name="assert" content="This test verifies that each flex item with a table descendant should have the the same definite post-flexing main size."> + + <style> + .container { + display: flex; + width: 300px; + margin-bottom: 5px; + border: 1px solid black; + background: red; + } + .tbl { + display: table; + table-layout: fixed; + width: 100%; + height: 30px; + border: 1px solid blue; + box-sizing: border-box; + background: lightgray; + } + </style> + + <div class="container"> + <div><div class="tbl"></div></div> + </div> + + <div class="container"> + <div><div class="tbl"></div></div> + <div><div class="tbl"></div></div> + </div> + + <div class="container"> + <div><div class="tbl"></div></div> + <div><div class="tbl"></div></div> + <div><div class="tbl"></div></div> + </div> + + <div class="container"> + <div><div class="tbl"></div></div> + <div><div class="tbl"></div></div> + <div><div class="tbl"></div></div> + <div><div class="tbl"></div></div> + </div> + + <div class="container"> + <div><div class="tbl"></div></div> + <div><div class="tbl"></div></div> + <div><div class="tbl"></div></div> + <div><div class="tbl"></div></div> + <div><div class="tbl"></div></div> + </div> + + <div class="container"> + <div><div class="tbl"></div></div> + <div><div class="tbl"></div></div> + <div><div class="tbl"></div></div> + <div><div class="tbl"></div></div> + <div><div class="tbl"></div></div> + <div><div class="tbl"></div></div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/fixedpos-video-in-abspos-quirk-crash.html b/testing/web-platform/tests/css/css-flexbox/fixedpos-video-in-abspos-quirk-crash.html new file mode 100644 index 0000000000..80cae086ca --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/fixedpos-video-in-abspos-quirk-crash.html @@ -0,0 +1,13 @@ +<!-- Quirks mode needed --> +<title>CSS Flexbox: fixed positioned video in absolute positioned on quirks mode</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://crbug.com/841276"> +<meta name="assert" content="This test ensures that a video works with fixed position in absolute position on quirks mode."> +<div style="position:absolute;"> + <div> + <!-- Video element may work with shadow DOM using flex for media controls. + This is mostly useful for browsers that use flex inside of video.--> + <video style="position:fixed;"></video> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-001.htm b/testing/web-platform/tests/css/css-flexbox/flex-001.htm new file mode 100644 index 0000000000..1806e06dc9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-001.htm @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: The 'flex' shorthand adjusting the 'flex-grow' sub-property</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property" /> + <link rel="match" href="reference/justify-content-001-ref.html"> + <meta name="assert" content="This test checks that the flex grow factor determines the distribution of positive free space."/> + <style type="text/css"> + #flexbox + { + background-color: red; + display: flex; + width: 300px; + } + div div + { + background-color: orange; + flex: 1 0 auto; + height: 100px; + } + #flexItem1 + { + background-color: blue; + } + </style> + </head> + <body> + <p>Test passes if there is a single blue rectangle on the left, a single orange rectangle directly to its right, and there is no red visible on the page.</p> + <div id="flexbox"> + <div id="flexItem1"></div> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-002.htm b/testing/web-platform/tests/css/css-flexbox/flex-002.htm new file mode 100644 index 0000000000..10e384dc53 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-002.htm @@ -0,0 +1,52 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: The 'flex' shorthand adjusting the 'flex-shrink' sub-property</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property" /> + <link rel="match" href="reference/justify-content-001-ref.html"> + <meta name="assert" content="This test checks that the flex shrink factor is multiplied by the flex base size when distributing negative space."/> + <style type="text/css"> + div + { + height: 50px; + } + #flexbox + { + background-color: red; + display: flex; + width: 300px; + } + #flexItem1 + { + flex: 0 2 auto; + width: 300px; + } + #flexItem2 + { + width: 200px; + } + #flexItem1, #ref1 + { + background-color: blue; + } + #flexItem2, #ref2 + { + background-color: orange; + } + #ref1, #ref2 + { + display: inline-block; + width: 150px; + } + </style> + </head> + <body> + <p>Test passes if there is a single blue rectangle on the left, a single orange rectangle directly to its right, and there is no red visible on the page.</p> + <div id="flexbox"> + <div id="flexItem1"></div> + <div id="flexItem2"></div> + </div> + <div id="ref1"></div><div id="ref2"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-003.htm b/testing/web-platform/tests/css/css-flexbox/flex-003.htm new file mode 100644 index 0000000000..b48a79b06f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-003.htm @@ -0,0 +1,53 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Comparing two different elements using different values for the 'flex-grow' sub-property on the 'flex' shorthand</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property" /> + <link rel="match" href="reference/justify-content-001-ref.html"> + <meta name="assert" content="This test checks that the flex items with a different flex grow factor have different flexibilities."/> + <style type="text/css"> + div + { + height: 50px; + } + #flexbox + { + background-color: red; + display: flex; + width: 300px; + } + #flexItem1 + { + flex: 1 0 auto; + width: 100px; + } + #flexItem2 + { + flex: 2 0 auto; + width: 50px; + } + #flexItem1, #ref1 + { + background-color: blue; + } + #flexItem2, #ref2 + { + background-color: orange; + } + #ref1, #ref2 + { + display: inline-block; + width: 150px; + } + </style> + </head> + <body> + <p>Test passes if there is a single blue rectangle on the left, a single orange rectangle directly to its right, and there is no red visible on the page.</p> + <div id="flexbox"> + <div id="flexItem1"></div> + <div id="flexItem2"></div> + </div> + <div id="ref1"></div><div id="ref2"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-004.htm b/testing/web-platform/tests/css/css-flexbox/flex-004.htm new file mode 100644 index 0000000000..8c82affd9b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-004.htm @@ -0,0 +1,53 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Comparing two different elements using different values for the 'flex-shrink' sub-property on the 'flex' shorthand</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property" /> + <link rel="match" href="reference/justify-content-001-ref.html"> + <meta name="assert" content="This test checks that the flex items with a different flex shrink factor have different flexibilities."/> + <style type="text/css"> + div + { + height: 50px; + } + #flexbox + { + background-color: red; + display: flex; + width: 300px; + } + #flexItem1 + { + flex: 0 2 auto; + width: 300px; + } + #flexItem2 + { + flex: 0 3 auto; + width: 600px; + } + #flexItem1, #ref1 + { + background-color: blue; + } + #flexItem2, #ref2 + { + background-color: orange; + } + #ref1, #ref2 + { + display: inline-block; + width: 150px; + } + </style> + </head> + <body> + <p>Test passes if there is a single blue rectangle on the left, a single orange rectangle directly to its right, and there is no red visible on the page.</p> + <div id="flexbox"> + <div id="flexItem1"></div> + <div id="flexItem2"></div> + </div> + <div id="ref1"></div><div id="ref2"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-align-content-center.html b/testing/web-platform/tests/css/css-flexbox/flex-align-content-center.html new file mode 100644 index 0000000000..13ddc295bb --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-align-content-center.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Flexible Box Test: align-content property - center</title> + <link rel="author" title="haosdent" href="mailto:haosdent@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"> + <link rel="match" href="reference/flex-align-content-center-ref.html"> + <meta name="assert" content="Statement describing what the test case is asserting"> + <style type="text/css"> + .container { + position: relative; + height: 6em; + width: 20em; + display: flex; + flex-wrap: wrap; + align-content: center; + background: red; + margin: 1em; + border: 1px solid black; + } + span { + height: 2em; + display: inline-block; + flex: none; + background: green; + color: white; + margin: 1em; + width: 8em; + } + </style> +</head> +<body> + <p>The test passed if you see a centered 2*2 table.</p> + <div class="container"> + <span>first</span> + <span>second</span> + <span>third</span> + <span>forth</span> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-align-content-end.html b/testing/web-platform/tests/css/css-flexbox/flex-align-content-end.html new file mode 100644 index 0000000000..0572d58773 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-align-content-end.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Flexible Box Test: align-content property - flex-end</title> + <link rel="author" title="haosdent" href="mailto:haosdent@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"> + <link rel="match" href="reference/flex-align-content-end-ref.html"> + <meta name="assert" content="Statement describing what the test case is asserting"> + <style type="text/css"> + .container { + position: relative; + height: 14em; + width: 20em; + display: flex; + flex-wrap: wrap; + align-content: flex-end; + background: red; + margin: 1em; + border: 1px solid black; + } + span { + height: 2em; + display: inline-block; + flex: none; + background: green; + color: white; + margin: 1em; + width: 8em; + } + </style> +</head> +<body> + <p>The test passed if you see a 2*2 table and all the cells are at the bottom of container.</p> + <div class="container"> + <span>first</span> + <span>second</span> + <span>third</span> + <span>forth</span> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-align-content-space-around.html b/testing/web-platform/tests/css/css-flexbox/flex-align-content-space-around.html new file mode 100644 index 0000000000..2ed87ba3a8 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-align-content-space-around.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Flexible Box Test: align-content property - space-around</title> + <link rel="author" title="haosdent" href="mailto:haosdent@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"> + <link rel="match" href="reference/flex-align-content-space-around-ref.html"> + <meta name="assert" content="Statement describing what the test case is asserting"> + <style type="text/css"> + .container { + position: relative; + height: 14em; + width: 20em; + display: flex; + flex-wrap: wrap; + align-content: space-around; + background: red; + margin: 1em; + border: 1px solid black; + } + span { + height: 2em; + display: inline-block; + flex: none; + background: green; + color: white; + margin: 1em; + width: 8em; + } + </style> +</head> +<body> + <p>The test passed if you see a 2*2 table and all the cells are at the bottom of container.</p> + <div class="container"> + <span>first</span> + <span>second</span> + <span>third</span> + <span>forth</span> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-align-content-space-between.html b/testing/web-platform/tests/css/css-flexbox/flex-align-content-space-between.html new file mode 100644 index 0000000000..395d6cf501 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-align-content-space-between.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Flexible Box Test: align-content property - space-between</title> + <link rel="author" title="haosdent" href="mailto:haosdent@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"> + <link rel="match" href="reference/flex-align-content-space-between-ref.html"> + <meta name="assert" content="Statement describing what the test case is asserting"> + <style type="text/css"> + .container { + position: relative; + height: 14em; + width: 20em; + display: flex; + flex-wrap: wrap; + align-content: space-between; + background: red; + margin: 1em; + border: 1px solid black; + } + span { + height: 2em; + display: inline-block; + flex: none; + background: green; + color: white; + margin: 1em; + width: 8em; + } + </style> +</head> +<body> + <p>The test passed if you see a 2*2 table and all the cells are spaced equally apart.</p> + <div class="container"> + <span>first</span> + <span>second</span> + <span>third</span> + <span>forth</span> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-align-content-start.html b/testing/web-platform/tests/css/css-flexbox/flex-align-content-start.html new file mode 100644 index 0000000000..721658c627 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-align-content-start.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Flexible Box Test: align-content property - flex-start</title> + <link rel="author" title="haosdent" href="mailto:haosdent@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"> + <link rel="match" href="reference/flex-align-content-start-ref.html"> + <meta name="assert" content="Statement describing what the test case is asserting"> + <style type="text/css"> + .container { + position: relative; + height: 14em; + width: 20em; + display: flex; + flex-wrap: wrap; + align-content: flex-start; + background: red; + margin: 1em; + border: 1px solid black; + } + span { + height: 2em; + display: inline-block; + flex: none; + background: green; + color: white; + margin: 1em; + width: 8em; + } + </style> +</head> +<body> + <p>The test passed if you see a 2*2 table and all the cells are at the top of the container.</p> + <div class="container"> + <span>first</span> + <span>second</span> + <span>third</span> + <span>forth</span> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-001.html b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-001.html new file mode 100644 index 0000000000..ad84dc23fe --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-001.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Flexible Box Test: Aspect ratio handling of images</title> + <link rel="author" title="Google Inc." href="http://www.google.com/" /> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#hypothetical-main-size" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + <style type="text/css"> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-flex { + display: flex; + flex-direction: column; + height: 10px; + } + + img { + min-width: 0; + min-height: 0; + flex: none; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="reference-overlapped-red"></div> + <div id="constrained-flex"> + <img id="test-flex-item-overlapping-green" src="support/100x100-green.png" /> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-002.html b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-002.html new file mode 100644 index 0000000000..3849d454a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-002.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Flexible Box Test: Aspect ratio handling of images</title> + <link rel="author" title="Google Inc." href="http://www.google.com/" /> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#algo-cross-item" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + <meta name="assert" content="Test that we compute the correct aspect-ratio based cross size when a height is specified" /> + <style type="text/css"> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-flex { + display: flex; + flex-direction: column; + height: 10px; + } + + img { + min-width: 0; + min-height: 0; + flex: none; + height: 100px; + align-self: flex-start; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="reference-overlapped-red"></div> + <div id="constrained-flex"> + <img id="test-flex-item-overlapping-green" src="support/100x100-green.png" /> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-003.html b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-003.html new file mode 100644 index 0000000000..a3ee677bd9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-003.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Flexible Box Test: Aspect ratio handling of images</title> + <link rel="author" title="Google Inc." href="http://www.google.com/" /> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#algo-cross-item" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + <meta name="assert" content="Test that we compute the correct aspect-ratio based cross size when a flex-basis is specified" /> + <style type="text/css"> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-flex { + display: flex; + flex-direction: column; + height: 10px; + } + + img { + min-width: 0; + min-height: 0; + flex: none; + flex-basis: 100px; + align-self: flex-start; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="reference-overlapped-red"></div> + <div id="constrained-flex"> + <img id="test-flex-item-overlapping-green" src="support/100x100-green.png" /> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-004.html b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-004.html new file mode 100644 index 0000000000..5ae39e11fe --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-004.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<link rel="author" title="Google LLC" href="http://www.google.com" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#line-sizing" /> +<title>css-flexbox: Tests that we use the aspect ratio to compute the main size</title> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + +<style> +.flex { + display: flex; + width: 100px; + min-height: 500px; + flex-direction: column; +} + +img { + max-width: 100%; + height: 100%; + width: 100%; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div class="flex"> + <img src="support/300x150-green.png"> + <div style="width: 100px; height: 50px; background: green;"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-005.html b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-005.html new file mode 100644 index 0000000000..0bd7ef8b23 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-005.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<link rel="author" title="Google LLC" href="http://www.google.com" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#line-sizing" /> +<title>css-flexbox: Tests that we use the aspect ratio, clamped by min/max, to compute the main size</title> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + +<style> +.flex { + display: flex; + width: 100px; + flex-direction: column; +} + +img { + max-width: 100%; + width: 500px; + min-height: 0; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div class="flex"> + <img src="support/100x100-green.png"> +</div> + diff --git a/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-006.html b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-006.html new file mode 100644 index 0000000000..bb7e2c446c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-006.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<link rel="author" title="Google LLC" href="http://www.google.com" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#line-sizing" /> +<title>css-flexbox: Tests that we use the aspect ratio, clamped by min/max, to compute the main size</title> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + +<style> +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} + +.flex { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + float: left; +} + +img { + min-width: 40px; + min-height: 0; /* Disable min-size: auto. */ +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="width:60px; height: 100px; background: green; float: left;"></div> +<div class="flex"> + <img src="support/20x50-green.png"> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-007.html b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-007.html new file mode 100644 index 0000000000..7e8af7bcdd --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-007.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<link rel="author" title="Google LLC" href="http://www.google.com" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#line-sizing" /> +<title>css-flexbox: Tests that we use the aspect ratio, clamped by min/max, to compute the main size</title> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + +<style> +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} + +.flex { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + width: 200px; + float: left; +} + +img { + min-width: 20%; + min-height: 0; /* Disable min-size: auto. */ +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="width:60px; height: 100px; background: green; float: left;"></div> +<div class="flex"> + <img src="support/20x50-green.png"> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-008.html b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-008.html new file mode 100644 index 0000000000..efdfa35718 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-008.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<link rel="author" title="Google LLC" href="http://www.google.com" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#line-sizing" /> +<title>css-flexbox: Tests that padding % are resolved against parent's inline size when aspect ratio item doesn't have a definite cross size</title> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + +<style> +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} + +.flex { + display: flex; + justify-content: flex-start; + align-items: flex-start; + height: 200px; + writing-mode: vertical-lr; +} + +img { + padding-left: 5%; + min-width: 40px; + min-height: 0; /* Disable min-size: auto. */ + margin-left: -10px; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="width:60px; height: 100px; background: green; float: left;"></div> +<div class="flex"> + <img src="support/20x50-green.png"> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-009.html b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-009.html new file mode 100644 index 0000000000..407a6d9455 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-009.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<link rel="author" title="Google LLC" href="http://www.google.com" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#line-sizing" /> +<title>css-flexbox: multiplying integers by the aspect ratio doesn't accumulate rounding errors</title> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + +<style> +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} + +.flex { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + float: left; +} + +img { + min-width: 0; + min-height: 0; /* Disable min-size: auto so we don't have to think about it. */ + width: 40px; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="width:60px; height: 100px; background: green; float: left;"></div> +<div class="flex"> + <img src="support/20x50-green.png"> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-010.html b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-010.html new file mode 100644 index 0000000000..70ebd378a4 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-010.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="author" title="Google LLC" href="http://www.google.com" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#line-sizing" /> +<title>css-flexbox: Tests that we use the aspect ratio to compute the main size when there is a definite cross size and a specified but indefinite flex-basis</title> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + +<style> +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} + +.flex { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + float: left; +} + +img { + flex: 0 0 0%; + height: 500px; + min-width: 0; + min-height: 0; /* Disable min-size: auto so we don't have to think about it. */ + width: 40px; +} +</style> +<script> +// Force a relayout after the image loads to work around http://crbug.com/1042329 +window.onload = (event) => { + flex.style.width = "50px"; + flex.offsetTop; + flex.style.width = "auto"; + flex.offsetTop; + document.documentElement.classList.remove("reftest-wait") +} +</script> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="width:60px; height: 100px; background: green; float: left;"></div> +<div class="flex" id=flex> + <img src="support/20x50-green.png"> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-011.html b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-011.html new file mode 100644 index 0000000000..f716d5ad6c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-011.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<title>CSS Flexbox: images' aspect ratio in flex box with flex-direction: column for min-size: auto</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#replaced-intrinsic"> +<link rel="help" href="https://crbug.com/581535"> +<link rel="help" href="https://crbug.com/581361"> +<link href="support/flexbox.css" rel="stylesheet"> +<meta name="assert" content="Images maintain aspect ratio in flex box with column direction with min-size: auto."> + +<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" style="width: 10px;" data-expected-width="10"> + <!-- should use content width, clamped by converted max-height, as minimum width. --> + <img src="support/100x100-green.png" style="max-height: 5px;" + data-expected-width="5" data-expected-height="5"> +</div> + +<div class="flexbox" style="width: 10px;" data-expected-width="10"> + <!-- should use min(specified, content width) = 10px as minimum width, + which the image will shrink to due to default flex-shrink. --> + <img src="support/10x10-green.png" style="width: 100px;" data-expected-width="10"> +</div> + +<div class="flexbox" style="width: 10px;" data-expected-width="10"> + <!-- should use content width, clamped by converted min-height, as minimum width. --> + <img src="support/100x100-green.png" style="max-height: 5px;" + data-expected-width="5" data-expected-height="5"> +</div> + +<div class="flexbox" style="width: 10px;" data-expected-width="10"> + <!-- should use content width, clamped by converted min-height, as minimum width. --> + <img src="support/100x100-green.png" style="max-height: 5px; min-height: 10px;" + data-expected-width="10" data-expected-height="10"> +</div> + +<div class="flexbox" style="width: 10px;" data-expected-width="10"> + <!-- transferred and content suggestions are both 100px here, so minimum + width is min(transferred, content width) = 100px. --> + <img src="support/10x10-green.png" style="height: 100px;" data-expected-width="100"> +</div> + +<div class="flexbox column" style="height: 10px;" data-expected-height="10"> + <!-- should use content height, clamped by converted max-width, as minimum height. --> + <img src="support/100x100-green.png" style="max-width: 5px;" + data-expected-width="5" data-expected-height="5"> +</div> + +<div class="flexbox column" style="height: 10px; width: 50px;" data-expected-height="10"> + <!-- should use min(specified=100, content height=50) = 50px as minimum height, + which the image will shrink to due to default flex-shrink. --> + <img src="support/10x10-green.png" style="height: 100px;" data-expected-height="50"> +</div> + +<div class="flexbox" style="height: 10px;" data-expected-height="10"> + <!-- should use content height, clamped by converted min-height, as minimum height. --> + <img src="support/100x100-green.png" style="max-height: 5px;" + data-expected-height="5" data-expected-height="5"> +</div> + +<div class="flexbox" style="height: 10px;" data-expected-height="10"> + <!-- should use content height, clamped by converted min-width, as minimum height. --> + <img src="support/100x100-green.png" style="max-width: 5px; min-width: 10px;" + data-expected-height="10" data-expected-width="10"> +</div> + +<div class="flexbox column" style="height: 10px;" data-expected-height="10"> + <!-- should use min(transferred (100), content height (100)) = 100px as + minimum height, which will be final height of the image --> + <img src="support/10x10-green.png" style="width: 100px;" data-expected-height="100"> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-012.html b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-012.html new file mode 100644 index 0000000000..e78ededfb2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-012.html @@ -0,0 +1,16 @@ +<!doctype html> +<title>Aspect-ratio flex item</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Part E"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="flex base size is not influenced by specified min-height for aspect ratio items"> + +<p>Test passes if there is a filled green square.</p> + +<!-- Chrome 86 makes the green rectangle be 100 x 149.5 --> + +<!-- Make this align-items:flex-start because with align-items:stretch, 100x149.5 is the right size due to Part B of the flex base size algorithm. --> +<div style="display: flex; flex-direction: column; width:100px; height: 200px; align-items: flex-start;"> + <img style="min-height: 100px; flex: 1 0 auto;" src="support/1x1-green.png"> + <div style="flex: 1 0 1px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-013.html b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-013.html new file mode 100644 index 0000000000..81640d518c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-013.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>SVG img as flex item</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Part E"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="SVG's specified intrinsic height is honored when used as a flex base size and no intrinsic width is specified." /> + +<p>Test passes if there is a filled green square.</p> + +<div style="display: flex; width: 100px; height: 100px; align-items: flex-start;"> + <img src="data:image/svg+xml,%3Csvg viewBox='0 0 400 200' height='50px' xmlns='http://www.w3.org/2000/svg' %3E%3Crect width='100%' height='100%' fill='green' /%3E%3C/svg%3E" style="border-top: 50px solid green; min-height: 0px;"> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-014.html b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-014.html new file mode 100644 index 0000000000..b4f2b223cf --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-014.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>SVG img as flex item</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Part E"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#min-max-widths" title="w > max-width line of the table"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Flex base size of image item with aspect ratio + intrinsic width + no intrinsic height honors transferred max-width." /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: flex; flex-direction: column; width: 100px; align-items: flex-start"> + <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='200'%3E%3Crect width='100%25' height='100%25' fill='green'/%3E%3C/svg%3E" style="max-width: 100px; flex: 0 0 auto; background: red;"> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-015.html b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-015.html new file mode 100644 index 0000000000..688955db0e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-015.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>SVG img as flex item</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Part E"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#min-max-widths" title="h > max-height line of the table"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Flex base size of image item with aspect ratio + intrinsic height + no intrinsic width honors transferred max-width." /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: flex; flex-direction: column; width: 100px; align-items: flex-start"> + <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' height='200'%3E%3Crect width='100%25' height='100%25' fill='green'/%3E%3C/svg%3E" style="max-width: 100px; flex: 0 0 auto; background: red;"> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-016.html b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-016.html new file mode 100644 index 0000000000..473aea9e4b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-016.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>Aspect-ratio items with undefined specified size suggestion</title> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1667668"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="Flex item with auto height and fixed max-height (in a column-oriented flex container) should have an undefined specified size suggestion."> + +<p>Test passes if there is a filled green square.</p> +<div style="display: flex; flex-direction: column; "> + <img src="support/200x200-green.png" style="max-height:150px; width:100px;"> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-017.html b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-017.html new file mode 100644 index 0000000000..b2b97f0a31 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-017.html @@ -0,0 +1,34 @@ +<!doctype html> +<title>Non aspect-ratio svg flex item</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> +<meta name="assert" content="Specified height on an svg image with no aspect ratio or intrinsic height is not the automatic minimum size." /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<div id=log></div> + +<pre> +Specified size suggestion = 200px +Content size suggestion = 150px [1] +Automatic minimum height = min(150px, 200px) + +[1] fallback size from last bullet point in https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes : + +For boxes without a preferred aspect ratio: + * If the available space is definite in the appropriate dimension, use the stretch fit into that size in that dimension. + * Otherwise, if the box has a <length> as its computed minimum size (min-width/min-height) in that dimension, use that size. + * Otherwise, use 300px for the width and/or 150px for the height as needed. + +</pre> +Pass condition: there is a 150x150 green square. +<div style="display: flex; flex-direction: column; height: 0px; width: 150px;"> + <img src='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" />' style="height: 200px; background: green;" data-expected-height=150> +</div> + +<script> +checkLayout('img'); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-018.html b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-018.html new file mode 100644 index 0000000000..04b12875c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-column-018.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>SVG as flex item</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Part E"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#min-max-widths"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="Flex base size of svg item with aspect ratio + no intrinsic width or height honors transferred max-width." /> + +<p>Test passes if there is a filled green square.</p> + +<div style="display: flex; flex-direction: column; align-items: flex-start; width: 200px;"> + <svg viewBox="0 0 1 1" style="max-width: 100px; background: green;"></svg> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-001.html b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-001.html new file mode 100644 index 0000000000..14fabf760c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-001.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Flexible Box Test: Aspect ratio handling of images</title> + <link rel="author" title="Google Inc." href="http://www.google.com/" /> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#hypothetical-main-size" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + <style type="text/css"> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-flex { + display: flex; + width: 10px; + } + + img { + min-width: 0; + min-height: 0; + flex: none; + height: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="reference-overlapped-red"></div> + <div id="constrained-flex"> + <img id="test-flex-item-overlapping-green" src="support/100x100-green.png" /> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-002.html b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-002.html new file mode 100644 index 0000000000..9f2c63240f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-002.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Flexible Box Test: Aspect ratio handling of images</title> + <link rel="author" title="Google Inc." href="http://www.google.com/" /> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#algo-cross-item" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + <meta name="assert" content="Test that we compute the correct aspect-ratio based cross size when a width is specified" /> + <style type="text/css"> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-flex { + display: flex; + width: 10px; + } + + img { + min-width: 0; + min-height: 0; + flex: none; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="reference-overlapped-red"></div> + <div id="constrained-flex"> + <img id="test-flex-item-overlapping-green" src="support/100x100-green.png" /> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-003.html b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-003.html new file mode 100644 index 0000000000..a3a8e4a0e3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-003.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Flexible Box Test: Aspect ratio handling of images</title> + <link rel="author" title="Google Inc." href="http://www.google.com/" /> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#algo-cross-item" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + <meta name="assert" content="Test that we compute the correct aspect-ratio based cross size when a flex-basis is specified" /> + <style type="text/css"> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-flex { + display: flex; + width: 10px; + } + + img { + min-width: 0; + min-height: 0; + flex: none; + flex-basis: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="reference-overlapped-red"></div> + <div id="constrained-flex"> + <img id="test-flex-item-overlapping-green" src="support/100x100-green.png" /> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-004.html b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-004.html new file mode 100644 index 0000000000..0ef4966203 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-004.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="author" title="Google LLC" href="http://www.google.com" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#line-sizing" /> +<title>css-flexbox: Tests that we use the aspect ratio, clamped by cross min/max, to compute the main size.</title> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + +<style> +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} + +#flex { + display: flex; + justify-content: flex-start; + align-items: flex-start; +} + +img { + min-width: 0; /* Disable min-size: auto so we don't have to think about it. */ + min-height: 100px; +} +</style> +<script> +// Force a relayout after the image loads to work around http://crbug.com/1042329 +window.onload = (event) => { + flex.style.width = "50px"; + flex.offsetTop; + flex.style.removeProperty("width"); + flex.offsetTop; + document.documentElement.classList.remove("reftest-wait") +} +</script> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="width:60px; height: 100px; background: green; float: left;"></div> +<div id="flex"> + <img src="support/20x50-green.png"> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-005.html b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-005.html new file mode 100644 index 0000000000..451099614c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-005.html @@ -0,0 +1,53 @@ +<!doctype html> +<title>Aspect-ratio items with borders</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Section B"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#transferred-size-suggestion"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#content-size-suggestion"> +<meta name="assert" content="Multiplying cross size by aspect ratio should operate on content box only."> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<style> +img { + border-top: 50px solid blue; + border-left: 10px solid orange; +} + +.flexbox { + display: flex; + margin-bottom: 20px; +} +</style> + +<!-- script after body was flakily triggering before images were loaded, so wait for onload --> +<body onload="checkLayout('img')"> + +<p> +The green boxes should all be 100x100. +</p> + +Section B of flex base size + transferred size suggestion: +<div class=flexbox> + <img style="height: 100px;" src="support/200x200-green.png" data-expected-client-width=100 data-expected-client-height=100 /> +</div> + +Section B of flex base size + transferred size suggestion, with box-sizing: border-box: +<!-- Chrome 83 fails the border-box version. --> +<div class=flexbox> + <img style="height: 150px; box-sizing: border-box;" src="support/200x200-green.png" data-expected-client-width=100 data-expected-client-height=100 /> +</div> + +content size suggestion +<div class=flexbox> + <img style="max-height: 100px;" src="support/200x200-green.png" data-expected-client-width=100 data-expected-client-height=100 /> +</div> + +content size suggestion +<div class=flexbox> + <img style="min-height: 100px;" src="support/60x60-green.png" data-expected-client-width=100 data-expected-client-height=100 /> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-006.html b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-006.html new file mode 100644 index 0000000000..2d6f0857a2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-006.html @@ -0,0 +1,15 @@ +<!doctype html> +<title>Aspect-ratio items with definite cross sizes from stretching</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Section B"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes" title="1."> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="Flex base size is derived from aspect ratio when item has definite cross size due to stretching."> + +<p>Test passes if there is a filled green square.</p> + +<!-- Firefox 80 and Chrome 86 fail this test identically. They both show a 150x100 green rectangle. --> + +<div style="display: flex; width: 150px; height: 100px;"> + <img src="support/200x200-green.png" style="min-width: 0px; flex-shrink: 0;"> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-007.html b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-007.html new file mode 100644 index 0000000000..4244147758 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-007.html @@ -0,0 +1,15 @@ +<!doctype html> +<title>Aspect-ratio flex item</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Part E"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="flex base size is not influenced by specified min-width for aspect ratio items"> + +<p>Test passes if there is a filled green square.</p> + +<!-- Chrome 86 makes the green rectangle be 149.5 x 100. --> + +<div style="display: flex; width:200px;"> + <img style="min-width: 100px; flex: 1 0 auto;" src="support/1x1-green.png"> + <div style="flex: 1 0 1px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-008.html b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-008.html new file mode 100644 index 0000000000..58dee77510 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-008.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>SVG img as flex item</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Part E"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="SVG's specified intrinsic width is honored when used as a flex base size and no intrinsic height is specified." /> + +<p>Test passes if there is a filled green square.</p> + +<div style="display: flex; width: 100px;"> + <img src="data:image/svg+xml,%3Csvg viewBox='0 0 200 400' width='50px' xmlns='http://www.w3.org/2000/svg' %3E%3Crect width='100%' height='100%' fill='green' /%3E%3C/svg%3E" style="border-left: 50px solid green; min-width: 0px;"> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-009.html b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-009.html new file mode 100644 index 0000000000..e7dc55d271 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-009.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>SVG img as flex item</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Part E"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="min-width: auto honor's an SVG's intrinsic width when it has an aspect ratio and no specified intrinsic height." /> + +<style> +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} +</style> + +<!-- Firefox 81b8 fails this test, probably because of https://bugzilla.mozilla.org/show_bug.cgi?id=1136312 --> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id=reference-overlapped-red></div> + +<div style="display: flex; width: 50px;"> + <img src="data:image/svg+xml,%3Csvg viewBox='0 0 200 400' width='50px' xmlns='http://www.w3.org/2000/svg' %3E%3Crect width='100%' height='100%' fill='green' /%3E%3C/svg%3E" style="border-left: 50px solid green;"> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-010.html b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-010.html new file mode 100644 index 0000000000..f57ba6f625 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-010.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>SVG img as flex item</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Part E"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#min-max-widths" title="h > max-height line of the table"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Flex base size of image item with aspect ratio + intrinsic width + no intrinsic height honors transferred max-height." /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: flex;"> + <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='200'%3E%3Crect width='100%25' height='100%25' fill='green'/%3E%3C/svg%3E" style="max-height: 100px; flex: 0 0 auto; background: red;"> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-011.html b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-011.html new file mode 100644 index 0000000000..4c10b513fd --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-011.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>SVG img as flex item</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Part E"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#min-max-widths" title="h > max-height line of the table"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Flex base size of image item with aspect ratio + intrinsic height + no intrinsic width honors transferred max-height." /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: flex;"> + <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' height='200'%3E%3Crect width='100%25' height='100%25' fill='green'/%3E%3C/svg%3E" style="max-height: 100px; flex: 0 0 auto; background: red;"> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-012.html b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-012.html new file mode 100644 index 0000000000..35806891e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-012.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>Aspect-ratio items with undefined specified size suggestion</title> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1667668"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="Flex item with auto width and fixed max-width (in a row-oriented flex container) should have an undefined specified size suggestion."> + +<p>Test passes if there is a filled green square.</p> +<div style="display: flex;"> + <img src="support/200x200-green.png" style="max-width:150px; height:100px;"> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-013.html b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-013.html new file mode 100644 index 0000000000..09a177d2f7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-013.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#transferred-size-suggestion"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5663"> +<meta name="assert" content="Transferred size suggestion can get its cross size from stretching." /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('img')"> +<p> +Pass condition is 4 green 100x100 squares and 1 0x0 square. +</p> + +<p> +Firefox 84a1 passes. Chrome 87 fails them all by making the green rectangles be 200x100. +</p> + +<p>Transferred size suggestion is the stretched 100px:</p> +<div style="display: flex; width: 0; height: 100px;"> + <img src="support/200x200-green.png" data-expected-height=100 data-expected-width=100> +</div> + +<p>Have to subtract the margin from the stretched height to get the transferred size suggestion:</p> +<div style="display: flex; width: 0; height: 120px;"> + <img src="support/200x200-green.png" style="margin-bottom: 20px" data-expected-height=100 data-expected-width=100> +</div> + +<p>Have to subtract a margin larger than the stretched height to get 0px transferred size suggestion:</p> +<div style="display: flex; width: 0; height: 120px;"> + <img src="support/200x200-green.png" style="margin-bottom: 160px" data-expected-height=0 data-expected-width=0> +</div> + +<p>Have to subtract the margin from the stretched height (ignoring the presence of a border) to get the transferred size suggestion:</p> +<div style="display: flex; width: 0; height: 120px;"> + <img src="support/200x200-green.png" style="border-right: 10px solid black; margin-bottom: 20px" data-expected-height=100 data-expected-width=110> +</div> + +<p>Stretched transferred size suggestion has to obey min-height:</p> +<div style="display: flex; width: 0; height: 50px;"> + <img src="support/200x200-green.png" style="min-height: 100px;" data-expected-height=100 data-expected-width=100> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-014.html b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-014.html new file mode 100644 index 0000000000..9f12b65f84 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-014.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>CSS Flexible Box Test: Aspect ratio handling of images</title> +<link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#algo-cross-item" /> +<link rel="match" href="reference/flex-aspect-ratio-img-row-014-ref.html" /> +<meta name="assert" content="Test that we compute the correct aspect-ratio based cross size when a percentage main size is specified" /> + +<style> +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 90px; + height: 225px; + z-index: -1; +} +#constrained-flex { + display: flex; + width: 300px; + border: 1px solid black; +} +img { + min-width: 0; + min-height: 0; + width: 30%; +} +</style> + +<p>Test passes if there is <strong>no red</strong> visible on the page.</p> + +<div id="reference-overlapped-red"></div> +<div id="constrained-flex"> + <img id="test-flex-item-overlapping-green" src="support/20x50-green.png" /> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-015.html b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-015.html new file mode 100644 index 0000000000..e288290360 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-015.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>SVG as flex item</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Part E"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#min-max-widths"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="Flex base size of svg item with aspect ratio + no intrinsic width or height honors transferred max-height." /> + +<p>Test passes if there is a filled green square.</p> + +<div style="display: flex; align-items: flex-start; height: 200px;"> + <svg viewBox="0 0 1 1" style="max-height: 100px; background: green;"></svg> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-016.html b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-016.html new file mode 100644 index 0000000000..0c5135afed --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-016.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>aspect-ratio flex item</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Part E"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="% max-height is updated when height of parent changes when %max-height affects max-content size of item"> + +<style> +#target { + display: flex; + align-items: start; + width: 50px; + height: 50px; +} + +img { + /* Remove min-width:auto because it complicates things. */ + min-width: 0px; + max-height: 100%; + background: green; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="target"> + <!-- This image's natural size is 1000x1000 --> + <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAPoAQMAAAB3bUanAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAKpJREFUeNrswYEAAAAAgKD9qRepAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABg9uBAAAAAAADI/7URVFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVWlPTgkAAAAABD0/7UrbAAAAADMAuw/AAGdJWCbAAAAAElFTkSuQmCC +"> +</div> + +<script> +document.body.offsetTop; +target.style.width = '100px'; +document.body.offsetTop; +target.style.height = '100px'; +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-017.html b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-017.html new file mode 100644 index 0000000000..b2408159b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-017.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1700474"> +<link rel="help" href="https://crbug.com/1337056"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" + content="specified size suggestion obeys item's resolvable % main size"> + +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> + +<div id="reference-overlapped-red"></div> + +<div style="display: flex; width: 100px;"> + <img src="support/100x100-green.png" style="width: 100%; flex: 0 0 10px;"> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-basis-001.html b/testing/web-platform/tests/css/css-flexbox/flex-basis-001.html new file mode 100644 index 0000000000..85e3bc69c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-basis-001.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-basis - positive number</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Intel" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.3.3. The 'flex-basis' property" href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The 'flex-basis' property set positive number, the actual value of test element size is same as the positive number"> +<style> + #container { + background-color: red; + display: flex; + height: 100px; + width: 100px; + } + #container div{ + background-color: green; + height: 100px; + } + #test { + flex-basis: 60px; + } + #ref { + width: 40px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="test"></div> + <div id="ref"></div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-basis-002.html b/testing/web-platform/tests/css/css-flexbox/flex-basis-002.html new file mode 100644 index 0000000000..bbeb8fd6cc --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-basis-002.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-basis - positive number</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Intel" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.3.3. The 'flex-basis' property" href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The 'flex-basis' property specified correct value, the actual value of test element size is same as to the value of 'flex-basis' property, and the 'width' property is invalid."> +<style> + #container { + background-color: red; + display: flex; + height: 100px; + width: 100px; + } + #container div{ + height: 100px; + } + #test { + flex-basis: 60px; + width: 80px; + } + #ref { + background-color: green; + width: 40px; + } + #cover { + background-color: green; + height: 100px; + margin-top: -100px; + width: 60px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="test"></div> + <div id="ref"></div> + </div> + <div id="cover"></div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-basis-003.html b/testing/web-platform/tests/css/css-flexbox/flex-basis-003.html new file mode 100644 index 0000000000..48fd3362a5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-basis-003.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-basis - negative number(width not specified)</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Intel" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.3.3. The 'flex-basis' property" href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The 'flex-basis' property set negative number, the tested element is not shown when width not set either."> +<style> + #container { + background-color: red; + display: flex; + height: 100px; + width: 100px; + } + #container div{ + height: 100px; + } + #test { + flex-basis: -50px; + } + #ref { + background-color: green; + width: 50px; + } + #cover { + background-color: green; + height: 100px; + margin-left: 50px; + margin-top: -100px; + width: 50px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="test"></div> + <div id="ref"></div> + </div> + <div id="cover"></div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-basis-004.html b/testing/web-platform/tests/css/css-flexbox/flex-basis-004.html new file mode 100644 index 0000000000..7e2d3c9ea5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-basis-004.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-basis - negative number(width specified)</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Intel" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.3.3. The 'flex-basis' property" href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The 'flex-basis' property set negative number, the actual width of tested element is +same as the value of 'width' property specified."> +<style> + #container { + background-color: red; + display: flex; + height: 100px; + width: 100px; + } + #container div{ + background-color: green; + height: 100px; + } + #test { + flex-basis: -50px; + width: 30px; + } + #ref { + width: 50px; + } + #cover { + background-color: green; + height: 100px; + margin-left: 80px; + margin-top: -100px; + width: 20px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="test"></div> + <div id="ref"></div> + </div> + <div id="cover"></div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-basis-005.html b/testing/web-platform/tests/css/css-flexbox/flex-basis-005.html new file mode 100644 index 0000000000..67efac4bbb --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-basis-005.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-basis - 0</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Intel" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.3.3. The 'flex-basis' property" href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The 'flex-basis' property set '0', the actual width of tested element is same as 0."> +<style> + #container { + background-color: green; + display: flex; + height: 100px; + width: 100px; + } + #test { + background-color: red; + flex-basis: 0; + height: 100px; + width: 100px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="test"></div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-basis-006.html b/testing/web-platform/tests/css/css-flexbox/flex-basis-006.html new file mode 100644 index 0000000000..641718cea1 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-basis-006.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-basis - 0%</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Intel" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.3.3. The 'flex-basis' property" href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The 'flex-basis' property set '0%', the actual width of tested element is same as 0."> +<style> + #container { + background-color: green; + display: flex; + height: 100px; + width: 100px; + } + #test { + background-color: red; + flex-basis: 0%; + height: 100px; + width: 100px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="test"></div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-basis-007.html b/testing/web-platform/tests/css/css-flexbox/flex-basis-007.html new file mode 100644 index 0000000000..e99a4420fc --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-basis-007.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-basis - auto</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Intel" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.3.3. The 'flex-basis' property" href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The 'flex-basis' property set 'auto', the actual width of tested element same as the value which specified by width property."> +<style> + #container { + background-color: red; + display: flex; + height: 100px; + width: 100px; + } + #container div{ + background-color: green; + height: 100px; + } + #ref { + width: 50px; + } + #test { + flex-basis: auto; + width: 50px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="test"></div> + <div id="ref"></div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-basis-008.html b/testing/web-platform/tests/css/css-flexbox/flex-basis-008.html new file mode 100644 index 0000000000..26c8cb3c78 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-basis-008.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-basis - 50%</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Intel" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.3.3. The 'flex-basis' property" href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The 'flex-basis' property set positive percentage, the actual width of tested element same as the percentage of flex container size."> +<style> + #container { + background-color: red; + display: flex; + height: 100px; + width: 100px; + } + #container div{ + background-color: green; + height: 100px; + } + #ref { + width: 40px; + } + #test { + flex-basis: 60%; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="ref"></div> + <div id="test"></div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-basis-009.html b/testing/web-platform/tests/css/css-flexbox/flex-basis-009.html new file mode 100644 index 0000000000..f78c7085b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-basis-009.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src='/resources/check-layout-th.js'></script> +<link rel="author" title="David Grogan" href="dgrogan@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#valdef-flex-basis-auto"> +<meta name="assert" content="flex-basis:auto on orthogonal item in horizontal column flexbox is calculated correctly" /> + +<style> +x-word-h { + display: inline-block; + height: 10px; + width: 20px; + background: blue; +} + +x-word-v { + display: inline-block; + height: 20px; + width: 10px; + background: blue; +} + +* { + /* This is for easier manual calculations, not necessary to demonstrate behavior. */ + line-height: 0; +} +</style> + +<div id=flexbox style="width:150px; background:green; height:400px; display:flex; flex-direction:column"> + <div style="writing-mode: vertical-rl;background:orange; flex:1 1 auto" data-expected-height=225> + <x-word-v></x-word-v><x-word-v></x-word-v><x-word-v></x-word-v> + </div> + <div style="background:lightblue; flex: 1 1 auto"> + <x-word-h></x-word-h><x-word-h></x-word-h><x-word-h></x-word-h> + </div> +</div> + +<script> +checkLayout('#flexbox'); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-basis-010.html b/testing/web-platform/tests/css/css-flexbox/flex-basis-010.html new file mode 100644 index 0000000000..79992974b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-basis-010.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: Indefinite % flex-basis should cause height to be ignored</title> +<link rel="author" title="Google LLC" href="https://www.google.com"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + #container { + background-color: red; + display: flex; + width: 100px; + flex-direction: column; + } + #item { + flex: 0 0 0%; + height: 500px; + background-color: red; + } + #child { + height: 100px; + background-color: green; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="item"> + <div id="child"></div> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-basis-011-ref.html b/testing/web-platform/tests/css/css-flexbox/flex-basis-011-ref.html new file mode 100644 index 0000000000..8c9d248efa --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-basis-011-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com"> +<link href="support/flexbox.css" rel="stylesheet"> +<style> +.flex-item { + flex: 1 0 auto; + height: 100%; + border: 1px solid blue; +} +</style> + +<div class="flexbox"> + <div class="flexbox column"> + <div class="flex-item"> + <div>AAA</div> + </div> + <div class="flex-item"> + <div>BBB</div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-basis-011.html b/testing/web-platform/tests/css/css-flexbox/flex-basis-011.html new file mode 100644 index 0000000000..9edb5dc975 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-basis-011.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: % flex-basis should not cause engines to treat items as percentage sized</title> +<link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property"> +<link href="support/flexbox.css" rel="stylesheet"> +<link rel="match" href="flex-basis-011-ref.html"> +<style> +.flex-item { + flex: 1 0 100%; + border: 1px solid blue; +} +</style> + +<div class="flexbox"> + <div class="flexbox column"> + <div class="flex-item"> + <div>AAA</div> + </div> + <div class="flex-item"> + <div>BBB</div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-basis-012.html b/testing/web-platform/tests/css/css-flexbox/flex-basis-012.html new file mode 100644 index 0000000000..b1adddeb23 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-basis-012.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1199632"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display: flex; flex-direction: column; width: 100px;"> + <div style="display: flex; flex-direction: column; height: 100px; background: red;"> + <div style="flex-basis: 100%; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-basis-intrinsics-001.html b/testing/web-platform/tests/css/css-flexbox/flex-basis-intrinsics-001.html new file mode 100644 index 0000000000..164abd82e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-basis-intrinsics-001.html @@ -0,0 +1,113 @@ +<!DOCTYPE html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src='/resources/check-layout-th.js'></script> +<link rel="author" title="David Grogan" href="dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-basis-property"> +<meta name="assert" content="flex-basis:min/max/fit-content works in row and column flexboxes when the items have either parallel or orthogonal writing modes" /> + +<style> +.inline-block { + float: left; + height: 50px; + width: 50px; + background: blue; +} + +.flexbox { + display: flex; + width: 75px; + height: 75px; + margin-bottom: 50px; +} + +.flex-item { + flex-shrink: 0; + min-width: 0px; + min-height: 0px; + background: green; +} + +.ortho-item { + writing-mode: vertical-rl; +} + +</style> + +<div id=log></div> + +<div class=flexbox> + <div class=flex-item style="flex-basis: min-content;" data-expected-width=50> + <div class=inline-block></div><div class=inline-block></div> + </div> +</div> + +<div class=flexbox> + <div class=flex-item style="flex-basis: max-content; width: 300px;" data-expected-width=100> + <div class=inline-block></div><div class=inline-block></div> + </div> +</div> + +<div class=flexbox> + <div class=flex-item style="flex-basis: fit-content;" data-expected-width=75> + <div class=inline-block></div><div class=inline-block></div> + </div> +</div> + +<div class=flexbox style="flex-flow: column;"> + <div class=flex-item style="flex-basis: min-content;" data-expected-height=100> + <div class=inline-block></div><div class=inline-block></div> + </div> +</div> + +<div class=flexbox style="flex-flow: column;"> + <div class=flex-item style="flex-basis: max-content;" data-expected-height=100> + <div class=inline-block></div><div class=inline-block></div> + </div> +</div> + +<div class=flexbox style="flex-flow: column;"> + <div class=flex-item style="flex-basis: fit-content;" data-expected-height=100> + <div class=inline-block></div><div class=inline-block></div> + </div> +</div> + +<div class=flexbox> + <div class="flex-item ortho-item" style="flex-basis: min-content;" data-expected-width=100> + <div class=inline-block></div><div class=inline-block></div> + </div> +</div> + +<div class=flexbox> + <div class="flex-item ortho-item" style="flex-basis: max-content; width: 300px;" data-expected-width=100> + <div class=inline-block></div><div class=inline-block></div> + </div> +</div> + +<div class=flexbox> + <div class="flex-item ortho-item" style="flex-basis: fit-content;" data-expected-width=100> + <div class=inline-block></div><div class=inline-block></div> + </div> +</div> + +<div class=flexbox style="flex-flow: column;"> + <div class="flex-item ortho-item" style="flex-basis: min-content;" data-expected-height=50> + <div class=inline-block></div><div class=inline-block></div> + </div> +</div> + +<div class=flexbox style="flex-flow: column;"> + <div class="flex-item ortho-item" style="flex-basis: max-content;" data-expected-height=100> + <div class=inline-block></div><div class=inline-block></div> + </div> +</div> + +<div class=flexbox style="flex-flow: column;"> + <div class="flex-item ortho-item" style="flex-basis: fit-content;" data-expected-height=75> + <div class=inline-block></div><div class=inline-block></div> + </div> +</div> + +<script> +checkLayout('.flex-item'); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-basis-item-margins-001.html b/testing/web-platform/tests/css/css-flexbox/flex-basis-item-margins-001.html new file mode 100644 index 0000000000..fe732443e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-basis-item-margins-001.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>Flexbox: margins and available space</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Case E"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="An item's inline margins are subtracted from available space when laying out to determine flex-basis in a column container." /> + +<style> +.inline-block { + display: inline-block; + width: 40px; + height: 50px; +} + +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> + +<div style="display: flex; flex-direction: column; width: 100px; background: green;"> + <!-- 21px makes the inline-blocks wrap --> + <div style="margin-right: 21px; flex: 0 0 auto; line-height: 0px;"> + <div class="inline-block"></div><div class="inline-block"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-box-wrap.html b/testing/web-platform/tests/css/css-flexbox/flex-box-wrap.html new file mode 100644 index 0000000000..7d6c6a9567 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-box-wrap.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Flexbox Test: flex-wrap: wrap</title> + <link rel="author" title="Tsuyoshi Tokuda" href="mailto:tokuda109@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> + <link rel="match" href="reference/flex-box-wrap-ref.html"> + <meta name="assert" content="the test passes if you see green box."> + <style type="text/css"> + + .flex-box { + position: relative; + display: flex; + flex-wrap: wrap; + margin: 0; + padding-left: 0; + width: 200px; + } + .flex-item, + .error { + list-style-type: none; + width: 120px; + height: 100px; + background-color: green; + } + .error { + position: absolute; + top: 100px; + left: 0; + background-color: red; + z-index: -1; + } + + </style> +</head> +<body> + <p>There should be a green block with no red.</p> + + <ul class="flex-box"> + <li class="flex-item">width: 120px</li> + <li class="flex-item">width: 120px</li> + <li class="error"></li> + </ul> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-child-percent-basis-resize-1-ref.html b/testing/web-platform/tests/css/css-flexbox/flex-child-percent-basis-resize-1-ref.html new file mode 100644 index 0000000000..2ee6b077d3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-child-percent-basis-resize-1-ref.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference: bug 1584018</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> + +<style> + .container { + width: 100px; + height: 100px; + } + + .scroll-inner { + overflow:scroll; + height:100%; + } + +</style> + +<div class="container"> + <div class="scroll-inner"> + <div>0</div> + <div>1</div> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> + <div>6</div> + <div>7</div> + <div>8</div> + <div>9</div> + <div>0</div> + <div>1</div> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> + <div>6</div> + <div>7</div> + <div>8</div> + <div>9</div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-child-percent-basis-resize-1.html b/testing/web-platform/tests/css/css-flexbox/flex-child-percent-basis-resize-1.html new file mode 100644 index 0000000000..7631e02a22 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-child-percent-basis-resize-1.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Testcase, bug 1584018</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1584018"> +<link rel="match" href="flex-child-percent-basis-resize-1-ref.html"> + +<style> + .flex-container { + display: flex; + flex-direction: row; + width: 100px; + } + + .flex-item { + flex: 1 0 auto; + } + + .scroll-outer { + overflow:hidden; + /* this combination is important */ + height: 100%; + max-height: 100px; + } + + .scroll-inner { + overflow:scroll; + height:100%; + } + +</style> + +<div class="flex-container"> + <div class="flex-item"> + <div class="scroll-outer"> + <div class="scroll-inner"> + <div>0</div> + <div>1</div> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> + <div>6</div> + <div>7</div> + <div>8</div> + <div>9</div> + <div>0</div> + <div>1</div> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> + <div>6</div> + <div>7</div> + <div>8</div> + <div>9</div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-column-relayout-assert.html b/testing/web-platform/tests/css/css-flexbox/flex-column-relayout-assert.html new file mode 100644 index 0000000000..b116987ad3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-column-relayout-assert.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>CSS Flexbox: Column height with padding</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/#item-margins"> +<meta name="assert" content="This test checks that height of flex container works with padding"> +<style> +.flexbox { + background-color: green; +} +</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> + +<p>You should see a green rectangle, 40px high.</p> + +<div class="flexbox column" data-expected-height="40"> + <div id="child" data-expected-height="40"></div> +</div> + +<script> +document.getElementById('child').offsetHeight; +document.getElementById('child').style.padding = "20px"; +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-container-margin.html b/testing/web-platform/tests/css/css-flexbox/flex-container-margin.html new file mode 100644 index 0000000000..4ea7441cb0 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-container-margin.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Test: flex-container-margin-not-collapse-with-content-margin</title> +<link rel="author" title="houzhenyu" href="http://www.github.com/sskyy" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#item-margins"> +<link rel="match" href="reference/flex-container-margin-ref.html"> +<meta name="assert" content="The margins of adjacent flex items do not collapse." /> +<style> + .flex-container{ + display: flex; + margin:20px; + background: #333; + } + .flex-item{ + width:50px; + height:50px; + margin:20px; + background: #eee; + } +</style> +</head> +<body> + <div class="flex-container"> + <div class="flex-item"></div> + <div class="flex-item"></div> + <div class="flex-item"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-container-max-content-001-ref.html b/testing/web-platform/tests/css/css-flexbox/flex-container-max-content-001-ref.html new file mode 100644 index 0000000000..d5b9ad0f1f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-container-max-content-001-ref.html @@ -0,0 +1,402 @@ +<!DOCTYPE html> +<title>Flex Container Min-Content Main Sizing: Flex Item Min-Content Contributions Reference</title> + +<style> +@import "/fonts/ahem.css"; /* optional */ + +body { + /* Fit it in 800x600 pixels */ + display: grid; + grid-template-columns: repeat(auto-fill, 66px 66px 66px); + grid-auto-rows: 50px; + font: 10px/1 Ahem, monospace; +} + +.wrap { + counter-increment: test; +} + +.row, .col { + background: blue; + padding: 5px; + float: left; +} + +.item { + padding: 3px; + border: 2px solid aqua; + color: orange; +} + + +/* help people debugging */ +.wrap:hover::before { + content: counter(test, decimal-leading-zero); + position: absolute; + font: initial; +} +</style> + +<!-- + + { row | col } x { flexible | no-grow | no-shrink } x { no | small | large } pref size x { harmonious | disjoint larger | disjoint smaller } flex basis } + +--> + +<!-- 01 row x flexible x none x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 3ch">X X</div> + </div> +</div> + +<!-- 02 row x flexible x small x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 3ch">X X</div> + </div> +</div> + +<!-- 03 row x flexible x large x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 4ch">X X</div> + </div> +</div> + + +<!-- 04 row x flexible x none x disjoint --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 3ch">X X</div> + </div> +</div> + +<!-- 05 row x flexible x small x disjoint --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 3ch">X X</div> + </div> +</div> + +<!-- 06 row x flexible x large x disjoint --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 4ch">X X</div> + </div> +</div> + + + +<!-- 07 row x no-grow x none x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 3ch">X X</div> + </div> +</div> + +<!-- 08 row x no-grow x small x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 0.4ch">X X</div> + </div> +</div> + +<!-- 09 row x no-grow x large x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 4ch">X X</div> + </div> +</div> + + +<!-- 10 row x no-grow x none x larger --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 3ch">X X</div> + </div> +</div> + +<!-- 11 row x no-grow x small x larger --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 3ch">X X</div> + </div> +</div> + +<!-- 12 row x no-grow x large x larger --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 4ch">X X</div> + </div> +</div> + + +<!-- 13 row x no-grow x none x smaller --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 0.2ch">X X</div> + </div> +</div> + +<!-- 14 row x no-grow x smaller x smaller --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 0.2ch">X X</div> + </div> +</div> + +<!-- 15 row x no-grow x larger x smaller --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 0.2ch">X X</div> + </div> +</div> + + + +<!-- 16 row x no-shrink x none x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 3ch">X X</div> + </div> +</div> + +<!-- 17 row x no-shrink x small x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 3ch">X X</div> + </div> +</div> + +<!-- 18 row x no-shrink x large x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 4ch">X X</div> + </div> +</div> + + +<!-- 19 row x no-shrink x none x larger --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 4.5ch">X X</div> + </div> +</div> + +<!-- 20 row x no-shrink x small x larger --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 4.5ch">X X</div> + </div> +</div> + +<!-- 21 row x no-shrink x large x larger --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 4.5ch">X X</div> + </div> +</div> + + +<!-- 22 row x no-shrink x none x smaller --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 3ch">X X</div> + </div> +</div> + +<!-- 23 row x no-shrink x smaller x smaller --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 3ch">X X</div> + </div> +</div> + +<!-- 24 row x no-shrink x larger x smaller --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 4ch">X X</div> + </div> +</div> + + +<!-- ###################################################################### --> + + +<!-- 01 col x flexible x none x harmonious --> +<div class="wrap" style="counter-reset: test; grid-column: 1"> <!-- new section --> + <div class="col"> + <div class="item" style="height: 1em">X</div> + </div> +</div> + +<!-- 02 col x flexible x small x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1em">X</div> + </div> +</div> + +<!-- 03 col x flexible x large x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1.5em">X</div> + </div> +</div> + + +<!-- 04 col x flexible x none x disjoint --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1em">X</div> + </div> +</div> + +<!-- 05 col x flexible x small x disjoint --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1em">X</div> + </div> +</div> + +<!-- 06 col x flexible x large x disjoint --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1.5em">X</div> + </div> +</div> + + + +<!-- 07 col x no-grow x none x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1em">X</div> + </div> +</div> + +<!-- 08 col x no-grow x small x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 0.4em">X</div> + </div> +</div> + +<!-- 09 col x no-grow x large x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1.5em">X</div> + </div> +</div> + + +<!-- 10 col x no-grow x none x larger --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1em">X</div> + </div> +</div> + +<!-- 11 col x no-grow x small x larger --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 0.4em">X</div> + </div> +</div> + +<!-- 12 col x no-grow x large x larger --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1.5em">X</div> + </div> +</div> + + +<!-- 13 col x no-grow x none x smaller --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 0.2em">X</div> + </div> +</div> + +<!-- 14 col x no-grow x smaller x smaller --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 0.2em">X</div> + </div> +</div> + +<!-- 15 col x no-grow x larger x smaller --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 0.2em">X</div> + </div> +</div> + + + +<!-- 16 col x no-shrink x none x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1em">X</div> + </div> +</div> + +<!-- 17 col x no-shrink x small x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1em">X</div> + </div> +</div> + +<!-- 18 col x no-shrink x large x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1.5em">X</div> + </div> +</div> + + +<!-- 19 col x no-shrink x none x larger --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1em">X</div> + </div> +</div> + +<!-- 20 col x no-shrink x small x larger --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1em">X</div> + </div> +</div> + +<!-- 21 col x no-shrink x large x larger --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1.5em">X</div> + </div> +</div> + + +<!-- 22 col x no-shrink x none x smaller --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1em">X</div> + </div> +</div> + +<!-- 23 col x no-shrink x smaller x smaller --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1em">X</div> + </div> +</div> + +<!-- 24 col x no-shrink x larger x smaller --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1.5em">X</div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-container-max-content-001.html b/testing/web-platform/tests/css/css-flexbox/flex-container-max-content-001.html new file mode 100644 index 0000000000..94a68b5753 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-container-max-content-001.html @@ -0,0 +1,420 @@ +<!DOCTYPE html> +<title>Flex Container Max-Content Main Sizing: Flex Item Max-Content Contributions</title> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#intrinsic-item-contributions"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#algo-main-item"> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<link rel="match" href="flex-container-max-content-001-ref.html"> + +<style> +@import "/fonts/ahem.css"; /* optional */ + +body { + /* Fit it in 800x600 pixels */ + display: grid; + grid-template-columns: repeat(auto-fill, 66px 66px 66px); + grid-auto-rows: 50px; + font: 10px/1 Ahem, monospace; +} + +/* impose min-content constraint, block formatting context */ +.wrap > * { + width: max-content; + height: max-content; + /* floating inside a large box for UAs that don't understand min-content */ + float: left; +} +.wrap { + width: 100px; height: 100px; + counter-increment: test; +} + +.row, .col { + display: flex; + background: blue; +} +.row { flex-flow: row; } +.col { flex-flow: column; } + +.item { + /* ensure _outer_ size is measured */ + margin: 5px; + padding: 3px; + border: 2px solid aqua; + color: orange; +} + + +/* help people debugging */ +.wrap:hover::before { + content: counter(test, decimal-leading-zero); + position: absolute; + font: initial; +} +</style> + +<!-- + + { row | col } x { flexible | no-grow | no-shrink } x { no | small | large } pref size x { harmonious | disjoint larger | disjoint smaller } flex basis } + +--> + +<!-- 01 row x flexible x none x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: auto">X X</div> + </div> +</div> + +<!-- 02 row x flexible x small x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: auto; width: 0.4ch">X X</div> + </div> +</div> + +<!-- 03 row x flexible x large x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: auto; width: 4ch">X X</div> + </div> +</div> + + +<!-- 04 row x flexible x none x disjoint --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 6ch">X X</div> + </div> +</div> + +<!-- 05 row x flexible x small x disjoint --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 6ch; width: 0.4ch">X X</div> + </div> +</div> + +<!-- 06 row x flexible x large x disjoint --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 6ch; width: 4ch">X X</div> + </div> +</div> + + + +<!-- 07 row x no-grow x none x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 0 1 auto">X X</div> + </div> +</div> + +<!-- 08 row x no-grow x small x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 0 1 auto; width: 0.4ch">X X</div> + </div> +</div> + +<!-- 09 row x no-grow x large x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 0 1 auto; width: 4ch">X X</div> + </div> +</div> + + +<!-- 10 row x no-grow x none x larger --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 0 1 6ch">X X</div> + </div> +</div> + +<!-- 11 row x no-grow x small x larger --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 0 1 6ch; width: 0.4ch">X X</div> + </div> +</div> + +<!-- 12 row x no-grow x large x larger --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 0 1 6ch; width: 4ch">X X</div> + </div> +</div> + + +<!-- 13 row x no-grow x none x smaller --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 0 1 0.2ch">X X</div> + </div> +</div> + +<!-- 14 row x no-grow x smaller x smaller --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 0 1 0.2ch; width: 0.4ch">X X</div> + </div> +</div> + +<!-- 15 row x no-grow x larger x smaller --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 0 1 0.2ch; width: 4ch">X X</div> + </div> +</div> + + + +<!-- 16 row x no-shrink x none x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 1 0 auto">X X</div> + <!-- see also https://www.w3.org/TR/css-flexbox-1/#algo-main-item case C --> + </div> +</div> + +<!-- 17 row x no-shrink x small x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 1 0 auto; width: 0.4ch">X X</div> + </div> +</div> + +<!-- 18 row x no-shrink x large x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 1 0 auto; width: 4ch">X X</div> + </div> +</div> + + +<!-- 19 row x no-shrink x none x larger --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 1 0 4.5ch">X X</div> + </div> +</div> + +<!-- 20 row x no-shrink x small x larger --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 1 0 4.5ch; width: 0.4ch">X X</div> + </div> +</div> + +<!-- 21 row x no-shrink x large x larger --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 1 0 4.5ch; width: 4ch">X X</div> + </div> +</div> + + +<!-- 22 row x no-shrink x none x smaller --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 1 0 0.2ch">X X</div> + </div> +</div> + +<!-- 23 row x no-shrink x smaller x smaller --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 1 0 0.2ch; width: 0.4ch">X X</div> + </div> +</div> + +<!-- 24 row x no-shrink x larger x smaller --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 1 0 0.2ch; width: 4ch">X X</div> + </div> +</div> + + +<!-- ###################################################################### --> + + +<!-- 01 col x flexible x none x harmonious --> +<div class="wrap" style="counter-reset: test; grid-column: 1"> <!-- new section --> + <div class="col"> + <div class="item" style="flex: auto">X</div> + </div> +</div> + +<!-- 02 col x flexible x small x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: auto; height: 0.4em">X</div> + </div> +</div> + +<!-- 03 col x flexible x large x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: auto; height: 1.5em">X</div> + </div> +</div> + + +<!-- 04 col x flexible x none x disjoint --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 2em">X</div> + </div> +</div> + +<!-- 05 col x flexible x small x disjoint --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 2em; height: 0.4em">X</div> + </div> +</div> + +<!-- 06 col x flexible x large x disjoint --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 2em; height: 1.5em">X</div> + </div> +</div> + + + +<!-- 07 col x no-grow x none x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 0 1 auto">X</div> + </div> +</div> + +<!-- 08 col x no-grow x small x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 0 1 auto; height: 0.4em">X</div> + </div> +</div> + +<!-- 09 col x no-grow x large x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 0 1 auto; height: 1.5em">X</div> + </div> +</div> + + +<!-- 10 col x no-grow x none x larger --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 0 1 2em">X</div> + </div> +</div> + +<!-- 11 col x no-grow x small x larger --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 0 1 2em; height: 0.4em">X</div> + </div> +</div> + +<!-- 12 col x no-grow x large x larger --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 0 1 2em; height: 1.5em">X</div> + </div> +</div> + + +<!-- 13 col x no-grow x none x smaller --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 0 1 0.2em">X</div> + </div> +</div> + +<!-- 14 col x no-grow x smaller x smaller --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 0 1 0.2em; height: 0.4em">X</div> + </div> +</div> + +<!-- 15 col x no-grow x larger x smaller --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 0 1 0.2em; height: 1.5em">X</div> + </div> +</div> + + + + + +<!-- 16 col x no-shrink x none x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 1 0 auto">X</div> + </div> +</div> + +<!-- 17 col x no-shrink x small x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 1 0 auto; height: 0.4em">X</div> + </div> +</div> + +<!-- 18 col x no-shrink x large x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 1 0 auto; height: 1.5em">X</div> + </div> +</div> + + +<!-- 19 col x no-shrink x none x larger --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 1 0 0.2em">X</div> + </div> +</div> + +<!-- 20 col x no-shrink x small x larger --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 1 0 0.2em; height: 0.4em">X</div> + </div> +</div> + +<!-- 21 col x no-shrink x large x larger --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 1 0 0.2em; height: 1.5em">X</div> + </div> +</div> + + +<!-- 22 col x no-shrink x none x smaller --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 1 0 0.2em">X</div> + </div> +</div> + +<!-- 23 col x no-shrink x smaller x smaller --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 1 0 0.2em; height: 0.4em">X</div> + </div> +</div> + +<!-- 24 col x no-shrink x larger x smaller --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 1 0 0.2em; height: 1.5em">X</div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-container-min-content-001-ref.html b/testing/web-platform/tests/css/css-flexbox/flex-container-min-content-001-ref.html new file mode 100644 index 0000000000..9ecfe8a003 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-container-min-content-001-ref.html @@ -0,0 +1,402 @@ +<!DOCTYPE html> +<title>Flex Container Min-Content Main Sizing: Flex Item Min-Content Contributions Reference</title> + +<style> +@import "/fonts/ahem.css"; /* optional */ + +body { + /* Fit it in 800x600 pixels */ + display: grid; + grid-template-columns: repeat(auto-fill, 50px 50px 50px); + grid-auto-rows: 50px; + font: 10px/1 Ahem, monospace; +} + +.wrap { + counter-increment: test; +} + +.row, .col { + background: blue; + padding: 5px; + float: left; +} + +.item { + padding: 3px; + border: 2px solid aqua; + color: orange; +} + + +/* help people debugging */ +.wrap:hover::before { + content: counter(test, decimal-leading-zero); + position: absolute; + font: initial; +} +</style> + +<!-- + + { row | col } x { flexible | no-grow | no-shrink } x { no | small | large } pref size x { harmonious | disjoint larger | disjoint smaller } flex basis } + +--> + +<!-- 01 row x flexible x none x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 1ch">X X</div> + </div> +</div> + +<!-- 02 row x flexible x small x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 1ch">X X</div> + </div> +</div> + +<!-- 03 row x flexible x large x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 1.5ch">X X</div> + </div> +</div> + + +<!-- 04 row x flexible x none x disjoint --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 1ch">X X</div> + </div> +</div> + +<!-- 05 row x flexible x small x disjoint --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 1ch">X X</div> + </div> +</div> + +<!-- 06 row x flexible x large x disjoint --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 1.5ch">X X</div> + </div> +</div> + + + +<!-- 07 row x no-grow x none x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 1ch">X X</div> + </div> +</div> + +<!-- 08 row x no-grow x small x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 0.4ch">X X</div> + </div> +</div> + +<!-- 09 row x no-grow x large x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 1.5ch">X X</div> + </div> +</div> + + +<!-- 10 row x no-grow x none x larger --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 1ch">X X</div> + </div> +</div> + +<!-- 11 row x no-grow x small x larger --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 1ch">X X</div> + </div> +</div> + +<!-- 12 row x no-grow x large x larger --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 1.5ch">X X</div> + </div> +</div> + + +<!-- 13 row x no-grow x none x smaller --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 0.2ch">X X</div> + </div> +</div> + +<!-- 14 row x no-grow x smaller x smaller --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 0.2ch">X X</div> + </div> +</div> + +<!-- 15 row x no-grow x larger x smaller --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 0.2ch">X X</div> + </div> +</div> + + + +<!-- 16 row x no-shrink x none x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 3ch">X X</div> + </div> +</div> + +<!-- 17 row x no-shrink x small x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 1ch">X X</div> + </div> +</div> + +<!-- 18 row x no-shrink x large x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 1.5ch">X X</div> + </div> +</div> + + +<!-- 19 row x no-shrink x none x larger --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 1ch">X X</div> + </div> +</div> + +<!-- 20 row x no-shrink x small x larger --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 1ch">X X</div> + </div> +</div> + +<!-- 21 row x no-shrink x large x larger --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 1.5ch">X X</div> + </div> +</div> + + +<!-- 22 row x no-shrink x none x smaller --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 1ch">X X</div> + </div> +</div> + +<!-- 23 row x no-shrink x smaller x smaller --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 1ch">X X</div> + </div> +</div> + +<!-- 24 row x no-shrink x larger x smaller --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 1.5ch">X X</div> + </div> +</div> + + +<!-- ###################################################################### --> + + +<!-- 01 col x flexible x none x harmonious --> +<div class="wrap" style="counter-reset: test; grid-column: 1"> <!-- new section --> + <div class="col"> + <div class="item" style="height: 1em">X</div> + </div> +</div> + +<!-- 02 col x flexible x small x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1em">X</div> + </div> +</div> + +<!-- 03 col x flexible x large x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1.5em">X</div> + </div> +</div> + + +<!-- 04 col x flexible x none x disjoint --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1em">X</div> + </div> +</div> + +<!-- 05 col x flexible x small x disjoint --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1em">X</div> + </div> +</div> + +<!-- 06 col x flexible x large x disjoint --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1.5em">X</div> + </div> +</div> + + + +<!-- 07 col x no-grow x none x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1em">X</div> + </div> +</div> + +<!-- 08 col x no-grow x small x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 0.4em">X</div> + </div> +</div> + +<!-- 09 col x no-grow x large x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1.5em">X</div> + </div> +</div> + + +<!-- 10 col x no-grow x none x larger --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1em">X</div> + </div> +</div> + +<!-- 11 col x no-grow x small x larger --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 0.4em">X</div> + </div> +</div> + +<!-- 12 col x no-grow x large x larger --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1.5em">X</div> + </div> +</div> + + +<!-- 13 col x no-grow x none x smaller --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 0.2em">X</div> + </div> +</div> + +<!-- 14 col x no-grow x smaller x smaller --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 0.2em">X</div> + </div> +</div> + +<!-- 15 col x no-grow x larger x smaller --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 0.2em">X</div> + </div> +</div> + + + +<!-- 16 col x no-shrink x none x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1em">X</div> + </div> +</div> + +<!-- 17 col x no-shrink x small x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1em">X</div> + </div> +</div> + +<!-- 18 col x no-shrink x large x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1.5em">X</div> + </div> +</div> + + +<!-- 19 col x no-shrink x none x larger --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1em">X</div> + </div> +</div> + +<!-- 20 col x no-shrink x small x larger --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1em">X</div> + </div> +</div> + +<!-- 21 col x no-shrink x large x larger --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1.5em">X</div> + </div> +</div> + + +<!-- 22 col x no-shrink x none x smaller --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1em">X</div> + </div> +</div> + +<!-- 23 col x no-shrink x smaller x smaller --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1em">X</div> + </div> +</div> + +<!-- 24 col x no-shrink x larger x smaller --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1.5em">X</div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-container-min-content-001.html b/testing/web-platform/tests/css/css-flexbox/flex-container-min-content-001.html new file mode 100644 index 0000000000..c328230362 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-container-min-content-001.html @@ -0,0 +1,420 @@ +<!DOCTYPE html> +<title>Flex Container Min-Content Main Sizing: Flex Item Min-Content Contributions</title> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#intrinsic-item-contributions"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#algo-main-item"> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<link rel="match" href="flex-container-min-content-001-ref.html"> + +<style> +@import "/fonts/ahem.css"; /* optional */ + +body { + /* Fit it in 800x600 pixels */ + display: grid; + grid-template-columns: repeat(auto-fill, 50px 50px 50px); + grid-auto-rows: 50px; + font: 10px/1 Ahem, monospace; +} + +/* impose min-content constraint, block formatting context */ +.wrap > * { + width: min-content; + height: min-content; + /* floating inside a zero size box for UAs that don't understand min-content */ + float: left; +} +.wrap { + width: 0; height: 0; + counter-increment: test; +} + +.row, .col { + display: flex; + background: blue; +} +.row { flex-flow: row; } +.col { flex-flow: column; } + +.item { + /* ensure _outer_ size is measured */ + margin: 5px; + padding: 3px; + border: 2px solid aqua; + color: orange; +} + + +/* help people debugging */ +.wrap:hover::before { + content: counter(test, decimal-leading-zero); + position: absolute; + font: initial; +} +</style> + +<!-- + + { row | col } x { flexible | no-grow | no-shrink } x { no | small | large } pref size x { harmonious | disjoint larger | disjoint smaller } flex basis } + +--> + +<!-- 01 row x flexible x none x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: auto">X X</div> + </div> +</div> + +<!-- 02 row x flexible x small x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: auto; width: 0.4ch">X X</div> + </div> +</div> + +<!-- 03 row x flexible x large x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: auto; width: 1.5ch">X X</div> + </div> +</div> + + +<!-- 04 row x flexible x none x disjoint --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 2ch">X X</div> + </div> +</div> + +<!-- 05 row x flexible x small x disjoint --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 2ch; width: 0.4ch">X X</div> + </div> +</div> + +<!-- 06 row x flexible x large x disjoint --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 2ch; width: 1.5ch">X X</div> + </div> +</div> + + + +<!-- 07 row x no-grow x none x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 0 1 auto">X X</div> + </div> +</div> + +<!-- 08 row x no-grow x small x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 0 1 auto; width: 0.4ch">X X</div> + </div> +</div> + +<!-- 09 row x no-grow x large x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 0 1 auto; width: 1.5ch">X X</div> + </div> +</div> + + +<!-- 10 row x no-grow x none x larger --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 0 1 2ch">X X</div> + </div> +</div> + +<!-- 11 row x no-grow x small x larger --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 0 1 2ch; width: 0.4ch">X X</div> + </div> +</div> + +<!-- 12 row x no-grow x large x larger --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 0 1 2ch; width: 1.5ch">X X</div> + </div> +</div> + + +<!-- 13 row x no-grow x none x smaller --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 0 1 0.2ch">X X</div> + </div> +</div> + +<!-- 14 row x no-grow x smaller x smaller --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 0 1 0.2ch; width: 0.4ch">X X</div> + </div> +</div> + +<!-- 15 row x no-grow x larger x smaller --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 0 1 0.2ch; width: 1.5ch">X X</div> + </div> +</div> + + + +<!-- 16 row x no-shrink x none x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 1 0 auto">X X</div> + <!-- see also https://www.w3.org/TR/css-flexbox-1/#algo-main-item case C --> + </div> +</div> + +<!-- 17 row x no-shrink x small x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 1 0 auto; width: 0.4ch">X X</div> + </div> +</div> + +<!-- 18 row x no-shrink x large x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 1 0 auto; width: 1.5ch">X X</div> + </div> +</div> + + +<!-- 19 row x no-shrink x none x larger --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 1 0 0.2ch">X X</div> + </div> +</div> + +<!-- 20 row x no-shrink x small x larger --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 1 0 0.2ch; width: 0.4ch">X X</div> + </div> +</div> + +<!-- 21 row x no-shrink x large x larger --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 1 0 0.2ch; width: 1.5ch">X X</div> + </div> +</div> + + +<!-- 22 row x no-shrink x none x smaller --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 1 0 0.2ch">X X</div> + </div> +</div> + +<!-- 23 row x no-shrink x smaller x smaller --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 1 0 0.2ch; width: 0.4ch">X X</div> + </div> +</div> + +<!-- 24 row x no-shrink x larger x smaller --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 1 0 0.2ch; width: 1.5ch">X X</div> + </div> +</div> + + +<!-- ###################################################################### --> + + +<!-- 01 col x flexible x none x harmonious --> +<div class="wrap" style="counter-reset: test; grid-column: 1"> <!-- new section --> + <div class="col"> + <div class="item" style="flex: auto">X</div> + </div> +</div> + +<!-- 02 col x flexible x small x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: auto; height: 0.4em">X</div> + </div> +</div> + +<!-- 03 col x flexible x large x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: auto; height: 1.5em">X</div> + </div> +</div> + + +<!-- 04 col x flexible x none x disjoint --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 2em">X</div> + </div> +</div> + +<!-- 05 col x flexible x small x disjoint --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 2em; height: 0.4em">X</div> + </div> +</div> + +<!-- 06 col x flexible x large x disjoint --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 2em; height: 1.5em">X</div> + </div> +</div> + + + +<!-- 07 col x no-grow x none x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 0 1 auto">X</div> + </div> +</div> + +<!-- 08 col x no-grow x small x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 0 1 auto; height: 0.4em">X</div> + </div> +</div> + +<!-- 09 col x no-grow x large x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 0 1 auto; height: 1.5em">X</div> + </div> +</div> + + +<!-- 10 col x no-grow x none x larger --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 0 1 2em">X</div> + </div> +</div> + +<!-- 11 col x no-grow x small x larger --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 0 1 2em; height: 0.4em">X</div> + </div> +</div> + +<!-- 12 col x no-grow x large x larger --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 0 1 2em; height: 1.5em">X</div> + </div> +</div> + + +<!-- 13 col x no-grow x none x smaller --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 0 1 0.2em">X</div> + </div> +</div> + +<!-- 14 col x no-grow x smaller x smaller --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 0 1 0.2em; height: 0.4em">X</div> + </div> +</div> + +<!-- 15 col x no-grow x larger x smaller --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 0 1 0.2em; height: 1.5em">X</div> + </div> +</div> + + + + + +<!-- 16 col x no-shrink x none x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 1 0 auto">X</div> + </div> +</div> + +<!-- 17 col x no-shrink x small x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 1 0 auto; height: 0.4em">X</div> + </div> +</div> + +<!-- 18 col x no-shrink x large x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 1 0 auto; height: 1.5em">X</div> + </div> +</div> + + +<!-- 19 col x no-shrink x none x larger --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 1 0 0.2em">X</div> + </div> +</div> + +<!-- 20 col x no-shrink x small x larger --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 1 0 0.2em; height: 0.4em">X</div> + </div> +</div> + +<!-- 21 col x no-shrink x large x larger --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 1 0 0.2em; height: 1.5em">X</div> + </div> +</div> + + +<!-- 22 col x no-shrink x none x smaller --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 1 0 0.2em">X</div> + </div> +</div> + +<!-- 23 col x no-shrink x smaller x smaller --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 1 0 0.2em; height: 0.4em">X</div> + </div> +</div> + +<!-- 24 col x no-shrink x larger x smaller --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 1 0 0.2em; height: 1.5em">X</div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-direction-column-001-visual.html b/testing/web-platform/tests/css/css-flexbox/flex-direction-column-001-visual.html new file mode 100644 index 0000000000..b8879be66b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-direction-column-001-visual.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Flexible Box Test: flex-direction_column</title> + <link rel="author" title="Intel" href="http://www.intel.com" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property" /> + <link rel="stylesheet" href="support/test-style.css"> + <meta name="assert" content="Check if the web engine can identify the flex-direction value column." /> + <style> + #test{ + height: 200px; + width: 200px; + display: flex; + flex-direction: column; + } + </style> + </head> + <body> + <p>Test passes if:<br> + 1. the rectangle 1, 2, 3 show up in a vertical column in a red rectangle and no gap between them.<br> + 2. They are all appear in upper left of the red rectangle.</p> + <div id=test><div id=test01>1</div><div id=test02>2</div><div id=test03>3</div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-direction-column-overlap-001.html b/testing/web-platform/tests/css/css-flexbox/flex-direction-column-overlap-001.html new file mode 100644 index 0000000000..4d483a44fc --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-direction-column-overlap-001.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> +<title>CSS Flexbox: vertical overlap with flex-direction: column.</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property"> +<link rel="help" href="https://crbug.com/669714"/> +<meta name="assert" content="This test ensures that no unnecessary vertical overlap happens between an inline flex item and a block element inside a nested flexbox with 'flex-direction: column'."/> + +<style> +html { + line-height: 1; + font-size: 18px; +} + +.flex { + flex: 1; + min-height: 0; +} + +.layout-column, .layout-row { + display: flex; +} + +.layout-column { + flex-direction: column; +} + +#relpos { + position: relative; + top: 1px; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body> + +<p>XXX and YYY should be on separate lines and not overlap, i.e. the height of .flex should not be 0.</p> + +<div class="layout-column" id="container"> + <div class="layout-row"> + <div class="layout-column"> + <div class="flex" data-expected-height="18">XXX<span id="relpos"></span></div> + <div>YYY</div> + </div> + </div> +</div> + +<script> +document.body.offsetHeight; +document.getElementById("relpos").innerText = " "; +checkLayout("#container"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-direction-column-reverse-001-visual.html b/testing/web-platform/tests/css/css-flexbox/flex-direction-column-reverse-001-visual.html new file mode 100644 index 0000000000..eb57801c03 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-direction-column-reverse-001-visual.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Flexible Box Test: flex-direction_column-reverse</title> + <link rel="author" title="Intel" href="http://www.intel.com" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property" /> + <link rel="stylesheet" href="support/test-style.css"> + <meta name="assert" content="Check if the web engine can identify the flex-direction value column-reverse." /> + <style> + #test{ + height: 200px; + width: 200px; + display: flex; + flex-direction: column-reverse; + } + </style> + </head> + <body> + <p>Test passes if:<br> + 1. the rectangle 1, 2, 3 show up in a vertical column in a red rectangle and no gap between them.<br> + 2. the rectangle 1, 2, 3 appear in bottom left of red rectangle and from top to bottom of the column: 3, 2, 1.</p> + <div id=test><div id=test01>1</div><div id=test02>2</div><div id=test03>3</div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-direction-column-reverse-002-visual.html b/testing/web-platform/tests/css/css-flexbox/flex-direction-column-reverse-002-visual.html new file mode 100644 index 0000000000..8edfb654f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-direction-column-reverse-002-visual.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: flex-direction: column-reverse swaps main start and end directions</title> + <link rel="author" title="Sylvain Galineau" href="mailto:galineau@adobe.com"> + <link rel="reviewer" title="Arron Eicholz" href="mailto:arronei@microsoft.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction"> + <meta name="assert" content="This test checks that column-reverse flex-direction swaps the main start and main end directions"> + <style> + .test { + display: flex; + float:left; + height: 3em; + } + + .test > span { + height: 1em; + } + + #column { + flex-direction: column; + } + + #column-reverse { + flex-direction: column-reverse; + } + </style> + </head> + <body> + <p>Test passes if both the two columns below are identical.</p> + <div class="test" id="column"> + <span>A</span><span>B</span><span>C</span> + </div> + <div class="test" id="column-reverse"> + <span>C</span><span>B</span><span>A</span> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-direction-column-reverse.html b/testing/web-platform/tests/css/css-flexbox/flex-direction-column-reverse.html new file mode 100644 index 0000000000..dc19045be7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-direction-column-reverse.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Flexible Box Test: flex-direction proprety - column-reverse</title> + <link rel="author" title="haosdent" href="mailto:haosdent@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> + <link rel="match" href="reference/flex-direction-column-reverse-ref.html"> + <meta name="assert" content="Statement describing what the test case is asserting"> + <style type="text/css"> + /* Positioned container allows for the self-describing statement to still + be visible in the case of failure */ + .container { + position: relative; + display: flex; + flex-direction: column-reverse; + background: red; + margin: 1em 0; + border: 1px solid black; + } + span { + display: inline-block; + background: green; + color: white; + margin: 1em; + width: 8em; + } + </style> +</head> +<body> + <p>The test passed if you see all the cells are arraged vertically and reversed.</p> + <div class="container"> + <span>first</span> + <span>second</span> + <span>third</span> + <span>forth</span> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-direction-column.html b/testing/web-platform/tests/css/css-flexbox/flex-direction-column.html new file mode 100644 index 0000000000..bf322e6c04 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-direction-column.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Flexible Box Test: flex-direction proprety - column</title> + <link rel="author" title="haosdent" href="mailto:haosdent@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> + <link rel="match" href="reference/flex-direction-column-ref.html"> + <meta name="assert" content="Statement describing what the test case is asserting"> + <style type="text/css"> + /* Positioned container allows for the self-describing statement to still + be visible in the case of failure */ + .container { + position: relative; + display: flex; + flex-direction: column; + background: red; + margin: 1em 0; + border: 1px solid black; + } + span { + display: inline-block; + background: green; + color: white; + margin: 1em; + width: 8em; + } + </style> +</head> +<body> + <p>The test passed if you see all the cells are arraged vertically.</p> + <div class="container"> + <span>first</span> + <span>second</span> + <span>third</span> + <span>forth</span> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-direction-modify.html b/testing/web-platform/tests/css/css-flexbox/flex-direction-modify.html new file mode 100644 index 0000000000..b13ee04fdc --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-direction-modify.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Test: flex flow direction</title> +<link rel="author" title="houzhenyu" href="http://www.github.com/sskyy" /> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction"> +<link rel="match" href="reference/flex-direction-modify.html"> +<meta name="assert" content="Changing 'flex-direction' with JavaScript and then changing it back should returns to the original look." /> +<style> + .flex-container{ + display: flex; + margin:20px; + background: #333; + } + .flex-item{ + width:50px; + height:50px; + margin:20px; + background: #eee; + line-height: 50px; + text-align: center; + } + + + .flex-container.flex-direction-row{ + flex-direction : row; + } + + .flex-container.flex-direction-row-reverse{ + flex-direction : row-reverse; + } + + .flex-container.flex-direction-column{ + flex-direction : column; + } + .flex-container.flex-direction-column-reverse{ + flex-direction : column-reverse; + } +</style> +</head> +<body> + <h1>flex-direction:<span id="current_direction">row</h1> + <div id="flex_container" class="flex-container"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div></div> + + <script> + var container = document.getElementById("flex_container"); + var direction_text = document.getElementById("current_direction"); + var baseClass = "flex-container "; + var classPrefix = "flex-direction-"; + function change_direction( direction ){ + container.className = baseClass + classPrefix + direction; + notify( direction ); + } + + function notify( direction ){ + direction_text.innerHTML = direction; + } + + change_direction("row"); + change_direction("row-reverse"); + change_direction("column"); + change_direction("row-column-reverse"); + change_direction("row"); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-direction-row-001-visual.html b/testing/web-platform/tests/css/css-flexbox/flex-direction-row-001-visual.html new file mode 100644 index 0000000000..36342989a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-direction-row-001-visual.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Flexible Box Test: flex-direction_row</title> + <link rel="author" title="Intel" href="http://www.intel.com" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property" /> + <link rel="stylesheet" href="support/test-style.css"> + <meta name="assert" content="Check if the web engine can identify the flex-direction value row." /> + <style> + #test{ + height: 200px; + width: 200px; + display: flex; + flex-direction: row; + } + </style> + </head> + <body> + <p>Test passes if:<br> + 1. the rectangle 1, 2, 3 show up in a row in a red rectangle and no gap between them.<br> + 2. the rectangle 1, 2, 3 appear in upper left of red rectangle.</p> + <div id=test><div id=test01>1</div><div id=test02>2</div><div id=test03>3</div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-direction-row-002-visual.html b/testing/web-platform/tests/css/css-flexbox/flex-direction-row-002-visual.html new file mode 100644 index 0000000000..42bc48e068 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-direction-row-002-visual.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: flex-direction:row axis matches that of writing mode inline axis</title> + <link rel="author" title="Sylvain Galineau" href="mailto:galineau@adobe.com"> + <link rel="reviewer" title="Arron Eicholz" href="mailto:arronei@microsoft.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction"> + <meta name="assert" content="This test checks that the main axis of the row flex-direction has the same orientation as the inline axis of the current writing mode"> + <style> + + .test { + display: flex; + width: 3em; + flex-direction :row; + } + + .test > span { + width: 1em; + direction: ltr; + } + + #row-ltr { + direction: ltr; + } + + #row-rtl { + direction: rtl; + } + </style> + </head> + <body> + <p>Test passes if both the lines below are identical.</p> + <div class="test" id="row-ltr"> + <span>A</span><span>B</span><span>C</span> + </div> + <div class="test" id="row-rtl"> + <span>C</span><span>B</span><span>A</span> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-direction-row-reverse-001-visual.html b/testing/web-platform/tests/css/css-flexbox/flex-direction-row-reverse-001-visual.html new file mode 100644 index 0000000000..92182964ef --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-direction-row-reverse-001-visual.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Flexible Box Test: flex-direction_row-reverse</title> + <link rel="author" title="Intel" href="http://www.intel.com" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property" /> + <link rel="stylesheet" href="support/test-style.css"> + <meta name="assert" content="Check if the web engine can identify the flex-direction value row-reverse." /> + <style> + #test{ + height: 200px; + width: 200px; + display: flex; + flex-direction: row-reverse; + } + </style> + </head> + <body> + <p>Test passes if:<br> + 1. the rectangle 1, 2, 3 show up in a row in a red rectangle and no gap between them.<br> + 2. the rectangle 1, 2, 3 appear in upper right of red rectangle and from left to right of the row: 3, 2, 1.</p> + <div id=test><div id=test01>1</div><div id=test02>2</div><div id=test03>3</div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-direction-row-reverse-002-visual.html b/testing/web-platform/tests/css/css-flexbox/flex-direction-row-reverse-002-visual.html new file mode 100644 index 0000000000..627da5c661 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-direction-row-reverse-002-visual.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: flow-direction:row-reverse swaps main start and end directions</title> + <link rel="author" title="Sylvain Galineau" href="mailto:galineau@adobe.com"> + <link rel="reviewer" title="Arron Eicholz" href="mailto:arronei@microsoft.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction"> + <meta name="assert" content="This test checks that row-reverse flex-direction swaps the main start and main end directions"> + <style> + .test { + display: flex; + width: 3em; + } + + .test > span { + width: 1em; + } + + #row { + flex-direction: row; + } + + #row-reverse { + flex-direction: row-reverse; + } + </style> + </head> + <body> + <p>Test passes if both the lines below are identical.</p> + <div class="test" id="row"> + <span>A</span><span>B</span><span>C</span> + </div> + <div class="test" id="row-reverse"> + <span>C</span><span>B</span><span>A</span> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-direction-row-reverse.html b/testing/web-platform/tests/css/css-flexbox/flex-direction-row-reverse.html new file mode 100644 index 0000000000..01cb9df02c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-direction-row-reverse.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Flexible Box Test: flex-direction proprety - row-reverse</title> + <link rel="author" title="haosdent" href="mailto:haosdent@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> + <link rel="match" href="reference/flex-direction-row-reverse-ref.html"> + <meta name="assert" content="Statement describing what the test case is asserting"> + <style type="text/css"> + .container { + position: relative; + display: flex; + flex-direction: row-reverse; + background: red; + margin: 1em 0; + border: 1px solid black; + } + span { + display: inline-block; + background: green; + color: white; + margin: 1em; + width: 8em; + } + </style> +</head> +<body> + <p>The test passed if you see all the cells are arranged horizontally and the order of cells are reversed.</p> + <div class="container"> + <span>first</span> + <span>second</span> + <span>third</span> + <span>forth</span> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-direction-row-vertical-ref.html b/testing/web-platform/tests/css/css-flexbox/flex-direction-row-vertical-ref.html new file mode 100644 index 0000000000..71ecabb6d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-direction-row-vertical-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reference: flex-direction:row has the same orientation as inline axis</title> + <style> + #vertical { + writing-mode: vertical-lr; + } + + .test { + display: flex; + width: 3em; + flex-direction: row; + } + + .test > span { + width: 1em; + } + </style> + </head> + <body> + <p>Test passes if both the two columns below are identical.</p> + <div id="vertical"> + <div class="test"> + <span>A</span><span>B</span><span>C</span> + </div> + <div class="test"> + <span>A</span><span>B</span><span>C</span> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-direction-row-vertical.html b/testing/web-platform/tests/css/css-flexbox/flex-direction-row-vertical.html new file mode 100644 index 0000000000..f6d496dbb8 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-direction-row-vertical.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: flex-direction:row has the same orientation as inline axis</title> + <link rel="author" title="Sylvain Galineau" href="mailto:galineau@adobe.com"> + <link rel="reviewer" title="Arron Eicholz" href="mailto:arronei@microsoft.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction"> + <link rel="match" href="flex-direction-row-vertical-ref.html"> + <meta name="assert" content="This test checks that the main axis of the row flex-direction has the same orientation as the inline axis of the current vertical writing mode"> + <style> + #vertical { + writing-mode: vertical-lr; + } + + .test { + display: flex; + width: 3em; + flex-direction :row; + } + + .test > span { + width: 1em; + direction: ltr; + } + + #row-ltr { + direction: ltr; + } + + #row-rtl { + direction: rtl; + } + </style> + </head> + <body> + <p>Test passes if both the two columns below are identical.</p> + <div id="vertical"> + <div class="test" id="row-ltr"> + <span>A</span><span>B</span><span>C</span> + </div> + <div class="test" id="row-rtl"> + <span>C</span><span>B</span><span>A</span> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-direction-with-element-insert.html b/testing/web-platform/tests/css/css-flexbox/flex-direction-with-element-insert.html new file mode 100644 index 0000000000..42fbdc8a1a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-direction-with-element-insert.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Test: flex flow direction</title> +<link rel="author" title="houzhenyu" href="http://www.github.com/sskyy" /> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction"> +<link rel="match" href="reference/flex-direction-with-element-insert.html"> +<meta name="assert" content="The flex items inserted by script shuould follow the right direction what the flex-direction property directives." /> +<style> + .flex-container{ + display: flex; + margin:20px; + background: #333; + } + .flex-item{ + width:50px; + height:50px; + margin:20px; + background: #eee; + line-height: 50px; + text-align: center; + } + + + .flex-container.flex-direction-row{ + flex-direction : row; + } + + .flex-container.flex-direction-row-reverse{ + flex-direction : row-reverse; + } + + .flex-container.flex-direction-column{ + flex-direction : column; + } + .flex-container.flex-direction-column-reverse{ + flex-direction : column-reverse; + } +</style> +</head> +<body> + <h1>flex-direction:row</h1> + <div id="flex-direction-row" class="flex-container flex-direction-row"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div></div> + + <h1>flex-direction:row-reverse</h1> + <div id="flex-direction-row-reverse" class="flex-container flex-direction-row-reverse"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div></div> + + <h1>flex-direction:column</h1> + <div id="flex-direction-column" class="flex-container flex-direction-column"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div></div> + + <h1>flex-direction:column-reverse</h1> + <div id="flex-direction-column-reverse" class="flex-container flex-direction-column-reverse"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div></div> + + + <script> + var ids = ['flex-direction-row', + 'flex-direction-row-reverse', + 'flex-direction-column', + 'flex-direction-column-reverse']; + + for( var i in ids ){ + var new_element = document.createElement("div") + new_element.className="flex-item"; + new_element.innerHTML="new"; + var container = document.getElementById( ids[i] ); + container.appendChild( new_element ); + } + </script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-direction.html b/testing/web-platform/tests/css/css-flexbox/flex-direction.html new file mode 100644 index 0000000000..709b1b036a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-direction.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Test: flex flow direction</title> +<link rel="author" title="houzhenyu" href="http://www.github.com/sskyy" /> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction"> +<link rel="match" href="reference/flex-direction.html"> +<meta name="assert" content="The flow of flex items in the the flex container should observe the flex-direction property." /> +<style> + .flex-container{ + display: flex; + margin:20px; + background: #333; + } + .flex-item{ + width:50px; + height:50px; + margin:20px; + background: #eee; + line-height: 50px; + text-align: center; + } + + + .flex-container.flex-direction-row{ + flex-direction : row; + } + + .flex-container.flex-direction-row-reverse{ + flex-direction : row-reverse; + } + + .flex-container.flex-direction-column{ + flex-direction : column; + } + .flex-container.flex-direction-column-reverse{ + flex-direction : column-reverse; + } +</style> +</head> +<body> + <h1>flex-direction:row</h1> + <div class="flex-container flex-direction-row"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div></div> + + <h1>flex-direction:row-reverse</h1> + <div class="flex-container flex-direction-row-reverse"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div></div> + + <h1>flex-direction:column</h1> + <div class="flex-container flex-direction-column"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div></div> + + <h1>flex-direction:column-reverse</h1> + <div class="flex-container flex-direction-column-reverse"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-factor-less-than-one.html b/testing/web-platform/tests/css/css-flexbox/flex-factor-less-than-one.html new file mode 100644 index 0000000000..320ddefc2f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-factor-less-than-one.html @@ -0,0 +1,180 @@ +<!DOCTYPE html> +<title>CSS Flexbox: flex factors less than one</title> +<link href="support/flexbox.css" rel="stylesheet"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#propdef-flex-grow"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#propdef-flex-shrink"> +<meta name="assert" content="flex-grow and flex-shrink factors less than 1 work"> +<style> + +html, body { + margin: 0; + padding: 0; +} + +.container { + height: 100px; + width: 100px; + border: 1px solid black; +} + +.child-flex-grow-0-75 { + background-color: lime; + flex-grow: 0.75; +} + +.child-flex-grow-0-5 { + background-color: green; + flex-grow: 0.5; +} + +.child-flex-grow-0-25 { + background-color: red; + flex-grow: 0.25; +} + +.child-flex-shrink-0-5 { + background-color: green; + flex-shrink: 0.5; + width: 200px; + height: 200px; +} + +.child-flex-shrink-0-25 { + background-color: red; + flex-shrink: 0.25; + width: 200px; + height: 200px; +} + +.basis-0 { + flex-basis: 0; +} + +.basis { + flex-basis: 30px; +} + +.basis-big { + flex-basis: 100px; +} + +.vertical { + writing-mode: vertical-rl; +} +</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 container"> + <div class="child-flex-grow-0-5" data-expected-width="50"></div> +</div> + +<div class="flexbox container"> + <div class="child-flex-grow-0-5" data-expected-width="50"></div> + <div class="child-flex-grow-0-25" data-expected-width="25"></div> +</div> + +<div class="flexbox container column"> + <div class="child-flex-grow-0-5" data-expected-height="50"></div> + <div class="child-flex-grow-0-25" data-expected-height="25"></div> +</div> + +<div class="flexbox container column vertical"> + <div class="child-flex-grow-0-5 " data-expected-width="50"></div> + <div class="child-flex-grow-0-25 " data-expected-width="25"></div> +</div> + +<div class="flexbox container vertical"> + <div class="child-flex-grow-0-5 " data-expected-height="50"></div> + <div class="child-flex-grow-0-25 " data-expected-height="25"></div> +</div> + +<div class="flexbox container"> + <div class="child-flex-grow-0-5 basis" data-expected-width="50"></div> + <div class="child-flex-grow-0-25 basis" data-expected-width="40"></div> + </div> + +<div class="flexbox container column"> + <div class="child-flex-grow-0-5 basis" data-expected-height="50"></div> + <div class="child-flex-grow-0-25 basis" data-expected-height="40"></div> +</div> + +<div class="flexbox container vertical"> + <div class="child-flex-grow-0-5 basis" data-expected-height="50"></div> + <div class="child-flex-grow-0-25 basis" data-expected-height="40"></div> +</div> + +<div class="flexbox container column vertical"> + <div class="child-flex-grow-0-5 basis" data-expected-width="50"></div> + <div class="child-flex-grow-0-25 basis" data-expected-width="40"></div> +</div> + +<!-- And now, the shrink cases --> +<div class="flexbox container"> + <div class="child-flex-shrink-0-5" data-expected-width="150"></div> +</div> + +<div class="flexbox container"> + <div class="child-flex-shrink-0-5" data-expected-width="50"></div> + <div class="child-flex-shrink-0-25" data-expected-width="125"></div> +</div> + +<div class="flexbox container column"> + <div class="child-flex-shrink-0-5" data-expected-height="50"></div> + <div class="child-flex-shrink-0-25" data-expected-height="125"></div> +</div> + +<div class="flexbox container column vertical"> + <div class="child-flex-shrink-0-5 " data-expected-width="50"></div> + <div class="child-flex-shrink-0-25 " data-expected-width="125"></div> +</div> + +<div class="flexbox container vertical"> + <div class="child-flex-shrink-0-5 " data-expected-height="50"></div> + <div class="child-flex-shrink-0-25 " data-expected-height="125"></div> +</div> + +<div class="flexbox container"> + <div class="child-flex-shrink-0-5 basis-big" data-expected-width="50"></div> + <div class="child-flex-shrink-0-25 basis-big" data-expected-width="75"></div> + </div> +<div class="flexbox container column"> + <div class="child-flex-shrink-0-5 basis-big" data-expected-height="50"></div> + <div class="child-flex-shrink-0-25 basis-big" data-expected-height="75"></div> +</div> + +<div class="flexbox container vertical"> + <div class="child-flex-shrink-0-5 basis-big" data-expected-height="50"></div> + <div class="child-flex-shrink-0-25 basis-big" data-expected-height="75"></div> +</div> + +<div class="flexbox container column vertical"> + <div class="child-flex-shrink-0-5 basis-big" data-expected-width="50"></div> + <div class="child-flex-shrink-0-25 basis-big" data-expected-width="75"></div> +</div> + +<!-- Interaction of min-width: auto with fractional flex basis --> +<div class="flexbox container" style="background-color: red;"> + <div class="child-flex-grow-0-25 basis-0" style="background-color: green;" data-expected-width="10"></div> + <div class="child-flex-grow-0-75 basis-0" data-expected-width="90"> + <div style="width: 90px;"></div> + </div> +</div> + +<!-- centering should still center; same for other justify-content values --> +<div class="flexbox container justify-content-center"> + <div class="child-flex-grow-0-5" data-expected-width="50" data-offset-x="26"></div> +</div> + +<div class="flexbox container justify-content-space-around"> + <div class="child-flex-grow-0-5" data-expected-width="50" data-offset-x="26"></div> +</div> + +<div class="flexbox container justify-content-flex-end"> + <div class="child-flex-grow-0-5" data-expected-width="50" data-offset-x="51"></div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-flow-001-ref.html b/testing/web-platform/tests/css/css-flexbox/flex-flow-001-ref.html new file mode 100644 index 0000000000..0c09793f60 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-flow-001-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test Reference File</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + div { + background-color: green; + float: left; + height: 50px; + width: 25px; + } +</style> +<body> + <p>Test passes if there is a filled green rectangle whose width is greater than height + and the number within rectangle is '1 2 3 4' from left to right.</p> + <div>1</div> + <div>2</div> + <div>3</div> + <div>4</div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-flow-001.html b/testing/web-platform/tests/css/css-flexbox/flex-flow-001.html new file mode 100644 index 0000000000..98ba1568fe --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-flow-001.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-flow - row nowrap</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="5.3. Flex Direction and Wrap: the 'flex-flow' shorthand" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> +<link rel="match" href="flex-flow-001-ref.html"> +<meta name="assert" content="The 'flex-flow' property set 'row nowrap' controls the flex container is single-line"> +<style> + #test { + background-color: red; + display: flex; + flex-flow: row nowrap; + width: 100px; + } + #test div { + background-color: green; + height: 50px; + width: 50px; + } +</style> +<body> + <p>Test passes if there is a filled green rectangle whose width is greater than height + and the number within rectangle is '1 2 3 4' from left to right.</p> + <div id="test"> + <div>1</div> + <div>2</div> + <div>3</div> + <div>4</div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-flow-002-ref.html b/testing/web-platform/tests/css/css-flexbox/flex-flow-002-ref.html new file mode 100644 index 0000000000..3a5ec04752 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-flow-002-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test Reference File</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + div { + background-color: green; + height: 50px; + width: 50px; + } + .float { + margin-left: 50px; + margin-top: -50px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>, the number within square is '1 2 3 4' + from left to right, top to bottom.</p> + <div>1</div> + <div class="float">2</div> + <div>3</div> + <div class="float">4</div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-flow-002.html b/testing/web-platform/tests/css/css-flexbox/flex-flow-002.html new file mode 100644 index 0000000000..ba3701e4de --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-flow-002.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-flow - row wrap</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="5.3. Flex Direction and Wrap: the 'flex-flow' shorthand" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> +<link rel="match" href="flex-flow-002-ref.html"> +<meta name="assert" content="The 'flex-flow' property set 'row wrap' controls the flex container is multi-line"> +<style> + #test { + background-color: red; + display: flex; + flex-flow: row wrap; + height: 100px; + width: 100px; + } + #test div { + background-color: green; + height: 50px; + width: 50px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>, the number within square is '1 2 3 4' + from left to right, top to bottom.</p> + <div id="test"> + <div>1</div> + <div>2</div> + <div>3</div> + <div>4</div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-flow-003.html b/testing/web-platform/tests/css/css-flexbox/flex-flow-003.html new file mode 100644 index 0000000000..59dc837402 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-flow-003.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-flow - row wrap-reverse</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="5.3. Flex Direction and Wrap: the 'flex-flow' shorthand" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> +<link rel="match" href="flex-flow-002-ref.html"> +<meta name="assert" content="The 'flex-flow' property set 'row wrap-reverse' controls the flex container is multi-line +but the cross-start and cross-end directions are swapped"> +<style> + #test { + background-color: red; + display: flex; + flex-flow: row wrap-reverse; + height: 100px; + width: 100px; + } + #test div { + background-color: green; + height: 50px; + width: 50px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>, the number within square is '1 2 3 4' + from left to right, top to bottom.</p> + <div id="test"> + <div>3</div> + <div>4</div> + <div>1</div> + <div>2</div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-flow-004.html b/testing/web-platform/tests/css/css-flexbox/flex-flow-004.html new file mode 100644 index 0000000000..5907f16447 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-flow-004.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-flow - row-reverse nowrap</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="5.3. Flex Direction and Wrap: the 'flex-flow' shorthand" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> +<link rel="match" href="flex-flow-001-ref.html"> +<meta name="assert" content="The 'flex-flow' property set 'row-reverse nowrap' controls the flex container is single-line, +but the main-start and main-end directions are swapped"> +<style> + #test { + background-color: red; + display: flex; + flex-flow: row-reverse nowrap; + width: 100px; + } + #test div { + background-color: green; + height: 50px; + width: 50px; + } +</style> +<body> + <p>Test passes if there is a filled green rectangle whose width is greater than height + and the number within rectangle is '1 2 3 4' from left to right.</p> + <div id="test"> + <div>4</div> + <div>3</div> + <div>2</div> + <div>1</div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-flow-005.html b/testing/web-platform/tests/css/css-flexbox/flex-flow-005.html new file mode 100644 index 0000000000..d84979c001 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-flow-005.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-flow - row-reverse wrap</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="5.3. Flex Direction and Wrap: the 'flex-flow' shorthand" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> +<link rel="match" href="flex-flow-002-ref.html"> +<meta name="assert" content="The 'flex-flow' property set 'row-reverse wrap' controls the flex container is multi-line +but the main-start and main-end directions are swapped"> +<style> + #test { + background-color: red; + display: flex; + flex-flow: row-reverse wrap; + height: 100px; + width: 100px; + } + #test div { + background-color: green; + height: 50px; + width: 50px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>, the number within square is '1 2 3 4' + from left to right, top to bottom.</p> + <div id="test"> + <div>2</div> + <div>1</div> + <div>4</div> + <div>3</div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-flow-006.html b/testing/web-platform/tests/css/css-flexbox/flex-flow-006.html new file mode 100644 index 0000000000..e76e52fa97 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-flow-006.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-flow - row-reverse wrap-reverse</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="5.3. Flex Direction and Wrap: the 'flex-flow' shorthand" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> +<link rel="match" href="flex-flow-002-ref.html"> +<meta name="assert" content="The 'flex-flow' property set 'row-reverse wrap-reverse' controls the flex container is multi-line +but the main-start and main-end, cross-start and cross-end directions are all swapped"> +<style> + #test { + background-color: red; + display: flex; + flex-flow: row-reverse wrap-reverse; + height: 100px; + width: 100px; + } + #test div { + background-color: green; + height: 50px; + width: 50px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>, the number within square is '1 2 3 4' + from left to right, top to bottom.</p> + <div id="test"> + <div>4</div> + <div>3</div> + <div>2</div> + <div>1</div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-flow-007-ref.html b/testing/web-platform/tests/css/css-flexbox/flex-flow-007-ref.html new file mode 100644 index 0000000000..bfe02c24ec --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-flow-007-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test Reference File</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + div { + background-color: green; + height: 25px; + width: 100px; + } +</style> +<body> + <p>Test passes if there is a filled green square and no red, the number within square is '1 2 3 4' from top to bottom.</p> + <div>1</div> + <div>2</div> + <div>3</div> + <div>4</div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-flow-007.html b/testing/web-platform/tests/css/css-flexbox/flex-flow-007.html new file mode 100644 index 0000000000..785289c9c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-flow-007.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-flow - column nowrap</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="5.3. Flex Direction and Wrap: the 'flex-flow' shorthand" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> +<link rel="match" href="flex-flow-007-ref.html"> +<meta name="assert" content="The 'flex-flow' property set 'column nowrap' controls the flex container is single-line, +but the main axis is vertical"> +<style> + #test { + background-color: red; + display: flex; + flex-flow: column nowrap; + height: 100px; + width: 100px; + } + #test div { + background-color: green; + height: 50px; + } +</style> +<body> + <p>Test passes if there is a filled green square and no red, the number within square is '1 2 3 4' from top to bottom.</p> + <div id="test"> + <div>1</div> + <div>2</div> + <div>3</div> + <div>4</div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-flow-008.html b/testing/web-platform/tests/css/css-flexbox/flex-flow-008.html new file mode 100644 index 0000000000..0d0f99eebe --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-flow-008.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-flow - column wrap</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="5.3. Flex Direction and Wrap: the 'flex-flow' shorthand" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> +<link rel="match" href="flex-flow-002-ref.html"> +<meta name="assert" content="The 'flex-flow' property set 'column wrap' controls the flex container is multi-line +but the main axis is vertical"> +<style> + #test { + background-color: red; + display: flex; + flex-flow: column wrap; + height: 100px; + width: 100px; + } + #test div { + background-color: green; + height: 50px; + width: 50px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>, the number within square is '1 2 3 4' + from left to right, top to bottom.</p> + <div id="test"> + <div>1</div> + <div>3</div> + <div>2</div> + <div>4</div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-flow-009.html b/testing/web-platform/tests/css/css-flexbox/flex-flow-009.html new file mode 100644 index 0000000000..566980f0cd --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-flow-009.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-flow - column wrap-reverse</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="5.3. Flex Direction and Wrap: the 'flex-flow' shorthand" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> +<link rel="match" href="flex-flow-002-ref.html"> +<meta name="assert" content="The 'flex-flow' property set 'column wrap-reverse' controls the flex container is multi-line +but the main axis is vertical, the cross-start and cross-end directions are swapped"> +<style> + #test { + background-color: red; + display: flex; + flex-flow: column wrap-reverse; + height: 100px; + width: 100px; + } + #test div { + background-color: green; + height: 50px; + width: 50px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>, the number within square is '1 2 3 4' + from left to right, top to bottom.</p> + <div id="test"> + <div>2</div> + <div>4</div> + <div>1</div> + <div>3</div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-flow-010.html b/testing/web-platform/tests/css/css-flexbox/flex-flow-010.html new file mode 100644 index 0000000000..f12024fea0 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-flow-010.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-flow - column-reverse nowrap</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="5.3. Flex Direction and Wrap: the 'flex-flow' shorthand" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> +<link rel="match" href="flex-flow-007-ref.html"> +<meta name="assert" content="The 'flex-flow' property set 'column-reverse nowrap' controls the flex container is single-line, +but the main axis is vertical, the main-start and main-end directions are swapped"> +<style> + #test { + background-color: red; + display: flex; + flex-flow: column-reverse nowrap; + height: 100px; + width: 100px; + } + #test div { + background-color: green; + height: 50px; + } +</style> +<body> + <p>Test passes if there is a filled green square and no red, the number within square is '1 2 3 4' from top to bottom.</p> + <div id="test"> + <div>4</div> + <div>3</div> + <div>2</div> + <div>1</div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-flow-011.html b/testing/web-platform/tests/css/css-flexbox/flex-flow-011.html new file mode 100644 index 0000000000..79878a018a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-flow-011.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-flow - column-reverse wrap</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="5.3. Flex Direction and Wrap: the 'flex-flow' shorthand" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> +<link rel="match" href="flex-flow-002-ref.html"> +<meta name="assert" content="The 'flex-flow' property set 'column-reverse wrap' controls the flex container is multi-line +but the main axis is vertical, the main-start and main-end directions are swapped"> +<style> + #test { + background-color: red; + display: flex; + flex-flow: column-reverse wrap; + height: 100px; + width: 100px; + } + #test div { + background-color: green; + height: 50px; + width: 50px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>, the number within square is '1 2 3 4' + from left to right, top to bottom.</p> + <div id="test"> + <div>3</div> + <div>1</div> + <div>4</div> + <div>2</div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-flow-012.html b/testing/web-platform/tests/css/css-flexbox/flex-flow-012.html new file mode 100644 index 0000000000..d0376df188 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-flow-012.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-flow - column-reverse wrap-reverse</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="5.3. Flex Direction and Wrap: the 'flex-flow' shorthand" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> +<link rel="match" href="flex-flow-002-ref.html"> +<meta name="assert" content="The 'flex-flow' property set 'column-reverse wrap-reverse' controls the flex container is multi-line +but the main axis is vertical, the 'cross-start/cross-end' and 'main-start/main-end' directions are all swapped"> +<style> + #test { + background-color: red; + display: flex; + flex-flow: column-reverse wrap-reverse; + height: 100px; + width: 100px; + } + #test div { + background-color: green; + height: 50px; + width: 50px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>, the number within square is '1 2 3 4' + from left to right, top to bottom.</p> + <div id="test"> + <div>4</div> + <div>2</div> + <div>3</div> + <div>1</div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-flow-013.html b/testing/web-platform/tests/css/css-flexbox/flex-flow-013.html new file mode 100644 index 0000000000..da6110a1c4 --- /dev/null +++ b/testing/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/testing/web-platform/tests/css/css-flexbox/flex-grow-001-ref.xht b/testing/web-platform/tests/css/css-flexbox/flex-grow-001-ref.xht new file mode 100644 index 0000000000..2b0f294c34 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-grow-001-ref.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Hanrui Gao" href="mailto:hanrui.gao@gmail.com"/> + <style type="text/css"><![CDATA[ + #container { + width: 240px; + height: 60px; + border: 1px solid #000; + } + #container > div { + height: 100%; + float: left; + } + #child_1 { + width: 30px; + background-color: green; + } + #child_2 { + width: 80px; + background-color: blue; + } + #child_3 { + width: 130px; + background-color: gray; + } + ]]></style> + </head> + <body> + <div id="container"> + <div id="child_1"></div> + <div id="child_2"></div> + <div id="child_3"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-grow-001.xht b/testing/web-platform/tests/css/css-flexbox/flex-grow-001.xht new file mode 100644 index 0000000000..029090ae79 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-grow-001.xht @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Flex-grow Property of Block-level Flex Items</title> + <link rel="author" title="Hanrui Gao" href="mailto:hanrui.gao@gmail.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-grow-property"/> + <link rel="match" href="flex-grow-001-ref.xht"/> + <meta name="assert" content="'flex-grow' property specifies the flex grow factor, which determines how much the flex item will grow relative to the rest of the flex items in the flex container when positive free space is distributed." /> + <style type="text/css"><![CDATA[ + #container { + width: 240px; + height: 60px; + border: 1px solid #000; + display: flex; + } + #container > div { + width: 30px; + height: 100%; + } + #child_1 { + flex-grow: 0; + background-color: green; + } + #child_2 { + flex-grow: 1; + background-color: blue; + } + #child_3 { + flex-grow: 2; + background-color: gray; + } + ]]></style> + </head> + <body> + <div id="container"> + <div id="child_1"></div> + <div id="child_2"></div> + <div id="child_3"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-grow-002.html b/testing/web-platform/tests/css/css-flexbox/flex-grow-002.html new file mode 100644 index 0000000000..51cb26675d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-grow-002.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-grow - 0(initial value)</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.3.1. The 'flex-grow' property" href="http://www.w3.org/TR/css-flexbox-1/#flex-grow-property"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The 'flex-grow' property initial value is '0', the flex item will keep the width when 'flex-grow' set '0'"> +<style> + #container { + background-color: red; + display: flex; + height: 100px; + width: 100px; + } + #container div { + height: 100px; + width: 20px; + } + #test1 { + background-color: green; + flex-grow: 1; + } + #test2 { + background-color: green; + flex-grow: 0; + } + #cover { + background-color: green; + height: 100px; + margin-left: 80px; + margin-top: -100px; + width: 20px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="test1"></div> + <div id="test2"></div> + <div id="test3"></div> + </div> + <div id="cover"></div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-grow-003.html b/testing/web-platform/tests/css/css-flexbox/flex-grow-003.html new file mode 100644 index 0000000000..9e9fd31425 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-grow-003.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-grow - negative number</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.3.1. The 'flex-grow' property" href="http://www.w3.org/TR/css-flexbox-1/#flex-grow-property"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The 'flex-grow' property set negative number, the flex item will not grow."> +<style> + #container { + background-color: green; + display: flex; + height: 100px; + width: 100px; + } + #container div { + background-color: red; + height: 100px; + } + #test1 { + flex-grow: -2; + width: 25px; + } + #test2 { + flex-grow: -3; + width: 25px; + } + #cover { + background-color: green; + height: 100px; + position: relative; + top: -100px; + width: 50px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="test1"></div> + <div id="test2"></div> + </div> + <div id="cover"></div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-grow-004.html b/testing/web-platform/tests/css/css-flexbox/flex-grow-004.html new file mode 100644 index 0000000000..84346b51e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-grow-004.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-grow - (invalid when no space distributed)</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.3.1. The 'flex-grow' property" href="http://www.w3.org/TR/css-flexbox-1/#flex-grow-property"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The 'flex-grow' property is invalid when the flex container has no space distributed."> +<style> + #container { + background-color: red; + display: flex; + height: 100px; + width: 100px; + } + #container div { + height: 100px; + } + #test1 { + flex-grow: 3; + width: 50px; + } + #test2 { + background-color: green; + flex-grow: 2; + width: 50px; + } + #cover { + background-color: green; + height: 100px; + position: relative; + top: -100px; + width: 50px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="test1"></div> + <div id="test2"></div> + </div> + <div id="cover"></div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-grow-005.html b/testing/web-platform/tests/css/css-flexbox/flex-grow-005.html new file mode 100644 index 0000000000..45a76a2b63 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-grow-005.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-grow - (invalid when applied to flex container)</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.3.1. The 'flex-grow' property" href="http://www.w3.org/TR/css-flexbox-1/#flex-grow-property"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The 'flex-grow' property is invalid when the property applied to flex container."> +<style> + #container { + background-color: green; + display: flex; + flex-grow: 2; + height: 100px; + width: 100px; + } + #container div { + background-color: red; + height: 100px; + width: 25px; + } + #cover { + background-color: green; + height: 100px; + position: relative; + top: -100px; + width: 50px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div></div> + <div></div> + </div> + <div id="cover"></div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-grow-006.html b/testing/web-platform/tests/css/css-flexbox/flex-grow-006.html new file mode 100644 index 0000000000..2b37a554a1 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-grow-006.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-grow - positive number(fill all space)</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.3.1. The 'flex-grow' property" href="http://www.w3.org/TR/css-flexbox-1/#flex-grow-property"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Test checks that all space of flex container will be filled when there is only one flex item and 'flex-grow' set any positive number."> +<style> + .container { + background-color: red; + display: flex; + height: 50px; + width: 100px; + } + .container > div { + background-color: green; + height: 50px; + width: 25px; + } + #test1 { + flex-grow: 1.5; + } + #test2 { + flex-grow: 2; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div class="container"> + <div id="test1"></div> + </div> + <div class="container"> + <div id="test2"></div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-grow-007.html b/testing/web-platform/tests/css/css-flexbox/flex-grow-007.html new file mode 100644 index 0000000000..79a8a47db3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-grow-007.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-grow - less than one</title> +<link rel="help" title="7.3.1. The 'flex-grow' property" href="http://www.w3.org/TR/css-flexbox-1/#flex-grow-property"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Test checks that remaining free space is calculated from 'flex-grow' set to positive number less than one."> +<style> + .container { + background: red; + height: 50px; + width: 100px; + } + #test1, #test2 { + display: flex; + width: 190px; + } + #test1 > div, #test2 > div { + background: green; + height: 50px; + } + #test1 > div { + flex-grow: 0.1; + width: 90px; + } + #test2 > div { + flex-grow: 0.05; + width: 45px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div class="container"> + <div id="test1"> + <div></div> + </div> + </div> + <div class="container"> + <div id="test2"> + <div></div> + <div></div> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-grow-008.html b/testing/web-platform/tests/css/css-flexbox/flex-grow-008.html new file mode 100644 index 0000000000..46f510f125 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-grow-008.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-grow - frozen items act as their frozen size</title> +<link rel="author" title="Tab Atkins-Bittner" href="https://xanthir.com/contact/"> +<link rel="help" title="Section 9.7, steps 4 and 5.e" href="http://www.w3.org/TR/css-flexbox-1/#resolve-flexible-lengths"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Test checks that items which become frozen due to a max-size violation use that clamped size in later steps to determine free space, so other children can grow to fill the space freed up by fixing the violation."> +<style> + .container { + background-color: red; + display: flex; + height: 100px; + width: 100px; + } + .frozen-child { + flex-grow: 1; + max-width: 0px; + background: red; + } + .non-frozen-child { + flex-grow: 1; + background: green; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div class="container"> + <div class="frozen-child"></div> + <div class="non-frozen-child"></div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-height-min-content.html b/testing/web-platform/tests/css/css-flexbox/flex-height-min-content.html new file mode 100644 index 0000000000..f719d1f66a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-height-min-content.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>CSS Flexbox Test: height: min-content is sized correctly</title> +<link rel="author" title="Google LLC" href="http://www.google.com"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" /> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<style> +#flex { + display: flex; + flex-direction: column; + width: 100px; +} + +#item { + min-height: 30px; + height: min-content; + background: green; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="flex"> + <div id="item"> + <div style="height: 100px; width: 100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-inline.html b/testing/web-platform/tests/css/css-flexbox/flex-inline.html new file mode 100644 index 0000000000..3248694034 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-inline.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Flexible Box Test: display proprety - inline-flex</title> + <link rel="author" title="haosdent" href="mailto:haosdent@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-display-inline-flex"> + <link rel="match" href="reference/flex-inline-ref.html"> + <meta name="assert" content="Statement describing what the test case is asserting"> + <style type="text/css"> + /* Positioned container allows for the self-describing statement to still + be visible in the case of failure */ + .container { + position: relative; + } + .greenSquare { + display: inline-flex; + margin-top: -200px; + background: green; + } + </style> +</head> +<body> + <p>The test passed if you see a green block which its text is 'Success!'.</p> + <div class="container"> + <!-- This is the square that should not be visible if the test passes --> + <div class="greenSquare">Success!</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-item-and-percentage-abspos.html b/testing/web-platform/tests/css/css-flexbox/flex-item-and-percentage-abspos.html new file mode 100644 index 0000000000..76bdff21b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-item-and-percentage-abspos.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Google LLC" href="http://www.google.com" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#cross-sizing" /> +<link rel="help" href="https://crbug.com/967061" /> +<title>css-flexbox: Tests that we correctly size a flex item when we have a percentage-sized abspos element</title> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: flex;"> + <div style="overflow: hidden; position: relative;"> + <div style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;"></div> + <div style="width: 100px; height: 100px; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-item-compressible-001.html b/testing/web-platform/tests/css/css-flexbox/flex-item-compressible-001.html new file mode 100644 index 0000000000..9725512cd8 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-item-compressible-001.html @@ -0,0 +1,149 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Testing automatic minimun size of <input> flex items in a row flex container</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto"> + <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#replaced-percentage-min-contribution"> + <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#min-content-zero"> + <link rel="stylesheet" href="/fonts/ahem.css"> + <meta name="assert" content="This test verifies that an <input> flex item should resolve its percentage part of main size to zero when computing specified size suggestion."> + + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> + + <style> + .flexbox { + display: flex; + width: 300px; + height: 40px; + border: 1px solid black; + margin-bottom: 5px; + } + .spacer { + /* Just to occupy some space, so that the flex algorithm will try to shrink + the <input> element below its percentage specified width. */ + flex: 0 0 200px; + background: lightgray; + } + input { + font: 20px/1 Ahem; + background: lightblue; + /* Get rid of native theming and UA default styles. */ + appearance: none; + border: 0; + padding: 0; + margin: 0; + } + .test1 { + width: 100%; + } + .test2 { + width: calc(100%); + } + .test3 { + width: calc(140px + 100%); + } + </style> + + <body onload="checkLayout('.flexbox')"> + <p>Test1: "width: 100%"</p> + <div class="flexbox"> + <div class="spacer"></div> + <input type="text" + class="test1" data-expected-width="100"> + </div> + + <div class="flexbox"> + <div class="spacer"></div> + <input type="range" + class="test1" data-expected-width="100"> + </div> + + <div class="flexbox"> + <div class="spacer"></div> + <input type="button" value="XXXXXXX" + class="test1" data-expected-width="140"> + </div> + + <div class="flexbox"> + <div class="spacer"></div> + <input type="submit" value="XXXXXXX" + class="test1" data-expected-width="140"> + </div> + + <div class="flexbox"> + <div class="spacer"></div> + <input type="reset" value="XXXXXXX" + class="test1" data-expected-width="140"> + </div> + + <p>Test2: "width: calc(100%)"</p> + <div class="flexbox"> + <div class="spacer"></div> + <input type="text" + class="test2" data-expected-width="100"> + </div> + + <div class="flexbox"> + <div class="spacer"></div> + <input type="range" + class="test2" data-expected-width="100"> + </div> + + <div class="flexbox"> + <div class="spacer"></div> + <input type="button" value="XXXXXXX" + class="test2" data-expected-width="140"> + </div> + + <div class="flexbox"> + <div class="spacer"></div> + <input type="submit" value="XXXXXXX" + class="test2" data-expected-width="140"> + </div> + + <div class="flexbox"> + <div class="spacer"></div> + <input type="reset" value="XXXXXXX" + class="test2" data-expected-width="140"> + </div> + + <p>Test3: "width: calc(140px + 100%)"</p> + <div class="flexbox"> + <div class="spacer"></div> + <input type="text" + class="test3" data-expected-width="140"> + </div> + + <div class="flexbox"> + <div class="spacer"></div> + <input type="range" + class="test3" data-expected-width="140"> + </div> + + <div class="flexbox"> + <div class="spacer"></div> + <input type="button" value="XXXXXXX" + class="test3" data-expected-width="140"> + </div> + + <div class="flexbox"> + <div class="spacer"></div> + <input type="submit" value="XXXXXXX" + class="test3" data-expected-width="140"> + </div> + + <div class="flexbox"> + <div class="spacer"></div> + <input type="reset" value="XXXXXXX" + class="test3" data-expected-width="140"> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-item-compressible-002.html b/testing/web-platform/tests/css/css-flexbox/flex-item-compressible-002.html new file mode 100644 index 0000000000..d1a14b9bfe --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-item-compressible-002.html @@ -0,0 +1,151 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Testing automatic minimun size of <input> flex items in a column flex container</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto"> + <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#replaced-percentage-min-contribution"> + <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#min-content-zero"> + <link rel="stylesheet" href="/fonts/ahem.css"> + <meta name="assert" content="This test verifies that an <input> flex item should resolve its percentage part of main size to zero when computing specified size suggestion."> + + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> + + <style> + .flexbox { + display: inline-flex; + flex-direction: column; + width: 40px; + height: 300px; + border: 1px solid black; + margin-bottom: 40px; + } + .spacer { + /* Just to occupy some space, so that the flex algorithm will try to shrink + the <input> element below its percentage specified height. */ + flex: 0 0 200px; + background: lightgray; + } + input { + writing-mode: vertical-lr; + font: 20px/1 Ahem; + background: lightblue; + /* Get rid of native theming and UA default styles. */ + appearance: none; + border: 0; + padding: 0; + margin: 0; + } + .test1 { + height: 100%; + } + .test2 { + height: calc(100%); + } + .test3 { + height: calc(140px + 100%); + } + </style> + + <body onload="checkLayout('.flexbox')"> + <p>Test1: "height: 100%"</p> + <div class="flexbox"> + <div class="spacer"></div> + <input type="text" + class="test1" data-expected-height="100"> + </div> + + <div class="flexbox"> + <div class="spacer"></div> + <input type="range" + class="test1" data-expected-height="100"> + </div> + + <div class="flexbox"> + <div class="spacer"></div> + <input type="button" value="XXXXXXX" + class="test1" data-expected-height="140"> + </div> + + <div class="flexbox"> + <div class="spacer"></div> + <input type="submit" value="XXXXXXX" + class="test1" data-expected-height="140"> + </div> + + <div class="flexbox"> + <div class="spacer"></div> + <input type="reset" value="XXXXXXX" + class="test1" data-expected-height="140"> + </div> + + <p>Test2: "height: calc(100%)"</p> + <div class="flexbox"> + <div class="spacer"></div> + <input type="text" + class="test2" data-expected-height="100"> + </div> + + <div class="flexbox"> + <div class="spacer"></div> + <input type="range" + class="test2" data-expected-height="100"> + </div> + + <div class="flexbox"> + <div class="spacer"></div> + <input type="button" value="XXXXXXX" + class="test2" data-expected-height="140"> + </div> + + <div class="flexbox"> + <div class="spacer"></div> + <input type="submit" value="XXXXXXX" + class="test2" data-expected-height="140"> + </div> + + <div class="flexbox"> + <div class="spacer"></div> + <input type="reset" value="XXXXXXX" + class="test2" data-expected-height="140"> + </div> + + <p>Test3: "height: calc(140px + 100%)"</p> + <div class="flexbox"> + <div class="spacer"></div> + <input type="text" + class="test3" data-expected-height="140"> + </div> + + <div class="flexbox"> + <div class="spacer"></div> + <input type="range" + class="test3" data-expected-height="140"> + </div> + + <div class="flexbox"> + <div class="spacer"></div> + <input type="button" value="XXXXXXX" + class="test3" data-expected-height="140"> + </div> + + <div class="flexbox"> + <div class="spacer"></div> + <input type="submit" value="XXXXXXX" + class="test3" data-expected-height="140"> + </div> + + <div class="flexbox"> + <div class="spacer"></div> + <input type="reset" value="XXXXXXX" + class="test3" data-expected-height="140"> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-item-contains-size-layout-001.html b/testing/web-platform/tests/css/css-flexbox/flex-item-contains-size-layout-001.html new file mode 100644 index 0000000000..fde2a31126 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-item-contains-size-layout-001.html @@ -0,0 +1,49 @@ +<!doctype html> +<html class=reftest-wait> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href=""> +<meta name="assert" content="Flex items with contain: layout size are sized properly."> +<link rel="bookmark" href="https://crbug.com/1108675"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> +#flex { + display: flex; + width: 100px; + height: 100px; +} +#grid { + background-color: green; + display: grid; + flex: 1; + contain: layout size; +} +.item { + height: 50px; + width: 50px; +} +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="reference-overlapped-red"></div> + +<div id="flex"> + <div id="grid" data-expected-height=100 data-expected-width=100> + <div class="item"></div> + </div> +</div> + +<script> + document.body.offsetTop; + let item = document.querySelector(".item"); + let cloned = item.cloneNode(true); + let parent = item.parentElement; + parent.appendChild(cloned); + document.documentElement.classList.remove("reftest-wait"); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-item-contains-strict.html b/testing/web-platform/tests/css/css-flexbox/flex-item-contains-strict.html new file mode 100644 index 0000000000..25849cc64b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-item-contains-strict.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<title>CSS Flexbox: 'contain' property strict value</title> +<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#align-items-property"> +<meta name="assert" content="This test ensures that the strict value of the 'contain' +property in combination with mixing of 'display' inline-flex value, 'align-items' flex-start +value, column direction works properly."> +<style> +.inline-flex { + display: inline-flex; + outline: solid; + background: red; +} +</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-flex')"> +<p>Stretched:</p> +<div class="inline-flex" style="display: inline-flex; flex-direction: column;" data-expected-width="0" data-expected-height="0"> + <div style="contain: strict;" data-expected-width="0" data-expected-height="0">Column</div> +</div> + +<div class="inline-flex" data-expected-width="0" data-expected-height="0"> + <div style="contain: strict;" data-expected-width="0" data-expected-height="0">Row</div> +</div> + +<div class="inline-flex" style="display: inline-flex; flex-direction: column;" data-expected-width="30" data-expected-height="30"> + <div style="contain: strict; width: 30px; height: 30px;" data-expected-width="30" data-expected-height="30">Column</div> +</div> + +<div class="inline-flex" style="display: inline-flex;" data-expected-width="30" data-expected-height="30"> + <div style="contain: strict; width: 30px; height: 30px;" data-expected-width="30" data-expected-height="30">Row</div> +</div> + + +<p>Flex-start:</p> +<div class="inline-flex" style="flex-direction: column; align-items: flex-start;" data-expected-width="0" data-expected-height="0"> + <div style="contain: strict;" data-expected-width="0" data-expected-height="0">Column</div> +</div> + +<div class="inline-flex" style="align-items: flex-start;" data-expected-width="0" data-expected-height="0"> + <div style="contain: strict;" data-expected-width="0" data-expected-height="0">Row</div> +</div> + +<div class="inline-flex" style="flex-direction: column; align-items: flex-start;" data-expected-width="30" data-expected-height="30"> + <div style="contain: strict; width: 30px; height: 30px;" data-expected-width="30" data-expected-height="30">Column</div> +</div> + +<div class="inline-flex" style="align-items: flex-start;" data-expected-width="30" data-expected-height="30"> + <div style="contain: strict; width: 30px; height: 30px;" data-expected-width="30" data-expected-height="30">Row</div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-item-transferred-sizes-padding-border-sizing.html b/testing/web-platform/tests/css/css-flexbox/flex-item-transferred-sizes-padding-border-sizing.html new file mode 100644 index 0000000000..fc1a163e01 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-item-transferred-sizes-padding-border-sizing.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> + <head> + <link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com" /> + <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-size-transfers" /> + <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#min-width" /> + <link rel="help" href="https://drafts.csswg.org/css-sizing/#box-sizing" /> + <link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=243887" /> + <link rel="match" href="../reference/ref-filled-green-100px-square-only.html" /> + </head> + <!-- The box should be a 100px x 100px green square. The initial width should + be 90px due to the transferred min-width constraint from the specified + min-height. Since box-sizing is border-box, 10px will be removed from + the min-height (padding on the top and bottom of the box), and 90px will + be used to compute the transferred min-width. 5px of padding will then + be added on all sides of the 90px x 90px box to give it a resulting + size of 100px x 100px. --> + <style> + .flexContainer { + display: flex; + flex-direction: column; + float: left; + } + .item { + background: green; + padding-left: 25px; + padding-right: 25px; + box-sizing: border-box; + } + </style> + <body> + <p>Test passes if there is a filled green square.</p> + <div class="flexContainer"> + <div class="item" style="min-height:100px; aspect-ratio: 1/1;"></div> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-flexbox/flex-item-transferred-sizes-padding-content-sizing.html b/testing/web-platform/tests/css/css-flexbox/flex-item-transferred-sizes-padding-content-sizing.html new file mode 100644 index 0000000000..68a4e36b96 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-item-transferred-sizes-padding-content-sizing.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com" /> + <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-size-transfers" /> + <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#min-width" /> + <link rel="help" href="https://drafts.csswg.org/css-sizing/#box-sizing" /> + <link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=243887" /> + <link rel="match" href="../reference/ref-filled-green-100px-square-only.html" /> + </head> + <!-- Item div should be a 100px x 100px square. Content width will be 90px, + which comes from the min-height constraint being transferred to the + min-width. 5px padding on all sides will give the box a resulting + size of 100x x 100px. --> + <style> + .flexContainer { + display: flex; + flex-direction: column; + float: left; + } + .item { + background: green; + padding: 5px 5px 5px 5px; + } + </style> + <body> + <p>Test passes if there is a filled green square.</p> + <div class="flexContainer"> + <div class="item" style="min-height:90px; aspect-ratio: 1/1;"></div> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-flexbox/flex-item-vertical-align.html b/testing/web-platform/tests/css/css-flexbox/flex-item-vertical-align.html new file mode 100644 index 0000000000..be9b66d07f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-item-vertical-align.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<link href="support/flexbox.css" rel="stylesheet"> +<title>CSS Flexbox: vertical-align on a flex item</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#propdef-vertical-align"> +<link rel="match" href="reference/flex-item-vertical-align-ref.html"> +<meta name="assert" content="vertical-align should have no effect on a flex item, i.e. flex items' content should not be shifted by the vertical-align."> + +<style> +.flexbox { + background-color: lightgrey; +} +#item1 { + vertical-align: 10px; +} +#item3 { + vertical-align: 30px; +} +</style> + +<div class='flexbox'> + <!-- flex item: block child --> + <div id='item1'>block</div> + <!-- flex item: anonymous block box around inline content --> + anonymous item 2 + <!-- flex item: inline child --> + <span id='item3'>item 3</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-item-z-ordering-001.html b/testing/web-platform/tests/css/css-flexbox/flex-item-z-ordering-001.html new file mode 100644 index 0000000000..d7344eb93c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-item-z-ordering-001.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>CSS Flexbox: z-index on non-positioned flex-items</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#painting"> +<link rel="bookmark" href="https://bugs.webkit.org/show_bug.cgi?id=91405"> +<link rel="match" href="reference/flex-item-z-ordering-001-ref.html"> +<meta name="assert" content="z-index on non-positioned flex-items works."> +<style> +.flex-item { + width: 50px; + height: 50px; +} +.positioned { + position: absolute; + left: 25px; + height: 25px; + width: 50px; +} +</style> +<div>The green boxes should be above the orange boxes, which should be above the purple boxes, which are above the salmon boxes.<div> +<div style="position:relative"> + <div style="display:flex;"> + <div class="flex-item" style="z-index: 1; background-color: salmon;"></div> + <div class="flex-item" style="z-index: 100; background-color: orange;"></div> + </div> + <div class="positioned" style="top: 0; z-index: 150; background-color: green"></div> + <div class="positioned" style="top: 25px; z-index: 50; background-color: purple"></div> +</div> +<div style="position:relative"> + <div style="display:flex;"> + <img class="flex-item" style="z-index: 1; background-color: salmon;"></img> + <img class="flex-item" style="z-index: 100; background-color: orange;"></img> + </div> + <img class="positioned" style="top: 0; z-index: 150; background-color: green"></img> + <img class="positioned" style="top: 25px; z-index: 50; background-color: purple"></img> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-lines/multi-line-wrap-reverse-column-reverse-ref.html b/testing/web-platform/tests/css/css-flexbox/flex-lines/multi-line-wrap-reverse-column-reverse-ref.html new file mode 100644 index 0000000000..38366a62f7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-lines/multi-line-wrap-reverse-column-reverse-ref.html @@ -0,0 +1,74 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test Reference: flex container multiline wrapping-reverse in column-reverse direction</title> + <link rel="author" title="tmtysk" href="mailto:tmtysk@gmail.com"> + <link rel="reviewer" title="Tab Atkins" href="mailto:jackalmage@gmail.com"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + * { margin:0; padding:0; font-size:100%; line-height:1; font-family: Ahem; } + + .test { + width: 300px; + float: left; + width: 33.3333%; + } + + p { + margin-top: 10px; + margin-right: 10px; + background: #ccc; + } + + #row1-col1 { + height: 90px; + color: orange; + } + + #row1-col2 { + height: 90px; + color: green; + } + + #row1-col3 { + height: 90px; + color: blue; + } + + #row2-col1 { + height: 140px; + color: yellow; + } + + #row2-col2 { + height: 140px; + color: magenta; + } + + #row3-col1 { + height: 290px; + color: cyan; + } + + .clear { + clear: both; + } + + </style> + </head> + <body> + <div class="test"> + <p id="row1-col1">1-1</p> + <p id="row1-col2">1-2</p> + <p id="row1-col3">1-3</p> + </div> + <div class="test"> + <p id="row2-col1">2-1</p> + <p id="row2-col2">2-2</p> + </div> + <div class="test"> + <p id="row3-col1">3-1</p> + </div> + <div class="clear"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-lines/multi-line-wrap-reverse-column-reverse.html b/testing/web-platform/tests/css/css-flexbox/flex-lines/multi-line-wrap-reverse-column-reverse.html new file mode 100644 index 0000000000..48c18fc536 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-lines/multi-line-wrap-reverse-column-reverse.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: flex container multiline wrapping-reverse in column-reverse direction.</title> + <link rel="author" title="tmtysk" href="mailto:tmtysk@gmail.com"> + <link rel="reviewer" title="Tab Atkins" href="mailto:jackalmage@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> + <link rel="match" href="multi-line-wrap-reverse-column-reverse-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <meta name="assert" content="This test check that a flex container reverse-wraps blocks multiline in column-reverse direction."> + <style> + * { margin:0; padding:0; font-size:100%; line-height:1; font-family: Ahem; } + + #test { + display: flex; + flex-direction: column-reverse; + flex-wrap: wrap-reverse; + height: 300px; + } + + p { + margin-top: 10px; + margin-right: 10px; + background: #ccc; + } + + #col1-row1 { + height: 90px; + color: orange; + } + + #col1-row2 { + height: 90px; + color: green; + } + + #col1-row3 { + height: 90px; + color: blue; + } + + #col2-row1 { + height: 140px; + color: yellow; + } + + #col2-row2 { + height: 140px; + color: magenta; + } + + #col3-row1 { + height: 290px; + color: cyan; + } + + </style> + </head> + <body> + <div id="test"> + <p id="col3-row1">3-1</p> + <p id="col2-row2">2-2</p> + <p id="col2-row1">2-1</p> + <p id="col1-row3">1-3</p> + <p id="col1-row2">1-2</p> + <p id="col1-row1">1-1</p> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-lines/multi-line-wrap-reverse-row-reverse-ref.html b/testing/web-platform/tests/css/css-flexbox/flex-lines/multi-line-wrap-reverse-row-reverse-ref.html new file mode 100644 index 0000000000..4bc8a349f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-lines/multi-line-wrap-reverse-row-reverse-ref.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test Reference: flex container multiline wrapping-reverse in row-reverse direction</title> + <link rel="author" title="tmtysk" href="mailto:tmtysk@gmail.com"> + <link rel="reviewer" title="Tab Atkins" href="mailto:jackalmage@gmail.com"> + <style> + * { margin:0; padding:0; font-size:100%; line-height:1; } + + .test { + width: 300px; + } + + p { + margin-top: 10px; + margin-right: 10px; + background: #ccc; + } + + #row1-col1 { + width: 90px; + float: left; + } + + #row1-col2 { + width: 90px; + float: left; + } + + #row1-col3 { + width: 90px; + float: left; + } + + #row2-col1 { + width: 140px; + float: left; + } + + #row2-col2 { + width: 140px; + float: left; + } + + #row3-col1 { + width: 290px; + float: left; + } + + .clear { + clear: both; + } + + </style> + </head> + <body> + <div class="test"> + <p id="row1-col1">1-1</p> + <p id="row1-col2">1-2</p> + <p id="row1-col3">1-3</p> + </div> + <div class="clear"></div> + <div class="test"> + <p id="row2-col1">2-1</p> + <p id="row2-col2">2-2</p> + </div> + <div class="clear"></div> + <div class="test"> + <p id="row3-col1">3-1</p> + </div> + <div class="clear"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-lines/multi-line-wrap-reverse-row-reverse.html b/testing/web-platform/tests/css/css-flexbox/flex-lines/multi-line-wrap-reverse-row-reverse.html new file mode 100644 index 0000000000..52943ae0a4 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-lines/multi-line-wrap-reverse-row-reverse.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: flex container multiline wrapping-reverse in row-reverse direction.</title> + <link rel="author" title="tmtysk" href="mailto:tmtysk@gmail.com"> + <link rel="reviewer" title="Tab Atkins" href="mailto:jackalmage@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> + <link rel="match" href="multi-line-wrap-reverse-row-reverse-ref.html"> + <meta name="assert" content="This test check that a flex container reverse-wraps blocks multiline in row-reverse direction."> + <style> + * { margin:0; padding:0; font-size:100%; line-height:1; } + + #test { + display: flex; + flex-direction: row-reverse; + flex-wrap: wrap-reverse; + width: 300px; + } + + p { + margin-top: 10px; + margin-right: 10px; + background: #ccc; + } + + #row1-col1 { + width: 90px; + } + + #row1-col2 { + width: 90px; + } + + #row1-col3 { + width: 90px; + } + + #row2-col1 { + width: 140px; + } + + #row2-col2 { + width: 140px; + } + + #row3-col1 { + width: 290px; + } + + + </style> + </head> + <body> + <div id="test"> + <p id="row3-col1">3-1</p> + <p id="row2-col2">2-2</p> + <p id="row2-col1">2-1</p> + <p id="row1-col3">1-3</p> + <p id="row1-col2">1-2</p> + <p id="row1-col1">1-1</p> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-lines/multi-line-wrap-with-column-reverse-ref.html b/testing/web-platform/tests/css/css-flexbox/flex-lines/multi-line-wrap-with-column-reverse-ref.html new file mode 100644 index 0000000000..4a9287231f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-lines/multi-line-wrap-with-column-reverse-ref.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test Reference: flex container multiline wrapping in column-reverse direction</title> + <link rel="author" title="tmtysk" href="mailto:tmtysk@gmail.com"> + <link rel="reviewer" title="Tab Atkins" href="mailto:jackalmage@gmail.com"> + <style> + * { margin:0; padding:0; font-size:100%; line-height:1; } + + .test { + width: 300px; + float: left; + width: 33.3333%; + } + + p { + margin-top: 10px; + margin-right: 10px; + background: #ccc; + } + + #row1-col1 { + height: 90px; + } + + #row1-col2 { + height: 90px; + } + + #row1-col3 { + height: 90px; + } + + #row2-col1 { + height: 140px; + } + + #row2-col2 { + height: 140px; + } + + #row3-col1 { + height: 290px; + } + + .clear { + clear: both; + } + + </style> + </head> + <body> + <div class="test"> + <p id="row1-col1">1-1</p> + <p id="row1-col2">1-2</p> + <p id="row1-col3">1-3</p> + </div> + <div class="test"> + <p id="row2-col1">2-1</p> + <p id="row2-col2">2-2</p> + </div> + <div class="test"> + <p id="row3-col1">3-1</p> + </div> + <div class="clear"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-lines/multi-line-wrap-with-column-reverse.html b/testing/web-platform/tests/css/css-flexbox/flex-lines/multi-line-wrap-with-column-reverse.html new file mode 100644 index 0000000000..83acae4167 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-lines/multi-line-wrap-with-column-reverse.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: flex container multiline wrapping in column-reverse direction</title> + <link rel="author" title="tmtysk" href="mailto:tmtysk@gmail.com"> + <link rel="reviewer" title="Tab Atkins" href="mailto:jackalmage@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> + <link rel="match" href="multi-line-wrap-with-column-reverse-ref.html"> + <meta name="assert" content="This test check that a flex container wraps blocks multiline in column-reverse direction."> + <style> + * { margin:0; padding:0; font-size:100%; line-height:1; } + + #test { + display: flex; + flex-direction: column-reverse; + flex-wrap: wrap; + height: 300px; + } + + p { + margin-top: 10px; + margin-right: 10px; + background: #ccc; + } + + #col1-row1 { + height: 90px; + } + + #col1-row2 { + height: 90px; + } + + #col1-row3 { + height: 90px; + } + + #col2-row1 { + height: 140px; + } + + #col2-row2 { + height: 140px; + } + + #col3-row1 { + height: 290px; + } + + </style> + </head> + <body> + <div id="test"> + <p id="col1-row3">1-3</p> + <p id="col1-row2">1-2</p> + <p id="col1-row1">1-1</p> + <p id="col2-row2">2-2</p> + <p id="col2-row1">2-1</p> + <p id="col3-row1">3-1</p> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-lines/multi-line-wrap-with-row-reverse-ref.html b/testing/web-platform/tests/css/css-flexbox/flex-lines/multi-line-wrap-with-row-reverse-ref.html new file mode 100644 index 0000000000..0383b7029e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-lines/multi-line-wrap-with-row-reverse-ref.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test Reference: flex container multiline wrapping in row-reverse direction</title> + <link rel="author" title="tmtysk" href="mailto:tmtysk@gmail.com"> + <link rel="reviewer" title="Tab Atkins" href="mailto:jackalmage@gmail.com"> + <style> + .test { + width: 300px; + } + + p { + margin-right: 10px; + background: #ccc; + } + + #row1-col1 { + width: 90px; + float: left; + } + + #row1-col2 { + width: 90px; + float: left; + } + + #row1-col3 { + width: 90px; + float: left; + } + + #row2-col1 { + width: 140px; + float: left; + } + + #row2-col2 { + width: 140px; + float: left; + } + + #row3-col1 { + width: 290px; + float: left; + } + + .clear { + clear: both; + } + + </style> + </head> + <body> + <div class="test"> + <p id="row1-col1">1-1</p> + <p id="row1-col2">1-2</p> + <p id="row1-col3">1-3</p> + </div> + <div class="clear"></div> + <div class="test"> + <p id="row2-col1">2-1</p> + <p id="row2-col2">2-2</p> + </div> + <div class="clear"></div> + <div class="test"> + <p id="row3-col1">3-1</p> + </div> + <div class="clear"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-lines/multi-line-wrap-with-row-reverse.html b/testing/web-platform/tests/css/css-flexbox/flex-lines/multi-line-wrap-with-row-reverse.html new file mode 100644 index 0000000000..220ce0a7b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-lines/multi-line-wrap-with-row-reverse.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: flex container multiline wrapping in row-reverse direction</title> + <link rel="author" title="tmtysk" href="mailto:tmtysk@gmail.com"> + <link rel="reviewer" title="Tab Atkins" href="mailto:jackalmage@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> + <link rel="match" href="multi-line-wrap-with-row-reverse-ref.html"> + <meta name="assert" content="This test check that a flex container wraps blocks multiline in row-reverse direction."> + <style> + #test { + display: flex; + flex-direction: row-reverse; + flex-wrap: wrap; + width: 300px; + } + + p { + margin-right: 10px; + background: #ccc; + } + + #row1-col1 { + width: 90px; + } + + #row1-col2 { + width: 90px; + } + + #row1-col3 { + width: 90px; + } + + #row2-col1 { + width: 140px; + } + + #row2-col2 { + width: 140px; + } + + #row3-col1 { + width: 290px; + } + + </style> + </head> + <body> + <div id="test"> + <p id="row1-col3">1-3</p> + <p id="row1-col2">1-2</p> + <p id="row1-col1">1-1</p> + <p id="row2-col2">2-2</p> + <p id="row2-col1">2-1</p> + <p id="row3-col1">3-1</p> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-margin-no-collapse.html b/testing/web-platform/tests/css/css-flexbox/flex-margin-no-collapse.html new file mode 100644 index 0000000000..1df2d79426 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-margin-no-collapse.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Flexible Box Test: flex item margins</title> + <link rel="author" title="Ping Huang" href="mailto:phuangce@gmail.com" /> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-containers"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#item-margins"> + <link rel="match" href="reference/flex-margin-no-collapse-ref.html"> + <meta name="assert" content="The vertical gap between two green boxs should be 100px." /> + <style type="text/css"> + #container { + display: flex ; + flex-direction: column; + position: absolute; + top: 100px; + left: 10px; + width: 200px; + height: 300px; + } + + .box { + width: 100px; + height: 100px; + background-color: green; + flex: none; + } + + #box1 { + margin: 50px 0; + } + + #box2 { + margin: 50px 0; + } + + #red-box { + position: absolute; + top: 350px; + left: 10px; + width: 100px; + height: 100px; + background-color: red; + } + </style> +</head> +<body> + <p>The test passes if there are two green boxes and no red.</p> + <div id="red-box"></div> + <div id="container"> + <div id="box1" class="box"></div> + <div id="box2" class="box"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-001.xht b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-001.xht new file mode 100644 index 0000000000..3d9562e8aa --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-001.xht @@ -0,0 +1,48 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Flexible Box Test: Minimum height of flex items</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + <meta name="assert" content="Checks that minimum height for flex items is the min-content size." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-flex { + display: flex; + flex-direction: column; + width: 100px; + height: 10px; + } + + #test-flex-item-overlapping-green { + color: green; + background-color: green; + font: 50px/1 Ahem; + } + + #content-100x100 { + width: 100px; + height: 100px; + } + ]]></style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="reference-overlapped-red"></div> + <div id="constrained-flex"> + <div id="test-flex-item-overlapping-green"> + <div id="content-100x100"></div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-002.xht b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-002.xht new file mode 100644 index 0000000000..9addd30ca3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-002.xht @@ -0,0 +1,46 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Flexible Box Test: Minimum height of flex items</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + <meta name="assert" content="Checks that minimum height for flex items is the specified size if it's smaller than the min-content size." /> + <style type="text/css"><![CDATA[ + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-flex { + display: flex; + flex-direction: column; + width: 100px; + height: 10px; + } + + #test-flex-item-overlapping-green { + background-color: green; + height: 100px; + } + + #content-100x200 { + width: 100px; + height: 200px; + } + ]]></style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="reference-overlapped-red"></div> + <div id="constrained-flex"> + <div id="test-flex-item-overlapping-green"> + <div id="content-100x200"></div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-003.xht b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-003.xht new file mode 100644 index 0000000000..3dc59b9659 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-003.xht @@ -0,0 +1,50 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Flexible Box Test: Minimum height of flex items</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="Checks that minimum height for flex items is the min-content size if it's smaller than the specified size." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-flex { + display: flex; + flex-direction: column; + width: 100px; + height: 10px; + } + + #test-flex-item-overlapping-green { + color: green; + background-color: green; + height: 200px; + font: 50px/1 Ahem; + } + + #content-100x100 { + width: 100px; + height: 100px; + } + ]]></style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="reference-overlapped-red"></div> + <div id="constrained-flex"> + <div id="test-flex-item-overlapping-green"> + <div id="content-100x100"></div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-004.xht b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-004.xht new file mode 100644 index 0000000000..5e72772382 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-004.xht @@ -0,0 +1,34 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Flexible Box Test: Minimum height of flex items</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + <meta name="assert" content="Checks that minimum height for flex items is the min-content size (which corresponds to the image size)." /> + <style type="text/css"><![CDATA[ + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-flex { + display: flex; + flex-direction: column; + width: 100px; + height: 10px; + } + ]]></style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="reference-overlapped-red"></div> + <div id="constrained-flex"> + <img src="support/100x100-green.png" /> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-005.xht b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-005.xht new file mode 100644 index 0000000000..b180d8d47a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-005.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Flexible Box Test: Minimum height of flex items</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + <meta name="assert" content="Checks that automatic minimum height for flex items is the specified size suggestion, when that is the smallest of the available suggestions." /> + <style type="text/css"><![CDATA[ + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-flex { + display: flex; + flex-direction: column; + width: 100px; + height: 10px; + } + + #test-flex-item-overlapping-green { + height: 100px; + } + ]]></style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="reference-overlapped-red"></div> + <div id="constrained-flex"> + <img id="test-flex-item-overlapping-green" src="support/200x200-green.png" /> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-006.xht b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-006.xht new file mode 100644 index 0000000000..1387c6f1d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-006.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Flexible Box Test: Minimum height of flex items</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + <meta name="assert" content="Checks that minimum height for flex items is the specified size, as the min-content size of the image corresponds to that." /> + <style type="text/css"><![CDATA[ + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-flex { + display: flex; + flex-direction: column; + width: 100px; + height: 10px; + } + + #test-flex-item-overlapping-green { + height: 100px; + } + ]]></style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="reference-overlapped-red"></div> + <div id="constrained-flex"> + <img id="test-flex-item-overlapping-green" src="support/100x100-green.png" /> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-007.xht b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-007.xht new file mode 100644 index 0000000000..790ecb9141 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-007.xht @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Flexible Box Test: Minimum height of flex items</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + <meta name="assert" content="Checks that minimum height for flex items is the transferred size, as the min-content size of the image corresponds to that." /> + <style type="text/css"><![CDATA[ + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-flex { + display: flex; + flex-direction: column; + width: 100px; + height: 10px; + } + + #test-flex-item-overlapping-green { + width: 100px; + } + ]]></style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <!-- flex base size = 100 due to part B. For automatic minimum size: + transferred size suggestion = 100, content size suggestion = 100. + --> + + <div id="reference-overlapped-red"></div> + <div id="constrained-flex"> + <img id="test-flex-item-overlapping-green" src="support/60x60-green.png" /> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-008.xht b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-008.xht new file mode 100644 index 0000000000..ead7a424b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-008.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Flexible Box Test: Minimum height of flex items</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + <meta name="assert" content="Checks that minimum height for flex items is the transferred size, as the min-content size of the image corresponds to that." /> + <style type="text/css"><![CDATA[ + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-flex { + display: flex; + flex-direction: column; + width: 100px; + height: 10px; + } + + #test-flex-item-overlapping-green { + width: 100px; + } + ]]></style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="reference-overlapped-red"></div> + <div id="constrained-flex"> + <img id="test-flex-item-overlapping-green" src="support/100x100-green.png" /> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-009.html b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-009.html new file mode 100644 index 0000000000..718386af02 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-009.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<title>Tests correct handling of min-height: auto with dynamic changes</title> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" /> +<link rel="author" title="Google Inc." href="http://www.google.com/"> +<link href="support/flexbox.css" rel="stylesheet"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<style> +.container { + height: 300px; + outline: 2px solid black; +} + +.inner +{ + width: 400px; + flex: 1; + background-color: green; +} +#container2 .flexbox > * { flex-basis: 0; } +#container2 .column > * { flex-basis: auto; } +</style> +<script> +function change() { + var container = document.getElementById('container'); + container.offsetHeight; + container.style.height = '80px'; + container = document.getElementById('container2'); + container.offsetHeight; + container.style.height = '80px'; + checkLayout('.container'); +} +</script> +<body onload="change()"> +<p>Green rectangle should be entirely within the black rectangle</p> +<div id="log"></div> +<div id="container" class="container"> + <div class="flexbox column" style="height: 100%;"> + <div class="flexbox flex-one"> + <div class="flexbox column"> + <div class="flexbox column flex-one"> + <div class="inner" data-expected-height="80"> + </div> + </div> + </div> + </div> + </div> +</div> + +<div id="container2" class="container"> + <div class="flexbox column" style="height: 100%;"> + <div class="flexbox flex-one"> + <div class="flexbox column"> + <div class="flexbox column flex-one"> + <div class="inner" data-expected-height="80"> + </div> + </div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-010.html b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-010.html new file mode 100644 index 0000000000..482c062d8d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-010.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<title>Tests correct handling of min-height: min-content with dynamic changes</title> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#resolve-flexible-lengths" title="4.5. Implied Minimum Size of Flex Items" /> +<link rel="author" title="Google Inc." href="http://www.google.com/"> +<link href="support/flexbox.css" rel="stylesheet"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<style> +.container { + height: 300px; + outline: 2px solid black; +} + +.inner +{ + width: 400px; + flex: 1; + background-color: green; +} +#container2 .flexbox > * { flex-basis: 0; } +#container2 .column > * { flex-basis: auto; } +.container .flexbox { min-height: min-content; } +.container > .flexbox { min-height: 0; } +</style> +<script> +function change() { + var container = document.getElementById('container'); + container.offsetHeight; + container.style.height = '80px'; + container = document.getElementById('container2'); + container.offsetHeight; + container.style.height = '80px'; + checkLayout('.container'); +} +</script> +<body onload="change()"> +<p>Green rectangle should be entirely within the black rectangle</p> +<div id="log"></div> +<div id="container" class="container"> + <div class="flexbox column" style="height: 100%;"> + <div class="flexbox flex-one"> + <div class="flexbox column"> + <div class="flexbox column flex-one"> + <div class="inner" data-expected-height="80"> + </div> + </div> + </div> + </div> + </div> +</div> + +<div id="container2" class="container"> + <div class="flexbox column" style="height: 100%;"> + <div class="flexbox flex-one"> + <div class="flexbox column"> + <div class="flexbox column flex-one"> + <div class="inner" data-expected-height="80"> + </div> + </div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-011.xht b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-011.xht new file mode 100644 index 0000000000..3c86b0d66e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-011.xht @@ -0,0 +1,50 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Flexible Box Test: Minimum height of flex items</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + <meta name="assert" content="Checks that minimum height for flex items is the min-content size." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-flex { + display: flex; + flex-direction: column; + width: 100px; + height: 10px; + } + + #test-flex-item-overlapping-green { + display: flex; + flex-basis: 0; + color: green; + background-color: green; + font: 50px/1 Ahem; + } + + #content-100x100 { + width: 100px; + height: 100px; + } + ]]></style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="reference-overlapped-red"></div> + <div id="constrained-flex"> + <div id="test-flex-item-overlapping-green"> + <div id="content-100x100"></div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-012.html b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-012.html new file mode 100644 index 0000000000..a193c29cb6 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-012.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<title>CSS Flexbox: Combining 100% heights with min-height: auto should not lead to overflow</title> +<link rel="author" title="Google LLC" href="https://www.google.com/" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" /> +<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=927066" /> + +<style> +.flexbox { + display: flex; +} + +.column { + flex-flow: column; +} + +.flexbox span { + height: 100%; + background: orange; + display: block; +} +</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 column" style="height: 100px; width: 100px; background: green"> + <div style="height: 10px; flex: 0.1;" data-expected-height="10"></div> + <div style="height: 100%; display: flex; background: teal; flex: 0.9;" data-expected-height="90"> + <div style="height: 100%"></div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-013.html b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-013.html new file mode 100644 index 0000000000..a039c4ac5f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-013.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> +<title>CSS Flexbox: min-height: auto with nested flexboxes</title> +<link rel="author" title="Google LLC" href="https://www.google.com/" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" /> +<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=933931" /> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + +<style> +.outer { + display: flex; + flex-direction: column; + height: 20px; + width: 100px; + background: red; +} + +.middle { + display: flex; + flex-direction: column; + background: green; +} + +.inner { + display: flex; + flex-direction: column; +} + +.tall { + width: 50px; + height: 100px; +} +</style> +<body> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div class="outer"> + <div class="middle"> + <div class="inner"> + <div class="tall"></div> + </div> + </div> +</div> + + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-014.html b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-014.html new file mode 100644 index 0000000000..b130ff5561 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-014.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html> +<title>CSS Flexbox: min-height: auto with nested flexboxes and justify-content</title> +<link rel="author" title="Google LLC" href="https://www.google.com/" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" /> +<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=945214" /> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + +<style> +.overlapped-green { + position: absolute; + background-color: green; + width: 100px; + height: 100px; + z-index: 1; +} + +.outer { + display: flex; + flex-direction: column; + height: 100px; + width: 100px; + background: green; +} + +.inner { + display: flex; + flex-direction: column; + justify-content: flex-end; + height: 100%; + background-color: red; +} + +.spacer { + height: 30px; + width: 100px; + background: red; + flex: none; +} +</style> +<body> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div class="overlapped-green"></div> +<div class="outer"> + <div class="spacer"></div> + <div class="inner"> + <div class="spacer"></div> + </div> +</div> + + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-015.html b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-015.html new file mode 100644 index 0000000000..81fd54915f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-015.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<title>CSS Flexbox: min-height: auto with nested flexboxes and percentages</title> +<link rel="author" title="Google LLC" href="https://www.google.com/" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" /> +<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=973924" /> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + +<style> +.overlapped-green { + position: absolute; + background-color: green; + width: 100px; + height: 80px; + z-index: 1; +} +.outer { + display: flex; + width: 100px; + background: green; +} +.inner { + width: 100%; + display: flex; + flex-direction: column; + min-width: 0; +} +.flex-item { + height: 100%; + margin-bottom: 20px; + background: red; +} + +.inside-of-item { + height: 100%; + width: 100px; + min-height: 80px; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div class="overlapped-green"></div> +<div class="outer"> + <div class="inner"> + <a class="flex-item"> + <div class="inside-of-item"></div> + </a> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-016.html b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-016.html new file mode 100644 index 0000000000..a5dc87633e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-016.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>CSS Flexbox: min-height: auto with flex items containing percentage-sized children</title> +<link rel="author" title="Google LLC" href="https://www.google.com/" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" /> +<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=981481" /> +<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=984606" /> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + +<style> +.flexbox { + display: flex; + width: 100px; + flex-direction: column; +} +.item { + flex-basis: 0; + background: green; +} +.percentage { + height: 100%; +} +.fixed { + height: 100px; +} + +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div class="flexbox"> + <div class="item"> + <div class="percentage"></div> + <div class="fixed"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-017.html b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-017.html new file mode 100644 index 0000000000..b5e194219e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-017.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<title>CSS Flexbox: min-height: auto with flex items containing percentage-sized children</title> +<link rel="author" title="Google LLC" href="https://www.google.com/" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" /> +<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=998080" /> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + +<style> +.flexbox { + display: flex; + width: 100px; + height: 0; + flex-direction: column; +} +.item { + /* Because flex-basis is 0, we rely on min-height to size this item. + * We give it an explicit height so that percentages have a chance of + * resolving. We can't use 0 for the height because the min-height is + * basically min(height, min-content). */ + flex: 0 1 0px; + height: 100px; + background: green; +} +.percentage { + height: 100%; +} +.fixed { + height: 100px; +} + +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div class="flexbox"> + <div class="item"> + <div class="percentage"> + <div class="fixed"></div> + </div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-018.html b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-018.html new file mode 100644 index 0000000000..983cac476e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-018.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<title>CSS Flexbox: min-height: auto with flex items containing percentage-sized children</title> +<link rel="author" title="Google LLC" href="https://www.google.com/" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" /> +<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=998080" /> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + +<style> +.flexbox { + display: flex; + width: 100px; + height: 0; + flex-direction: column; +} +.item { + /* Because the flexbox has height:0, this would flex-shrink to 0. So we rely + * on min-height: auto to get a nonzero height. */ + height: 100px; + background: green; +} +.percentage { + height: 100%; +} +.fixed { + height: 100px; +} + +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div class="flexbox"> + <div class="item"> + <div class="percentage"> + <div class="fixed"></div> + </div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-019.html b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-019.html new file mode 100644 index 0000000000..3572a6cc88 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-019.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<title>CSS Flexbox: min-height: auto with flex items containing percentage-sized children</title> +<link rel="author" title="Google LLC" href="https://www.google.com/" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" /> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1003556" /> + +<style> +.flex { + display: flex; +} +.column { + flex-direction: column; +} + +.bigger-than-parent { + height: 100%; + min-height: 100px; + background-color: red; +} + +#reference-overlapped-green { + position: absolute; + background-color: green; + width: 100px; + height: 100px; + z-index: 1; +} + +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-green"></div> + +<div id="outer" style="width: 100px; height: 300px;" class="flex"> + <div style="height: 100px; width: 100px; background: blue;" class="flex column"> + <div style="flex: 0 1 100%"></div> + + <div style="flex: 1 0 30px;"> + <div class="bigger-than-parent"> + </div> + </div> + </div> +</div> + +<script> +onload = function() { + var outer = document.getElementById("outer"); + outer.offsetWidth; + outer.style.height = "200px"; +}; +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-020.html b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-020.html new file mode 100644 index 0000000000..dad3b64796 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-020.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>Flex transferred minimum height</title> +<link rel="author" title="dgrogan@chromium.org" href="mailto:dgrogan@chromium.org" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#transferred-size-suggestion" /> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html" /> +<meta name="assert" content="min-height: auto honors transferred size suggestion"> + +<p>Test passes if there is a filled green square.</p> + +<div style="width:100px; height: 50px; background: green;"></div> +<div style="display: flex; flex-direction: column; height: 0px"> + <img src="support/300x150-green.png" style="width: 100px"> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-021.html b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-021.html new file mode 100644 index 0000000000..ed8d1d4251 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-021.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>Flex transferred minimum height</title> +<link rel="author" title="dgrogan@chromium.org" href="mailto:dgrogan@chromium.org" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#transferred-size-suggestion" /> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html" /> +<meta name="assert" content="min-height: auto honors transferred size suggestion subject to cross axis min/max sizes"> + +<p>Test passes if there is a filled green square.</p> + +<div style="width:100px; height: 50px; background: green;"></div> +<div style="display: flex; flex-direction: column; height: 0px"> + <img src="support/300x150-green.png" style="width: 0px; min-width: 100px;"> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-022.html b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-022.html new file mode 100644 index 0000000000..943ac525fb --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-022.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>Minimum height of a replaced element with borders</title> +<link rel="author" title="Google LLC" href="https://www.google.com/" /> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" /> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="height: 100px; overflow: hidden;"> + <div style="display: flex; flex-direction: column; height: 0; width: 100px;"> + <img src="support/1x1-green.png" style="border-bottom: 99px solid green;"> + <div style="background-color: red; min-height: 100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-023.html b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-023.html new file mode 100644 index 0000000000..576d9bf7d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-023.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<title>Flex minimum height of image with intrinsic min-height specified</title> +<link rel="author" title="dgrogan@chromium.org" href="mailto:dgrogan@chromium.org" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" /> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-min-content" /> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html" /> +<link rel="bookmark" href="https://crbug.com/1088223"> +<meta name="assert" content="Flex uses automatic minimum sizes when item specifies min-height:intrinsic, because that is treated as auto."> + +<p>Test passes if there is a filled green square.</p> + +<!-- +Here's the spec trail why the height of this item is 100px. + +1. The column flexbox has height:0, and the item has flex-shrink: 1. So + min-height will determine the item's flexed height. + +2. The min-content value of the min-height property is equivalent to the + automatic size, per https://drafts.csswg.org/css-sizing-3/#valdef-width-min-content, + because it's in the item's block dimension. (Blink legacy flex disagrees here) + +3. Per https://drafts.csswg.org/css-flexbox/#min-size-auto, the used value of a + main axis automatic minimum size on a flex item that is not a scroll container + is a content-based minimum size. + +4. The content-based min size of this item is min(content size suggestion, + specified size suggestion). We ignore transferred size suggestion because + this item has a specified size. + +5. content size suggestion = 50px because the stretched width of 100px is sent + through the 2:1 aspect ratio to determine the image's min-content size in the + block axis. + + 5a. This flex container qualifies for 9.8.3: + + If a single-line flex container has a definite cross size, the automatic + preferred outer cross size of any stretched flex items is the flex + container's inner cross size (clamped to the flex item's min and max cross + size) and is considered definite. + + So the preferred width of the image is 100px. + 5b. The float specified by the min-content calculation from css-sizing 5.1 is + <img src="support/300x150-green.png" style="width: 100px; float: left;" /> + This element gets height 50px. + +6. specified size suggestion = 100px because that's what's specified. + +7. So content-based min size = min(50, 100) = 50px. That becomes its flexed + height (see #1). + +8. Then, the item stretches its width to 100px. The item has an aspect ratio, + so does the new width change the height? Not according to + https://drafts.csswg.org/css-flexbox/#algo-stretch, which says "Note that + this step does not affect the main size of the flex item, even if it has an + intrinsic aspect ratio." The height remains 50px. +--> + +<div style="height: 50px; width: 100px; background: green;"></div> +<div style="display: flex; flex-direction: column; width:100px; height: 0px;"> + <img src="support/300x150-green.png" style="min-height: min-content; height: 100px;" /> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-024.html b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-024.html new file mode 100644 index 0000000000..37052f7ec3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-024.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>Flex minimum height with intrinsic min-height specified</title> +<link rel="author" title="dgrogan@chromium.org" href="mailto:dgrogan@chromium.org" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" /> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-min-content" /> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html" /> +<link rel="bookmark" href="https://crbug.com/1088223"> +<meta name="assert" content="Flex uses automatic minimum sizes when item specifies min-height:intrinsic, because that is treated as auto."> + +<p>Test passes if there is a filled green square.</p> + +<div style="display: flex; flex-direction: column;"> + <div style="display: flex; flex-basis: 0; min-height: min-content;"> + <div style="background: green;"> + <div style="height: 100px; width: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-025.html b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-025.html new file mode 100644 index 0000000000..2c1f6fa64c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-025.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<link rel="author" title="dgrogan@chromium.org" href="mailto:dgrogan@chromium.org" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" /> +<link rel="bookmark" href="https://crbug.com/1033476"> +<meta name="assert" content="Column flex item's height does not influence its min-height content size suggestion in a varitey of scenarios."> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<style> +.outer-column-flexbox { + display: flex; + flex-direction: column; + width: 100px; + margin-bottom: 10px; /* Just for visually spacing things out */ +} +</style> + +<body onload="checkLayout('.outer-column-flexbox > div');"> + +<div id=log></div> + +<p>Test passes if there is a sequence of filled green squares.</p> + +<!-- %height of descendant is not resolved against specified height for purposes of min-content sizing. --> +<div class=outer-column-flexbox> + <div style="flex-basis: 100px; height: 200px;" data-expected-height=100> + <div style="height: 100%; background: green;" data-expected-height=100></div> + </div> +</div> + +<!-- Same as above, but with an orthogonal writing mode flex item. --> +<div class=outer-column-flexbox> + <div style="flex-basis: 100px; height: 200px; width: 100px; writing-mode: vertical-rl;" data-expected-height=100> + <div style="height: 100%; background: green;" data-expected-height=100></div> + </div> +</div> + +<!-- Same as #1 but with a grid child of the flex item. --> +<div class=outer-column-flexbox> + <div style="flex-basis: 100px; height: 200px;" data-expected-height=100> + <div style="display: grid; height: 100%; background: green" data-expected-height=100></div> + </div> +</div> + +<!-- Same as #1 but with a table child of the flex item that has a >0 intrinsic block size. --> +<div class=outer-column-flexbox> + <div style="flex-basis: 100px; height: 200px;" data-expected-height=100> + <table data-expected-height=100 style="height: 100%; width: 100%; background: green"> + <td> + <div style="height: 50px;"></div> + </td> + </table> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-026.html b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-026.html new file mode 100644 index 0000000000..9f46c953c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-026.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="dgrogan@chromium.org" href="mailto:dgrogan@chromium.org" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" /> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html" /> +<meta name="assert" content="Child in nested column flexbox's grows to its parent's flex height, not its parent's specified height."> +<link href="support/flexbox.css" rel="stylesheet"> + +<p>Test passes if there is a filled green square.</p> + +<div class="flexbox column" style="height: 100px;"> + <!-- min-height: auto resolves to 0 because content-size suggestion is 0. --> + <div class="flexbox column" style="flex: 1 0 0px; height: 200px"> + <!-- min-height: auto resolves to 0 because content-size suggestion is 0. --> + <div style="flex: 1 0 0px; width: 100px; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-027.html b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-027.html new file mode 100644 index 0000000000..052ff6a5bd --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-027.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="Nested flex item shrinks correctly when its parent has a % height that resolves to smaller than the item's flex-basis." /> +<p>Test passes if there is a filled green square.</p> + +<style> +.OuterFlexbox { + display: flex; + flex-direction: column; + height: 100px; + width: 100px; +} + +.InnerFlexbox { + display: flex; + flex-direction: column; + height: 100%; +} + +.InnerFlexbox-body { + background: green; + min-height: 0; +} +</style> + +<div class="OuterFlexbox"> + <div class="InnerFlexbox"> + <div class="InnerFlexbox-body"> + <div style="height: 200px;"> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-028.html b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-028.html new file mode 100644 index 0000000000..45cf76837d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-028.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="dgrogan@chromium.org" href="mailto:dgrogan@chromium.org" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" /> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html" /> +<meta name="assert" content="Intermediate column flex item's specified min-height is honored."> +<link href="support/flexbox.css" rel="stylesheet"> + +<p>Test passes if there is a filled green square.</p> + +<div class="flexbox column"> + <div class="flexbox column" style="flex: 1 0 0px; min-height: 100px"> + <div style="flex: 1 0 0px; width: 100px; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-029.html b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-029.html new file mode 100644 index 0000000000..62b77b92fc --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-029.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<link rel="author" title="dgrogan@chromium.org" href="mailto:dgrogan@chromium.org" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" /> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html" /> +<meta name="assert" content="Inner column flexbox doesn't wrap its items because its min-size reported to the outer flexbox accommated the sum of the items' intrinsic block sizes."> + +<p>Test passes if there is a filled green square.</p> + +<div style="display: flex; flex-direction: column;"> + <!-- min-height is min(100, 500) = 100 --> + <!-- Final height is 100px. --> + <div style="display: flex; flex-direction: column; flex-wrap: wrap; flex: 1 0 0px; height: 500px"> + <!-- min-height is 50 --> + <div style="flex: 1 0 0px; width: 100px; background: green;"> + <div style="height: 50px;"></div> + </div> + <!-- min-height is 50 --> + <div style="flex: 1 0 0px; width: 100px; background: green;"> + <div style="height: 50px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-030.html b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-030.html new file mode 100644 index 0000000000..a3dc56e59e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-030.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<link rel="author" title="dgrogan@chromium.org" href="mailto:dgrogan@chromium.org" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-wrap-property" /> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html" /> +<meta name="assert" content="Inner column flexbox wraps its items when they don't fit in the vertical available space."> + +<p>Test passes if there is a filled green square.</p> + +<div style="display: flex; flex-direction: column; width: 100px;"> + <!-- min-height is min(200, 70) = 70 --> + <!-- Final height is 70px. Items each have height 100px. They won't both fit, so they need to be wrapped. --> + <div style="display: flex; flex-direction: column; flex-wrap: wrap; flex: 1 0 0px; height: 70px"> + <!-- min-height is 100 --> + <div style="flex: 1 0 0px; width: 50px; background: green;"> + <div style="height: 100px;"></div> + </div> + <!-- min-height is 100 --> + <div style="flex: 1 0 0px; width: 50px; background: green;"> + <div style="height: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-031.html b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-031.html new file mode 100644 index 0000000000..57f3f180de --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-031.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto"> +<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=240068"> +<meta name="assert" content="An intrinsic min-height can make a column flex container grow enough for its contents, even if it's also a flex item with 'flex-basis: 0px'."> + +<div id="log"></div> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script> +for (let outerFlexDirection of ["column", "column-reverse"]) { + for (let innerFlexDirection of ["column", "column-reverse"]) { + for (let placeContent of ["start", "center", "end"]) { + for (let minHeight of ["auto", "min-content", "max-content"]) { + for (let flex of ["0 0 44px", "1 1 44px"]) { + const outer = document.createElement("div"); + outer.className = "flex"; + outer.style.display = "inline-flex"; + outer.style.flexDirection = outerFlexDirection; + outer.style.border = "1px solid #000"; + outer.dataset.expectedClientHeight = "104"; + + const inner = document.createElement("div"); + inner.style.flexBasis = "0px"; + inner.style.display = "flex"; + inner.style.flexDirection = innerFlexDirection; + inner.style.placeContent = placeContent; + inner.style.minHeight = minHeight; + inner.style.border = "2px solid #0ff"; + inner.dataset.expectedClientHeight = "100"; + + const content1 = document.createElement("div"); + content1.style.flex = flex; + content1.style.border = "3px solid #f0f"; + content1.dataset.expectedHeight = "50"; + + const content2 = content1.cloneNode(); + + content1.textContent = "1"; + content2.textContent = "2"; + inner.appendChild(content1); + inner.appendChild(content2); + outer.appendChild(inner); + document.body.appendChild(outer); + } + } + } + } + document.body.appendChild(document.createElement("br")); +} +checkLayout(".flex"); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-size-001.html b/testing/web-platform/tests/css/css-flexbox/flex-minimum-size-001.html new file mode 100644 index 0000000000..c2eea80ca5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-size-001.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<title>CSS Flexbox: flexbox with min-size: auto</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-basis-property"> +<link rel="bookmark" href="https://crbug.com/426898"> +<link href="support/flexbox.css" rel="stylesheet"> +<meta name="assert" content="Flexbox with min-size: auto is handled correctly."> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<style> +.flexbox { + width: 10px; + height: 10px; + background-color: grey; +} + +.item { + background-color: red; + margin: 5px; +} + +.child { + height: 100px; + width: 100px; + background-color: green; +} + +.width-20 { + width: 20px; +} + +.flex-basis-20 { + flex-basis: 20px; +} + +</style> + +<body onload="checkLayout('.flexbox, .inline-flexbox');"> +<div id=log></div> + +<div class="flexbox" data-expected-width="10"> + <div class="item" data-expected-width="100"> + <div class="child" data-expected-width="100"></div> + </div> +</div> + +<div class="flexbox column" data-expected-height="10"> + <div class="item" data-expected-height="100"> + <div class="child" data-expected-height="100"></div> + </div> +</div> + +<div class="inline-flexbox column" data-expected-height="110"> + <div class="item flex-basis-20" data-expected-height="100"> + <div class="child" data-expected-height="100"></div> + </div> +</div> + +<div class="flexbox" data-expected-width="10"> + <div class="item width-20" data-expected-width="20"> + <div class="child" data-expected-width="100"></div> + </div> +</div> + +<div class="flexbox" data-expected-width="10"> + <div class="item flex-basis-20" data-expected-width="100"> + <div class="child" data-expected-width="100"></div> + </div> +</div> + +<div class="inline-flexbox" data-expected-width="110"> + <div class="item flex-basis-20" data-expected-width="100"> + <div class="child" data-expected-width="100"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-size-002.html b/testing/web-platform/tests/css/css-flexbox/flex-minimum-size-002.html new file mode 100644 index 0000000000..41a8cd705d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-size-002.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>CSS Flexbox: min-size when the child has a percentage min-size</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item"> +<meta name="assert" content="This test ensures that min-size can not be negative when the child has a percentage min-size."> +<link href="support/flexbox.css" rel="stylesheet"> +<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 column" style="max-height: 0; overflow: hidden; line-height: 13px;" data-expected-height="0"> + <div style="min-height: 100%;" data-expected-height="0">This is a flex item.</div> + <div style="flex: none;" data-expected-height="13">Inflexible</div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-size-003.html b/testing/web-platform/tests/css/css-flexbox/flex-minimum-size-003.html new file mode 100644 index 0000000000..95d9e37d0b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-size-003.html @@ -0,0 +1,23 @@ +<!doctype html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto"> +<link rel="help" href="https://crbug.com/1151608"> +<meta name="assert" content="automatic minimum size computation doesn't overflow when multiplying by the aspect ratio" /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('img')"> + +<div id=log></div> + +<div style="display: flex; width: 300px;"> + <img src="data:image/svg+xml,%3Csvg viewBox='0 0 1 1' width='8000' height='8000' xmlns='http://www.w3.org/2000/svg' %3E%3C/svg%3E" data-expected-width=8000 style="height: 8000px;"> +</div> + +<div style="display: flex; flex-direction: column; height: 300px;"> + <img src="data:image/svg+xml,%3Csvg viewBox='0 0 1 1' width='8000' height='8000' xmlns='http://www.w3.org/2000/svg' %3E%3C/svg%3E" data-expected-height=8000 style="width: 8000px;"> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-001.xht b/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-001.xht new file mode 100644 index 0000000000..cd18483ba4 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-001.xht @@ -0,0 +1,40 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Flexible Box Test: Minimum width of flex items</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="Checks that minimum width for flex items is the min-content size." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-flex { + display: flex; + width: 10px; + } + + #test-flex-item-overlapping-green { + color: green; + background-color: green; + font: 50px/1 Ahem; + } + ]]></style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="reference-overlapped-red"></div> + <div id="constrained-flex"> + <div id="test-flex-item-overlapping-green">IT E</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-002.xht b/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-002.xht new file mode 100644 index 0000000000..344ff4def7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-002.xht @@ -0,0 +1,44 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Flexible Box Test: Minimum width of flex items</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + <meta name="assert" content="Checks that minimum width for flex items is the specified size if it's smaller than the min-content size." /> + <style type="text/css"><![CDATA[ + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-flex { + display: flex; + width: 10px; + } + + #test-flex-item-overlapping-green { + background-color: green; + width: 100px; + } + + #content-200x100 { + width: 200px; + height: 100px; + } + ]]></style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="reference-overlapped-red"></div> + <div id="constrained-flex"> + <div id="test-flex-item-overlapping-green"> + <div id="content-200x100"></div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-003.xht b/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-003.xht new file mode 100644 index 0000000000..cb3d053f6d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-003.xht @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Flexible Box Test: Minimum width of flex items</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="Checks that minimum width for flex items is the min-content size if it's smaller than the specified size." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-flex { + display: flex; + width: 10px; + } + + #test-flex-item-overlapping-green { + color: green; + background-color: green; + width: 200px; + font: 50px/1 Ahem; + } + ]]></style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="reference-overlapped-red"></div> + <div id="constrained-flex"> + <div id="test-flex-item-overlapping-green">IT E</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-004.xht b/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-004.xht new file mode 100644 index 0000000000..987137845f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-004.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Flexible Box Test: Minimum width of flex items</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + <meta name="assert" content="Checks that minimum width for flex items is the min-content size (which corresponds to the image size)." /> + <style type="text/css"><![CDATA[ + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-flex { + display: flex; + width: 10px; + } + ]]></style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="reference-overlapped-red"></div> + <div id="constrained-flex"> + <img src="support/100x100-green.png" /> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-005.xht b/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-005.xht new file mode 100644 index 0000000000..486b695997 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-005.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Flexible Box Test: Minimum width of flex items</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + <meta name="assert" content="Checks that automatic minimum width for flex items is the specified size suggestion, when that is the smallest of the available suggestions." /> + <style type="text/css"><![CDATA[ + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-flex { + display: flex; + width: 10px; + } + + #test-flex-item-overlapping-green { + width: 100px; + } + ]]></style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="reference-overlapped-red"></div> + <div id="constrained-flex"> + <img id="test-flex-item-overlapping-green" src="support/200x200-green.png" /> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-006.xht b/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-006.xht new file mode 100644 index 0000000000..1b06ecab7d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-006.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Flexible Box Test: Minimum width of flex items</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + <meta name="assert" content="Checks that minimum width for flex items is the specified size, as the min-content size of the image corresponds to that." /> + <style type="text/css"><![CDATA[ + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-flex { + display: flex; + width: 10px; + } + + #test-flex-item-overlapping-green { + width: 100px; + } + ]]></style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="reference-overlapped-red"></div> + <div id="constrained-flex"> + <img id="test-flex-item-overlapping-green" src="support/100x100-green.png" /> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-007.xht b/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-007.xht new file mode 100644 index 0000000000..158c573825 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-007.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Flexible Box Test: Minimum width of flex items</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + <meta name="assert" content="Checks that minimum width for flex items is the transferred size, as the min-content size of the image corresponds to that." /> + <style type="text/css"><![CDATA[ + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-flex { + display: flex; + width: 10px; + } + + #test-flex-item-overlapping-green { + height: 100px; + } + ]]></style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="reference-overlapped-red"></div> + <div id="constrained-flex"> + <img id="test-flex-item-overlapping-green" src="support/60x60-green.png" /> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-008.xht b/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-008.xht new file mode 100644 index 0000000000..3daa38a450 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-008.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Flexible Box Test: Minimum width of flex items</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + <meta name="assert" content="Checks that minimum width for flex items is the transferred size, as the min-content size of the image corresponds to that." /> + <style type="text/css"><![CDATA[ + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-flex { + display: flex; + width: 10px; + } + + #test-flex-item-overlapping-green { + height: 100px; + } + ]]></style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="reference-overlapped-red"></div> + <div id="constrained-flex"> + <img id="test-flex-item-overlapping-green" src="support/100x100-green.png" /> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-009.html b/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-009.html new file mode 100644 index 0000000000..1700c4a494 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-009.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title>CSS Flexible Box Test: Minimum width of flex items</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org" /> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" /> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="Implied minimum main content suggestion accounts for minimum cross size when items have an aspect ratio."> +<style type="text/css"> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-flex { + display: flex; + width: 10px; + } + + #test-flex-item-overlapping-green { + min-height: 100px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div id="constrained-flex"> + <img id="test-flex-item-overlapping-green" src="support/60x60-green.png" /> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-010.html b/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-010.html new file mode 100644 index 0000000000..8845b4896e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-010.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title>CSS Flexible Box Test: Minimum width of flex items</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org" /> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" /> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="Implied minimum main content suggestion accounts for maximum cross size when items have an aspect ratio."> +<style type="text/css"> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-flex { + display: flex; + width: 10px; + } + + #test-flex-item-overlapping-green { + max-height: 100px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div id="constrained-flex"> + <img id="test-flex-item-overlapping-green" src="support/200x200-green.png" /> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-011.html b/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-011.html new file mode 100644 index 0000000000..0eb6c5fa49 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-011.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>Flex transferred minimum width</title> +<link rel="author" title="dgrogan@chromium.org" href="mailto:dgrogan@chromium.org" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#transferred-size-suggestion" /> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html" /> +<meta name="assert" content="min-width: auto honors transferred size suggestion"> + +<p>Test passes if there is a filled green square.</p> + +<div style="width:100px; height: 50px; background: green;"></div> +<div style="display: flex; width: 0px"> <!-- width:0 makes items shrink to min-width --> + <img src="support/300x150-green.png" style="height: 50px"> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-012.html b/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-012.html new file mode 100644 index 0000000000..2ce9129eb1 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-012.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>Flex transferred minimum width</title> +<link rel="author" title="dgrogan@chromium.org" href="mailto:dgrogan@chromium.org" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#transferred-size-suggestion" /> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html" /> +<meta name="assert" content="min-width: auto honors transferred size suggestion subject to cross axis min/max sizes"> + +<p>Test passes if there is a filled green square.</p> + +<div style="width:100px; height: 50px; background: green;"></div> +<div style="display: flex; width: 0px"> <!-- width:0 makes items shrink to min-width --> + <img src="support/300x150-green.png" style="height: 2000px; max-height: 50px"> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-013.html b/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-013.html new file mode 100644 index 0000000000..52d334d519 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-013.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>Flex transferred minimum width</title> +<link rel="author" title="dgrogan@chromium.org" href="mailto:dgrogan@chromium.org" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" /> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5663" /> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="content size suggestion of a replaced aspect-ratio item accounts for definition stretched cross size"> + +<style> +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="width:100px; height: 50px; background: green;"></div> <!-- This just completes the green square. --> +<div style="display: flex; width: 0px; height: 50px;"> + <!-- + content size suggestion is 100px because the image has a stretched height of 50px. So min-content size of the image is 300x150/50 = 100. + specified size suggestion is 150px + transferred size suggestion is 100px + + transferred size suggestion is ignored because there is a specified size. + + So here the content-based minimum size is min(100px, 150px) = 100px + --> + <img src="support/300x150-green.png" style="width: 999px;"> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-014.html b/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-014.html new file mode 100644 index 0000000000..04e447b05d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-014.html @@ -0,0 +1,69 @@ +<!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: min-content; + outline: 2px solid; + display: flex; + flex-wrap: wrap; +} +.max-content { + width: 10px; + min-width: max-content; + outline: 2px solid; + display: flex; + flex-wrap: wrap; +} +.fit-content { + width: 10px; + 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/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-015.html b/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-015.html new file mode 100644 index 0000000000..d4020fe75e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-015.html @@ -0,0 +1,15 @@ +<!doctype html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" /> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="Column flexbox's imposed definite size on row flexbox is honored when resolving percentages in automatic minimum size algorithm."> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: flex; flex-direction: column; width: 100px; height: 444px;"> + <div style="flex-basis: 100px; display: flex; min-height: 0px;"> + <!-- min-width is min-height transferred through the aspect ratio: 1 x 100% x 100px = 100px --> + <img src="support/200x200-green.png" style="min-height: 100%;"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-016.html b/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-016.html new file mode 100644 index 0000000000..a3f4eb4a85 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-width-flex-items-016.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="author" title="dgrogan@chromium.org" href="mailto:dgrogan@chromium.org" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" /> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="Height of flex item in row flexbox is not ignored when resolving percentages of its descendants to determine content based minimum size suggestion."> + +<p>Test passes if there is a filled green square.</p> + +<div style="display: flex; width: 0px; height: 20px;"> + <div style="flex-basis: 50px; height: 100px;"> + <img src="support/200x200-green.png" style="height: 100%"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-one-sets-flex-basis-to-zero-px.html b/testing/web-platform/tests/css/css-flexbox/flex-one-sets-flex-basis-to-zero-px.html new file mode 100644 index 0000000000..8fca136352 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-one-sets-flex-basis-to-zero-px.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> +<title>CSS Flexbox: flex-basis with zero pixel</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-basis-property"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link href="support/flexbox.css" rel="stylesheet"> +<meta name="assert" content="This test ensures that setting 'flex-basis' property to +zero pixel or percentage in combination with one value of both 'flex-grow' and 'flex-shrink' +and 'writing-mode' value works properly."> +<style> +.flexbox > div { + font: 14px/1 Ahem; +} + +.flex-one-one-zero-percent { + flex: 1 1 0%; + min-width: 0; + min-height: 0; +} + +.flex-one-one-zero-px { + flex: 1 1 0px; + min-width: 0; + min-height: 0; +} + +.vertical { + writing-mode: vertical-rl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="document.fonts.ready.then(() => { checkLayout('.flexbox'); })"> +<div id=log></div> +<div class="flexbox column"> + <div class="flex-one" data-expected-height="14">Flex item with flex: 1</div> +</div> + +<div class="flexbox column"> + <div class="flex-one-one-zero-percent" data-expected-height="14">Flex item with flex: 1 1 0%</div> +</div> + +<div class="flexbox column"> + <div class="flex-one-one-zero-px" data-expected-height="0">Flex item with flex: 1 1 0px</div> +</div> + +<div class="flexbox column vertical"> + <div class="flex-one" data-expected-width="14">Flex item with flex: 1</div> +</div> + +<div class="flexbox column vertical"> + <div class="flex-one-one-zero-percent" data-expected-width="14">Flex item with flex: 1 1 0%</div> +</div> + +<div class="flexbox column vertical"> + <div class="flex-one-one-zero-px" data-expected-width="0">Flex item with flex: 1 1 0px</div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-order-ref.html b/testing/web-platform/tests/css/css-flexbox/flex-order-ref.html new file mode 100644 index 0000000000..02f0eb3575 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-order-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> + +<html> +<head> + <title>CSS Reftest Reference: flex order</title> + <link rel="author" title="Mitsuteru Sawa" href="mailto:mitsuteru.s@gmail.com"> + <style> + #container { display: flex; } + #highOrdinal { + background: lime; + height: 100px; width: 100px; + } + #middleOrdinal { + background: orange; + height: 100px; width: 100px; + } + #lowOrdinal { + background: red; + height: 100px; width: 100px; + } + </style> +</head> +<body> + <div id="container"> + <div id="highOrdinal"></div> + <div id="middleOrdinal"></div> + <div id="lowOrdinal"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-flexbox/flex-order.html b/testing/web-platform/tests/css/css-flexbox/flex-order.html new file mode 100644 index 0000000000..be24b2817e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-order.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: flex order</title> + <link rel="author" title="Mitsuteru Sawa" href="mailto:mitsuteru.s@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#order-property"> + <link rel="match" href="flex-order-ref.html"> + <meta name="assert" content="ordered flex items should ordered properly"> + <style> + #container { + display: flex; + } + #lowOrdinal { + order: 3; + background: red; + height: 100px; width: 100px; + } + #highOrdinal { + order: 1; + background: lime; + height: 100px; width: 100px; + } + #middleOrdinal { + order: 2; + background: orange; + height: 100px; width: 100px; + } + </style> +</head> +<body> + <div id="container"> + <div id="highOrdinal"></div> + <div id="lowOrdinal"></div> + <div id="middleOrdinal"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-flexbox/flex-outer-flexbox-column-recalculate-height-on-resize-001.html b/testing/web-platform/tests/css/css-flexbox/flex-outer-flexbox-column-recalculate-height-on-resize-001.html new file mode 100644 index 0000000000..0b0b5b4d4e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-outer-flexbox-column-recalculate-height-on-resize-001.html @@ -0,0 +1,74 @@ +<!DOCTYPE html> +<html> +<title>CSS Flexbox: height resizing with flex-direction: column</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property"> +<link rel="help" href="https://crbug.com/527039"> +<meta name="assert" content="This test checks that resizing the height of a layout with two nested flexboxes using 'flex-direction: column' correctly recalculates the outer box's height." /> + +<style> +body, +html { + height: 100%; +} + +.OuterFlexbox { + display: flex; + flex-direction: column; + height: 100%; +} + +.InnerFlexbox { + display: flex; + flex-direction: column; + max-height: 100%; + outline: 1px blue solid; +} + +.InnerFlexbox-body { + flex: 1 1 auto; + overflow-y: hidden; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="update()"> + +<div class="OuterFlexbox" data-expected-height="250"> + <div class="InnerFlexbox" data-expected-height="250"> + <div class="InnerFlexbox-body" data-expected-height="250"> + <ul> + <li>Suspendisse eu nunc lectus. Curabitur.</li> + <li>Suspendisse eu nunc lectus. Curabitur.</li> + <li>Suspendisse eu nunc lectus. Curabitur.</li> + <li>Suspendisse eu nunc lectus. Curabitur.</li> + <li>Suspendisse eu nunc lectus. Curabitur.</li> + <li>Suspendisse eu nunc lectus. Curabitur.</li> + <li>Suspendisse eu nunc lectus. Curabitur.</li> + <li>Suspendisse eu nunc lectus. Curabitur.</li> + <li>Suspendisse eu nunc lectus. Curabitur.</li> + <li>Suspendisse eu nunc lectus. Curabitur.</li> + <li>Suspendisse eu nunc lectus. Curabitur.</li> + <li>Suspendisse eu nunc lectus. Curabitur.</li> + <li>Suspendisse eu nunc lectus. Curabitur.</li> + <li>Suspendisse eu nunc lectus. Curabitur.</li> + <li>Suspendisse eu nunc lectus. Curabitur.</li> + </ul> + </div> + </div> +</div> + +<script> +function update() { + document.body.offsetHeight; + document.body.style.height = '50px'; + document.body.offsetHeight; + document.body.style.height = '250px'; + document.body.offsetHeight; + checkLayout('.OuterFlexbox'); +} +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-shorthand-flex-basis-middle.html b/testing/web-platform/tests/css/css-flexbox/flex-shorthand-flex-basis-middle.html new file mode 100644 index 0000000000..284aac275b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-shorthand-flex-basis-middle.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<title>CSS Flexbox: flex shorthand with 'auto' or 'zero' percentage value</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property"> +<link href="support/flexbox.css" rel="stylesheet"> +<meta name="assert" content="This test ensures that setting '%0' or 'auto' to the flex-basis +in the middle of between 'flex-grow' and 'flex-shrink' properties whose value is '1' works properly."> +<style> +.flexbox { + width: 500px; + height: 100px; + background: green; +} + +.flexbox > div { + width: 50px; + background: yellow; +} +</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 data-expected-width="50" style="flex: 1 0% 1"></div> + <div data-expected-width="50" style="flex: 1 0% 1"></div> + <div data-expected-width="50" style="flex: 1 0% 1"></div> +</div> + +<div class="flexbox"> + <div data-expected-width="50" style="flex: 1 auto 1"></div> + <div data-expected-width="50" style="flex: 1 auto 1"></div> + <div data-expected-width="50" style="flex: 1 auto 1"></div> +</div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-flexbox/flex-shrink-001.html b/testing/web-platform/tests/css/css-flexbox/flex-shrink-001.html new file mode 100644 index 0000000000..b4e4851690 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-shrink-001.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-shrink - number(positive)</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.3.2. The 'flex-shrink' property" href="http://www.w3.org/TR/css-flexbox-1/#flex-shrink-property"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The flex-shrink property set positive number determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed"> +<style> + #container { + background-color: red; + display: flex; + height: 100px; + width: 100px; + } + #container div { + height: 100px; + width: 100px; + } + #test1 { + flex-shrink: 2; + } + #test2 { + background-color: green; + flex-shrink: 3; + } + #cover { + background-color: green; + height: 100px; + margin-top: -100px; + width: 60px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="test1"></div> + <div id="test2"></div> + </div> + <div id="cover"></div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-shrink-002.html b/testing/web-platform/tests/css/css-flexbox/flex-shrink-002.html new file mode 100644 index 0000000000..a65d6f2d8e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-shrink-002.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-shrink - number(negative)</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.3.2. The 'flex-shrink' property" href="http://www.w3.org/TR/css-flexbox-1/#flex-shrink-property"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The flex-shrink property set negative is invalid to shrink flex items when negative free space is distributed"> +<style> + #container { + background-color: red; + display: flex; + height: 100px; + width: 100px; + } + #container div { + height: 100px; + width: 100px; + } + #test1 { + flex-shrink: -2; + } + #test2 { + background-color: green; + flex-shrink: -3; + } + #cover { + background-color: green; + height: 100px; + margin-top: -100px; + width: 50px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="test1"></div> + <div id="test2"></div> + </div> + <div id="cover"></div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-shrink-003.html b/testing/web-platform/tests/css/css-flexbox/flex-shrink-003.html new file mode 100644 index 0000000000..dc50d88c60 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-shrink-003.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-shrink - 1(initial value)</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.3.2. The 'flex-shrink' property" href="http://www.w3.org/TR/css-flexbox-1/#flex-shrink-property"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The flex-shrink property initial value is 1"> +<style> + #container { + background-color: red; + display: flex; + height: 100px; + width: 100px; + } + #container div { + height: 100px; + width: 100px; + } + #test2 { + background-color: green; + flex-shrink: 4; + } + #cover { + background-color: green; + height: 100px; + margin-top: -100px; + width: 80px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="test1"></div> + <div id="test2"></div> + </div> + <div id="cover"></div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-shrink-004.html b/testing/web-platform/tests/css/css-flexbox/flex-shrink-004.html new file mode 100644 index 0000000000..6d4e4a3e06 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-shrink-004.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-shrink - number(flex container has enough space)</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.3.2. The 'flex-shrink' property" href="http://www.w3.org/TR/css-flexbox-1/#flex-shrink-property"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The flex-shrink property is invalid when flex container has enough space to load flex items"> +<style> + #container { + background-color: red; + display: flex; + height: 100px; + width: 100px; + } + #container div { + background-color: green; + height: 100px; + width: 40px; + } + #test1 { + flex-shrink: 2; + } + #test2 { + flex-shrink: 3; + } + #cover { + background-color: green; + height: 100px; + margin-left: 80px; + margin-top: -100px; + width: 20px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="test1"></div> + <div id="test2"></div> + </div> + <div id="cover"></div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-shrink-005.html b/testing/web-platform/tests/css/css-flexbox/flex-shrink-005.html new file mode 100644 index 0000000000..464ac85f7a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-shrink-005.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-shrink - 0</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.3.2. The 'flex-shrink' property" href="http://www.w3.org/TR/css-flexbox-1/#flex-shrink-property"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The flex-shrink property set 0 will ignore the flex container"> +<style> + #container { + background-color: red; + display: flex; + height: 100px; + width: 50px; + } + #container div { + height: 100px; + width: 50px; + } + #test1 { + flex-shrink: 0; + } + #test2 { + background-color: green; + flex-shrink: 0; + } + #cover { + background-color: green; + height: 100px; + margin-top: -100px; + width: 50px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="test1"></div> + <div id="test2"></div> + </div> + <div id="cover"></div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-shrink-006.html b/testing/web-platform/tests/css/css-flexbox/flex-shrink-006.html new file mode 100644 index 0000000000..5a80a7ccea --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-shrink-006.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-shrink - 0(one of flex-shrinks sets 0, another not)</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.3.2. The 'flex-shrink' property" href="http://www.w3.org/TR/css-flexbox-1/#flex-shrink-property"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The flex item whose flex-shrink property of set 0 will displayed on the top of all flex items"> +<style> + #container { + background-color: red; + display: flex; + height: 100px; + width: 100px; + } + #container div { + height: 100px; + width: 100px; + } + #test1 { + background-color: green; + flex-shrink: 0; + } + #test2 { + background-color: yellow; + flex-shrink: 0.1; + } + #test3 { + background-color: blue; + flex-shrink: 2; + } + #test2 { + background-color: black; + flex-shrink: 3; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="test1"></div> + <div id="test2"></div> + <div id="test3"></div> + <div id="test4"></div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-shrink-007.html b/testing/web-platform/tests/css/css-flexbox/flex-shrink-007.html new file mode 100644 index 0000000000..80f11abf51 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-shrink-007.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-shrink - applied to flex container</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.3.2. The 'flex-shrink' property" href="http://www.w3.org/TR/css-flexbox-1/#flex-shrink-property"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The flex-shrink property applied to flex container is invalid, all flex items will use the default value 1"> +<style> + #container { + background-color: red; + display: flex; + flex-shrink: 2; + height: 100px; + width: 100px; + } + #container div { + height: 100px; + width: 100px; + } + #test2 { + background-color: green; + } + #cover { + background-color: green; + height: 100px; + margin-top: -100px; + width: 50px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="test1"></div> + <div id="test2"></div> + </div> + <div id="cover"></div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-shrink-008.html b/testing/web-platform/tests/css/css-flexbox/flex-shrink-008.html new file mode 100644 index 0000000000..a76c73cd81 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-shrink-008.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-shrink - less than one</title> +<link rel="help" title="7.3.1. The 'flex-shrink' property" href="http://www.w3.org/TR/css-flexbox-1/#flex-shrink-property"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Test checks that remaining free space is calculated from 'flex-shrink' set to positive number less than one."> +<style> + .container { + background: red; + height: 50px; + width: 100px; + } + #test1, #test2 { + display: flex; + width: 50px; + } + #test1 > div, #test2 > div { + background: green; + height: 50px; + } + #test1 > div { + flex-shrink: 0.9; + width: 550px; + } + #test2 > div { + flex-shrink: 0.25; + width: 75px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div class="container"> + <div id="test1"> + <div></div> + </div> + </div> + <div class="container"> + <div id="test2"> + <div></div> + <div></div> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-shrink-large-value-crash.html b/testing/web-platform/tests/css/css-flexbox/flex-shrink-large-value-crash.html new file mode 100644 index 0000000000..a48bec6558 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-shrink-large-value-crash.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title>CSS Flexbox: large flex-shrink value</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#scaled-flex-shrink-factor"> +<link rel="help" href="https://crbug.com/543614"> +<meta name="assert" content="This test ensures that large flex-shrink value does crash due to the lost of precision."> +<style> +.flex { + display: inline-flex; + width: 40px; + height: 40px; +} + +.fractional { + height: 50px; + width: 50.5px; + min-width: 50.5px; +} + +.high-shrink { + flex-shrink: 130000000000000; + height: 40px; + width: 40px; + min-width: 40px; +} +</style> + +<div class="flex"> + <div class="fractional"></div> + <div class="high-shrink"></div> +</div> + +<p>The high flex shrink factor can lead to loss of precision as we calculate the +<a href="https://drafts.csswg.org/css-flexbox/#scaled-flex-shrink-factor">sum of +scaled flex shrink factors</a> as required by the spec, and as we later subtract +the scaled flex factors for frozen violations, we can get to a negative value +due to that lost precision.</p> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-vertical-align-effect.html b/testing/web-platform/tests/css/css-flexbox/flex-vertical-align-effect.html new file mode 100644 index 0000000000..5ce535b513 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-vertical-align-effect.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: 'display' property set to 'flex'</title> + <link rel="author" title="Hua Zhao" href="mailto:zhaohua.design@163.com" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> + <link rel="match" href="reference/flex-vertical-align-effect.html"> + <meta name="assert" content="vertical-align property has no effect" /> + + <style type="text/css"> + #container { + display:flex; + align-items:flex-start; + } + input{ + margin:0;padding:0;vertical-align:middle; + } + </style> +</head> +<body> + + <div id="container"> + <input type="text" value="input1" /> + <input type="radio" /> + + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-wrap-002.html b/testing/web-platform/tests/css/css-flexbox/flex-wrap-002.html new file mode 100644 index 0000000000..d2e07afb45 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-wrap-002.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<link rel="author" title="Google LLC" href="http://www.google.com" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#cross-sizing" /> +<title>css-flexbox: Tests that we size items in a wrapping column flexbox as fit-content</title> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="The flexbox here should have two flex lines, each 50px wide and 100px tall. The flex items overflow but are transparent." /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<!-- This makes sure that we only see green if the flex items are sized correctly --> +<div style="position: absolute; width: 100px; height: 100px; background: green;"></div> + +<div style="display: flex; flex-direction: column; flex-wrap: wrap; width: 50px; height: 100px; line-height: 20px;"> + <div style="background-color: red; height: 100px;"> + <!-- These zero-height divs give the flex item has a min-content width of + 25px and a max-content width of 125px --> + <div style="width: 25px; display: inline-block;"></div> + <div style="width: 25px; display: inline-block;"></div> + <div style="width: 25px; display: inline-block;"></div> + <div style="width: 25px; display: inline-block;"></div> + <div style="width: 25px; display: inline-block;"></div> + </div> + <div style="background-color: red; height: 100px;"> + <div style="width: 25px; display: inline-block;"></div> + <div style="width: 25px; display: inline-block;"></div> + <div style="width: 25px; display: inline-block;"></div> + <div style="width: 25px; display: inline-block;"></div> + <div style="width: 25px; display: inline-block;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-wrap-003.html b/testing/web-platform/tests/css/css-flexbox/flex-wrap-003.html new file mode 100644 index 0000000000..b1a6619363 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-wrap-003.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<link rel="author" title="Google LLC" href="http://www.google.com" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#cross-sizing" /> +<title>css-flexbox: Tests that we size items in a wrapping column flexbox as fit-content</title> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="The flexbox here should have one flex line, 100px by 100px. The flex items overflow but are transparent." /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<!-- This makes sure that we only see green if the flex items are sized correctly --> +<div style="position: absolute; width: 100px; height: 100px; background: green;"></div> + +<div style="display: flex; flex-direction: column; flex-wrap: wrap; width: 100px; height: 100px; line-height: 20px;"> + <div style="background-color: red; height: 100px;"> + <!-- These zero-height divs give the flex item has a min-content width of + 50px and a max-content width of 250px --> + <div style="width: 50px; display: inline-block;"></div> + <div style="width: 50px; display: inline-block;"></div> + <div style="width: 50px; display: inline-block;"></div> + <div style="width: 50px; display: inline-block;"></div> + <div style="width: 50px; display: inline-block;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-wrap-004.html b/testing/web-platform/tests/css/css-flexbox/flex-wrap-004.html new file mode 100644 index 0000000000..679f62ae3e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-wrap-004.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<link rel="author" title="Google LLC" href="http://www.google.com" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#cross-sizing" /> +<title>css-flexbox: Tests that we size items in a wrapping column flexbox as fit-content</title> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="The flexbox here should have one flex line, 100px by 100px. The flex items overflow but are transparent." /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<!-- This makes sure that we only see green if the flex items are sized correctly --> +<div style="position: absolute; width: 100px; height: 100px; background: green;"></div> + +<div style="display: flex; flex-direction: column; flex-wrap: wrap; width: 125px; height: 100px; line-height: 20px;"> + <!-- The margin-right means that the flex item should be only 100px wide, + because it will use the available width of 125px minus the 25px margin. --> + <div style="background-color: red; height: 100px; margin-right: 25px;"> + <!-- These zero-height divs give the flex item has a min-content width of + 50px and a max-content width of 250px --> + <div style="width: 50px; display: inline-block;"></div> + <div style="width: 50px; display: inline-block;"></div> + <div style="width: 50px; display: inline-block;"></div> + <div style="width: 50px; display: inline-block;"></div> + <div style="width: 50px; display: inline-block;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-wrap-005.html b/testing/web-platform/tests/css/css-flexbox/flex-wrap-005.html new file mode 100644 index 0000000000..fb897f21c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-wrap-005.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<link rel="author" title="Google LLC" href="http://www.google.com" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#cross-sizing" /> +<title>css-flexbox: Tests that we size items in a wrapping column flexbox as fit-content</title> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="The flexbox here should have one flex line, 100px by 100px. The flex items overflow but are transparent." /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<!-- This makes sure that we only see green if the flex items are sized correctly --> +<div style="position: absolute; width: 100px; height: 100px; background: green;"></div> + +<div style="display: flex; flex-direction: column; flex-wrap: wrap; width: 200px; height: 100px; line-height: 20px; align-content: flex-start;"> + <div style="background-color: red; height: 100px; max-width: 50%; align-self: center;"> + <!-- These zero-height divs give the flex item a min-content width of + 50px and a max-content width of 250px --> + <div style="width: 50px; display: inline-block;"></div> + <div style="width: 50px; display: inline-block;"></div> + <div style="width: 50px; display: inline-block;"></div> + <div style="width: 50px; display: inline-block;"></div> + <div style="width: 50px; display: inline-block;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flex-wrap-006.html b/testing/web-platform/tests/css/css-flexbox/flex-wrap-006.html new file mode 100644 index 0000000000..e616412c2b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-wrap-006.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<title>CSS Flexbox Test: Tests correct block size with percentages and dynamic changes</title> +<link rel="author" title="Google LLC" href="http://www.google.com"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=999253" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#cross-sizing" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<!-- Each item should stretch to the size of the flex line. Because the first + item has no explicit height, the percentage should resolve to zero in + the line height calculation stage, so the second item should determine + the total height (500px at first, 100px after the change). When the first + item gets relaid out for stretching, the percentage can resolve. + The bug that motivated this testcase resolved the line height using + the previous post-stretching height of the first flex item (and + therefore resolves the percentage against 500px), which is incorrect. + --> +<div id="flex" style="display: flex; flex-wrap: wrap;"> + <div> + <div style="height: 100%; background: green; width: 100px;"></div> + </div> + <div style="height: 500px;" id="item"></div> +</div> + +<script> +var flex = document.getElementById("flex"); +flex.offsetHeight; +var item2 = document.getElementById("item"); +item2.style.height = "100px"; +</script> + diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-items-center-nested-001-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-align-items-center-nested-001-ref.html new file mode 100644 index 0000000000..2473417b82 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-items-center-nested-001-ref.html @@ -0,0 +1,16 @@ +<!doctype html> +<title>CSS Test Reference</title> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<style> +html, body { margin: 0; padding: 0; } + +.content { + margin-top: 100px; + width: 200px; + height: 200px; + background: blue; +} +</style> +<body> + <div class="content"></div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-items-center-nested-001.html b/testing/web-platform/tests/css/css-flexbox/flexbox-align-items-center-nested-001.html new file mode 100644 index 0000000000..b6e2fdff0a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-items-center-nested-001.html @@ -0,0 +1,47 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test: Flexbox nested containers with align-items: center and flexible items</title> +<link rel="match" href="flexbox-align-items-center-nested-001-ref.html"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#align-items-property"> +<style> +html, body { margin: 0; padding: 0; } +body { + height: 400px; + position: relative; +} + +.container-0 { + display: flex; + position: absolute; + height: 100%; + flex-direction: column; +} + +.container-1 { + flex: 1 0 auto; + display: flex; + align-items: center; +} + +.container-2 { + height: 100%; + display: flex; + align-items: center; +} + +.content { + width: 200px; + height: 200px; + background: blue; +} +</style> +<body> + <div class="container-0"> + <div class="container-1"> + <div class="container-2"> + <div class="content"></div> + </div> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-001-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-001-ref.xhtml new file mode 100644 index 0000000000..e5efb75609 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-001-ref.xhtml @@ -0,0 +1,73 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for behavior of the 'baseline' value for align-items and + align-self. + + NOTE: For multi-line 'display: block' elements in the testcase (and inline + content that gets wrapped in an anonymous block), we add an inline-table + wrapper here in the reference case, so that we get first-line baseline + alignment instead of the last-line baseline-alignment that an inline-block + would give us. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + display: block; + border: 1px dashed blue; + font: 14px sans-serif; + } + + div { display: inline-block; } + table { display: inline-table; } + + .big { + height: 100px; + font: 24px sans-serif; + margin-top: 20px; + } + .super { + vertical-align: super; + font-size: 12px; + } + .sub { + vertical-align: sub; + font-size: 12px; + } + + .lime { background: lime; } + .yellow { background: yellow; } + .orange { background: orange; } + .pink { background: pink; } + .aqua { background: aqua; } + .tan { background: tan; } + </style> + </head> + <body> + <div class="flexbox"> + <div class="lime">blk_1line</div + ><table cellspacing="0" cellpadding="0" + class="yellow">blk<br/>2lines</table + ><div class="orange"><span class="super">super</span></div + ><div class="pink"><span class="sub">sub</span></div + ><table cellspacing="0" cellpadding="0" + class="aqua big">big<br/>text<br/>3lines</table + ><table class="tan" cellspacing="0" cellpadding="0"> + <i>ital<br/>ic</i> + </table> + </div> + <div class="flexbox"> + <div class="lime">blk_1line</div + ><div class="yellow">blk<br/>2lines</div + ><div class="orange"><span class="super">super</span></div + ><div class="pink"><span class="sub">sub</span></div + ><div class="aqua big">big<br/>text<br/>3lines</div + ><div class="tan"><i>ital<br/>ic</i></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-001a.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-001a.xhtml new file mode 100644 index 0000000000..0460f4162f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-001a.xhtml @@ -0,0 +1,70 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + 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). This test baseline-aligns various types of + content, and the flexbox's vertical size depends on the aggregate + post-alignment height of its children. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self'</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="flexbox-align-self-baseline-horiz-001-ref.xhtml"/> + <style> + .flexbox { + display: flex; + border: 1px dashed blue; + font: 14px sans-serif; + } + .base { + align-items: baseline; + } + .lastbase { + align-items: last baseline; + } + + .big { + height: 100px; + font: 24px sans-serif; + margin-top: 20px; + } + .super { + vertical-align: super; + font-size: 12px; + } + .sub { + vertical-align: sub; + font-size: 12px; + } + + .lime { background: lime; } + .yellow { background: yellow; } + .orange { background: orange; } + .pink { background: pink; } + .aqua { background: aqua; } + .tan { background: tan; } + </style> + </head> + <body> + <div class="flexbox base"> + <div class="lime">blk_1line</div> + <div class="yellow">blk<br/>2lines</div> + <div class="orange"><span class="super">super</span></div> + <div class="pink"><span class="sub">sub</span></div> + <div class="aqua big">big<br/>text<br/>3lines</div> + <i class="tan">ital<br/>ic</i> + </div> + <div class="flexbox lastbase"> + <div class="lime">blk_1line</div> + <div class="yellow">blk<br/>2lines</div> + <div class="orange"><span class="super">super</span></div> + <div class="pink"><span class="sub">sub</span></div> + <div class="aqua big">big<br/>text<br/>3lines</div> + <i class="tan">ital<br/>ic</i> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-001b.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-001b.xhtml new file mode 100644 index 0000000000..3a656e41e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-001b.xhtml @@ -0,0 +1,73 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + 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). This test baseline-aligns various types of + content, and the flexbox's vertical size depends on the aggregate + post-alignment height of its children. This test also uses + "flex-wrap: wrap-reverse" to make the cross-axis bottom-to-top instead + of top-to-bottom. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self' in a wrap-reverse 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="flexbox-align-self-baseline-horiz-001-ref.xhtml"/> + <style> + .flexbox { + display: flex; + flex-wrap: wrap-reverse; + border: 1px dashed blue; + font: 14px sans-serif; + } + .base { + align-items: baseline; + } + .lastbase { + align-items: last baseline; + } + + .big { + height: 100px; + font: 24px sans-serif; + margin-top: 20px; + } + .super { + vertical-align: super; + font-size: 12px; + } + .sub { + vertical-align: sub; + font-size: 12px; + } + + .lime { background: lime; } + .yellow { background: yellow; } + .orange { background: orange; } + .pink { background: pink; } + .aqua { background: aqua; } + .tan { background: tan; } + </style> + </head> + <body> + <div class="flexbox base"> + <div class="lime">blk_1line</div> + <div class="yellow">blk<br/>2lines</div> + <div class="orange"><span class="super">super</span></div> + <div class="pink"><span class="sub">sub</span></div> + <div class="aqua big">big<br/>text<br/>3lines</div> + <i class="tan">ital<br/>ic</i> + </div> + <div class="flexbox lastbase"> + <div class="lime">blk_1line</div> + <div class="yellow">blk<br/>2lines</div> + <div class="orange"><span class="super">super</span></div> + <div class="pink"><span class="sub">sub</span></div> + <div class="aqua big">big<br/>text<br/>3lines</div> + <i class="tan">ital<br/>ic</i> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-002-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-002-ref.xhtml new file mode 100644 index 0000000000..7cfded5999 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-002-ref.xhtml @@ -0,0 +1,82 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + width: 40px; + height: 40px; + border: 1px solid gray; + margin: 5px; /* just for visual separation */ + float: left; + } + + .flexbox > * { + background: yellow; + border: 1px solid black; + height: 20px; + } + </style> + </head> + <body> + <!-- ZEROTH ROW: NO MARGINS --> + <!-- No margins on flex item: --> + <div class="flexbox"> + <div>a</div> + </div> + + + <!-- FIRST ROW: SETTING MARGIN-TOP: --> + <br style="clear: both"/> + + <!-- auto: --> + <div class="flexbox"> + <div style="margin-top: 18px">a</div> + </div> + + <!-- Negative: --> + <div class="flexbox"> + <div style="margin-top: -4px">a</div> + </div> + + <!-- Small: --> + <div class="flexbox"> + <div style="margin-top: 4px">a</div> + </div> + + <!-- Large (pushing us out of container): --> + <div class="flexbox"> + <div style="margin-top: 25px">a</div> + </div> + + + <!-- SECOND ROW: SETTING MARGIN-BOTTOM: --> + <br style="clear: both"/> + + <!-- auto: --> + <div class="flexbox"> + <div>a</div> + </div> + + <!-- Negative: --> + <div class="flexbox"> + <div>a</div> + </div> + + <!-- Small: --> + <div class="flexbox"> + <div>a</div> + </div> + + <!-- Large: --> + <div class="flexbox"> + <div>a</div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-002.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-002.xhtml new file mode 100644 index 0000000000..8aa364ec51 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-002.xhtml @@ -0,0 +1,90 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for how a baseline-aligned flex item's position is impacted by + cross-axis margins, in a fixed-size flex container. + --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Baseline alignment of flex items in fixed-size single-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="flexbox-align-self-baseline-horiz-002-ref.xhtml"/> + <style> + .flexbox { + display: flex; + align-items: baseline; + width: 40px; + height: 40px; + border: 1px solid gray; + margin: 5px; /* just for visual separation */ + float: left; + } + + .flexbox > * { + background: yellow; + border: 1px solid black; + height: 20px; + flex: 1; + } + </style> + </head> + <body> + <!-- ZEROTH ROW: NO MARGINS --> + <!-- No margins on flex item: --> + <div class="flexbox"> + <div>a</div> + </div> + + + <!-- FIRST ROW: SETTING MARGIN-TOP: --> + <br style="clear: both"/> + + <!-- auto: --> + <div class="flexbox"> + <div style="margin-top: auto">a</div> + </div> + + <!-- Negative: --> + <div class="flexbox"> + <div style="margin-top: -4px">a</div> + </div> + + <!-- Small: --> + <div class="flexbox"> + <div style="margin-top: 4px">a</div> + </div> + + <!-- Large (pushing us out of container): --> + <div class="flexbox"> + <div style="margin-top: 25px">a</div> + </div> + + + <!-- SECOND ROW: SETTING MARGIN-BOTTOM: --> + <br style="clear: both"/> + + <!-- auto: --> + <div class="flexbox"> + <div style="margin-bottom: auto">a</div> + </div> + + <!-- Negative: --> + <div class="flexbox"> + <div style="margin-bottom: -4px">a</div> + </div> + + <!-- Small: --> + <div class="flexbox"> + <div style="margin-bottom: 4px">a</div> + </div> + + <!-- Large: --> + <div class="flexbox"> + <div style="margin-bottom: 25px">a</div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-003-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-003-ref.xhtml new file mode 100644 index 0000000000..6e941360fb --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-003-ref.xhtml @@ -0,0 +1,82 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + width: 40px; + height: 40px; + border: 1px solid gray; + margin: 5px; /* just for visual separation */ + float: left; + } + + .flexbox > * { + background: yellow; + border: 1px solid black; + height: 20px; + } + </style> + </head> + <body> + <!-- ZEROTH ROW: NO MARGINS --> + <!-- No margins on flex item: --> + <div class="flexbox"> + <div style="margin-top: 18px">a</div> + </div> + + + <!-- FIRST ROW: SETTING MARGIN-TOP: --> + <br style="clear: both"/> + + <!-- auto: --> + <div class="flexbox"> + <div style="margin-top: 18px">a</div> + </div> + + <!-- Negative: --> + <div class="flexbox"> + <div style="margin-top: 18px">a</div> + </div> + + <!-- Small: --> + <div class="flexbox"> + <div style="margin-top: 18px">a</div> + </div> + + <!-- Large (pushing us out of container): --> + <div class="flexbox"> + <div style="margin-top: 18px">a</div> + </div> + + + <!-- SECOND ROW: SETTING MARGIN-BOTTOM: --> + <br style="clear: both"/> + + <!-- auto: --> + <div class="flexbox"> + <div>a</div> + </div> + + <!-- Negative: --> + <div class="flexbox"> + <div style="margin-top: 22px">a</div> + </div> + + <!-- Small: --> + <div class="flexbox"> + <div style="margin-top: 14px">a</div> + </div> + + <!-- Large: --> + <div class="flexbox"> + <div style="margin-top: -7px">a</div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-003.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-003.xhtml new file mode 100644 index 0000000000..0b8e8499c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-003.xhtml @@ -0,0 +1,92 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for how a baseline-aligned flex item's position is impacted by + cross-axis margins, in a fixed-size flex container with the cross axis + reversed via "flex-wrap: wrap-reverse". + --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Baseline alignment of flex items in fixed-size single-line flex container, with cross axis reversed</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="flexbox-align-self-baseline-horiz-003-ref.xhtml"/> + <style> + .flexbox { + display: flex; + align-items: baseline; + flex-wrap: wrap-reverse; /* Just to flip cross-axis */ + width: 40px; + height: 40px; + border: 1px solid gray; + margin: 5px; /* just for visual separation */ + float: left; + } + + .flexbox > * { + background: yellow; + border: 1px solid black; + height: 20px; + flex: 1; + } + </style> + </head> + <body> + <!-- ZEROTH ROW: NO MARGINS --> + <!-- No margins on flex item: --> + <div class="flexbox"> + <div>a</div> + </div> + + + <!-- FIRST ROW: SETTING MARGIN-TOP: --> + <br style="clear: both"/> + + <!-- auto: --> + <div class="flexbox"> + <div style="margin-top: auto">a</div> + </div> + + <!-- Negative: --> + <div class="flexbox"> + <div style="margin-top: -4px">a</div> + </div> + + <!-- Small: --> + <div class="flexbox"> + <div style="margin-top: 4px">a</div> + </div> + + <!-- Large (pushing us out of container): --> + <div class="flexbox"> + <div style="margin-top: 25px">a</div> + </div> + + + <!-- SECOND ROW: SETTING MARGIN-BOTTOM: --> + <br style="clear: both"/> + + <!-- auto: --> + <div class="flexbox"> + <div style="margin-bottom: auto">a</div> + </div> + + <!-- Negative: --> + <div class="flexbox"> + <div style="margin-bottom: -4px">a</div> + </div> + + <!-- Small: --> + <div class="flexbox"> + <div style="margin-bottom: 4px">a</div> + </div> + + <!-- Large: --> + <div class="flexbox"> + <div style="margin-bottom: 25px">a</div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-004-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-004-ref.xhtml new file mode 100644 index 0000000000..73a3123755 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-004-ref.xhtml @@ -0,0 +1,56 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for behavior of the 'baseline' value for align-items and + align-self, in a multi-line flex container. + + This reference case just consists of three single-line flex containers, + to match the testcase's one flex container with three flex lines. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + display: flex; + align-items: baseline; + width: 90px; + } + + .flexbox > * { + width: 28px; + 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> + </div> + <div class="flexbox"> + <!-- 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> + </div> + <div class="flexbox"> + <!-- 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> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-004.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-004.xhtml new file mode 100644 index 0000000000..14fbf4bc6e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-004.xhtml @@ -0,0 +1,56 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + 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 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 xmlns="http://www.w3.org/1999/xhtml"> + <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="flexbox-align-self-baseline-horiz-004-ref.xhtml"/> + <style> + .flexbox { + display: flex; + flex-wrap: wrap; + 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> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-005-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-005-ref.xhtml new file mode 100644 index 0000000000..e8b2791f44 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-005-ref.xhtml @@ -0,0 +1,58 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for behavior of the 'baseline' value for align-items and + align-self, in a multi-line flex container. + + This reference case just consists of three single-line flex containers, + to match the testcase's one flex container with three flex lines. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + display: flex; + align-items: baseline; + width: 90px; + } + + .flexbox > * { + width: 28px; + background: yellow; + border: 1px solid black; + } + + .big { font: 24px sans-serif; } + .medium { font: 14px sans-serif; } + .small { font: 8px sans-serif; } + + </style> + </head> + <body> + <!-- Note: The lines are reversed here with respect to the testcase, + due to the testcase's "wrap-reverse". --> + <div class="flexbox"> + <!-- 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> + <div class="flexbox"> + <!-- 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> + </div> + <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> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-005.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-005.xhtml new file mode 100644 index 0000000000..cfe0d1b02b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-005.xhtml @@ -0,0 +1,56 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + 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 xmlns="http://www.w3.org/1999/xhtml"> + <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="flexbox-align-self-baseline-horiz-005-ref.xhtml"/> + <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> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-006-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-006-ref.xhtml new file mode 100644 index 0000000000..9b38d0955b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-006-ref.xhtml @@ -0,0 +1,72 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for behavior of the 'baseline' value for align-items and + align-self when tested against content with an orthogonal writing-mode. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> + <style> + .container, + .containerEndAlign { + border: 1px dashed blue; + font: 14px sans-serif; + height: 50px; + } + + .container > div, + .wrapper > div{ + display: inline-block; + } + + .containerEndAlign { + display: flex; + align-items: end; + } + .wrapper { + /* This accounts for the 'margin-bottom: 3px' on the 'offset' element + in the last-baseline-aligned part of the testcase: */ + margin-bottom: 3px; + } + + .ortho { + writing-mode: vertical-rl; + width: 17px; + height: 40px; + } + + .lime { background: lime; } + .yellow { background: yellow; } + .orange { background: orange; } + .pink { background: pink; } + </style> + </head> + <body> + <div class="container"> + <div class="lime ortho">ortho</div + ><div class="yellow">one line</div + ><div class="orange" style="display: inline-flex;">two<br/>lines</div + ><div class="pink">offset</div> + </div> + + <!-- Note: in the testcase, there's a flex container here, whose flex items + are 'last baseline'-aligned and collectively snapped to the end + (bottom) edge. To mock that up, we use a simple flex container with a + single end-aligned 'display:block' flex item; and that item has + inline-block children, which are mockups of the testcase's flex items. + (These inline-blocks get automatically 'last-baseline' aligned to each + other, as part of regular inline-block layout behavior.) --> + <div class="containerEndAlign"> + <div class="wrapper"> + <div class="lime ortho">ortho</div + ><div class="yellow">one line</div + ><div class="orange">two<br/>lines</div + ><div class="pink">offset</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-006.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-006.xhtml new file mode 100644 index 0000000000..417f966587 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-006.xhtml @@ -0,0 +1,54 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + 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). This test baseline-aligns various types of + content against content that is exempt from alignment due to an + orthognal writing-mode. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self' against non-parallel writing-modes.</title> + <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/> + <link rel="match" href="flexbox-align-self-baseline-horiz-006-ref.xhtml"/> + <style> + .container { + display: flex; + border: 1px dashed blue; + font: 14px sans-serif; + height: 50px; + } + + .base { align-items: baseline; } + .lastbase { align-items: last baseline; } + + .ortho { writing-mode: vertical-rl; + width: 17px; + height: 40px; } + .offset { margin-top: 10px; + margin-bottom: 3px; } + + .lime { background: lime; } + .yellow { background: yellow; } + .orange { background: orange; } + .pink { background: pink; } + </style> + </head> + <body> + <div class="container base"> + <div class="lime ortho">ortho</div> + <div class="yellow">one line</div> + <div class="orange">two<br/>lines</div> + <div class="pink offset">offset</div> + </div> + <div class="container lastbase"> + <div class="lime ortho">ortho</div> + <div class="yellow">one line</div> + <div class="orange">two<br/>lines</div> + <div class="pink offset">offset</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-007-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-007-ref.xhtml new file mode 100644 index 0000000000..37520d66c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-007-ref.xhtml @@ -0,0 +1,41 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for behavior of 'baseline' and 'last baseline' values + for align-items and align-self. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> + <style> + .container { + display: flex; + border: 1px dashed blue; + font: 14px sans-serif; + height: 50px; + } + + .start { align-self: flex-start; } + .end { align-self: flex-end; } + + .offset { margin-top: 10px; + margin-bottom: 3px; } + + .lime { background: lime; } + .yellow { background: yellow; } + .orange { background: orange; } + .pink { background: pink; } + </style> + </head> + <body> + <div class="container"> + <div class="lime offset start">one line (first)</div + ><div class="yellow offset end">one line (last)</div + ><div class="orange offset end">two<br/>lines and offset (last)</div + ><div class="pink offset start">offset (first)</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-007.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-007.xhtml new file mode 100644 index 0000000000..50d74f5ebf --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-007.xhtml @@ -0,0 +1,44 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for behavior of 'baseline' and 'last baseline' values + for align-items (and align-self, implicitly). This test confirms + non-interference between the 'baseline' and 'last baseline' items. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Baseline alignment of block flex items with 'baseline' and 'last-baseline' values for 'align-self' against each other.</title> + <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/> + <link rel="match" href="flexbox-align-self-baseline-horiz-007-ref.xhtml"/> + <style> + .container { + display: flex; + border: 1px dashed blue; + font: 14px sans-serif; + height: 50px; + } + + .base { align-self: baseline; } + .lastbase { align-self: last baseline; } + + .offset { margin-top: 10px; + margin-bottom: 3px; } + + .lime { background: lime; } + .yellow { background: yellow; } + .orange { background: orange; } + .pink { background: pink; } + </style> + </head> + <body> + <div class="container"> + <div class="lime base">one line (first)</div> + <div class="yellow lastbase">one line (last)</div> + <div class="orange offset lastbase">two<br/>lines and offset (last)</div> + <div class="pink offset base">offset (first)</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-008-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-008-ref.xhtml new file mode 100644 index 0000000000..19049d3895 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-008-ref.xhtml @@ -0,0 +1,53 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for behavior of 'baseline' and 'last baseline' values + for align-items and align-self for sideways writing modes. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> + <style> + .container { + float: left; + display: flex; + writing-mode: sideways-rl; + border: 1px dashed blue; + font: 14px sans-serif; + width: 80px; + } + + .reverse { flex-flow: row wrap-reverse; } + + .start { align-self: start; } + .end { align-self: end; } + + .offset { margin-right: 10px; + margin-left: 3px; } + + .lime { background: lime; } + .yellow { background: yellow; } + .orange { background: orange; } + .pink { background: pink; } + + .ib { display: inline-block; } + </style> + </head> + <body> + <div class="container"> + <div class="lime offset start">one line (first)</div + ><div class="yellow offset end">one line (last)</div + ><div class="orange offset end">two<br/>lines and offset (last)</div + ><div class="pink offset start">offset (first)</div> + </div> + <div class="container reverse"> + <div class="lime offset end">one line (first)</div + ><div class="offset start"><div class="yellow ib">one line (last)</div + ><div class="orange ib">two<br/>lines and offset (last)</div></div + ><div class="pink offset end">offset (first)</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-008.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-008.xhtml new file mode 100644 index 0000000000..00bc4d9fce --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-baseline-horiz-008.xhtml @@ -0,0 +1,55 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for behavior of 'baseline' and 'last baseline' values + for align-items (and align-self, implicitly) for sideways + writing modes. This test confirms non-interference between the + 'baseline' and 'last baseline' items. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Baseline alignment of block flex items with 'baseline' and 'last-baseline' values for 'align-self' against each other.</title> + <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/> + <link rel="match" href="flexbox-align-self-baseline-horiz-008-ref.xhtml"/> + <style> + .container { + float: left; + display: flex; + writing-mode: sideways-rl; + border: 1px dashed blue; + font: 14px sans-serif; + width: 80px; + } + + .reverse { flex-flow: row wrap-reverse; } + + .base { align-self: baseline; } + .lastbase { align-self: last baseline; } + + .offset { margin-right: 10px; + margin-left: 3px; } + + .lime { background: lime; } + .yellow { background: yellow; } + .orange { background: orange; } + .pink { background: pink; } + </style> + </head> + <body> + <div class="container"> + <div class="lime base">one line (first)</div> + <div class="yellow lastbase">one line (last)</div> + <div class="orange offset lastbase">two<br/>lines and offset (last)</div> + <div class="pink offset base">offset (first)</div> + </div> + <div class="container reverse"> + <div class="lime base">one line (first)</div> + <div class="yellow lastbase">one line (last)</div> + <div class="orange offset lastbase">two<br/>lines and offset (last)</div> + <div class="pink offset base">offset (first)</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-horiz-001-block.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-horiz-001-block.xhtml new file mode 100644 index 0000000000..365354506f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-horiz-001-block.xhtml @@ -0,0 +1,97 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for align-items / align-self behavior, with all the possible + values included on different items within a flex container. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing the behavior of 'align-self' property values on flex items that are blocks, in a horizontal 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/#align-items-property"/> + <link rel="match" href="flexbox-align-self-horiz-001-ref.xhtml"/> + <style> + .flexbox { + border: 1px dashed blue; + height: 200px; + display: inline-flex; + font-size: 10px; + line-height: 10px; + + /* Any children whose align-self is 'auto' (or unspecified, or + initial) will end up taking this value from us: */ + align-items: center; + + /* Any children whose align-self is 'inherit' will end up + inheriting this value from us: */ + align-self: flex-end; + } + + .flexbox > div { + width: 40px; + } + + .big { + height: 100px; + font-size: 20px; + line-height: 20px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + align-self: flex-start; + } + .flex-end { + background: orange; + align-self: flex-end; + } + .center { + background: lightblue; + align-self: center; + } + .baseline { + background: teal; + align-self: baseline; + } + .stretch { + background: pink; + align-self: stretch; + } + .auto { + background: yellow; + align-self: auto; + } + .unspecified { + background: lightgreen; + } + .initial { + background: aqua; + align-self: initial; + } + .inherit { + background: violet; + align-self: inherit; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="center">center</div> + <div class="center big">a b c d e f</div> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + <div class="auto">auto</div> + <div class="unspecified">unspec</div> + <div class="initial">initial</div> + <div class="inherit">inherit</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-horiz-001-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-horiz-001-ref.xhtml new file mode 100644 index 0000000000..a95a724811 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-horiz-001-ref.xhtml @@ -0,0 +1,91 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for align-items / align-self behavior, using floated divs + in place of flex items and using margin-top in place of the align-items / + align-self properties. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px dashed blue; + height: 200px; + width: 560px; + font-size: 10px; + line-height: 10px; + } + + .flexbox > div { + width: 40px; + float: left; + } + + .big { + height: 100px; + font-size: 20px; + line-height: 20px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + } + .flex-end { + background: orange; + } + .center { + background: lightblue; + } + .baseline { + background: teal; + } + .stretch { + background: pink; + } + .auto { + background: yellow; + } + .unspecified { + background: lightgreen; + } + .initial { + background: aqua; + } + .inherit { + background: violet; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end" style="margin-top: 190px">end</div> + <div class="flex-end big" style="margin-top: 100px">a b c d e f</div> + <div class="center" style="margin-top: 95px">center</div> + <div class="center big" style="margin-top: 50px">a b c d e f</div> + <!-- We use inline-blocks inside of a wrapper-block as references for the + baseline-aligned flex items, since inline-blocks get + baseline-aligned in block layout. We also need to specify the widths + manually here since the "flexbox > div" child-selector doesn't + handle these guys (since they're grandchildren). + --> + <div style="width: 80px"> + <div class="baseline" + style="width: 40px; display: inline-block">base</div + ><div class="baseline big" + style="width: 40px; display: inline-block">abc</div> + </div> + <div class="stretch" style="height: 100%">stretch</div> + <div class="stretch big">a b c d e f</div> + <div class="auto" style="margin-top: 95px">auto</div> + <div class="unspecified" style="margin-top: 95px">unspec</div> + <div class="initial" style="margin-top: 95px">initial</div> + <div class="inherit" style="margin-top: 190px">inherit</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-horiz-001-table.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-horiz-001-table.xhtml new file mode 100644 index 0000000000..c168c822e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-horiz-001-table.xhtml @@ -0,0 +1,98 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for align-items / align-self behavior, with all the possible + values included on different items within a flex container. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing the various 'align-self' property values on flex items that are tables</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/> + <link rel="match" href="flexbox-align-self-horiz-001-ref.xhtml"/> + <style> + .flexbox { + border: 1px dashed blue; + height: 200px; + display: inline-flex; + font-size: 10px; + line-height: 10px; + + /* Any children whose align-self is 'auto' (or unspecified, or + initial) will end up taking this value from us: */ + align-items: center; + + /* Any children whose align-self is 'inherit' will end up + inheriting this value from us: */ + align-self: flex-end; + } + + .flexbox > * { + display: table; + width: 40px; + } + + .big { + height: 100px; + font-size: 20px; + line-height: 20px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + align-self: flex-start; + } + .flex-end { + background: orange; + align-self: flex-end; + } + .center { + background: lightblue; + align-self: center; + } + .baseline { + background: teal; + align-self: baseline; + } + .stretch { + background: pink; + align-self: stretch; + } + .auto { + background: yellow; + align-self: auto; + } + .unspecified { + background: lightgreen; + } + .initial { + background: aqua; + align-self: initial; + } + .inherit { + background: violet; + align-self: inherit; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="center">center</div> + <div class="center big">a b c d e f</div> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + <div class="auto">auto</div> + <div class="unspecified">unspec</div> + <div class="initial">initial</div> + <div class="inherit">inherit</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-horiz-002-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-horiz-002-ref.xhtml new file mode 100644 index 0000000000..bc73fa7f92 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-horiz-002-ref.xhtml @@ -0,0 +1,102 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for align-items / align-self behavior, using floated divs + in place of flex items and using relative positioning in place of the + align-items / align-self properties. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px dashed blue; + height: 200px; + display: inline-block; + font-size: 10px; + line-height: 10px; + vertical-align: top; + } + + .flexbox > div { float: left } + .flex-start, .flex-end, .center, .baseline, .stretch, + .auto, .unspecified, .initial, .inherit, .self-start, .self-end { + width: 40px; + margin: 1px 2px 3px 4px; + border-width: 2px 3px 4px 5px; + padding: 3px 4px 5px 6px; + position: relative; + border-style: dotted; + } + + .big { + height: 100px; + font-size: 20px; + line-height: 20px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + } + .flex-end { + background: orange; + } + .center { + background: lightblue; + } + .baseline { + background: teal; + } + .stretch { + background: pink; + } + .self-start { + background: yellow; + } + .self-end { + background: purple; + } + .wmvertrev { + writing-mode: vertical-lr; + direction: rtl; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end" style="top: 172px">end</div> + <div class="flex-end big" style="top: 82px">a b c d e f</div> + <div class="center" style="top: 86px">center</div> + <div class="center big" style="top: 41px">a b c d e f</div> + </div> + <br/> + <div class="flexbox"> + <!-- We use inline-blocks inside of a wrapper-block as references for the + baseline-aligned flex items, since inline-blocks get + baseline-aligned in block layout. We also need to specify the widths + manually here since the "flexbox > div" child-selector doesn't + handle these guys (since they're grandchildren). + --> + <div> + <div class="baseline" + style="display: inline-block">base</div + ><div class="baseline big" + style="display: inline-block">abc</div> + </div> + <div class="stretch" style="height: 182px">stretch</div> + <div class="stretch big">a b c d e f</div> + </div> + <br/> + <div class="flexbox"> + <div class="self-start">self-start</div> + <div class="self-start big">a b c d e f</div> + <div class="self-end wmvertrev">self-end</div> + <div class="self-end wmvertrev big">a b c d e f</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-horiz-002.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-horiz-002.xhtml new file mode 100644 index 0000000000..d1273d1f55 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-horiz-002.xhtml @@ -0,0 +1,98 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for align-items / align-self behavior, with all the possible + values included on different items within a flex container, and with + margin/border/padding values on each item. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing the behavior of 'align-self' with a horizontal flex container, with margin/padding/border on the items</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/> + <link rel="match" href="flexbox-align-self-horiz-002-ref.xhtml"/> + <style> + .flexbox { + border: 1px dashed blue; + height: 200px; + display: inline-flex; + font-size: 10px; + line-height: 10px; + vertical-align: top; + } + + .flexbox > div { + width: 40px; + margin: 1px 2px 3px 4px; + border-width: 2px 3px 4px 5px; + padding: 3px 4px 5px 6px; + border-style: dotted; + } + + .big { + height: 100px; + font-size: 20px; + line-height: 20px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + align-self: flex-start; + } + .flex-end { + background: orange; + align-self: flex-end; + } + .center { + background: lightblue; + align-self: center; + } + .baseline { + background: teal; + align-self: baseline; + } + .stretch { + background: pink; + align-self: stretch; + } + .self-start { + background: yellow; + align-self: self-start; + } + .self-end { + background: purple; + align-self: self-end; + } + .wmvertrev { + writing-mode: vertical-lr; + direction: rtl; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="center">center</div> + <div class="center big">a b c d e f</div> + </div> + <br/> + <div class="flexbox"> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + </div> + <br/> + <div class="flexbox"> + <div class="self-start">self-start</div> + <div class="self-start big">a b c d e f</div> + <div class="self-end wmvertrev">self-end</div> + <div class="self-end wmvertrev big">a b c d e f</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-horiz-003-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-horiz-003-ref.xhtml new file mode 100644 index 0000000000..229087cb87 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-horiz-003-ref.xhtml @@ -0,0 +1,97 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for align-items / align-self behavior, using floated divs + in place of flex items and using relative positioning in place of the + align-items / align-self properties. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px dashed blue; + padding: 3px; + width: 600px; + height: 4px; + font-size: 10px; + line-height: 10px; + font-family: sans-serif; + } + + .flexbox > div { + width: 40px; + float: left; + } + + .big { + height: 100px; + font-size: 20px; + line-height: 20px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + } + .flex-end { + background: orange; + } + .center { + background: lightblue; + } + .baseline { + background: teal; + } + .stretch { + background: pink; + } + .auto { + background: yellow; + } + .unspecified { + background: lightgreen; + } + .initial { + background: aqua; + } + .inherit { + background: violet; + } + .normal { + background: tan; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end" style="position: relative; top: -6px">end</div> + <div class="flex-end big" style="position: relative; top: -96px">a b c d e f</div> + <div class="center" style="position: relative; top: -3px">center</div> + <div class="center big" style="position: relative; top: -48px">a b c d e f</div> + <!-- We use inline-blocks inside of a wrapper-block as references for the + baseline-aligned flex items, since inline-blocks get + baseline-aligned in block layout. We also need to specify the widths + manually here since the "flexbox > div" child-selector doesn't + handle these guys (since they're grandchildren). + --> + <div style="width: 80px"> + <div class="baseline" + style="width: 40px; display: inline-block">base</div + ><div class="baseline big" + style="width: 40px; display: inline-block">abc</div> + </div> + <div class="stretch" style="height: 100%">stretch</div> + <div class="stretch big">a b c d e f</div> + <div class="auto" style="height: 100%">auto</div> + <div class="unspecified" style="height: 100%">unspec</div> + <div class="initial" style="height: 100%">initial</div> + <div class="inherit" style="height: 100%">inherit</div> + <div class="normal" style="height: 100%">normal</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-horiz-003.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-horiz-003.xhtml new file mode 100644 index 0000000000..4414d0a0a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-horiz-003.xhtml @@ -0,0 +1,97 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for align-items / align-self behavior, with all the possible + values included on different items within a flex container, and with the + flex container being shorter than its items. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing the behavior of 'align-self' with a horizontal flex container that's shorter than its items</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/> + <link rel="match" href="flexbox-align-self-horiz-003-ref.xhtml"/> + <style> + .flexbox { + border: 1px dashed blue; + padding: 3px; + height: 4px; + display: inline-flex; + font-size: 10px; + line-height: 10px; + font-family: sans-serif; + } + + .flexbox > div { + width: 40px; + } + + .big { + height: 100px; + font-size: 20px; + line-height: 20px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + align-self: flex-start; + } + .flex-end { + background: orange; + align-self: flex-end; + } + .center { + background: lightblue; + align-self: center; + } + .baseline { + background: teal; + align-self: baseline; + } + .stretch { + background: pink; + align-self: stretch; + } + .auto { + background: yellow; + align-self: auto; + } + .unspecified { + background: lightgreen; + } + .initial { + background: aqua; + align-self: initial; + } + .inherit { + background: violet; + align-self: inherit; + } + .normal { + background: tan; + align-self: normal; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="center">center</div> + <div class="center big">a b c d e f</div> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + <div class="auto">auto</div> + <div class="unspecified">unspec</div> + <div class="initial">initial</div> + <div class="inherit">inherit</div> + <div class="normal">normal</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-horiz-004-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-horiz-004-ref.xhtml new file mode 100644 index 0000000000..5143e07c48 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-horiz-004-ref.xhtml @@ -0,0 +1,89 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for align-items / align-self behavior, using floated divs + in place of flex items and using relative positioning in place of the + align-items / align-self properties. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px dashed blue; + padding: 3px; + height: 4px; + display: inline-block; + font-size: 10px; + line-height: 10px; + font-family: sans-serif; + margin-top: 20px; + margin-bottom: 120px; + vertical-align: top; + } + + .flexbox > div { float: left } + .flex-start, .flex-end, .center, .baseline, .stretch, + .auto, .unspecified, .initial, .inherit { + width: 40px; + margin: 1px 2px 3px 4px; + border-width: 2px 3px 4px 5px; + padding: 3px 4px 5px 6px; + position: relative; + border-style: dotted; + } + + .big { + height: 100px; + font-size: 20px; + line-height: 20px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + } + .flex-end { + background: orange; + } + .center { + background: lightblue; + } + .baseline { + background: teal; + } + .stretch { + background: pink; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end" style="top: -24px">end</div> + <div class="flex-end big" style="top: -114px">a b c d e f</div> + <div class="center" style="top: -12px">center</div> + <div class="center big" style="top: -57px">a b c d e f</div> + </div> + <br/> + <div class="flexbox"> + <!-- We use inline-blocks inside of a wrapper-block as references for the + baseline-aligned flex items, since inline-blocks get + baseline-aligned in block layout. We also need to specify the widths + manually here since the "flexbox > div" child-selector doesn't + handle these guys (since they're grandchildren). + --> + <div> + <div class="baseline" + style="display: inline-block">base</div + ><div class="baseline big" + style="display: inline-block">abc</div> + </div> + <div class="stretch" style="height: 2px">stretch</div> + <div class="stretch big">a b c d e f</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-horiz-004.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-horiz-004.xhtml new file mode 100644 index 0000000000..b7bdf396a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-horiz-004.xhtml @@ -0,0 +1,84 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for align-items / align-self behavior, with all the possible + values included on different items within a flex container, and with the + flex container being shorter than its items. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing the behavior of 'align-self' with a horizontal flex container that's shorter than its items, with margin/padding/border on the items</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/> + <link rel="match" href="flexbox-align-self-horiz-004-ref.xhtml"/> + <style> + .flexbox { + border: 1px dashed blue; + padding: 3px; + height: 4px; + display: inline-flex; + font-size: 10px; + line-height: 10px; + font-family: sans-serif; + margin-top: 20px; + margin-bottom: 120px; + vertical-align: top; + } + + .flexbox > div { + width: 40px; + margin: 1px 2px 3px 4px; + border-width: 2px 3px 4px 5px; + padding: 3px 4px 5px 6px; + border-style: dotted; + } + + .big { + height: 100px; + font-size: 20px; + line-height: 20px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + align-self: flex-start; + } + .flex-end { + background: orange; + align-self: flex-end; + } + .center { + background: lightblue; + align-self: center; + } + .baseline { + background: teal; + align-self: baseline; + } + .stretch { + background: pink; + min-height: 2px; + align-self: stretch; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="center">center</div> + <div class="center big">a b c d e f</div> + </div> + <br/> + <div class="flexbox"> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-horiz-005-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-horiz-005-ref.xhtml new file mode 100644 index 0000000000..48c215ad6c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-horiz-005-ref.xhtml @@ -0,0 +1,98 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for align-items / align-self behavior with auto + margins in play. This reference case uses fixed margin-top values + in place of the testcase's auto margins. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px dashed blue; + height: 140px; + width: 400px; + display: flex; + font-size: 10px; + line-height: 10px; + margin-bottom: 10px; + } + + .kidsAutoTop > div { margin-top: 130px; } + .kidsAutoTop > div.big { margin-top: 60px; } + .kidsAutoBoth > div { margin-top: 65px; } + .kidsAutoBoth > div.big { margin-top: 30px; } + + .flexbox > div { + width: 40px; + height: 10px; + } + + .flexbox > div.big { + height: 80px; + font-size: 20px; + line-height: 20px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + } + .flex-end { + background: orange; + } + .center { + background: lightblue; + } + .baseline { + background: teal; + } + .stretch { + background: pink; + } + </style> + </head> + <body> + <div class="flexbox kidsAutoTop"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="center">center</div> + <div class="center big">a b c d e f</div> + <div class="baseline">base</div> + <div class="baseline big">a b c d e f</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + </div> + + <div class="flexbox kidsAutoBottom"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="center">center</div> + <div class="center big">a b c d e f</div> + <div class="baseline">base</div> + <div class="baseline big">a b c d e f</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + </div> + + <div class="flexbox kidsAutoBoth"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="center">center</div> + <div class="center big">a b c d e f</div> + <div class="baseline">base</div> + <div class="baseline big">a b c d e f</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-horiz-005.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-horiz-005.xhtml new file mode 100644 index 0000000000..cff89d3251 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-horiz-005.xhtml @@ -0,0 +1,104 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for align-items / align-self behavior with auto margins in + play (which should negate the effects of align-items / align-self, + because there won't be any available space in which to align the item + after the auto margins are resolved). --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing the behavior of 'align-self' with auto margins in play, in a horizontal 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/#auto-margins"/> + <link rel="match" href="flexbox-align-self-horiz-005-ref.xhtml"/> + <style> + .flexbox { + border: 1px dashed blue; + height: 140px; + width: 400px; + display: flex; + font-size: 10px; + line-height: 10px; + margin-bottom: 10px; + } + + .kidsAutoTop > div { margin-top: auto; } + .kidsAutoBottom > div { margin-bottom: auto; } + .kidsAutoBoth > div { margin: auto 0; } + + .flexbox > div { + width: 40px; + } + + .flexbox > div.big { + height: 80px; + font-size: 20px; + line-height: 20px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + align-self: flex-start; + } + .flex-end { + background: orange; + align-self: flex-end; + } + .center { + background: lightblue; + align-self: center; + } + .baseline { + background: teal; + align-self: baseline; + } + .stretch { + background: pink; + align-self: stretch; + } + </style> + </head> + <body> + <div class="flexbox kidsAutoTop"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="center">center</div> + <div class="center big">a b c d e f</div> + <div class="baseline">base</div> + <div class="baseline big">a b c d e f</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + </div> + + <div class="flexbox kidsAutoBottom"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="center">center</div> + <div class="center big">a b c d e f</div> + <div class="baseline">base</div> + <div class="baseline big">a b c d e f</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + </div> + + <div class="flexbox kidsAutoBoth"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="center">center</div> + <div class="center big">a b c d e f</div> + <div class="baseline">base</div> + <div class="baseline big">a b c d e f</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-stretch-vert-001-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-stretch-vert-001-ref.html new file mode 100644 index 0000000000..3ffa8647bb --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-stretch-vert-001-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- In this reference case, we just have the testcases's text placed directly + in the outermost wrapper-block, with a lime background on that wrapper + instead of on a flex item. +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + div.fixedWidthWrapper { + width: 200px; + /* Small enough that 3 characters can _easily_ fit in our width */ + font-size: 12px; + background: lime; + } + </style> +</head> +<body> + <div class="fixedWidthWrapper"> + A B C + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-stretch-vert-001.html b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-stretch-vert-001.html new file mode 100644 index 0000000000..578dff9cae --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-stretch-vert-001.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing the sizing of a stretched horizontal flex container in a vertical 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/#layout-algorithm"> + <link rel="match" href="flexbox-align-self-stretch-vert-001-ref.html"> + <meta name="assert" content="If a stretched flex item's main size is influenced by its cross size, and the flex container has a definite cross size, then the item's cross size should be resolved early so that it can be used when determining the item's main size"> + <meta name="assert" content="https://drafts.csswg.org/css-flexbox/issues-cr-2012#issue-23"> + <meta charset="utf-8"> + <style> + div.fixedWidthWrapper { + width: 200px; + /* Small enough that 3 characters can _easily_ fit in our width */ + font-size: 12px; + } + div.vertContainer { + display: flex; + flex-direction: column; + } + div.vertItem { + background: red; + } + div.horizContainer { + display: flex; + } + div.horizItem { + flex: 1; + background: lime; + } + </style> +</head> +<body> + <div class="fixedWidthWrapper"> + <div class="vertContainer"> + <div class="vertItem"> + <div class="horizContainer"> + <div class="horizItem">A B C</div> + <div class="horizItem"></div> + </div> + </div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-stretch-vert-002-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-stretch-vert-002-ref.html new file mode 100644 index 0000000000..4e02cd8b10 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-stretch-vert-002-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- In this reference case, we use floated fixed-sized divs to mimic the + testcases's flex items. +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + div.container { + width: 100px; + height: 20px; + border: 2px solid black; + } + div.item { + width: 48px; + height: 15px; + float: left; + border: 1px dotted blue; + } + </style> +</head> +<body> + <div class="container"> + <div class="item"></div> + <div class="item"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-stretch-vert-002.html b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-stretch-vert-002.html new file mode 100644 index 0000000000..c2b9030119 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-stretch-vert-002.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing the sizing of stretched flex items in a vertical 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/#layout-algorithm"> + <link rel="match" href="flexbox-align-self-stretch-vert-002-ref.html"> + <meta name="assert" content="In a multi-line flex container, flex items should not be stretched (in the cross axis) until after wrapping has been performed."> + <meta charset="utf-8"> + <style> + div.container { + display: flex; + flex-flow: column wrap; + width: 100px; + height: 20px; + border: 2px solid black; + } + div.item { + /* Tall enough to force wrapping (since parent height is 20px): */ + min-height: 15px; + border: 1px dotted blue; + } + </style> +</head> +<body> + <div class="container"> + <div class="item"></div> + <div class="item"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-001-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-001-ref.xhtml new file mode 100644 index 0000000000..13f014dbc1 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-001-ref.xhtml @@ -0,0 +1,109 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for align-items / align-self behavior, using blocks in + place of flex items and using float and width keywords to emulate the + align-items / align-self properties. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px solid blue; + width: 200px; + font-size: 10px; + } + + div.big { + font-size: 20px; + width: 50px; + } + + .flexbox > * { + clear: both; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + float: left; + } + .flex-end { + background: orange; + float: right; + } + .center { + background: lightblue; + margin: auto; + } + .baseline { + background: teal; + float: left; + } + .stretch { + background: pink; + width: 100%; + } + .auto { + background: yellow; + margin: auto; + } + .unspecified { + background: lightgreen; + margin: auto; + } + .initial { + background: aqua; + margin: auto; + } + .inherit { + background: violet; + float: right; + } + + <!-- We center shrinkwrapped text by putting it into an inline-block, and + then wrapping that inline-block in a helper-div that has + "text-align:center" set. --> + .centerParent { + text-align: center; + } + .centerParent > * { + display: inline-block; + text-align: left; /* Keep parent's centering from tweaking my text */ + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="centerParent"> + <div class="center">center</div> + </div> + <div class="center big">a b c d e f</div> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + <div class="centerParent"> + <div class="auto">auto</div> + </div> + <div class="centerParent"> + <div class="unspecified">unspec</div> + </div> + <div class="centerParent"> + <div class="initial">initial</div> + </div> + <div class="inherit">inherit</div> + <!-- Since the last div is floated, the container doesn't include + its height by default. So we add some invisible hacky text (of the + same font) to make sure our container is tall enough. --> + <span style="visibility:hidden">hacky text</span> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-001.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-001.xhtml new file mode 100644 index 0000000000..c439ff0f6c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-001.xhtml @@ -0,0 +1,92 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for align-items / align-self behavior, with all the possible + values included on different items within a flex container. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing the behavior of 'align-self' property values on flex items that are blocks, in a vertical 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/#align-items-property"/> + <link rel="match" href="flexbox-align-self-vert-001-ref.xhtml"/> + <style> + .flexbox { + border: 1px solid blue; + width: 200px; + display: flex; + flex-direction: column; + font-size: 10px; + + /* Any children whose align-self is 'auto' (or unspecified, or + initial) will end up taking this value from us: */ + align-items: center; + + /* Any children whose align-self is 'inherit' will end up + inheriting this value from us: */ + align-self: flex-end; + } + + .big { + font-size: 20px; + width: 50px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + align-self: flex-start; + } + .flex-end { + background: orange; + align-self: flex-end; + } + .center { + background: lightblue; + align-self: center; + } + .baseline { + background: teal; + align-self: baseline; + } + .stretch { + background: pink; + align-self: stretch; + } + .auto { + background: yellow; + align-self: auto; + } + .unspecified { + background: lightgreen; + } + .initial { + background: aqua; + align-self: initial; + } + .inherit { + background: violet; + align-self: inherit; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="center">center</div> + <div class="center big">a b c d e f</div> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + <div class="auto">auto</div> + <div class="unspecified">unspec</div> + <div class="initial">initial</div> + <div class="inherit">inherit</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-002-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-002-ref.xhtml new file mode 100644 index 0000000000..14b456e671 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-002-ref.xhtml @@ -0,0 +1,107 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for align-items / align-self behavior, using blocks in + place of flex items and using float and width keywords to emulate the + align-items / align-self properties. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px dashed blue; + width: 200px; + float: left; + font-size: 10px; + } + + .flex-start, .flex-end, .center, .baseline, .stretch, + .self-start, .self-end { + clear: both; + margin: 1px 2px 3px 4px; + border-width: 2px 3px 4px 5px; + padding: 3px 4px 5px 6px; + border-style: dotted; + } + + div.big { + font-size: 20px; + width: 50px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + float: left; + } + .flex-end { + background: orange; + float: right; + } + <!-- We center shrinkwrapped text by putting it into an inline-block, and + then wrapping that inline-block in a helper-div that has + "text-align:center" set. --> + .centerParent { + text-align: center; + } + .center { + background: lightblue; + display: inline-block; + text-align: left; /* Keep parent's centering from tweaking my text */ + } + .baseline { + background: teal; + float: left; + } + .stretch { + background: pink; + } + .self-start { + background: yellow; + float: right; + text-align: right; + } + .self-end { + background: purple; + float: left; + text-align: right; + } + .clearFloats { clear: both } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="clearFloats"></div> + <div class="centerParent"> + <div class="center">center</div> + </div> + <div class="centerParent"> + <div class="center big">a b c d e f</div> + </div> + </div> + <div class="flexbox"> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="clearFloats"></div> + <div class="stretch">stretch</div> + <!-- Force a 3px + 1px = 4px margin between this and the previous div + (to thwart the effects of margin-collapsing). This is the only + place we need this hack, because everywhere else in this test + we use floats or inline-blocks, whose margins don't collapse. --> + <div class="stretch big" style="margin-top: 4px">a b c d e f</div> + </div> + <div class="flexbox"> + <div class="self-start">self-start</div> + <div class="self-start big">a b c d e f</div> + <div class="self-end">self-end</div> + <div class="self-end big">a b c d e f</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-002.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-002.xhtml new file mode 100644 index 0000000000..2ff89bdf5f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-002.xhtml @@ -0,0 +1,94 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for align-items / align-self behavior, with all the possible + values included on different items within a flex container, and with + margin/border/padding values on each item. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing the behavior of 'align-self' with a vertical flex container, with margin/padding/border on the items</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/> + <link rel="match" href="flexbox-align-self-vert-002-ref.xhtml"/> + <style> + .flexbox { + border: 1px dashed blue; + width: 200px; + display: flex; + flex-direction: column; + float: left; + font-size: 10px; + } + + .flexbox > div { + margin: 1px 2px 3px 4px; + border-width: 2px 3px 4px 5px; + padding: 3px 4px 5px 6px; + + border-style: dotted; + } + + div.big { + font-size: 20px; + width: 50px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + align-self: flex-start; + } + .flex-end { + background: orange; + align-self: flex-end; + } + .center { + background: lightblue; + align-self: center; + } + .baseline { + background: teal; + align-self: baseline; + } + .stretch { + background: pink; + align-self: stretch; + } + .self-start { + background: yellow; + align-self: self-start; + } + .self-end { + background: purple; + align-self: self-end; + } + .dirrtl { + direction: rtl; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="center">center</div> + <div class="center big">a b c d e f</div> + </div> + <div class="flexbox"> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + </div> + <div class="flexbox"> + <div class="self-start dirrtl">self-start</div> + <div class="self-start dirrtl big">a b c d e f</div> + <div class="self-end dirrtl">self-end</div> + <div class="self-end dirrtl big">a b c d e f</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-003-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-003-ref.xhtml new file mode 100644 index 0000000000..4412b39319 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-003-ref.xhtml @@ -0,0 +1,80 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for align-items / align-self behavior, using blocks in + place of flex items and using float and width keywords to emulate the + align-items / align-self properties. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px dashed blue; + width: 4px; + font-family: sans-serif; + font-size: 10px; + margin-left: 80px; + } + + div.big { + font-size: 18px; + width: 50px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + float: left; + } + .flex-end { + background: orange; + float: right; + } + <!-- We center shrinkwrapped text by putting it into an inline-block, and + then wrapping that inline-block in a helper-div that has + "text-align:center" set. For this to work, the parent has to be at + least as wide as the centered content inside of it, so we make it + large with a negative margin such that its center aligns with the + 4px-wide container's center. --> + .centerParent { + text-align: center; + width: 100px; + margin-left: -48px; + } + .center { + background: lightblue; + display: inline-block; + text-align: left; /* Keep parent's centering from tweaking my text */ + } + .baseline { + background: teal; + float: left; + } + .stretch { + background: pink; + } + .clearFloats { clear: both } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b</div> + <div class="centerParent clearFloats"> + <div class="center">center</div> + </div> + <div class="centerParent"> + <div class="center big">a b</div> + </div> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="stretch clearFloats">stretch</div> + <div class="stretch big">a b</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-003.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-003.xhtml new file mode 100644 index 0000000000..721ce54856 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-003.xhtml @@ -0,0 +1,69 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for align-items / align-self behavior, with all the possible + values included on different items within a flex container, and with the + flex container being skinnier than its items. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing the behavior of 'align-self' with a vertical flex container that's skinnier than its items</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/> + <link rel="match" href="flexbox-align-self-vert-003-ref.xhtml"/> + <meta name="fuzzy" content="maxDifference=0-58;totalPixels=0-33"/> + <style> + .flexbox { + border: 1px dashed blue; + width: 4px; + display: flex; + flex-direction: column; + font-family: sans-serif; + font-size: 10px; + margin-left: 80px; + } + + div.big { + font-size: 18px; + width: 50px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + align-self: flex-start; + } + .flex-end { + background: orange; + align-self: flex-end; + } + .center { + background: lightblue; + align-self: center; + } + .baseline { + background: teal; + align-self: baseline; + } + .stretch { + background: pink; + align-self: stretch; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b</div> + <div class="center">center</div> + <div class="center big">a b</div> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-004-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-004-ref.xhtml new file mode 100644 index 0000000000..b63c2c7fbc --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-004-ref.xhtml @@ -0,0 +1,96 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for align-items / align-self behavior, using blocks in + place of flex items and using float and width keywords to emulate the + align-items / align-self properties. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px dashed blue; + width: 4px; + float: left; + font-family: sans-serif; + font-size: 10px; + margin-left: 80px; + } + + .flex-start, .flex-end, .center, .baseline, .stretch { + clear: both; + margin: 1px 2px 3px 4px; + border-width: 2px 3px 4px 5px; + padding: 3px 4px 5px 6px; + border-style: dotted; + } + + div.big { + font-size: 18px; + width: 50px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + float: left; + } + .flex-end { + background: orange; + float: right; + } + <!-- We center shrinkwrapped text by putting it into an inline-block, and + then wrapping that inline-block in a helper-div that has + "text-align:center" set. For this to work, the parent has to be at + least as wide as the centered content inside of it, so we make it + large with a negative margin such that its center aligns with the + 4px-wide container's center. --> + .centerParent { + text-align: center; + width: 100px; + margin-left: -48px; + } + .center { + background: lightblue; + display: inline-block; + text-align: left; /* Keep parent's centering from tweaking my text */ + } + .baseline { + background: teal; + float: left; + } + .stretch { + background: pink; + } + .clearFloats { clear: both } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b</div> + <div class="centerParent"> + <div class="center">center</div> + </div> + <div class="centerParent"> + <div class="center big">a b</div> + </div> + </div> + <div class="flexbox"> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="clearFloats"></div> + <div class="stretch">stretch</div> + <!-- Force a 3px + 1px = 4px margin between this and the previous div + (to thwart the effects of margin-collapsing). This is the only + place we need this hack, because everywhere else in this test + we use floats or inline-blocks, whose margins don't collapse. --> + <div class="stretch big" style="margin-top: 4px">a b</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-004.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-004.xhtml new file mode 100644 index 0000000000..ff98bafd60 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-004.xhtml @@ -0,0 +1,80 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for align-items / align-self behavior, with all the possible + values included on different items within a flex container, and with the + flex container being skinnier than its items. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing the behavior of 'align-self' with a vertical flex container that's skinnier than its items, with margin/padding/border on the items</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/> + <link rel="match" href="flexbox-align-self-vert-004-ref.xhtml"/> + <meta name="fuzzy" content="maxDifference=0-58;totalPixels=0-33"/> + <style> + .flexbox { + border: 1px dashed blue; + width: 4px; + display: flex; + flex-direction: column; + float: left; + font-family: sans-serif; + font-size: 10px; + margin-left: 80px; + } + + .flexbox > div { + margin: 1px 2px 3px 4px; + border-width: 2px 3px 4px 5px; + padding: 3px 4px 5px 6px; + + border-style: dotted; + } + + div.big { + font-size: 18px; + width: 50px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + align-self: flex-start; + } + .flex-end { + background: orange; + align-self: flex-end; + } + .center { + background: lightblue; + align-self: center; + } + .baseline { + background: teal; + align-self: baseline; + } + .stretch { + background: pink; + align-self: stretch; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b</div> + <div class="center">center</div> + <div class="center big">a b</div> + </div> + <div class="flexbox"> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-rtl-001-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-rtl-001-ref.xhtml new file mode 100644 index 0000000000..0c306fad55 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-rtl-001-ref.xhtml @@ -0,0 +1,118 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for align-items / align-self behavior in a vertical + "direction: rtl" flex container, using blocks in place of flex items and + using float and width keywords to emulate the align-items / align-self + properties. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px solid blue; + width: 200px; + direction: rtl; + font-family: sans-serif; + font-size: 10px; + } + + div.big { + font-size: 20px; + width: 50px; + } + + div { + clear: both; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + float: right; + } + .flex-end { + background: orange; + float: left; + } + .center { + background: lightblue; + margin: auto; + } + .baseline { + background: teal; + float: left; + } + .stretch { + background: pink; + width: 100%; + } + .auto { + background: yellow; + margin: auto; + } + .unspecified { + background: lightgreen; + margin: auto; + } + .initial { + background: aqua; + margin: auto; + } + .inherit { + background: violet; + float: left; + } + + <!-- We center shrinkwrapped text by putting it into an inline-block, and + then wrapping that inline-block in a helper-div that has + "text-align:center" set. --> + .centerParent { + text-align: center; + } + .centerParent > * { + display: inline-block; + text-align: left; /* Keep parent's centering from tweaking my text */ + } + + .baselineParent { + float: right; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="centerParent"> + <div class="center">center</div> + </div> + <div class="center big">a b c d e f</div> + <div class="baselineParent"> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + </div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + <div class="centerParent"> + <div class="auto">auto</div> + </div> + <div class="centerParent"> + <div class="unspecified">unspec</div> + </div> + <div class="centerParent"> + <div class="initial">initial</div> + </div> + <div class="inherit">inherit</div> + <!-- Since the last div is floated, the container doesn't include + its height by default. So we add some invisible hacky text (of the + same font) to make sure our container is tall enough. --> + <span style="visibility:hidden">hacky text</span> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-rtl-001.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-rtl-001.xhtml new file mode 100644 index 0000000000..a32ed619c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-rtl-001.xhtml @@ -0,0 +1,96 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for align-items / align-self behavior, with all the possible + values included on different items within a flex container, and with + "direction: rtl" to swap the horizontal (cross) axis. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing the behavior of 'align-self' property values on flex items that are blocks, in a vertical flex container with 'direction: rtl'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/> + <link rel="match" href="flexbox-align-self-vert-rtl-001-ref.xhtml"/> + <meta name="fuzzy" content="maxDifference=0-60;totalPixels=0-101"/> + <style> + .flexbox { + border: 1px solid blue; + width: 200px; + display: flex; + flex-direction: column; + direction: rtl; + font-family: sans-serif; + font-size: 10px; + + /* Any children whose align-self is 'auto' (or unspecified, or + initial) will end up taking this value from us: */ + align-items: center; + + /* Any children whose align-self is 'inherit' will end up + inheriting this value from us: */ + align-self: flex-end; + } + + .big { + font-size: 20px; + width: 50px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + align-self: flex-start; + } + .flex-end { + background: orange; + align-self: flex-end; + } + .center { + background: lightblue; + align-self: center; + } + .baseline { + background: teal; + align-self: baseline; + } + .stretch { + background: pink; + align-self: stretch; + } + .auto { + background: yellow; + align-self: auto; + } + .unspecified { + background: lightgreen; + } + .initial { + background: aqua; + align-self: initial; + } + .inherit { + background: violet; + align-self: inherit; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="center">center</div> + <div class="center big">a b c d e f</div> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + <div class="auto">auto</div> + <div class="unspecified">unspec</div> + <div class="initial">initial</div> + <div class="inherit">inherit</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-rtl-002-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-rtl-002-ref.xhtml new file mode 100644 index 0000000000..a78cbc66a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-rtl-002-ref.xhtml @@ -0,0 +1,98 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for align-items / align-self behavior in a vertical + "direction: rtl" flex container, using blocks in place of flex items and + using float and width keywords to emulate the align-items / align-self + properties. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px dashed blue; + width: 200px; + float: left; + direction: rtl; + font-family: sans-serif; + font-size: 10px; + } + + .flex-start, .flex-end, .center, .baseline, .stretch { + clear: both; + margin: 1px 2px 3px 4px; + border-width: 2px 3px 4px 5px; + padding: 3px 4px 5px 6px; + border-style: dotted; + } + + div.big { + font-size: 20px; + width: 50px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + float: right; + } + .flex-end { + background: orange; + float: left; + } + <!-- We center shrinkwrapped text by putting it into an inline-block, and + then wrapping that inline-block in a helper-div that has + "text-align:center" set. --> + .centerParent { + text-align: center; + } + .center { + background: lightblue; + display: inline-block; + text-align: right; /* Keep parent's centering from tweaking my text */ + } + .baselineParent { + float: right; + } + .baseline { + background: teal; + float: left; + } + .stretch { + background: pink; + } + .clearFloats { clear: both } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="clearFloats"></div> + <div class="centerParent"> + <div class="center">center</div> + </div> + <div class="centerParent"> + <div class="center big">a b c d e f</div> + </div> + </div> + <div class="flexbox"> + <div class="baselineParent"> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + </div> + <div class="clearFloats"></div> + <div class="stretch">stretch</div> + <!-- Force a 3px + 1px = 4px margin between this and the previous div + (to thwart the effects of margin-collapsing). This is the only + place we need this hack, because everywhere else in this test + we use floats or inline-blocks, whose margins don't collapse. --> + <div class="stretch big" style="margin-top: 4px">a b c d e f</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-rtl-002.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-rtl-002.xhtml new file mode 100644 index 0000000000..a3a81e25d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-rtl-002.xhtml @@ -0,0 +1,80 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for align-items / align-self behavior, with all the possible + values included on different items within a flex container, and with + margin/border/padding values on each, and with "direction: rtl" to swap + the horizontal (cross) axis item. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing the behavior of 'align-self' with a vertical flex container, with margin/padding/border on the items and with 'direction: rtl'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/> + <link rel="match" href="flexbox-align-self-vert-rtl-002-ref.xhtml"/> + <style> + .flexbox { + border: 1px dashed blue; + width: 200px; + display: flex; + flex-direction: column; + direction: rtl; + float: left; + font-family: sans-serif; + font-size: 10px; + } + + .flexbox > div { + margin: 1px 2px 3px 4px; + border-width: 2px 3px 4px 5px; + padding: 3px 4px 5px 6px; + + border-style: dotted; + } + + div.big { + font-size: 20px; + width: 50px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + align-self: flex-start; + } + .flex-end { + background: orange; + align-self: flex-end; + } + .center { + background: lightblue; + align-self: center; + } + .baseline { + background: teal; + align-self: baseline; + } + .stretch { + background: pink; + align-self: stretch; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="center">center</div> + <div class="center big">a b c d e f</div> + </div> + <div class="flexbox"> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-rtl-003-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-rtl-003-ref.xhtml new file mode 100644 index 0000000000..a30f8d4b3c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-rtl-003-ref.xhtml @@ -0,0 +1,87 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for align-items / align-self behavior in a vertical + "direction: rtl" flex container, using blocks in place of flex items and + using float and width keywords to emulate the align-items / align-self + properties. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px dashed blue; + width: 4px; + font-family: sans-serif; + direction: rtl; + font-size: 10px; + margin-left: 80px; + } + + div.big { + font-size: 18px; + width: 50px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + float: right; + } + .flex-end { + background: orange; + float: left; + } + <!-- We center shrinkwrapped text by putting it into an inline-block, and + then wrapping that inline-block in a helper-div that has + "text-align:center" set. For this to work, the parent has to be at + least as wide as the centered content inside of it, so we make it + large with a negative margin such that its center aligns with the + 4px-wide container's center. --> + .centerParent { + text-align: center; + width: 100px; + margin-right: -48px; + } + .center { + background: lightblue; + display: inline-block; + text-align: right; /* Keep parent's centering from tweaking my text */ + } + .baselineParent { + float: right; + } + .baseline { + background: teal; + float: left; + } + .stretch { + background: pink; + } + .clearFloats { clear: both } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b</div> + <div class="centerParent clearFloats"> + <div class="center">center</div> + </div> + <div class="centerParent"> + <div class="center big">a b</div> + </div> + <div class="baselineParent"> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + </div> + <div class="stretch clearFloats">stretch</div> + <div class="stretch big">a b</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-rtl-003.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-rtl-003.xhtml new file mode 100644 index 0000000000..9a3bfccb35 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-rtl-003.xhtml @@ -0,0 +1,70 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for align-items / align-self behavior, with all the possible + values included on different items within a flex container, and with the + flex container being skinnier than its items, and with "direction: rtl" to + swap the horizontal (cross) axis. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing the behavior of 'align-self' with a vertical flex container that's skinnier than its items and with 'direction: rtl'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/> + <link rel="match" href="flexbox-align-self-vert-rtl-003-ref.xhtml"/> + <style> + .flexbox { + border: 1px dashed blue; + width: 4px; + display: flex; + flex-direction: column; + direction: rtl; + font-family: sans-serif; + font-size: 10px; + margin-left: 80px; + } + + div.big { + font-size: 18px; + width: 50px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + align-self: flex-start; + } + .flex-end { + background: orange; + align-self: flex-end; + } + .center { + background: lightblue; + align-self: center; + } + .baseline { + background: teal; + align-self: baseline; + } + .stretch { + background: pink; + align-self: stretch; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b</div> + <div class="center">center</div> + <div class="center big">a b</div> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-rtl-004-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-rtl-004-ref.xhtml new file mode 100644 index 0000000000..f499a3e1ab --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-rtl-004-ref.xhtml @@ -0,0 +1,103 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for align-items / align-self behavior in a vertical + "direction: rtl" flex container, using blocks in place of flex items and + using float and width keywords to emulate the align-items / align-self + properties. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px dashed blue; + width: 4px; + float: left; + direction: rtl; + font-family: sans-serif; + font-size: 10px; + margin-left: 80px; + } + + .flex-start, .flex-end, .center, .baseline, .stretch { + clear: both; + margin: 1px 2px 3px 4px; + border-width: 2px 3px 4px 5px; + padding: 3px 4px 5px 6px; + border-style: dotted; + } + + div.big { + font-size: 18px; + width: 50px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + float: right; + } + .flex-end { + background: orange; + float: left; + } + <!-- We center shrinkwrapped text by putting it into an inline-block, and + then wrapping that inline-block in a helper-div that has + "text-align:center" set. For this to work, the parent has to be at + least as wide as the centered content inside of it, so we make it + large with a negative margin such that its center aligns with the + 4px-wide container's center. --> + .centerParent { + text-align: center; + width: 100px; + margin-right: -48px; + } + .center { + background: lightblue; + display: inline-block; + text-align: right; /* Keep parent's centering from tweaking my text */ + } + .baselineParent { + float: right; + } + .baseline { + background: teal; + float: left; + } + .stretch { + background: pink; + } + .clearFloats { clear: both } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b</div> + <div class="clearFloats"></div> + <div class="stretch">stretch</div> + <!-- Force a 3px + 1px = 4px margin between this and the previous div + (to thwart the effects of margin-collapsing). This is the only + place we need this hack, because everywhere else in this test + we use floats or inline-blocks, whose margins don't collapse. --> + <div class="stretch big" style="margin-top: 4px">a b</div> + <div class="centerParent"> + <div class="center">center</div> + </div> + <div class="centerParent"> + <div class="center big">a b</div> + </div> + </div> + <div class="flexbox"> + <div class="baselineParent"> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + </div> + <div class="flex-end">end</div> + <div class="flex-end big">a b</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-rtl-004.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-rtl-004.xhtml new file mode 100644 index 0000000000..4f4f49afda --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-rtl-004.xhtml @@ -0,0 +1,88 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for align-items / align-self behavior, with all the possible + values included on different items within a flex container, and with the + flex container being skinnier than its items, and with "direction: rtl" to + swap the horizontal (cross) axis. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing the behavior of 'align-self' with a vertical flex container that's skinnier than its items, with margin/padding/border on the items and with 'direction: rtl'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/> + <link rel="match" href="flexbox-align-self-vert-rtl-004-ref.xhtml"/> + <style> + .flexbox { + border: 1px dashed blue; + width: 4px; + display: flex; + flex-direction: column; + direction: rtl; + float: left; + font-family: sans-serif; + font-size: 10px; + margin-left: 80px; + } + + .flexbox > div { + margin: 1px 2px 3px 4px; + border-width: 2px 3px 4px 5px; + padding: 3px 4px 5px 6px; + + border-style: dotted; + } + + div.big { + font-size: 18px; + width: 50px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + align-self: flex-start; + } + .flex-end { + background: orange; + align-self: flex-end; + } + .center { + background: lightblue; + align-self: center; + } + .baseline { + background: teal; + align-self: baseline; + } + .stretch { + background: pink; + align-self: stretch; + } + </style> + </head> + <body> + <!-- (NOTE: this test has the "stretch" divs and the "flex-end" divs + swapped in the ordering, with respect to the other + flexbox-align-self-* testcases. That's because "stretch" and + "flex-end" overflow in opposite directions, and in RTL mode (with 2 + flex containers side by side), they overflow *at* each other and + overlap. If we swap them, they float away from each other and we can + still see them.) --> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b</div> + <div class="center">center</div> + <div class="center big">a b</div> + </div> + <div class="flexbox"> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-rtl-005-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-rtl-005-ref.xhtml new file mode 100644 index 0000000000..34a710be5e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-rtl-005-ref.xhtml @@ -0,0 +1,110 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for align-items / align-self behavior, using blocks in + place of flex items and using float and width keywords to emulate the + align-items / align-self properties. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/> + <style> + .flexbox { + border: 1px dashed blue; + width: 200px; + float: left; + font-size: 10px; + direction: rtl; + } + + .flex-start, .flex-end, .center, .baseline, .stretch, .self-start, .self-end { + clear: both; + margin: 1px 2px 3px 4px; + border-width: 2px 3px 4px 5px; + padding: 3px 4px 5px 6px; + border-style: dotted; + } + + div.big { + font-size: 20px; + width: 50px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + float: right; + } + .flex-end { + background: orange; + float: left; + } + <!-- We center shrinkwrapped text by putting it into an inline-block, and + then wrapping that inline-block in a helper-div that has + "text-align:center" set. --> + .centerParent { + text-align: center; + } + .center { + background: lightblue; + display: inline-block; + text-align: right; /* Keep parent's centering from tweaking my text */ + } + .baselineParent { + float: right; + } + .baseline { + background: teal; + float: left; + } + .stretch { + background: pink; + } + .self-start { + background: yellow; + float: right; + } + .self-end { + background: purple; + float: left; + } + .clearFloats { clear: both } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="clearFloats"></div> + <div class="centerParent"> + <div class="center">center</div> + </div> + <div class="centerParent"> + <div class="center big">a b c d e f</div> + </div> + </div> + <div class="flexbox"> + <div class="baselineParent"> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + </div> + <div class="clearFloats"></div> + <div class="stretch">stretch</div> + <!-- Force a 3px + 1px = 4px margin between this and the previous div + (to thwart the effects of margin-collapsing). This is the only + place we need this hack, because everywhere else in this test + we use floats or inline-blocks, whose margins don't collapse. --> + <div class="stretch big" style="margin-top: 4px">a b c d e f</div> + </div> + <div class="flexbox"> + <div class="self-start">self-start</div> + <div class="self-start big">a b c d e f</div> + <div class="self-end">self-end</div> + <div class="self-end big">a b c d e f</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-rtl-005.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-rtl-005.xhtml new file mode 100644 index 0000000000..420c334c84 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-align-self-vert-rtl-005.xhtml @@ -0,0 +1,92 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for align-items / align-self behavior, with all the possible + values included on different items within a flex container, and with + margin/border/padding values on each item. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing the behavior of 'align-self' with a vertical flex container, with margin/padding/border on the items and with 'direction:rtl'</title> + <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/> + <link rel="match" href="flexbox-align-self-vert-rtl-005-ref.xhtml"/> + <style> + .flexbox { + border: 1px dashed blue; + width: 200px; + display: flex; + flex-direction: column; + float: left; + font-size: 10px; + direction: rtl; + } + + .flexbox > div { + margin: 1px 2px 3px 4px; + border-width: 2px 3px 4px 5px; + padding: 3px 4px 5px 6px; + + border-style: dotted; + } + + div.big { + font-size: 20px; + width: 50px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + align-self: flex-start; + } + .flex-end { + background: orange; + align-self: flex-end; + } + .center { + background: lightblue; + align-self: center; + } + .baseline { + background: teal; + align-self: baseline; + } + .stretch { + background: pink; + align-self: stretch; + } + .self-start { + background: yellow; + align-self: self-start; + } + .self-end { + background: purple; + align-self: self-end; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="center">center</div> + <div class="center big">a b c d e f</div> + </div> + <div class="flexbox"> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + </div> + <div class="flexbox"> + <div class="self-start dirrtl">self-start</div> + <div class="self-start dirrtl big">a b c d e f</div> + <div class="self-end dirrtl">self-end</div> + <div class="self-end dirrtl big nowidth">a b c d e f</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-anonymous-items-001-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-anonymous-items-001-ref.html new file mode 100644 index 0000000000..8f99ea1d56 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-anonymous-items-001-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> +</head> +<body> + a a<div style="display:inline-block">b b</div>x x +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-anonymous-items-001.html b/testing/web-platform/tests/css/css-flexbox/flexbox-anonymous-items-001.html new file mode 100644 index 0000000000..0c85c46d55 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-anonymous-items-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing that we gracefully handle cases where two anonymous flex items become adjacent due to "order" reordering</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"> + <link rel="match" href="flexbox-anonymous-items-001-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + } + </style> +</head> +<body> + <div class="flexContainer"> + a a + <div style="order: 1">x x</div> + b b + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-align-self-baseline-horiz-001-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-align-self-baseline-horiz-001-ref.html new file mode 100644 index 0000000000..84e231512e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-align-self-baseline-horiz-001-ref.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case, using inline-block instead of inline-flex, and with the + unaligned children taken out of baseline-alignment with + "vertical-align:top". +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + body { + margin: 0; + font-size: 20px; + line-height: 20px; + } + .flexContainer { + display: inline-block; + background: lightblue; + vertical-align: top; + } + .hugeAndUnaligned { + font-size: 35px; + line-height: 35px; + vertical-align: top; + } + .smallFont { + font-size: 10px; + line-height: 10px; + } + .flexContainer > * { display: inline; } + </style> +</head> +<body> + a + <div class="flexContainer"> + <div class="smallFont">b</div + ><div>c</div + ><div class="hugeAndUnaligned">d</div> + </div> + <div class="flexContainer"> + <div class="hugeAndUnaligned">e</div + ><div>f</div + ><div class="smallFont">g</div> + </div> + <div class="flexContainer"> + <div class="hugeAndUnaligned">h</div + ><div class="smallFont">i</div + ><div>j</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-align-self-baseline-horiz-001.html b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-align-self-baseline-horiz-001.html new file mode 100644 index 0000000000..a7308f7487 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-align-self-baseline-horiz-001.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for how we compute the baseline of a horizontal flex container + with several flex items, some of which have "align-self:baseline". The + spec says this about this case: + If any of the flex items on the flex container's first line + participate in baseline alignment, the flex container's + main-axis baseline is the baseline of those flex items. +--> +<html> +<head> + <title>CSS Test: Testing the baseline of a horizontal flex container with baseline-aligned flex items</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> + <link rel="match" href="flexbox-baseline-align-self-baseline-horiz-001-ref.html"> + <meta charset="utf-8"> + <style> + body { + margin: 0; + font-size: 20px; + line-height: 20px; + } + .flexContainer { + display: inline-flex; + background: lightblue; + align-items: baseline; + } + .hugeAndUnaligned { + font-size: 35px; + line-height: 35px; + /* This one flex item won't be baseline-aligned, so it won't impact + the flex container's positioning */ + align-self: stretch; + } + .smallFont { + font-size: 10px; + line-height: 10px; + } + </style> +</head> +<body> + a + <div class="flexContainer"> + <div class="smallFont">b</div> + <div>c</div> + <div class="hugeAndUnaligned">d</div> + </div> + <div class="flexContainer"> + <div class="hugeAndUnaligned">e</div> + <div>f</div> + <div class="smallFont">g</div> + </div> + <div class="flexContainer"> + <div class="hugeAndUnaligned">h</div> + <div class="smallFont">i</div> + <div>j</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-align-self-baseline-vert-001-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-align-self-baseline-vert-001-ref.html new file mode 100644 index 0000000000..f200983b7a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-align-self-baseline-vert-001-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case, using inline-block instead of inline-flex, and with the + unaligned children taken out of baseline-alignment with + "vertical-align:top". +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> + body { + margin: 0; + font: 20px Ahem; + line-height: 20px; + /* Baseline is 0.8em = 16px from top */ + } + .flexContainer { + display: inline-block; + background: lightblue; + } + .hugeAndUnaligned { + font-size: 35px; + line-height: 35px; + vertical-align: top; + } + .smallFont { + font-size: 10px; + line-height: 10px; + /* Baseline is 0.8em = 8px from top */ + } + * { vertical-align: top } + </style> +</head> +<body> + <div style="display: inline-block; margin-top: 12px">a</div> + <div class="flexContainer" style="margin-top: 20px"> + <div class="smallFont">b</div + ><div>c</div + ><div class="hugeAndUnaligned">d</div> + </div> + <div class="flexContainer"> + <div class="hugeAndUnaligned">e</div + ><div>f</div + ><div class="smallFont">g</div> + </div> + <div class="flexContainer"> + <div class="hugeAndUnaligned">h</div + ><div class="smallFont">i</div + ><div>j</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-align-self-baseline-vert-001.html b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-align-self-baseline-vert-001.html new file mode 100644 index 0000000000..97963fb41e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-align-self-baseline-vert-001.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for how we compute the baseline of a vertical flex container with + several flex items, some of which have "align-self:baseline". Since we're + vertical and the items' baselines are horizontal, they do not end up + participating in baseline alignment, so their "align-self:baseline" + computed style doesn't have any special effect on the container's + baseline. +--> +<html> +<head> + <title>CSS Test: Testing the baseline of a vertical flex container with baseline-aligned flex items</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> + <link rel="match" href="flexbox-baseline-align-self-baseline-vert-001-ref.html"> + <meta charset="utf-8"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> + body { + margin: 0; + font: 20px Ahem; + line-height: 20px; + /* Baseline is 0.8em = 16px from top */ + } + .flexContainer { + display: inline-flex; + flex-direction: column; + background: lightblue; + align-items: baseline; + } + .hugeAndUnaligned { + font-size: 35px; + line-height: 35px; + /* This one flex item won't be baseline-aligned, so it won't impact + the flex container's positioning */ + align-self: stretch; + } + .smallFont { + font-size: 10px; + line-height: 10px; + /* Baseline is 0.8em = 8px from top */ + } + </style> +</head> +<body> + a + <div class="flexContainer"> + <div class="smallFont">b</div> + <div>c</div> + <div class="hugeAndUnaligned">d</div> + </div> + <div class="flexContainer"> + <div class="hugeAndUnaligned">e</div> + <div>f</div> + <div class="smallFont">g</div> + </div> + <div class="flexContainer"> + <div class="hugeAndUnaligned">h</div> + <div class="smallFont">i</div> + <div>j</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-empty-001-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-empty-001-ref.html new file mode 100644 index 0000000000..21139d3646 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-empty-001-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- In this reference case, we have inline-blocks instead of inline + flex containers. Otherwise it's the same. --> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> + body { + font: 20px Ahem; + } + .flexContainer { + display: inline-block; + height: 16px; + width: 16px; + background: purple; + border: 0px dotted black; + /* (Elements that want a border will set their border-width.) */ + } + </style> +</head> +<body> + A + <div class="flexContainer"></div> + <div class="flexContainer" style="padding-bottom: 20px"></div> + <div class="flexContainer" style="padding: 10px"></div> + <div class="flexContainer" style="border-width: 3px"></div> + <div class="flexContainer" style="border-bottom-width: 4px"></div> + <div class="flexContainer" style="border-bottom-width: 4px; margin: 2px"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-empty-001a.html b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-empty-001a.html new file mode 100644 index 0000000000..50334acc8b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-empty-001a.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for how we compute the baseline of a horizontal flex container + with no flex items. This is the main-axis baseline. The spec says this + about this case: + https://drafts.csswg.org/css-flexbox/#flex-baselines + "Otherwise, the flex container has no first/last main-axis baseline set, + and one is synthesized if needed according to the rules of its alignment context." + + The alignment context in this case is inline-level so the margin-box + should be used to synthesize the baseline. +--> +<html> +<head> + <title>CSS Test: Testing the baseline of an empty horizontal 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/#flex-baselines"> + <link rel="match" href="flexbox-baseline-empty-001-ref.html"> + <meta charset="utf-8"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> + body { + font: 20px Ahem; + } + .flexContainer { + display: inline-flex; + height: 16px; + width: 16px; + background: purple; + border: 0px dotted black; + /* (Elements that want a border will set their border-width.) */ + } + </style> +</head> +<body> + A + <div class="flexContainer"></div> + <div class="flexContainer" style="padding-bottom: 20px"></div> + <div class="flexContainer" style="padding: 10px"></div> + <div class="flexContainer" style="border-width: 3px"></div> + <div class="flexContainer" style="border-bottom-width: 4px"></div> + <div class="flexContainer" style="border-bottom-width: 4px; margin: 2px"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-empty-001b.html b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-empty-001b.html new file mode 100644 index 0000000000..2195df4f54 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-empty-001b.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for how we compute the baseline of a vertical flex container + with no flex items. This is the cross-axis baseline. The spec says this + about this case: + https://drafts.csswg.org/css-flexbox/#flex-baselines + "Otherwise, the flex container has no first/last main-axis baseline set, + and one is synthesized if needed according to the rules of its alignment context." + + The alignment context in this case is inline-level so the margin-box + should be used to synthesize the baseline. +--> +<html> +<head> + <title>CSS Test: Testing the baseline of an empty vertical 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/#flex-baselines"> + <link rel="match" href="flexbox-baseline-empty-001-ref.html"> + <meta charset="utf-8"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> + body { + font: 20px Ahem; + } + .flexContainer { + display: inline-flex; + flex-direction: column; + height: 16px; + width: 16px; + background: purple; + border: 0px dotted black; + /* (Elements that want a border will set their border-width.) */ + } + </style> +</head> +<body> + A + <div class="flexContainer"></div> + <div class="flexContainer" style="padding-bottom: 20px"></div> + <div class="flexContainer" style="padding: 10px"></div> + <div class="flexContainer" style="border-width: 3px"></div> + <div class="flexContainer" style="border-bottom-width: 4px"></div> + <div class="flexContainer" style="border-bottom-width: 4px; margin: 2px"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-item-horiz-001-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-item-horiz-001-ref.html new file mode 100644 index 0000000000..e6f570ed20 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-item-horiz-001-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case, using inline-block instead of inline-flex, and with the + baseline-aligned items aligned using specific font-size / line-heights, + and with unaligned children taken out of baseline-alignment using + "vertical-align:top". +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: inline-block; + background: lightblue; + } + .flexContainer > * { display: inline; } + .smallFont { + font-size: 10px; + line-height: 10px; + } + .bigFont { + font-size: 20px; + line-height: 20px; + } + .unaligned { vertical-align: top } + </style> +</head> +<body> + a + <div class="flexContainer smallFont"> + <div class="smallFont">b</div + ><div class="bigFont unaligned">c</div> + </div> + <div class="flexContainer bigFont"> + <div class="bigFont">d</div + ><div class="smallFont unaligned">e</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-item-horiz-001a.html b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-item-horiz-001a.html new file mode 100644 index 0000000000..94bbdec202 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-item-horiz-001a.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for how we compute the baseline of a horizontal flex container + with several flex items, none of which have "align-self:baseline". The + spec says this about this case: + ...if the flex container has at least one flex item, and its + first flex item has a baseline parallel to the flex + container's main axis, the flex container's main-axis + baseline is that baseline. +--> +<html> +<head> + <title>CSS Test: Testing the baseline of a horizontal flex container whose flex items are not baseline-aligned</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> + <link rel="match" href="flexbox-baseline-multi-item-horiz-001-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: inline-flex; + background: lightblue; + } + .smallFont { + font-size: 10px; + line-height: 10px; + } + .bigFont { + font-size: 20px; + line-height: 20px; + } + </style> +</head> +<body> + a + <div class="flexContainer"> + <div class="smallFont">b</div + ><div class="bigFont">c</div> + </div> + <div class="flexContainer"> + <div class="bigFont">d</div + ><div class="smallFont">e</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-item-horiz-001b.html b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-item-horiz-001b.html new file mode 100644 index 0000000000..d40a986405 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-item-horiz-001b.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for how we compute the baseline of a horizontal flex container + with several "order"-reordered flex items, none of which have + "align-self:baseline". The spec says this about this case: + ...if the flex container has at least one flex item, and its + first flex item has a baseline parallel to the flex + container's main axis, the flex container's main-axis + baseline is that baseline. +--> +<html> +<head> + <title>CSS Test: Testing the baseline of a horizontal flex container whose flex items are not baseline-aligned</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> + <link rel="match" href="flexbox-baseline-multi-item-horiz-001-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: inline-flex; + background: lightblue; + } + .smallFont { + font-size: 10px; + line-height: 10px; + } + .bigFont { + font-size: 20px; + line-height: 20px; + } + .smallOrder { order: -1 } + .bigOrder { order: 30 } + </style> +</head> +<body> + a + <div class="flexContainer"> + <div class="bigFont">c</div + ><div class="smallFont smallOrder">b</div> + </div> + <div class="flexContainer"> + <div class="smallFont bigOrder">e</div + ><div class="bigFont">d</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-item-vert-001-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-item-vert-001-ref.html new file mode 100644 index 0000000000..1cd4fa95c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-item-vert-001-ref.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case, using inline-block instead of inline-flex, and with the + inline-blocks manually positioned with "vertical-align:top" and + margin-top. +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> + body { + margin: 0; + font: 20px Ahem; + line-height: 20px; + /* Baseline is 0.8em = 16px from top */ + } + .flexContainer { + display: inline-block; + background: lightblue; + } + .smallFont { + font-size: 10px; + line-height: 10px; + /* Baseline is 0.8em = 8px from top */ + } + .bigFont { + font-size: 20px; + line-height: 20px; + /* Baseline is 0.8em = 16px from top */ + } + * { vertical-align: top } + </style> +</head> +<body> + a + <div class="flexContainer" style="margin-top: 8px"> + <div class="smallFont">b</div + ><div class="bigFont">c</div> + </div> + <div class="flexContainer"> + <div class="bigFont">d</div + ><div class="smallFont">e</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-item-vert-001a.html b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-item-vert-001a.html new file mode 100644 index 0000000000..06c2f7063e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-item-vert-001a.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for how we compute the baseline of a vertical flex container + with several flex items, none of which have "align-self:baseline". The + spec says this about this case: + ...if the flex container has at least one flex item, and its + first flex item has a baseline parallel to the flex + container's main axis, the flex container's main-axis + baseline is that baseline. +--> +<html> +<head> + <title>CSS Test: Testing the baseline of a vertical flex container whose flex items are not baseline-aligned</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> + <link rel="match" href="flexbox-baseline-multi-item-vert-001-ref.html"> + <meta charset="utf-8"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> + body { + margin: 0; + font: 20px Ahem; + line-height: 20px; + /* Baseline is 0.8em = 16px from top */ + } + .flexContainer { + display: inline-flex; + flex-direction: column; + background: lightblue; + } + .smallFont { + font-size: 10px; + line-height: 10px; + /* Baseline is 0.8em = 8px from top */ + } + .bigFont { + font-size: 20px; + line-height: 20px; + /* Baseline is 0.8em = 16px from top */ + } + </style> +</head> +<body> + a + <div class="flexContainer"> + <div class="smallFont">b</div + ><div class="bigFont">c</div> + </div> + <div class="flexContainer"> + <div class="bigFont">d</div + ><div class="smallFont">e</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-item-vert-001b.html b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-item-vert-001b.html new file mode 100644 index 0000000000..6928bba97f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-item-vert-001b.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for how we compute the baseline of a vertical flex container + with several "order"-reordered flex items, none of which have + "align-self:baseline". The spec says this about this case: + ...if the flex container has at least one flex item, and its + first flex item has a baseline parallel to the flex + container's main axis, the flex container's main-axis + baseline is that baseline. +--> +<html> +<head> + <title>CSS Test: Testing the baseline of a vertical flex container whose flex items are not baseline-aligned</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> + <link rel="match" href="flexbox-baseline-multi-item-vert-001-ref.html"> + <meta charset="utf-8"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> + body { + margin: 0; + font: 20px Ahem; + line-height: 20px; + /* Baseline is 0.8em = 16px from top */ + } + .flexContainer { + display: inline-flex; + flex-direction: column; + background: lightblue; + } + .smallFont { + font-size: 10px; + line-height: 10px; + /* Baseline is 0.8em = 8px from top */ + } + .bigFont { + font-size: 20px; + line-height: 20px; + /* Baseline is 0.8em = 16px from top */ + } + .smallOrder { order: -1 } + .bigOrder { order: 30 } + </style> +</head> +<body> + a + <div class="flexContainer"> + <div class="bigFont">c</div + ><div class="smallFont smallOrder">b</div> + </div> + <div class="flexContainer"> + <div class="smallFont bigOrder">e</div + ><div class="bigFont">d</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-001-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-001-ref.html new file mode 100644 index 0000000000..66513652a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-001-ref.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case, using inline-block instead of inline-flex, and with the + baseline-aligned items aligned using specific font-size / line-heights, + and with unaligned children taken out of baseline-alignment using + "vertical-align:top". +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: inline-block; + width: 40px; + height: 40px; + background: lightblue; + } + .flexContainer > * { + width: 20px; + display: inline-block; + } + + .smallFont { + font-size: 8px; + line-height: 8px; + } + .medFont { + font-size: 12px; + line-height: 12px; + } + .bigFont { + font-size: 16px; + line-height: 16px; + } + .unaligned { vertical-align: top } + </style> +</head> +<body> + a + <!-- Flex containers with flex items that have a mix of baselines: --> + <div class="flexContainer medFont"> + <div class="medFont">b</div + ><div class="bigFont unaligned">c</div> + </div> + + <div class="flexContainer bigFont"> + <div class="bigFont">f</div + ><div class="smallFont unaligned">g</div> + </div> + + <!-- Flex container with second line baseline-aligned + (shouldn't make a difference) --> + <div class="flexContainer smallFont"> + <div class="smallFont">j</div + ><div class="bigFont unaligned">k</div> + </div> + n + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-001.html b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-001.html new file mode 100644 index 0000000000..0faf41bb3c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-001.html @@ -0,0 +1,83 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for how we compute the baseline of a horizontal flex container + with several flex lines. + The spec says this about this case: + [Given that the first line has no baseline-aligned items:] + ...if the flex container has at least one flex item, and its + first flex item has a baseline parallel to the flex + container's main axis, the flex container's main-axis + baseline is that baseline. +--> +<html> +<head> + <title>CSS Test: Testing the baseline of a horizontal flex container with multiple flex lines</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> + <link rel="match" href="flexbox-baseline-multi-line-horiz-001-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: inline-flex; + flex-wrap: wrap; + width: 40px; + height: 40px; + background: lightblue; + } + .flexContainer > * { + width: 20px; + } + + /* We'll make the second flex line not paint anything, so that the + reference case doesn't need to bother matching it. */ + .flexContainer > *:nth-child(3), + .flexContainer > *:nth-child(4) { + visibility: hidden; + } + + .smallFont { + font-size: 8px; + line-height: 8px; + } + .medFont { + font-size: 12px; + line-height: 12px; + } + .bigFont { + font-size: 16px; + line-height: 16px; + } + </style> +</head> +<body> + a + <!-- Flex containers with flex items that have a mix of baselines: --> + <div class="flexContainer"> + <div class="medFont">b</div + ><div class="bigFont">c</div + ><div class="bigFont">d</div + ><div class="medFont">e</div> + </div> + + <div class="flexContainer"> + <div class="bigFont">f</div + ><div class="smallFont">g</div + ><div class="medFont">h</div + ><div class="bigFont">i</div> + </div> + + <!-- Flex container with second line baseline-aligned + (shouldn't make a difference) --> + <div class="flexContainer"> + <div class="smallFont">j</div + ><div class="bigFont">k</div + ><div class="bigFont" style="align-self: baseline">l</div + ><div class="medFont" style="align-self: baseline">m</div> + </div> + n + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-002-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-002-ref.html new file mode 100644 index 0000000000..491144cc21 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-002-ref.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case, using inline-block instead of inline-flex, and with the + baseline-aligned items aligned using specific font-size / line-heights, + and with unaligned children taken out of baseline-alignment using + "vertical-align:top". +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: inline-block; + width: 40px; + /* Split testcase's 40px height into 20px of padding-bottom and 20px of + height, to set aside space for the testcase's (invisible) second line. */ + height: 20px; + padding-bottom: 20px; + background: lightblue; + } + .flexContainer > * { + width: 20px; + display: inline-block; + } + + .smallFont { + font-size: 8px; + line-height: 8px; + } + .medFont { + font-size: 12px; + line-height: 12px; + } + .bigFont { + font-size: 16px; + line-height: 16px; + } + .unaligned { vertical-align: top } + </style> +</head> +<body> + a + <!-- Flex containers with flex items that have a mix of baselines: --> + <div class="flexContainer medFont"> + <div class="bigFont">d</div + ><div class="medFont unaligned">e</div> + </div> + + <div class="flexContainer bigFont"> + <div class="bigFont">h</div + ><div class="medFont unaligned">i</div> + </div> + n + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-002.html b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-002.html new file mode 100644 index 0000000000..a58a7ec5f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-002.html @@ -0,0 +1,74 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for how we compute the baseline of a horizontal flex container + with several flex lines (wrapping in the reverse direction). + The spec says this about this case: + [Given that the first line has no baseline-aligned items:] + ...if the flex container has at least one flex item, and its + first flex item has a baseline parallel to the flex + container's main axis, the flex container's main-axis + baseline is that baseline. +--> +<html> +<head> + <title>CSS Test: Testing the baseline of a horizontal flex container with multiple flex lines</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> + <link rel="match" href="flexbox-baseline-multi-line-horiz-002-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: inline-flex; + flex-wrap: wrap-reverse; + width: 40px; + height: 40px; + background: lightblue; + } + .flexContainer > * { + width: 20px; + } + + /* We'll make the second flex line not paint anything, so that the + reference case doesn't need to bother matching it. */ + .flexContainer > *:nth-child(1), + .flexContainer > *:nth-child(2) { + visibility: hidden; + } + + .smallFont { + font-size: 8px; + line-height: 8px; + } + .medFont { + font-size: 12px; + line-height: 12px; + } + .bigFont { + font-size: 16px; + line-height: 16px; + } + </style> +</head> +<body> + a + <!-- Flex containers with flex items that have a mix of baselines: --> + <div class="flexContainer"> + <div class="medFont">b</div + ><div class="bigFont">c</div + ><div class="bigFont">d</div + ><div class="medFont">e</div> + </div> + + <div class="flexContainer"> + <div class="bigFont">f</div + ><div class="smallFont">g</div + ><div class="bigFont">h</div + ><div class="medFont">i</div> + </div> + n + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-003-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-003-ref.html new file mode 100644 index 0000000000..ef9e8051dd --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-003-ref.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + /* We use an outer vertical flex container, wrapping two single-line + flex containers, to match the testcase's multi-line flex container. */ + .outerFlexContainer { + height: 100px; + background: lightgray; + display: inline-flex; + flex-direction: column; + justify-content: center; /* to mimic testcase's "align-content:center" */ + } + .flexContainer { + display: flex; + width: 40px; + } + .flexContainer > * { + width: 20px; + } + + .smallFont { + font-size: 8px; + line-height: 8px; + } + .medFont { + font-size: 12px; + line-height: 12px; + } + .bigFont { + font-size: 16px; + line-height: 16px; + } + </style> +</head> +<body> + a + <!-- Flex container with second item in first line baseline-aligned + (should set the container's baseline) --> + <div class="outerFlexContainer"> + <div class="flexContainer"> + <div class="medFont">b</div> + <div class="bigFont" style="align-self: baseline">c</div> + </div> + <div class="flexContainer"> + <div class="medFont">d</div> + <div class="smallFont">e</div> + </div> + </div> + + <!-- Flex container with both items in first line baseline-aligned + (should set the container's baseline) --> + <div class="outerFlexContainer"> + <div class="flexContainer"> + <div class="smallFont" style="align-self: baseline">f</div> + <div class="medFont" style="align-self: baseline">g</div> + </div> + <div class="flexContainer"> + <div class="bigFont">h</div> + <div class="smallFont">i</div> + </div> + </div> + + <!-- Flex container with all items baseline-aligned + (only those on first line should set the container's baseline) --> + <div class="outerFlexContainer"> + <div class="flexContainer" style="align-items: baseline"> + <div class="bigFont">j</div> + <div class="smallFont" style="padding-bottom: 20px">k</div> + </div> + <div class="flexContainer" style="align-items: baseline"> + <div class="smallFont">l</div> + <div class="medFont">m</div> + </div> + </div> + n +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-003.html b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-003.html new file mode 100644 index 0000000000..ef7d787beb --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-003.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing the baseline of a horizontal multi-line (wrap) flex container with baseline-aligned items on first line</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> + <link rel="match" href="flexbox-baseline-multi-line-horiz-003-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: inline-flex; + flex-wrap: wrap; + width: 40px; + height: 100px; + background: lightgray; + + /* Use "align-content", to test that packing space is considered when + getting container's baseline from its first FlexLine:*/ + align-content: center; + } + .flexContainer > * { + width: 20px; + } + + .smallFont { + font-size: 8px; + line-height: 8px; + } + .medFont { + font-size: 12px; + line-height: 12px; + } + .bigFont { + font-size: 16px; + line-height: 16px; + } + </style> +</head> +<body> + a + <!-- Flex container with second item in first line baseline-aligned + (should set the container's baseline) --> + <div class="flexContainer"> + <div class="medFont">b</div> + <div class="bigFont" style="align-self: baseline">c</div> + <div class="medFont">d</div> + <div class="smallFont">e</div> + </div> + + <!-- Flex container with both items in first line baseline-aligned + (should set the container's baseline) --> + <div class="flexContainer"> + <div class="smallFont" style="align-self: baseline">f</div> + <div class="medFont" style="align-self: baseline">g</div> + <div class="bigFont">h</div> + <div class="smallFont">i</div> + </div> + + <!-- Flex container with all items baseline-aligned, and with some padding + (only those on first line should set the container's baseline) --> + <div class="flexContainer" style="align-items: baseline"> + <div class="bigFont">j</div> + <div class="smallFont" style="padding-bottom: 20px">k</div> + <div class="smallFont">l</div> + <div class="medFont">m</div> + </div> + n +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-004-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-004-ref.html new file mode 100644 index 0000000000..212b3b1e97 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-004-ref.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + /* We use an outer vertical flex container, wrapping two single-line + flex containers, to match the testcase's multi-line flex container. */ + .outerFlexContainer { + height: 100px; + background: lightgray; + display: inline-flex; + flex-direction: column-reverse; + justify-content: center; /* to mimic testcase's "align-content:center" */ + } + .flexContainer { + display: flex; + width: 40px; + } + .flexContainer > * { + width: 20px; + } + + .smallFont { + font-size: 8px; + line-height: 8px; + } + .medFont { + font-size: 12px; + line-height: 12px; + } + .bigFont { + font-size: 16px; + line-height: 16px; + } + </style> +</head> +<body> + a + <!-- Flex container with second item in first line baseline-aligned + (should set the container's baseline) --> + <div class="outerFlexContainer"> + <div class="flexContainer"> + <div class="medFont">b</div> + <div class="bigFont" style="align-self: baseline">c</div> + </div> + <div class="flexContainer"> + <div class="medFont">d</div> + <div class="smallFont">e</div> + </div> + </div> + + <!-- Flex container with both items in first line baseline-aligned + (should set the container's baseline) --> + <div class="outerFlexContainer"> + <div class="flexContainer"> + <div class="smallFont" style="align-self: baseline">f</div> + <div class="medFont" style="align-self: baseline">g</div> + </div> + <div class="flexContainer"> + <div class="bigFont">h</div> + <div class="smallFont">i</div> + </div> + </div> + + <!-- Flex container with all items baseline-aligned + (only those on first line should set the container's baseline) --> + <div class="outerFlexContainer"> + <div class="flexContainer" style="align-items: baseline"> + <div class="bigFont">j</div> + <div class="smallFont" style="padding-bottom: 20px">k</div> + </div> + <div class="flexContainer" style="align-items: baseline"> + <div class="smallFont">l</div> + <div class="medFont">m</div> + </div> + </div> + n +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-004.html b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-004.html new file mode 100644 index 0000000000..21db212f99 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-004.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing the baseline of a horizontal multi-line (wrap-reverse) flex container with baseline-aligned items on first line</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> + <link rel="match" href="flexbox-baseline-multi-line-horiz-004-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: inline-flex; + flex-wrap: wrap-reverse; + width: 40px; + height: 100px; + background: lightgray; + + /* Use "align-content", to test that packing space is considered when + getting container's baseline from its first FlexLine:*/ + align-content: center; + } + .flexContainer > * { + width: 20px; + } + + .smallFont { + font-size: 8px; + line-height: 8px; + } + .medFont { + font-size: 12px; + line-height: 12px; + } + .bigFont { + font-size: 16px; + line-height: 16px; + } + </style> +</head> +<body> + a + <!-- Flex container with second item in first line baseline-aligned + (should set the container's baseline) --> + <div class="flexContainer"> + <div class="medFont">b</div> + <div class="bigFont" style="align-self: baseline">c</div> + <div class="medFont">d</div> + <div class="smallFont">e</div> + </div> + + <!-- Flex container with both items in first line baseline-aligned + (should set the container's baseline) --> + <div class="flexContainer"> + <div class="smallFont" style="align-self: baseline">f</div> + <div class="medFont" style="align-self: baseline">g</div> + <div class="bigFont">h</div> + <div class="smallFont">i</div> + </div> + + <!-- Flex container with all items baseline-aligned, and with some padding + (only those on first line should set the container's baseline) --> + <div class="flexContainer" style="align-items: baseline"> + <div class="bigFont">j</div> + <div class="smallFont" style="padding-bottom: 20px">k</div> + <div class="smallFont">l</div> + <div class="medFont">m</div> + </div> + n +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-line-vert-001-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-line-vert-001-ref.html new file mode 100644 index 0000000000..ce47baa87d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-line-vert-001-ref.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case, using inline-block instead of inline-flex, and with the + baseline-aligned items aligned using specific font-size / line-heights, + and with unaligned children taken out of baseline-alignment using + "float: left". +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: inline-block; + width: 40px; + height: 40px; + background: lightblue; + } + .flexContainer > * { + height: 20px; + display: inline-block; + } + + .smallFont { + font-size: 8px; + line-height: 8px; + } + .medFont { + font-size: 12px; + line-height: 12px; + } + .bigFont { + font-size: 16px; + line-height: 16px; + } + .unaligned { float: left } + </style> +</head> +<body> + a + <!-- Flex containers with flex items that have a mix of baselines: --> + <div class="flexContainer medFont"> + <div class="medFont">b</div + ><br><div class="bigFont unaligned">c</div> + </div> + + <div class="flexContainer bigFont"> + <div class="bigFont">f</div + ><br><div class="smallFont unaligned">g</div> + </div> + + <!-- Flex container with second line baseline-aligned + (shouldn't make a difference) --> + <div class="flexContainer smallFont"> + <div class="smallFont">j</div + ><br><div class="bigFont unaligned">k</div> + </div> + n + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-line-vert-001.html b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-line-vert-001.html new file mode 100644 index 0000000000..d2b510ade6 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-line-vert-001.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for how we compute the baseline of a vertical flex container + with several flex lines. + The spec says this about this case: + [Given that the first line has no baseline-aligned items:] + ...if the flex container has at least one flex item, and its + first flex item has a baseline parallel to the flex + container's main axis, the flex container's main-axis + baseline is that baseline. +--> +<html> +<head> + <title>CSS Test: Testing the baseline of a vertical flex container with multiple flex lines</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> + <link rel="match" href="flexbox-baseline-multi-line-vert-001-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: inline-flex; + flex-direction: column; + flex-wrap: wrap; + width: 40px; + height: 40px; + background: lightblue; + } + .flexContainer > * { + height: 20px; + } + + /* We'll make the second flex line not paint anything, so that the + reference case doesn't need to bother matching it. */ + .flexContainer > *:nth-child(3), + .flexContainer > *:nth-child(4) { + visibility: hidden; + } + + .smallFont { + font-size: 8px; + line-height: 8px; + } + .medFont { + font-size: 12px; + line-height: 12px; + } + .bigFont { + font-size: 16px; + line-height: 16px; + } + </style> +</head> +<body> + a + <!-- Flex containers with flex items that have a mix of baselines: --> + <div class="flexContainer"> + <div class="medFont">b</div + ><div class="bigFont">c</div + ><div class="bigFont">d</div + ><div class="medFont">e</div> + </div> + + <div class="flexContainer"> + <div class="bigFont">f</div + ><div class="smallFont">g</div + ><div class="medFont">h</div + ><div class="bigFont">i</div> + </div> + + <!-- Flex container with second line baseline-aligned + (shouldn't make a difference) --> + <div class="flexContainer"> + <div class="smallFont">j</div + ><div class="bigFont">k</div + ><div class="bigFont" style="align-self: baseline">l</div + ><div class="medFont" style="align-self: baseline">m</div> + </div> + n + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-line-vert-002-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-line-vert-002-ref.html new file mode 100644 index 0000000000..15538f74fa --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-line-vert-002-ref.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case, using inline-block instead of inline-flex, and with the + baseline-aligned items aligned using specific font-size / line-heights, + and with unaligned children taken out of baseline-alignment using + "float: left". +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: inline-block; + /* Split testcase's 40px width into 20px of padding-right and 20px of + width, to set aside space for the testcase's (invisible) second line. + */ + width: 20px; + padding-right: 20px; + height: 40px; + background: lightblue; + } + .flexContainer > * { + width: 20px; + height: 20px; + display: inline-block; + } + + .smallFont { + font-size: 8px; + line-height: 8px; + } + .medFont { + font-size: 12px; + line-height: 12px; + } + .bigFont { + font-size: 16px; + line-height: 16px; + } + .unaligned { float: left } + </style> +</head> +<body> + a + <!-- Flex containers with flex items that have a mix of baselines: --> + <div class="flexContainer medFont"> + <div class="bigFont">d</div + ><br><div class="medFont unaligned">e</div> + </div> + + <!-- Flex container with second line baseline-aligned + (shouldn't make a difference) --> + <div class="flexContainer smallFont"> + <div class="bigFont">l</div + ><br><div class="medFont unaligned">m</div> + </div> + n + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-line-vert-002.html b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-line-vert-002.html new file mode 100644 index 0000000000..062d808d89 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-multi-line-vert-002.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for how we compute the baseline of a vertical flex container + with several flex lines (wrapping in the reverse direction). + The spec says this about this case: + [Given that the first line has no baseline-aligned items:] + ...if the flex container has at least one flex item, and its + first flex item has a baseline parallel to the flex + container's main axis, the flex container's main-axis + baseline is that baseline. +--> +<html> +<head> + <title>CSS Test: Testing the baseline of a vertical flex container with multiple flex lines</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> + <link rel="match" href="flexbox-baseline-multi-line-vert-002-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: inline-flex; + flex-direction: column; + flex-wrap: wrap-reverse; + width: 40px; + height: 40px; + background: lightblue; + } + .flexContainer > * { + width: 20px; + height: 20px; + } + + /* We'll make the second flex line not paint anything, so that the + reference case doesn't need to bother matching it. */ + .flexContainer > *:nth-child(1), + .flexContainer > *:nth-child(2) { + visibility: hidden; + } + + .smallFont { + font-size: 8px; + line-height: 8px; + } + .medFont { + font-size: 12px; + line-height: 12px; + } + .bigFont { + font-size: 16px; + line-height: 16px; + } + </style> +</head> +<body> + a + <!-- Flex containers with flex items that have a mix of baselines: --> + <div class="flexContainer"> + <div class="medFont">b</div + ><div class="bigFont">c</div + ><div class="bigFont">d</div + ><div class="medFont">e</div> + </div> + + <!-- Flex container with second line baseline-aligned + (shouldn't make a difference) --> + <div class="flexContainer"> + <div class="smallFont">j</div + ><div class="bigFont">k</div + ><div class="bigFont" style="align-self: baseline">l</div + ><div class="medFont" style="align-self: baseline">m</div> + </div> + n + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-nested-001-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-nested-001-ref.html new file mode 100644 index 0000000000..dd4e144b46 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-nested-001-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reference: Baseline of nested flex containers with stretched textfield inside</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <meta charset="utf-8"> + <style> + .ib { + display: inline-block; + } + .innerFlex { + display: flex; + height: 200px; + } + </style> + </head> + <body> + abc + <div class="ib"> + <div class="innerFlex"> + <input value="def"> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-nested-001.html b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-nested-001.html new file mode 100644 index 0000000000..57999e57ce --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-nested-001.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: Baseline of nested flex containers with stretched textfield inside</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1672640"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines"> + <link rel="match" href="flexbox-baseline-nested-001-ref.html"> + + <style> + .ib { + display: inline-block; + } + .outerFlex { + display: flex; + } + .innerFlex { + display: flex; + height: 200px; + } + </style> + </head> + <body> + abc + <div class="ib"> + <div class="outerFlex"> + <div class="innerFlex"> + <input value="def"> + </div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-single-item-001-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-single-item-001-ref.html new file mode 100644 index 0000000000..afca911546 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-single-item-001-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case, using inline-block instead of inline-flex. --> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + body { + font: 14px serif; + } + .flexContainer { + display: inline-block; + height: 16px; + width: 16px; + background: pink; + border: 0px dotted black; + /* (Elements that want a border will set their border-width.) */ + } + .abs { + position: absolute; + top: 0; + font-size: 8px; + } + </style> +</head> +<body> + A + <div class="flexContainer">a</div> + <div class="flexContainer" style="padding-bottom: 20px">a</div> + <div class="flexContainer" style="padding: 10px">a</div> + <div class="flexContainer" style="border-width: 3px">a</div> + <div class="flexContainer" style="border-bottom-width: 4px">a</div> + <div class="flexContainer" style="padding: 4px"> + <!-- (An abspos child shouldn't prevent us from getting our baseline from + the first flex item, which happens to be the second child.) --> + <div class="abs">abs</div> + <div style="font: 26px serif">a</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-single-item-001a.html b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-single-item-001a.html new file mode 100644 index 0000000000..b9df6c23f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-single-item-001a.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for how we compute the baseline of a horizontal flex container + with one flex item. This is the main-axis baseline. The spec says this + about this case: + ...if the flex container has at least one flex item, and its + first flex item has a baseline parallel to the flex + container's main axis, the flex container's main-axis + baseline is that baseline. +--> +<html> +<head> + <title>CSS Test: Testing the baseline of a horizontal flex container with one flex item</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> + <link rel="match" href="flexbox-baseline-single-item-001-ref.html"> + <meta charset="utf-8"> + <style> + body { + font: 14px serif; + } + .flexContainer { + display: inline-flex; + height: 16px; + width: 16px; + background: pink; + border: 0px dotted black; + /* (Elements that want a border will set their border-width.) */ + } + .abs { + position: absolute; + top: 0; + font-size: 8px; + } + </style> +</head> +<body> + A + <div class="flexContainer">a</div> + <div class="flexContainer" style="padding-bottom: 20px">a</div> + <div class="flexContainer" style="padding: 10px">a</div> + <div class="flexContainer" style="border-width: 3px">a</div> + <div class="flexContainer" style="border-bottom-width: 4px">a</div> + <div class="flexContainer" style="padding: 4px"> + <!-- (An abspos child shouldn't prevent us from getting our baseline from + the first flex item, which happens to be the second child.) --> + <div class="abs">abs</div> + <div style="font: 26px serif">a</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-single-item-001b.html b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-single-item-001b.html new file mode 100644 index 0000000000..523045894b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-baseline-single-item-001b.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase for how we compute the baseline of a vertical flex container + with one flex item. This is the cross-axis baseline. The spec says this + about this case: + If the flex container has at least one flex item, and its + first flex item has a baseline parallel to the flex + container's cross axis, the flex container's cross-axis + baseline is that baseline. +--> +<html> +<head> + <title>CSS Test: Testing the baseline of a vertical flex container with one flex item</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> + <link rel="match" href="flexbox-baseline-single-item-001-ref.html"> + <meta charset="utf-8"> + <style> + body { + font: 14px serif; + } + .flexContainer { + display: inline-flex; + flex-direction: column; + height: 16px; + width: 16px; + background: pink; + border: 0px dotted black; + /* (Elements that want a border will set their border-width.) */ + } + .abs { + position: absolute; + top: 0; + font-size: 8px; + } + </style> +</head> +<body> + A + <div class="flexContainer">a</div> + <div class="flexContainer" style="padding-bottom: 20px">a</div> + <div class="flexContainer" style="padding: 10px">a</div> + <div class="flexContainer" style="border-width: 3px">a</div> + <div class="flexContainer" style="border-bottom-width: 4px">a</div> + <div class="flexContainer" style="padding: 4px"> + <!-- (An abspos child shouldn't prevent us from getting our baseline from + the first flex item, which happens to be the second child.) --> + <div class="abs">abs</div> + <div style="font: 26px serif">a</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-basic-block-horiz-001-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-block-horiz-001-ref.xhtml new file mode 100644 index 0000000000..9076e10816 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-block-horiz-001-ref.xhtml @@ -0,0 +1,65 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { height: 100px; } + div.flexbox { + border: 1px dashed blue; + width: 200px; + } + div.a { + display: inline-block; + background: lightgreen; + } + div.b { + display: inline-block; + background: yellow; + } + div.c { + display: inline-block; + background: orange; + } + div.auto { + display: inline-block; + background: pink; + } + div.inflex { + display: inline-block; + background: gray; + } + div.spacer { + height: 15px; + background: purple; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="a" style="width: 80px"/><div class="b" style="width: 120px"/> + </div> + <div class="flexbox"> + <div class="a" style="width: 62.5px"/><div class="c" style="width: 137.5px"/> + </div> + <div class="flexbox"> + <div class="a" style="width: 185px"/><div class="auto"> + <div class="spacer" style="width: 15px"/></div> + </div> + <div class="flexbox"> + <div class="b" style="width: 76px"/><div class="c" style="width: 124px"/> + </div> + <div class="flexbox"> + <div class="b" style="width: 170px"/><div class="auto"> + <div class="spacer" style="width: 30px"/></div> + </div> + <div class="flexbox"> + <div class="a" style="width: 45px"/><div class="b" style="width: 50px" + /><div class="inflex" style="width: 20px"/><div class="c" style="width: 85px"/> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-basic-block-horiz-001.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-block-horiz-001.xhtml new file mode 100644 index 0000000000..1345263df3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-block-horiz-001.xhtml @@ -0,0 +1,65 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with blocks as flex items in a horizontal flex container, with + various "flex" values and various combinations of the items. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing flexbox layout algorithm property on block flex items in a horizontal 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/#layout-algorithm"/> + <link rel="match" href="flexbox-basic-block-horiz-001-ref.xhtml"/> + <style> + div { height: 100px; } + div.flexbox { + border: 1px dashed blue; + width: 200px; + font-size: 10px; + display: flex; + } + div.a { + flex: 1 0 30px; + background: lightgreen; + } + div.b { + flex: 2 0 20px; + background: yellow; + } + div.c { + flex: 3 0 40px; + background: orange; + } + div.flexNone { + flex: none; + background: pink; + } + div.flexBasis { + flex: 0 0 20px; + background: gray; + } + div.spacer { + display: inline-block; + width: 15px; + height: 15px; + background: purple; + } + </style> + </head> + <body> + <div class="flexbox"><div class="a"></div><div class="b"/></div> + <div class="flexbox"><div class="a"/><div class="c"/></div> + <div class="flexbox"><div class="a"/> + <div class="flexNone"><div class="spacer"/></div> + </div> + <div class="flexbox"><div class="b"/><div class="c"/></div> + <div class="flexbox"><div class="b"/> + <div class="flexNone"><div class="spacer"/><div class="spacer"/></div> + </div> + + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-basic-block-horiz-001v.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-block-horiz-001v.xhtml new file mode 100644 index 0000000000..f1dfdfdb86 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-block-horiz-001v.xhtml @@ -0,0 +1,73 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with blocks as flex items in a horizontal flex container, with + various "flex" values and various combinations of the items + and with various writing-modes on the items. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title> + CSS Test: Testing flexbox layout algorithm property on block flex items in a horizontal flex container + (with various writing-modes on the flex items). + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-basic-block-horiz-001-ref.xhtml"/> + <style> + div { height: 100px; } + div.flexbox { + border: 1px dashed blue; + width: 200px; + font-size: 10px; + display: flex; + } + div.a { + flex: 1 0 30px; + background: lightgreen; + writing-mode: vertical-lr; + } + div.b { + flex: 2 0 20px; + background: yellow; + writing-mode: vertical-rl; + } + div.c { + flex: 3 0 40px; + background: orange; + writing-mode: sideways-lr; + } + div.flexNone { + flex: none; + background: pink; + writing-mode: vertical-lr; + } + div.flexBasis { + flex: 0 0 20px; + background: gray; + writing-mode: sideways-rl; + } + div.spacer { + width: 15px; + height: 15px; + background: purple; + } + </style> + </head> + <body> + <div class="flexbox"><div class="a"></div><div class="b"/></div> + <div class="flexbox"><div class="a"/><div class="c"/></div> + <div class="flexbox"><div class="a"/> + <div class="flexNone"><div class="spacer"/></div> + </div> + <div class="flexbox"><div class="b"/><div class="c"/></div> + <div class="flexbox"><div class="b"/> + <div class="flexNone"><div class="spacer"/><div class="spacer"/></div> + </div> + + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-basic-block-vert-001-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-block-vert-001-ref.xhtml new file mode 100644 index 0000000000..c8a6ae4d33 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-block-vert-001-ref.xhtml @@ -0,0 +1,60 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { width: 50px; } + div.flexbox { + border: 1px dashed blue; + float: left; + } + div.a { + background: lightgreen; + } + div.b { + background: yellow; + } + div.c { + background: orange; + } + div.auto { + background: pink; + } + div.inflex { + background: gray; + } + div.spacer { + width: 15px; + background: purple; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="a" style="height: 80px"/><div class="b" style="height: 120px"/> + </div> + <div class="flexbox"> + <div class="a" style="height: 62.5px"/><div class="c" style="height: 137.5px"/> + </div> + <div class="flexbox"> + <div class="a" style="height: 185px"/><div class="auto"> + <div class="spacer" style="height: 15px"/></div> + </div> + <div class="flexbox"> + <div class="b" style="height: 76px"/><div class="c" style="height: 124px"/> + </div> + <div class="flexbox"> + <div class="b" style="height: 170px"/><div class="auto"> + <div class="spacer" style="height: 30px"/></div> + </div> + <div class="flexbox"> + <div class="a" style="height: 45px"/><div class="b" style="height: 50px" + /><div class="inflex" style="height: 20px"/><div class="c" style="height: 85px"/> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-basic-block-vert-001.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-block-vert-001.xhtml new file mode 100644 index 0000000000..92c32c828c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-block-vert-001.xhtml @@ -0,0 +1,66 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with blocks as flex items in a vertical flex container, with + various "flex" values and various combinations of the items. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing flexbox layout algorithm property on block flex items in a vertical 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/#layout-algorithm"/> + <link rel="match" href="flexbox-basic-block-vert-001-ref.xhtml"/> + <style> + div { width: 50px; } + div.flexbox { + float: left; + border: 1px dashed blue; + height: 200px; + font-size: 10px; + display: flex; + flex-direction: column; + } + div.a { + flex: 1 0 30px; + background: lightgreen; + } + div.b { + flex: 2 0 20px; + background: yellow; + } + div.c { + flex: 3 0 40px; + background: orange; + } + div.flexNone { + flex: none; + background: pink; + } + div.flexBasis { + flex: 0 0 20px; + background: gray; + } + div.spacer { + width: 15px; + height: 15px; + background: purple; + } + </style> + </head> + <body> + <div class="flexbox"><div class="a"></div><div class="b"/></div> + <div class="flexbox"><div class="a"/><div class="c"/></div> + <div class="flexbox"><div class="a"/> + <div class="flexNone"><div class="spacer"/></div> + </div> + <div class="flexbox"><div class="b"/><div class="c"/></div> + <div class="flexbox"><div class="b"/> + <div class="flexNone"><div class="spacer"/><div class="spacer"/></div> + </div> + + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-basic-block-vert-001v.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-block-vert-001v.xhtml new file mode 100644 index 0000000000..da943dfc56 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-block-vert-001v.xhtml @@ -0,0 +1,75 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with blocks as flex items in a vertical flex container, with + various "flex" values and various combinations of the items. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title> + CSS Test: Testing flexbox layout algorithm property on block flex items in a vertical flex container + (with various writing-modes on the flex items). + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-basic-block-vert-001-ref.xhtml"/> + <style> + div { width: 50px; } + div.flexbox { + float: left; + border: 1px dashed blue; + height: 200px; + font-size: 10px; + display: flex; + flex-direction: column; + } + div.a { + flex: 1 0 30px; + background: lightgreen; + writing-mode: vertical-lr; + } + div.b { + flex: 2 0 20px; + background: yellow; + writing-mode: vertical-rl; + } + div.c { + flex: 3 0 40px; + background: orange; + writing-mode: sideways-lr; + } + div.flexNone { + flex: none; + background: pink; + writing-mode: vertical-lr; + } + div.flexBasis { + flex: 0 0 20px; + background: gray; + writing-mode: sideways-rl; + } + div.spacer { + display: inline-block; + width: 15px; + height: 15px; + background: purple; + } + </style> + </head> + <body> + <div class="flexbox"><div class="a"></div><div class="b"/></div> + <div class="flexbox"><div class="a"/><div class="c"/></div> + <div class="flexbox"><div class="a"/> + <div class="flexNone"><div class="spacer"/></div> + </div> + <div class="flexbox"><div class="b"/><div class="c"/></div> + <div class="flexbox"><div class="b"/> + <div class="flexNone"><div class="spacer"/><div class="spacer"/></div> + </div> + + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-basic-canvas-horiz-001-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-canvas-horiz-001-ref.xhtml new file mode 100644 index 0000000000..274ac15fcd --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-canvas-horiz-001-ref.xhtml @@ -0,0 +1,60 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + width: 200px; + background: lightgreen; + margin-bottom: 5px; + line-height: 8px; + } + canvas { + width: 10px; + height: 20px; + border: 1px dotted green; + } + </style> + </head> + <body> + <div class="flexbox"> + <canvas/> + </div> + + <div class="flexbox" style="height: 22px"> + some words + <canvas style="float:right"/> + </div> + + <div class="flexbox"> + <canvas style="width: 122.5px" + /><canvas style="width: 73.5px"/> + </div> + + <div class="flexbox"> + <canvas style="width: 93px" + /><canvas style="width: 103px"/> + </div> + + <div class="flexbox"> + <canvas style="width: 114px" + /><canvas style="width: 82px"/> + </div> + + <div class="flexbox"> + <canvas style="width: 106px" + /><canvas style="width: 90px"/> + </div> + + <div class="flexbox"> + <canvas style="width: 46px" + /><canvas style="width: 150px"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-basic-canvas-horiz-001.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-canvas-horiz-001.xhtml new file mode 100644 index 0000000000..6d3629e326 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-canvas-horiz-001.xhtml @@ -0,0 +1,101 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test checks that canvas elements behave correctly as flex items. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing flexbox layout algorithm property on canvas flex items in a horizontal 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/#layout-algorithm"/> + <link rel="match" href="flexbox-basic-canvas-horiz-001-ref.xhtml"/> + <style> + div.flexbox { + width: 200px; + background: lightgreen; + display: flex; + justify-content: space-between; + margin-bottom: 5px; + line-height: 8px; + } + canvas { + min-width: 0; + width: 10px; + height: 20px; + border: 1px dotted green; + } + </style> + </head> + <body> + + <!-- A) One flex item --> + <div class="flexbox"> + <canvas/> + </div> + + <!-- B) Text and a canvas (ensure they aren't merged into one flex item) --> + <div class="flexbox"> + some words <canvas/> + </div> + + <!-- C) Two canvas elements, getting stretched by different ratios, from 0. + + Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) + = 196px + + 1st element gets 5/8 of space: 5/8 * 196px = 122.5px + 1st element gets 3/8 of space: 3/8 * 196px = 73.5px + --> + <div class="flexbox"> + <canvas style="flex: 5"/> + <canvas style="flex: 3"/> + </div> + + <!-- D) Two canvas elements, getting stretched by different ratios, from + different flex bases. + + Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px + 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px + 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px + --> + <div class="flexbox"> + <canvas style="width: 33px; flex: 2 auto"/> + <canvas style="width: 13px; flex: 3 auto"/> + </div> + + <!-- E) Two flex items, getting shrunk by different amounts. + + Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px + First element scaled flex ratio = 4 * 150 = 600 + Second element scaled flex ratio = 3 * 100 = 300 + * So, total flexibility is 600 + 300 = 900 + + 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px + 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px + --> + <div class="flexbox"> + <canvas style="width: 150px; flex: 1 4 auto"/> + <canvas style="width: 100px; flex: 1 3 auto"/> + </div> + + <!-- F) Making sure we don't grow past max-width --> + <!-- Same as (D), except we've added a max-width on the second element. + --> + <div class="flexbox"> + <canvas style="width: 33px; flex: 2 auto"/> + <canvas style="width: 13px; max-width: 90px; flex: 3 auto"/> + </div> + + <!-- G) Making sure we grow at least as large as min-width --> + <!-- Same as (C), except we've added a min-width on the second element. + --> + <div class="flexbox"> + <canvas style="width: 33px; flex: 2 auto"/> + <canvas style="width: 13px; min-width: 150px; flex: 3 auto"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-basic-canvas-horiz-001v.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-canvas-horiz-001v.xhtml new file mode 100644 index 0000000000..ad623d77f7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-canvas-horiz-001v.xhtml @@ -0,0 +1,105 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test checks that canvas elements behave correctly as flex items. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title> + CSS Test: Testing flexbox layout algorithm property on canvas flex items in a horizontal flex container + (with a vertical writing-mode on the canvas flex items). + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-basic-canvas-horiz-001-ref.xhtml"/> + <style> + div.flexbox { + width: 200px; + background: lightgreen; + display: flex; + justify-content: space-between; + margin-bottom: 5px; + line-height: 8px; + } + canvas { + min-width: 0; + width: 10px; + height: 20px; + border: 1px dotted green; + writing-mode: vertical-lr; + } + </style> + </head> + <body> + + <!-- A) One flex item --> + <div class="flexbox"> + <canvas/> + </div> + + <!-- B) Text and a canvas (ensure they aren't merged into one flex item) --> + <div class="flexbox"> + some words <canvas/> + </div> + + <!-- C) Two canvas elements, getting stretched by different ratios, from 0. + + Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) + = 196px + + 1st element gets 5/8 of space: 5/8 * 196px = 122.5px + 1st element gets 3/8 of space: 3/8 * 196px = 73.5px + --> + <div class="flexbox"> + <canvas style="flex: 5"/> + <canvas style="flex: 3"/> + </div> + + <!-- D) Two canvas elements, getting stretched by different ratios, from + different flex bases. + + Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px + 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px + 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px + --> + <div class="flexbox"> + <canvas style="width: 33px; flex: 2 auto"/> + <canvas style="width: 13px; flex: 3 auto"/> + </div> + + <!-- E) Two flex items, getting shrunk by different amounts. + + Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px + First element scaled flex ratio = 4 * 150 = 600 + Second element scaled flex ratio = 3 * 100 = 300 + * So, total flexibility is 600 + 300 = 900 + + 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px + 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px + --> + <div class="flexbox"> + <canvas style="width: 150px; flex: 1 4 auto"/> + <canvas style="width: 100px; flex: 1 3 auto"/> + </div> + + <!-- F) Making sure we don't grow past max-width --> + <!-- Same as (D), except we've added a max-width on the second element. + --> + <div class="flexbox"> + <canvas style="width: 33px; flex: 2 auto"/> + <canvas style="width: 13px; max-width: 90px; flex: 3 auto"/> + </div> + + <!-- G) Making sure we grow at least as large as min-width --> + <!-- Same as (C), except we've added a min-width on the second element. + --> + <div class="flexbox"> + <canvas style="width: 33px; flex: 2 auto"/> + <canvas style="width: 13px; min-width: 150px; flex: 3 auto"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-basic-canvas-vert-001-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-canvas-vert-001-ref.xhtml new file mode 100644 index 0000000000..2187f15b19 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-canvas-vert-001-ref.xhtml @@ -0,0 +1,64 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + height: 200px; + width: 22px; + float: left; + margin-right: 10px; + background: lightgreen; + line-height: 0; + } + canvas { + width: 20px; + height: 10px; + border: 1px dotted green; + } + </style> + </head> + <body> + <div class="flexbox"> + <canvas/> + </div> + + <div class="flexbox"> + <div style="font: 8px monospace; height: 188px"> + a b + </div> + <canvas/> + </div> + + <div class="flexbox"> + <canvas style="height: 108.8px" + /><canvas style="height: 87.1px"/> + </div> + + <div class="flexbox"> + <canvas style="height: 93px" + /><canvas style="height: 103px"/> + </div> + + <div class="flexbox"> + <canvas style="height: 114px" + /><canvas style="height: 82px"/> + </div> + + <div class="flexbox"> + <canvas style="height: 106px" + /><canvas style="height: 90px"/> + </div> + + <div class="flexbox"> + <canvas style="height: 46px" + /><canvas style="height: 150px"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-basic-canvas-vert-001.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-canvas-vert-001.xhtml new file mode 100644 index 0000000000..ba47c207ab --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-canvas-vert-001.xhtml @@ -0,0 +1,103 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test checks that canvas elements behave correctly as flex items. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing flexbox layout algorithm property on canvas flex items in a vertical 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/#layout-algorithm"/> + <link rel="match" href="flexbox-basic-canvas-vert-001-ref.xhtml"/> + <style> + div.flexbox { + height: 200px; + background: lightgreen; + display: flex; + justify-content: space-between; + flex-direction: column; + float: left; + margin-right: 10px; + font: 8px monospace; + } + canvas { + width: 20px; + height: 10px; + min-height: 0; + border: 1px dotted green; + } + </style> + </head> + <body> + + <!-- A) One flex item --> + <div class="flexbox"> + <canvas/> + </div> + + <!-- B) Text and a canvas (ensure they aren't merged into one flex item) --> + <div class="flexbox"> + a b <canvas/> + </div> + + <!-- C) Two canvas elements, getting stretched by different ratios, from 0. + + Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) + = 196px + + 1st element gets 5/9 of space: 5/9 * 196px = 108.8px + 1st element gets 4/9 of space: 4/9 * 196px = 87.1px + --> + <div class="flexbox"> + <canvas style="flex: 5"/> + <canvas style="flex: 4"/> + </div> + + <!-- D) Two canvas elements, getting stretched by different ratios, from + different flex bases. + + Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px + 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px + 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px + --> + <div class="flexbox"> + <canvas style="height: 33px; flex: 2 auto"/> + <canvas style="height: 13px; flex: 3 auto"/> + </div> + + <!-- E) Two flex items, getting shrunk by different amounts. + + Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px + First element scaled flex ratio = 4 * 150 = 600 + Second element scaled flex ratio = 3 * 100 = 300 + * So, total flexibility is 600 + 300 = 900 + + 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px + 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px + --> + <div class="flexbox"> + <canvas style="height: 150px; flex: 1 4 auto"/> + <canvas style="height: 100px; flex: 1 3 auto"/> + </div> + + <!-- F) Making sure we don't grow past max-height --> + <!-- Same as (D), except we've added a max-height on the second element. + --> + <div class="flexbox"> + <canvas style="height: 33px; flex: 2 auto"/> + <canvas style="height: 13px; max-height: 90px; flex: 3 auto"/> + </div> + + <!-- G) Making sure we grow at least as large as min-height --> + <!-- Same as (C), except we've added a min-height on the second element. + --> + <div class="flexbox"> + <canvas style="height: 33px; flex: 2 auto"/> + <canvas style="height: 13px; min-height: 150px; flex: 3 auto"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-basic-canvas-vert-001v.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-canvas-vert-001v.xhtml new file mode 100644 index 0000000000..d37b45f233 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-canvas-vert-001v.xhtml @@ -0,0 +1,107 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test checks that canvas elements behave correctly as flex items. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title> + CSS Test: Testing flexbox layout algorithm property on canvas flex items in a vertical flex container + (with a vertical writing-mode on the canvas flex items). + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-basic-canvas-vert-001-ref.xhtml"/> + <style> + div.flexbox { + height: 200px; + background: lightgreen; + display: flex; + justify-content: space-between; + flex-direction: column; + float: left; + margin-right: 10px; + font: 8px monospace; + } + canvas { + width: 20px; + height: 10px; + min-height: 0; + border: 1px dotted green; + writing-mode: vertical-lr; + } + </style> + </head> + <body> + + <!-- A) One flex item --> + <div class="flexbox"> + <canvas/> + </div> + + <!-- B) Text and a canvas (ensure they aren't merged into one flex item) --> + <div class="flexbox"> + a b <canvas/> + </div> + + <!-- C) Two canvas elements, getting stretched by different ratios, from 0. + + Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) + = 196px + + 1st element gets 5/9 of space: 5/9 * 196px = 108.8px + 1st element gets 4/9 of space: 4/9 * 196px = 87.1px + --> + <div class="flexbox"> + <canvas style="flex: 5"/> + <canvas style="flex: 4"/> + </div> + + <!-- D) Two canvas elements, getting stretched by different ratios, from + different flex bases. + + Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px + 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px + 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px + --> + <div class="flexbox"> + <canvas style="height: 33px; flex: 2 auto"/> + <canvas style="height: 13px; flex: 3 auto"/> + </div> + + <!-- E) Two flex items, getting shrunk by different amounts. + + Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px + First element scaled flex ratio = 4 * 150 = 600 + Second element scaled flex ratio = 3 * 100 = 300 + * So, total flexibility is 600 + 300 = 900 + + 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px + 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px + --> + <div class="flexbox"> + <canvas style="height: 150px; flex: 1 4 auto"/> + <canvas style="height: 100px; flex: 1 3 auto"/> + </div> + + <!-- F) Making sure we don't grow past max-height --> + <!-- Same as (D), except we've added a max-height on the second element. + --> + <div class="flexbox"> + <canvas style="height: 33px; flex: 2 auto"/> + <canvas style="height: 13px; max-height: 90px; flex: 3 auto"/> + </div> + + <!-- G) Making sure we grow at least as large as min-height --> + <!-- Same as (C), except we've added a min-height on the second element. + --> + <div class="flexbox"> + <canvas style="height: 33px; flex: 2 auto"/> + <canvas style="height: 13px; min-height: 150px; flex: 3 auto"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-basic-fieldset-horiz-001-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-fieldset-horiz-001-ref.xhtml new file mode 100644 index 0000000000..edb4a42f2e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-fieldset-horiz-001-ref.xhtml @@ -0,0 +1,65 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + width: 200px; + background: lightgreen; + margin-bottom: 5px; + line-height: 8px; + clear: all; + height: 22px; + } + fieldset { + width: 10px; + height: 20px; + border: 1px dotted green; + margin: 0; + padding: 0; + float: left; + } + </style> + </head> + <body> + <div class="flexbox"> + <fieldset/> + </div> + + <div class="flexbox" style="height: 22px"> + some words + <fieldset style="float:right"/> + </div> + + <div class="flexbox"> + <fieldset style="width: 122.5px" + /><fieldset style="width: 73.5px"/> + </div> + + <div class="flexbox"> + <fieldset style="width: 93px" + /><fieldset style="width: 103px"/> + </div> + + <div class="flexbox"> + <fieldset style="width: 114px" + /><fieldset style="width: 82px"/> + </div> + + <div class="flexbox"> + <fieldset style="width: 106px" + /><fieldset style="width: 90px"/> + </div> + + <div class="flexbox"> + <fieldset style="width: 46px" + /><fieldset style="width: 150px"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-basic-fieldset-horiz-001.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-fieldset-horiz-001.xhtml new file mode 100644 index 0000000000..8a504859dc --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-fieldset-horiz-001.xhtml @@ -0,0 +1,105 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test checks that fieldset elements behave correctly as flex items. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing flexbox layout algorithm property on fieldset flex items in a horizontal 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/#layout-algorithm"/> + <link rel="match" href="flexbox-basic-fieldset-horiz-001-ref.xhtml"/> + <style> + div.flexbox { + width: 200px; + background: lightgreen; + display: flex; + justify-content: space-between; + margin-bottom: 5px; + line-height: 8px; + } + fieldset { + min-width: 0; + width: 10px; + height: 20px; + border: 1px dotted green; + margin: 0; + padding: 0; + } + </style> + </head> + <body> + + <!-- A) One flex item --> + <div class="flexbox"> + <fieldset/> + </div> + + <!-- B) Text and a fieldset (ensure they aren't merged into one flex item) + --> + <div class="flexbox"> + some words <fieldset/> + </div> + + <!-- C) Two fieldset elements, getting stretched by different ratios, + from 0. + + Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) + = 196px + + 1st element gets 5/8 of space: 5/8 * 196px = 122.5px + 1st element gets 3/8 of space: 3/8 * 196px = 73.5px + --> + <div class="flexbox"> + <fieldset style="flex: 5"/> + <fieldset style="flex: 3"/> + </div> + + <!-- D) Two fieldset elements, getting stretched by different ratios, from + different flex bases. + + Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px + 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px + 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px + --> + <div class="flexbox"> + <fieldset style="width: 33px; flex: 2 auto"/> + <fieldset style="width: 13px; flex: 3 auto"/> + </div> + + <!-- E) Two flex items, getting shrunk by different amounts. + + Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px + First element scaled flex ratio = 4 * 150 = 600 + Second element scaled flex ratio = 3 * 100 = 300 + * So, total flexibility is 600 + 300 = 900 + + 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px + 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px + --> + <div class="flexbox"> + <fieldset style="width: 150px; flex: 1 4 auto"/> + <fieldset style="width: 100px; flex: 1 3 auto"/> + </div> + + <!-- F) Making sure we don't grow past max-width --> + <!-- Same as (D), except we've added a max-width on the second element. + --> + <div class="flexbox"> + <fieldset style="width: 33px; flex: 2 auto"/> + <fieldset style="width: 13px; max-width: 90px; flex: 3 auto"/> + </div> + + <!-- G) Making sure we grow at least as large as min-width --> + <!-- Same as (C), except we've added a min-width on the second element. + --> + <div class="flexbox"> + <fieldset style="width: 33px; flex: 2 auto"/> + <fieldset style="width: 13px; min-width: 150px; flex: 3 auto"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-basic-fieldset-vert-001-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-fieldset-vert-001-ref.xhtml new file mode 100644 index 0000000000..41b1930197 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-fieldset-vert-001-ref.xhtml @@ -0,0 +1,66 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + height: 200px; + width: 22px; + float: left; + margin-right: 10px; + background: lightgreen; + line-height: 0; + } + fieldset { + width: 20px; + height: 10px; + border: 1px dotted green; + margin: 0; + padding: 0; + } + </style> + </head> + <body> + <div class="flexbox"> + <fieldset/> + </div> + + <div class="flexbox"> + <div style="font: 8px monospace; height: 188px"> + a b + </div> + <fieldset/> + </div> + + <div class="flexbox"> + <fieldset style="height: 122.5px" + /><fieldset style="height: 73.5px"/> + </div> + + <div class="flexbox"> + <fieldset style="height: 93px" + /><fieldset style="height: 103px"/> + </div> + + <div class="flexbox"> + <fieldset style="height: 114px" + /><fieldset style="height: 82px"/> + </div> + + <div class="flexbox"> + <fieldset style="height: 106px" + /><fieldset style="height: 90px"/> + </div> + + <div class="flexbox"> + <fieldset style="height: 46px" + /><fieldset style="height: 150px"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-basic-fieldset-vert-001.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-fieldset-vert-001.xhtml new file mode 100644 index 0000000000..75d592f4cb --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-fieldset-vert-001.xhtml @@ -0,0 +1,107 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test checks that fieldset elements behave correctly as flex items. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing flexbox layout algorithm property on fieldset flex items in a vertical 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/#layout-algorithm"/> + <link rel="match" href="flexbox-basic-fieldset-vert-001-ref.xhtml"/> + <style> + div.flexbox { + height: 200px; + background: lightgreen; + display: flex; + justify-content: space-between; + flex-direction: column; + float: left; + margin-right: 10px; + font: 8px monospace; + } + fieldset { + width: 20px; + height: 10px; + min-height: 0; + border: 1px dotted green; + margin: 0; + padding: 0; + } + </style> + </head> + <body> + + <!-- A) One flex item --> + <div class="flexbox"> + <fieldset/> + </div> + + <!-- B) Text and a fieldset (ensure they aren't merged into one flex item) + --> + <div class="flexbox"> + a b <fieldset/> + </div> + + <!-- C) Two fieldset elements, getting stretched by different ratios, + from 0. + + Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) + = 196px + + 1st element gets 5/8 of space: 5/8 * 196px = 122.5px + 1st element gets 3/8 of space: 3/8 * 196px = 73.5px + --> + <div class="flexbox"> + <fieldset style="flex: 5"/> + <fieldset style="flex: 3"/> + </div> + + <!-- D) Two fieldset elements, getting stretched by different ratios, from + different flex bases. + + Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px + 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px + 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px + --> + <div class="flexbox"> + <fieldset style="height: 33px; flex: 2 auto"/> + <fieldset style="height: 13px; flex: 3 auto"/> + </div> + + <!-- E) Two flex items, getting shrunk by different amounts. + + Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px + First element scaled flex ratio = 4 * 150 = 600 + Second element scaled flex ratio = 3 * 100 = 300 + * So, total flexibility is 600 + 300 = 900 + + 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px + 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px + --> + <div class="flexbox"> + <fieldset style="height: 150px; flex: 1 4 auto"/> + <fieldset style="height: 100px; flex: 1 3 auto"/> + </div> + + <!-- F) Making sure we don't grow past max-height --> + <!-- Same as (D), except we've added a max-height on the second element. + --> + <div class="flexbox"> + <fieldset style="height: 33px; flex: 2 auto"/> + <fieldset style="height: 13px; max-height: 90px; flex: 3 auto"/> + </div> + + <!-- G) Making sure we grow at least as large as min-height --> + <!-- Same as (C), except we've added a min-height on the second element. + --> + <div class="flexbox"> + <fieldset style="height: 33px; flex: 2 auto"/> + <fieldset style="height: 13px; min-height: 150px; flex: 3 auto"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-basic-iframe-horiz-001-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-iframe-horiz-001-ref.xhtml new file mode 100644 index 0000000000..bee1ae0bf3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-iframe-horiz-001-ref.xhtml @@ -0,0 +1,60 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + width: 200px; + background: lightgreen; + margin-bottom: 5px; + line-height: 8px; + } + iframe { + width: 10px; + height: 20px; + border: 1px dotted green; + } + </style> + </head> + <body> + <div class="flexbox"> + <iframe/> + </div> + + <div class="flexbox" style="height: 22px"> + some words + <iframe style="float:right"/> + </div> + + <div class="flexbox"> + <iframe style="width: 122.5px" + /><iframe style="width: 73.5px"/> + </div> + + <div class="flexbox"> + <iframe style="width: 93px" + /><iframe style="width: 103px"/> + </div> + + <div class="flexbox"> + <iframe style="width: 114px" + /><iframe style="width: 82px"/> + </div> + + <div class="flexbox"> + <iframe style="width: 106px" + /><iframe style="width: 90px"/> + </div> + + <div class="flexbox"> + <iframe style="width: 46px" + /><iframe style="width: 150px"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-basic-iframe-horiz-001.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-iframe-horiz-001.xhtml new file mode 100644 index 0000000000..323b065199 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-iframe-horiz-001.xhtml @@ -0,0 +1,102 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test checks that iframe elements behave correctly as flex items. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing flexbox layout algorithm property on iframe flex items in a horizontal 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/#layout-algorithm"/> + <link rel="match" href="flexbox-basic-iframe-horiz-001-ref.xhtml"/> + <style> + div.flexbox { + width: 200px; + background: lightgreen; + display: flex; + justify-content: space-between; + margin-bottom: 5px; + line-height: 8px; + } + iframe { + min-width: 0; + width: 10px; + height: 20px; + border: 1px dotted green; + } + </style> + </head> + <body> + + <!-- A) One flex item --> + <div class="flexbox"> + <iframe/> + </div> + + <!-- B) Text and an iframe (ensure they aren't merged into one flex item) + --> + <div class="flexbox"> + some words <iframe/> + </div> + + <!-- C) Two iframe elements, getting stretched by different ratios, from 0. + + Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) + = 196px + + 1st element gets 5/8 of space: 5/8 * 196px = 122.5px + 1st element gets 3/8 of space: 3/8 * 196px = 73.5px + --> + <div class="flexbox"> + <iframe style="flex: 5"/> + <iframe style="flex: 3"/> + </div> + + <!-- D) Two iframe elements, getting stretched by different ratios, from + different flex bases. + + Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px + 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px + 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px + --> + <div class="flexbox"> + <iframe style="width: 33px; flex: 2 auto"/> + <iframe style="width: 13px; flex: 3 auto"/> + </div> + + <!-- E) Two flex items, getting shrunk by different amounts. + + Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px + First element scaled flex ratio = 4 * 150 = 600 + Second element scaled flex ratio = 3 * 100 = 300 + * So, total flexibility is 600 + 300 = 900 + + 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px + 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px + --> + <div class="flexbox"> + <iframe style="width: 150px; flex: 1 4 auto"/> + <iframe style="width: 100px; flex: 1 3 auto"/> + </div> + + <!-- F) Making sure we don't grow past max-width --> + <!-- Same as (D), except we've added a max-width on the second element. + --> + <div class="flexbox"> + <iframe style="width: 33px; flex: 2 auto"/> + <iframe style="width: 13px; max-width: 90px; flex: 3 auto"/> + </div> + + <!-- G) Making sure we grow at least as large as min-width --> + <!-- Same as (C), except we've added a min-width on the second element. + --> + <div class="flexbox"> + <iframe style="width: 33px; flex: 2 auto"/> + <iframe style="width: 13px; min-width: 150px; flex: 3 auto"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-basic-iframe-vert-001-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-iframe-vert-001-ref.xhtml new file mode 100644 index 0000000000..e79864f461 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-iframe-vert-001-ref.xhtml @@ -0,0 +1,64 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + height: 200px; + width: 22px; + float: left; + margin-right: 10px; + background: lightgreen; + line-height: 0; + } + iframe { + width: 20px; + height: 10px; + border: 1px dotted green; + } + </style> + </head> + <body> + <div class="flexbox"> + <iframe/> + </div> + + <div class="flexbox"> + <div style="font: 8px monospace; height: 188px"> + a b + </div> + <iframe/> + </div> + + <div class="flexbox"> + <iframe style="height: 108.8px" + /><iframe style="height: 87.1px"/> + </div> + + <div class="flexbox"> + <iframe style="height: 93px" + /><iframe style="height: 103px"/> + </div> + + <div class="flexbox"> + <iframe style="height: 114px" + /><iframe style="height: 82px"/> + </div> + + <div class="flexbox"> + <iframe style="height: 106px" + /><iframe style="height: 90px"/> + </div> + + <div class="flexbox"> + <iframe style="height: 46px" + /><iframe style="height: 150px"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-basic-iframe-vert-001.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-iframe-vert-001.xhtml new file mode 100644 index 0000000000..08ea016d7b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-iframe-vert-001.xhtml @@ -0,0 +1,104 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test checks that iframe elements behave correctly as flex items. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing flexbox layout algorithm property on iframe flex items in a vertical 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/#layout-algorithm"/> + <link rel="match" href="flexbox-basic-iframe-vert-001-ref.xhtml"/> + <style> + div.flexbox { + height: 200px; + background: lightgreen; + display: flex; + justify-content: space-between; + flex-direction: column; + float: left; + margin-right: 10px; + font: 8px monospace; + } + iframe { + width: 20px; + height: 10px; + min-height: 0; + border: 1px dotted green; + } + </style> + </head> + <body> + + <!-- A) One flex item --> + <div class="flexbox"> + <iframe/> + </div> + + <!-- B) Text and an iframe (ensure they aren't merged into one flex item) + --> + <div class="flexbox"> + a b <iframe/> + </div> + + <!-- C) Two iframe elements, getting stretched by different ratios, from 0. + + Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) + = 196px + + 1st element gets 5/9 of space: 5/9 * 196px = 108.8px + 1st element gets 4/9 of space: 4/9 * 196px = 87.1px + --> + <div class="flexbox"> + <iframe style="flex: 5"/> + <iframe style="flex: 4"/> + </div> + + <!-- D) Two iframe elements, getting stretched by different ratios, from + different flex bases. + + Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px + 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px + 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px + --> + <div class="flexbox"> + <iframe style="height: 33px; flex: 2 auto"/> + <iframe style="height: 13px; flex: 3 auto"/> + </div> + + <!-- E) Two flex items, getting shrunk by different amounts. + + Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px + First element scaled flex ratio = 4 * 150 = 600 + Second element scaled flex ratio = 3 * 100 = 300 + * So, total flexibility is 600 + 300 = 900 + + 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px + 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px + --> + <div class="flexbox"> + <iframe style="height: 150px; flex: 1 4 auto"/> + <iframe style="height: 100px; flex: 1 3 auto"/> + </div> + + <!-- F) Making sure we don't grow past max-height --> + <!-- Same as (D), except we've added a max-height on the second element. + --> + <div class="flexbox"> + <iframe style="height: 33px; flex: 2 auto"/> + <iframe style="height: 13px; max-height: 90px; flex: 3 auto"/> + </div> + + <!-- G) Making sure we grow at least as large as min-height --> + <!-- Same as (C), except we've added a min-height on the second element. + --> + <div class="flexbox"> + <iframe style="height: 33px; flex: 2 auto"/> + <iframe style="height: 13px; min-height: 150px; flex: 3 auto"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-basic-img-horiz-001-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-img-horiz-001-ref.xhtml new file mode 100644 index 0000000000..a6cd543124 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-img-horiz-001-ref.xhtml @@ -0,0 +1,60 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + width: 200px; + background: lightgreen; + margin-bottom: 5px; + line-height: 8px; + } + img { + width: 10px; + height: 20px; + border: 1px dotted green; + } + </style> + </head> + <body> + <div class="flexbox"> + <img src="support/solidblue.png"/> + </div> + + <div class="flexbox" style="height: 22px"> + some words + <img src="support/solidblue.png" style="float:right"/> + </div> + + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 122.5px" + /><img src="support/solidblue.png" style="width: 73.5px"/> + </div> + + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 93px" + /><img src="support/solidblue.png" style="width: 103px"/> + </div> + + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 114px" + /><img src="support/solidblue.png" style="width: 82px"/> + </div> + + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 106px" + /><img src="support/solidblue.png" style="width: 90px"/> + </div> + + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 46px" + /><img src="support/solidblue.png" style="width: 150px"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-basic-img-horiz-001.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-img-horiz-001.xhtml new file mode 100644 index 0000000000..b5f3a6fce6 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-img-horiz-001.xhtml @@ -0,0 +1,103 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test checks that img elements behave correctly as flex items. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing flexbox layout algorithm property on img flex items in a horizontal 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/#layout-algorithm"/> + <link rel="match" href="flexbox-basic-img-horiz-001-ref.xhtml"/> + <style> + div.flexbox { + width: 200px; + background: lightgreen; + display: flex; + justify-content: space-between; + margin-bottom: 5px; + line-height: 8px; + } + img { + min-width: 0; + width: 10px; + height: 20px; + border: 1px dotted green; + } + </style> + </head> + <body> + + <!-- A) One flex item --> + <div class="flexbox"> + <img src="support/solidblue.png"/> + </div> + + <!-- B) Text and an img (ensure they aren't merged into one flex item) --> + <div class="flexbox"> + some words <img src="support/solidblue.png"/> + </div> + + <!-- C) Two img elements, getting stretched by different ratios, from 0. + + Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) + = 196px + + 1st element gets 5/8 of space: 5/8 * 196px = 122.5px + 1st element gets 3/8 of space: 3/8 * 196px = 73.5px + --> + <div class="flexbox"> + <img src="support/solidblue.png" style="flex: 5"/> + <img src="support/solidblue.png" style="flex: 3"/> + </div> + + <!-- D) Two img elements, getting stretched by different ratios, from + different flex bases. + + Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px + 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px + 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px + --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 33px; flex: 2 auto"/> + <img src="support/solidblue.png" style="width: 13px; flex: 3 auto"/> + </div> + + <!-- E) Two flex items, getting shrunk by different amounts. + + Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px + First element scaled flex ratio = 4 * 150 = 600 + Second element scaled flex ratio = 3 * 100 = 300 + * So, total flexibility is 600 + 300 = 900 + + 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px + 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px + --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 150px; flex: 1 4 auto"/> + <img src="support/solidblue.png" style="width: 100px; flex: 1 3 auto"/> + </div> + + <!-- F) Making sure we don't grow past max-width --> + <!-- Same as (D), except we've added a max-width on the second element. + --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 33px; flex: 2 auto"/> + <img src="support/solidblue.png" + style="width: 13px; max-width: 90px; flex: 3 auto"/> + </div> + + <!-- G) Making sure we grow at least as large as min-width --> + <!-- Same as (C), except we've added a min-width on the second element. + --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 33px; flex: 2 auto"/> + <img src="support/solidblue.png" + style="width: 13px; min-width: 150px; flex: 3 auto"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-basic-img-vert-001-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-img-vert-001-ref.xhtml new file mode 100644 index 0000000000..93d96d4209 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-img-vert-001-ref.xhtml @@ -0,0 +1,64 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + height: 200px; + width: 22px; + float: left; + margin-right: 10px; + background: lightgreen; + line-height: 0; + } + img { + width: 20px; + height: 10px; + border: 1px dotted green; + } + </style> + </head> + <body> + <div class="flexbox"> + <img src="support/solidblue.png"/> + </div> + + <div class="flexbox"> + <div style="font: 8px monospace; height: 188px"> + a b + </div> + <img src="support/solidblue.png"/> + </div> + + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 108.8px" + /><img src="support/solidblue.png" style="height: 87.1px"/> + </div> + + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 93px" + /><img src="support/solidblue.png" style="height: 103px"/> + </div> + + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 114px" + /><img src="support/solidblue.png" style="height: 82px"/> + </div> + + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 106px" + /><img src="support/solidblue.png" style="height: 90px"/> + </div> + + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 46px" + /><img src="support/solidblue.png" style="height: 150px"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-basic-img-vert-001.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-img-vert-001.xhtml new file mode 100644 index 0000000000..e5513137dc --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-img-vert-001.xhtml @@ -0,0 +1,105 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test checks that img elements behave correctly as flex items. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing flexbox layout algorithm property on img flex items in a vertical 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/#layout-algorithm"/> + <link rel="match" href="flexbox-basic-img-vert-001-ref.xhtml"/> + <style> + div.flexbox { + height: 200px; + background: lightgreen; + display: flex; + justify-content: space-between; + flex-direction: column; + float: left; + margin-right: 10px; + font: 8px monospace; + } + img { + width: 20px; + height: 10px; + min-height: 0; + border: 1px dotted green; + } + </style> + </head> + <body> + + <!-- A) One flex item --> + <div class="flexbox"> + <img src="support/solidblue.png"/> + </div> + + <!-- B) Text and an img (ensure they aren't merged into one flex item) --> + <div class="flexbox"> + a b <img src="support/solidblue.png"/> + </div> + + <!-- C) Two img elements, getting stretched by different ratios, from 0. + + Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) + = 196px + + 1st element gets 5/9 of space: 5/9 * 196px = 108.8px + 1st element gets 4/9 of space: 4/9 * 196px = 87.1px + --> + <div class="flexbox"> + <img src="support/solidblue.png" style="flex: 5"/> + <img src="support/solidblue.png" style="flex: 4"/> + </div> + + <!-- D) Two img elements, getting stretched by different ratios, from + different flex bases. + + Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px + 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px + 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px + --> + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 33px; flex: 2 auto"/> + <img src="support/solidblue.png" style="height: 13px; flex: 3 auto"/> + </div> + + <!-- E) Two flex items, getting shrunk by different amounts. + + Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px + First element scaled flex ratio = 4 * 150 = 600 + Second element scaled flex ratio = 3 * 100 = 300 + * So, total flexibility is 600 + 300 = 900 + + 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px + 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px + --> + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 150px; flex: 1 4 auto"/> + <img src="support/solidblue.png" style="height: 100px; flex: 1 3 auto"/> + </div> + + <!-- F) Making sure we don't grow past max-height --> + <!-- Same as (D), except we've added a max-height on the second element. + --> + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 33px; flex: 2 auto"/> + <img src="support/solidblue.png" + style="height: 13px; max-height: 90px; flex: 3 auto"/> + </div> + + <!-- G) Making sure we grow at least as large as min-height --> + <!-- Same as (C), except we've added a min-height on the second element. + --> + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 33px; flex: 2 auto"/> + <img src="support/solidblue.png" + style="height: 13px; min-height: 150px; flex: 3 auto"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-basic-textarea-horiz-001-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-textarea-horiz-001-ref.xhtml new file mode 100644 index 0000000000..7ea5a05d8c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-textarea-horiz-001-ref.xhtml @@ -0,0 +1,65 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + width: 200px; + background: lightgreen; + margin-bottom: 5px; + line-height: 8px; + } + textarea { + width: 10px; + height: 20px; + background: white; + border-radius: 0; + border: 1px dotted green; + padding: 0; + margin: 0; + } + </style> + </head> + <body> + <div class="flexbox"> + <textarea/> + </div> + + <div class="flexbox" + style="height: 22px"><!-- height of textarea's border-box --> + some words + <textarea style="float:right"/> + </div> + + <div class="flexbox"> + <textarea style="width: 122.5px" + /><textarea style="width: 73.5px"/> + </div> + + <div class="flexbox"> + <textarea style="width: 93px" + /><textarea style="width: 103px"/> + </div> + + <div class="flexbox"> + <textarea style="width: 114px" + /><textarea style="width: 82px"/> + </div> + + <div class="flexbox"> + <textarea style="width: 106px" + /><textarea style="width: 90px"/> + </div> + + <div class="flexbox"> + <textarea style="width: 46px" + /><textarea style="width: 150px"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-basic-textarea-horiz-001.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-textarea-horiz-001.xhtml new file mode 100644 index 0000000000..7906d242af --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-textarea-horiz-001.xhtml @@ -0,0 +1,109 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test checks that textarea elements behave correctly as flex items. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing flexbox layout algorithm property on textarea flex items in a horizontal 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/#layout-algorithm"/> + <link rel="match" href="flexbox-basic-textarea-horiz-001-ref.xhtml"/> + <style> + div.flexbox { + width: 200px; + background: lightgreen; + display: flex; + justify-content: space-between; + margin-bottom: 5px; + line-height: 8px; + } + textarea { + min-width: 0; + width: 10px; + height: 20px; + background: white; + border-radius: 0; + border: 1px dotted green; + padding: 0; + margin: 0; + } + </style> + </head> + <body> + + <!-- A) One flex item --> + <div class="flexbox"> + <textarea/> + </div> + + <!-- B) Text and a textarea (ensure they aren't merged into one flex item) + --> + <div class="flexbox"> + some words <textarea/> + </div> + + <!-- C) Two textarea elements, getting stretched by different ratios, + from 0. + + Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) + = 196px + + 1st element gets 5/8 of space: 5/8 * 196px = 122.5px + 1st element gets 3/8 of space: 3/8 * 196px = 73.5px + --> + <div class="flexbox"> + <textarea style="flex: 5"/> + <textarea style="flex: 3"/> + </div> + + <!-- D) Two textarea elements, getting stretched by different ratios, from + different flex bases. + + Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px + 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px + 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px + --> + <div class="flexbox"> + <textarea style="width: 33px; flex: 2 auto"/> + <textarea style="width: 13px; flex: 3 auto"/> + </div> + + <!-- E) Two flex items, getting shrunk by different amounts. + + Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px + First element scaled flex ratio = 4 * 150 = 600 + Second element scaled flex ratio = 3 * 100 = 300 + * So, total flexibility is 600 + 300 = 900 + + 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px + 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px + --> + <div class="flexbox"> + <textarea style="width: 150px; flex: 1 4 auto"/> + <textarea style="width: 100px; flex: 1 3 auto"/> + </div> + + <!-- F) Making sure we don't grow past max-width --> + <!-- Same as (D), except we've added a max-width on the second element. + --> + <div class="flexbox"> + <textarea style="width: 33px; flex: 2 auto"/> + <textarea + style="width: 13px; max-width: 90px; flex: 3 auto"/> + </div> + + <!-- G) Making sure we grow at least as large as min-width --> + <!-- Same as (C), except we've added a min-width on the second element. + --> + <div class="flexbox"> + <textarea style="width: 33px; flex: 2 auto"/> + <textarea + style="width: 13px; min-width: 150px; flex: 3 auto"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-basic-textarea-vert-001-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-textarea-vert-001-ref.xhtml new file mode 100644 index 0000000000..5691ab3197 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-textarea-vert-001-ref.xhtml @@ -0,0 +1,68 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + height: 200px; + width: 22px; + float: left; + margin-right: 10px; + background: lightgreen; + line-height: 0; + } + textarea { + width: 20px; + height: 10px; + background: white; + border-radius: 0; + border: 1px dotted green; + margin: 0; + padding: 0; + } + </style> + </head> + <body> + <div class="flexbox"> + <textarea/> + </div> + + <div class="flexbox"> + <div style="font: 8px monospace; height: 188px"> + a b + </div> + <textarea/> + </div> + + <div class="flexbox"> + <textarea style="height: 108.8px" + /><textarea style="height: 87.1px"/> + </div> + + <div class="flexbox"> + <textarea style="height: 93px" + /><textarea style="height: 103px"/> + </div> + + <div class="flexbox"> + <textarea style="height: 114px" + /><textarea style="height: 82px"/> + </div> + + <div class="flexbox"> + <textarea style="height: 106px" + /><textarea style="height: 90px"/> + </div> + + <div class="flexbox"> + <textarea style="height: 46px" + /><textarea style="height: 150px"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-basic-textarea-vert-001.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-textarea-vert-001.xhtml new file mode 100644 index 0000000000..ac092edf8b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-textarea-vert-001.xhtml @@ -0,0 +1,111 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test checks that textarea elements behave correctly as flex items. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing flexbox layout algorithm property on textarea flex items in a vertical 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/#layout-algorithm"/> + <link rel="match" href="flexbox-basic-textarea-vert-001-ref.xhtml"/> + <style> + div.flexbox { + height: 200px; + background: lightgreen; + display: flex; + justify-content: space-between; + flex-direction: column; + float: left; + margin-right: 10px; + font: 8px monospace; + } + textarea { + width: 20px; + height: 10px; + min-height: 0; + background: white; + border-radius: 0; + border: 1px dotted green; + margin: 0; + padding: 0; + } + </style> + </head> + <body> + + <!-- A) One flex item --> + <div class="flexbox"> + <textarea/> + </div> + + <!-- B) Text and a textarea (ensure they aren't merged into one flex item) + --> + <div class="flexbox"> + a b <textarea/> + </div> + + <!-- C) Two textarea elements, getting stretched by different ratios, + from 0. + + Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) + = 196px + + 1st element gets 5/9 of space: 5/9 * 196px = 108.8px + 1st element gets 4/9 of space: 4/9 * 196px = 87.1px + --> + <div class="flexbox"> + <textarea style="flex: 5"/> + <textarea style="flex: 4"/> + </div> + + <!-- D) Two textarea elements, getting stretched by different ratios, from + different flex bases. + + Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px + 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px + 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px + --> + <div class="flexbox"> + <textarea style="height: 33px; flex: 2 auto"/> + <textarea style="height: 13px; flex: 3 auto"/> + </div> + + <!-- E) Two flex items, getting shrunk by different amounts. + + Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px + First element scaled flex ratio = 4 * 150 = 600 + Second element scaled flex ratio = 3 * 100 = 300 + * So, total flexibility is 600 + 300 = 900 + + 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px + 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px + --> + <div class="flexbox"> + <textarea style="height: 150px; flex: 1 4 auto"/> + <textarea style="height: 100px; flex: 1 3 auto"/> + </div> + + <!-- F) Making sure we don't grow past max-height --> + <!-- Same as (D), except we've added a max-height on the second element. + --> + <div class="flexbox"> + <textarea style="height: 33px; flex: 2 auto"/> + <textarea + style="height: 13px; max-height: 90px; flex: 3 auto"/> + </div> + + <!-- G) Making sure we grow at least as large as min-height --> + <!-- Same as (C), except we've added a min-height on the second element. + --> + <div class="flexbox"> + <textarea style="height: 33px; flex: 2 auto"/> + <textarea + style="height: 13px; min-height: 150px; flex: 3 auto"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-basic-video-horiz-001-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-video-horiz-001-ref.xhtml new file mode 100644 index 0000000000..e37920f17c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-video-horiz-001-ref.xhtml @@ -0,0 +1,60 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + width: 200px; + background: lightgreen; + margin-bottom: 5px; + line-height: 8px; + } + video { + width: 10px; + height: 20px; + border: 1px dotted green; + } + </style> + </head> + <body> + <div class="flexbox"> + <video/> + </div> + + <div class="flexbox" style="height: 22px"> + some words + <video style="float:right"/> + </div> + + <div class="flexbox"> + <video style="width: 122.5px" + /><video style="width: 73.5px"/> + </div> + + <div class="flexbox"> + <video style="width: 93px" + /><video style="width: 103px"/> + </div> + + <div class="flexbox"> + <video style="width: 114px" + /><video style="width: 82px"/> + </div> + + <div class="flexbox"> + <video style="width: 106px" + /><video style="width: 90px"/> + </div> + + <div class="flexbox"> + <video style="width: 46px" + /><video style="width: 150px"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-basic-video-horiz-001.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-video-horiz-001.xhtml new file mode 100644 index 0000000000..c976ccffbd --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-video-horiz-001.xhtml @@ -0,0 +1,101 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test checks that video elements behave correctly as flex items. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing flexbox layout algorithm property on video flex items in a horizontal 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/#layout-algorithm"/> + <link rel="match" href="flexbox-basic-video-horiz-001-ref.xhtml"/> + <style> + div.flexbox { + width: 200px; + background: lightgreen; + display: flex; + justify-content: space-between; + margin-bottom: 5px; + line-height: 8px; + } + video { + min-width: 0; + width: 10px; + height: 20px; + border: 1px dotted green; + } + </style> + </head> + <body> + + <!-- A) One flex item --> + <div class="flexbox"> + <video/> + </div> + + <!-- B) Text and a video (ensure they aren't merged into one flex item) --> + <div class="flexbox"> + some words <video/> + </div> + + <!-- C) Two video elements, getting stretched by different ratios, from 0. + + Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) + = 196px + + 1st element gets 5/8 of space: 5/8 * 196px = 122.5px + 1st element gets 3/8 of space: 3/8 * 196px = 73.5px + --> + <div class="flexbox"> + <video style="flex: 5"/> + <video style="flex: 3"/> + </div> + + <!-- D) Two video elements, getting stretched by different ratios, from + different flex bases. + + Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px + 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px + 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px + --> + <div class="flexbox"> + <video style="width: 33px; flex: 2 auto"/> + <video style="width: 13px; flex: 3 auto"/> + </div> + + <!-- E) Two flex items, getting shrunk by different amounts. + + Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px + First element scaled flex ratio = 4 * 150 = 600 + Second element scaled flex ratio = 3 * 100 = 300 + * So, total flexibility is 600 + 300 = 900 + + 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px + 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px + --> + <div class="flexbox"> + <video style="width: 150px; flex: 1 4 auto"/> + <video style="width: 100px; flex: 1 3 auto"/> + </div> + + <!-- F) Making sure we don't grow past max-width --> + <!-- Same as (D), except we've added a max-width on the second element. + --> + <div class="flexbox"> + <video style="width: 33px; flex: 2 auto"/> + <video style="width: 13px; max-width: 90px; flex: 3 auto"/> + </div> + + <!-- G) Making sure we grow at least as large as min-width --> + <!-- Same as (C), except we've added a min-width on the second element. + --> + <div class="flexbox"> + <video style="width: 33px; flex: 2 auto"/> + <video style="width: 13px; min-width: 150px; flex: 3 auto"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-basic-video-vert-001-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-video-vert-001-ref.xhtml new file mode 100644 index 0000000000..350f3f4807 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-video-vert-001-ref.xhtml @@ -0,0 +1,64 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + height: 200px; + width: 22px; + float: left; + margin-right: 10px; + background: lightgreen; + line-height: 0; + } + video { + width: 20px; + height: 10px; + border: 1px dotted green; + } + </style> + </head> + <body> + <div class="flexbox"> + <video/> + </div> + + <div class="flexbox"> + <div style="font: 8px monospace; height: 188px"> + a b + </div> + <video/> + </div> + + <div class="flexbox"> + <video style="height: 108.8px" + /><video style="height: 87.1px"/> + </div> + + <div class="flexbox"> + <video style="height: 93px" + /><video style="height: 103px"/> + </div> + + <div class="flexbox"> + <video style="height: 114px" + /><video style="height: 82px"/> + </div> + + <div class="flexbox"> + <video style="height: 106px" + /><video style="height: 90px"/> + </div> + + <div class="flexbox"> + <video style="height: 46px" + /><video style="height: 150px"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-basic-video-vert-001.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-video-vert-001.xhtml new file mode 100644 index 0000000000..7e4133269d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-basic-video-vert-001.xhtml @@ -0,0 +1,103 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test checks that video elements behave correctly as flex items. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing flexbox layout algorithm property on video flex items in a vertical 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/#layout-algorithm"/> + <link rel="match" href="flexbox-basic-video-vert-001-ref.xhtml"/> + <style> + div.flexbox { + height: 200px; + background: lightgreen; + display: flex; + justify-content: space-between; + flex-direction: column; + float: left; + margin-right: 10px; + font: 8px monospace; + } + video { + width: 20px; + height: 10px; + min-height: 0; + border: 1px dotted green; + } + </style> + </head> + <body> + + <!-- A) One flex item --> + <div class="flexbox"> + <video/> + </div> + + <!-- B) Text and a video (ensure they aren't merged into one flex item) --> + <div class="flexbox"> + a b <video/> + </div> + + <!-- C) Two video elements, getting stretched by different ratios, from 0. + + Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) + = 196px + + 1st element gets 5/9 of space: 5/9 * 196px = 108.8px + 1st element gets 4/9 of space: 4/9 * 196px = 87.1px + --> + <div class="flexbox"> + <video style="flex: 5"/> + <video style="flex: 4"/> + </div> + + <!-- D) Two video elements, getting stretched by different ratios, from + different flex bases. + + Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px + 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px + 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px + --> + <div class="flexbox"> + <video style="height: 33px; flex: 2 auto"/> + <video style="height: 13px; flex: 3 auto"/> + </div> + + <!-- E) Two flex items, getting shrunk by different amounts. + + Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px + First element scaled flex ratio = 4 * 150 = 600 + Second element scaled flex ratio = 3 * 100 = 300 + * So, total flexibility is 600 + 300 = 900 + + 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px + 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px + --> + <div class="flexbox"> + <video style="height: 150px; flex: 1 4 auto"/> + <video style="height: 100px; flex: 1 3 auto"/> + </div> + + <!-- F) Making sure we don't grow past max-height --> + <!-- Same as (D), except we've added a max-height on the second element. + --> + <div class="flexbox"> + <video style="height: 33px; flex: 2 auto"/> + <video style="height: 13px; max-height: 90px; flex: 3 auto"/> + </div> + + <!-- G) Making sure we grow at least as large as min-height --> + <!-- Same as (C), except we've added a min-height on the second element. + --> + <div class="flexbox"> + <video style="height: 33px; flex: 2 auto"/> + <video style="height: 13px; min-height: 150px; flex: 3 auto"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-break-request-horiz-001-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-break-request-horiz-001-ref.html new file mode 100644 index 0000000000..da5469d372 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-break-request-horiz-001-ref.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + div.flexbox { + border: 1px dashed black; + width: 60px; + height: 20px; + margin: 2px; + float: left; + } + div.item { + width: 28px; + border: 1px solid blue; + background: lightblue; + } + div.fullCrossSize { + height: 18px; + } + div.halfCrossSize { + height: 8px; + } + </style> +</head> +<body> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div style="clear: both"></div> + + <div class="flexbox"> + <div class="item fullCrossSize" style="float: left"></div> + <div class="item fullCrossSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize" style="float: left"></div> + <div class="item fullCrossSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize" style="float: left"></div> + <div class="item fullCrossSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize" style="float: left"></div> + <div class="item fullCrossSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize" style="float: left"></div> + <div class="item fullCrossSize" style="float: left"></div> + </div> + <div style="clear: both"></div> + + <div class="flexbox"> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-break-request-horiz-001a.html b/testing/web-platform/tests/css/css-flexbox/flexbox-break-request-horiz-001a.html new file mode 100644 index 0000000000..583f461bc2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-break-request-horiz-001a.html @@ -0,0 +1,108 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing page-break-before in horizontal multi-line flex containers</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#change-201409-algo-breaks"> + <link rel="match" href="flexbox-break-request-horiz-001-ref.html"> + <meta charset="utf-8"> + <style> + div.flexbox { + display: flex; + flex-wrap: wrap; + border: 1px dashed black; + width: 60px; + height: 20px; + margin: 2px; + float: left; + } + div.item { + width: 28px; + border: 1px solid blue; + background: lightblue; + } + </style> +</head> +<body> + <!-- page-break-before specified on first (and only) item, at a point where + we're already "breaking" (the beginning): --> + <!-- * With 'page-break-before: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-before: auto"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-before: avoid"></div> + </div> + <!-- * With 'page-break-before: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-before: always"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-before: left"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-before: right"></div> + </div> + <div style="clear: both"></div> + + <!-- page-break-before specified on second item, at a point where breaking + would otherwise be unnecessary: --> + <!-- * With 'page-break-before: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: auto"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: avoid"></div> + </div> + <!-- * With 'page-break-before: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: always"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: left"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: right"></div> + </div> + <div style="clear: both"></div> + + <!-- page-break-before specified on third item, at a point where breaking + is already necessary: --> + <!-- * With 'page-break-before: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: auto"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: avoid"></div> + </div> + <!-- * With 'page-break-before: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: always"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: left"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: right"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-break-request-horiz-001b.html b/testing/web-platform/tests/css/css-flexbox/flexbox-break-request-horiz-001b.html new file mode 100644 index 0000000000..545c8c4c6d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-break-request-horiz-001b.html @@ -0,0 +1,108 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing page-break-after in horizontal multi-line flex containers</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#change-201409-algo-breaks"> + <link rel="match" href="flexbox-break-request-horiz-001-ref.html"> + <meta charset="utf-8"> + <style> + div.flexbox { + display: flex; + flex-wrap: wrap; + border: 1px dashed black; + width: 60px; + height: 20px; + margin: 2px; + float: left; + } + div.item { + width: 28px; + border: 1px solid blue; + background: lightblue; + } + </style> +</head> +<body> + <!-- page-break-after specified on first (and only) item, at a point where + we're already "breaking" (the end): --> + <!-- * With 'page-break-after: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-after: auto"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: avoid"></div> + </div> + <!-- * With 'page-break-after: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-after: always"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: left"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: right"></div> + </div> + <div style="clear: both"></div> + + <!-- page-break-after specified on first item, at a point where breaking + would otherwise be unnecessary: --> + <!-- * With 'page-break-after: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-after: auto"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: avoid"></div> + <div class="item"></div> + </div> + <!-- * With 'page-break-after: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-after: always"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: left"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: right"></div> + <div class="item"></div> + </div> + <div style="clear: both"></div> + + <!-- page-break-after specified on second item, at a point where breaking + is already necessary: --> + <!-- * With 'page-break-after: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: auto"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: avoid"></div> + <div class="item"></div> + </div> + <!-- * With 'page-break-after: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: always"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: left"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: right"></div> + <div class="item"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-break-request-horiz-002-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-break-request-horiz-002-ref.html new file mode 100644 index 0000000000..28943c5085 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-break-request-horiz-002-ref.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + div.flexbox { + border: 1px dashed black; + width: 60px; + height: 20px; + margin: 2px; + float: left; + } + div.item { + width: 28px; + border: 1px solid blue; + background: lightblue; + } + div.fullCrossSize { + height: 18px; + } + div.halfCrossSize { + height: 8px; + } + div.shrunkMainSize { + width: 18px; + } + </style> +</head> +<body> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div style="clear: both"></div> + + <div class="flexbox"> + <div class="item fullCrossSize" style="float: left"></div> + <div class="item fullCrossSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize" style="float: left"></div> + <div class="item fullCrossSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize" style="float: left"></div> + <div class="item fullCrossSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize" style="float: left"></div> + <div class="item fullCrossSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize" style="float: left"></div> + <div class="item fullCrossSize" style="float: left"></div> + </div> + <div style="clear: both"></div> + + <div class="flexbox"> + <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> + <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> + <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> + <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> + <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> + <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> + <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> + <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> + <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> + <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> + <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-break-request-horiz-002a.html b/testing/web-platform/tests/css/css-flexbox/flexbox-break-request-horiz-002a.html new file mode 100644 index 0000000000..3bf1ac438b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-break-request-horiz-002a.html @@ -0,0 +1,107 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing page-break-before in horizontal single-line flex containers (should have no effect)</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-line-break"> + <link rel="match" href="flexbox-break-request-horiz-002-ref.html"> + <meta charset="utf-8"> + <style> + div.flexbox { + display: flex; + border: 1px dashed black; + width: 60px; + height: 20px; + margin: 2px; + float: left; + } + div.item { + width: 28px; + border: 1px solid blue; + background: lightblue; + } + </style> +</head> +<body> + <!-- page-break-before specified on first (and only) item, at a point where + we're already "breaking" (the beginning): --> + <!-- * With 'page-break-before: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-before: auto"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-before: avoid"></div> + </div> + <!-- * With 'page-break-before: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-before: always"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-before: left"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-before: right"></div> + </div> + <div style="clear: both"></div> + + <!-- page-break-before specified on second item, at a point where breaking + would otherwise be unnecessary: --> + <!-- * With 'page-break-before: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: auto"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: avoid"></div> + </div> + <!-- * With 'page-break-before: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: always"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: left"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: right"></div> + </div> + <div style="clear: both"></div> + + <!-- page-break-before specified on third item, at a point where breaking + is already necessary: --> + <!-- * With 'page-break-before: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: auto"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: avoid"></div> + </div> + <!-- * With 'page-break-before: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: always"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: left"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: right"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-break-request-horiz-002b.html b/testing/web-platform/tests/css/css-flexbox/flexbox-break-request-horiz-002b.html new file mode 100644 index 0000000000..3a53dace61 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-break-request-horiz-002b.html @@ -0,0 +1,107 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing page-break-after in horizontal single-line flex containers (should have no effect)</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-line-break"> + <link rel="match" href="flexbox-break-request-horiz-002-ref.html"> + <meta charset="utf-8"> + <style> + div.flexbox { + display: flex; + border: 1px dashed black; + width: 60px; + height: 20px; + margin: 2px; + float: left; + } + div.item { + width: 28px; + border: 1px solid blue; + background: lightblue; + } + </style> +</head> +<body> + <!-- page-break-after specified on first (and only) item, at a point where + we're already "breaking" (the end): --> + <!-- * With 'page-break-after: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-after: auto"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: avoid"></div> + </div> + <!-- * With 'page-break-after: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-after: always"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: left"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: right"></div> + </div> + <div style="clear: both"></div> + + <!-- page-break-after specified on first item, at a point where breaking + would otherwise be unnecessary: --> + <!-- * With 'page-break-after: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-after: auto"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: avoid"></div> + <div class="item"></div> + </div> + <!-- * With 'page-break-after: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-after: always"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: left"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: right"></div> + <div class="item"></div> + </div> + <div style="clear: both"></div> + + <!-- page-break-after specified on second item, at a point where breaking + is already necessary: --> + <!-- * With 'page-break-after: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: auto"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: avoid"></div> + <div class="item"></div> + </div> + <!-- * With 'page-break-after: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: always"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: left"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: right"></div> + <div class="item"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-break-request-vert-001-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-break-request-vert-001-ref.html new file mode 100644 index 0000000000..849fdef228 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-break-request-vert-001-ref.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + div.flexbox { + border: 1px dashed black; + width: 20px; + height: 60px; + margin: 2px; + float: left; + } + div.item { + height: 28px; + border: 1px solid blue; + background: lightblue; + } + div.fullCrossSize { + width: 18px; + } + div.halfCrossSize { + width: 8px; + } + </style> +</head> +<body> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div style="clear: both"></div> + + <div class="flexbox"> + <div class="item fullCrossSize"></div> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + <div class="item fullCrossSize"></div> + </div> + <div style="clear: both"></div> + + <div class="flexbox"> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + </div> + <div class="flexbox"> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + <div class="item halfCrossSize" style="float: left"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-break-request-vert-001a.html b/testing/web-platform/tests/css/css-flexbox/flexbox-break-request-vert-001a.html new file mode 100644 index 0000000000..57fd0d5eb9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-break-request-vert-001a.html @@ -0,0 +1,109 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing page-break-before in vertical multi-line flex containers</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#change-201409-algo-breaks"> + <link rel="match" href="flexbox-break-request-vert-001-ref.html"> + <meta charset="utf-8"> + <style> + div.flexbox { + display: flex; + flex-direction: column; + flex-wrap: wrap; + border: 1px dashed black; + width: 20px; + height: 60px; + margin: 2px; + float: left; + } + div.item { + height: 28px; + border: 1px solid blue; + background: lightblue; + } + </style> +</head> +<body> + <!-- page-break-before specified on first (and only) item, at a point where + we're already "breaking" (the beginning): --> + <!-- * With 'page-break-before: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-before: auto"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-before: avoid"></div> + </div> + <!-- * With 'page-break-before: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-before: always"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-before: left"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-before: right"></div> + </div> + <div style="clear: both"></div> + + <!-- page-break-before specified on second item, at a point where breaking + would otherwise be unnecessary: --> + <!-- * With 'page-break-before: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: auto"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: avoid"></div> + </div> + <!-- * With 'page-break-before: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: always"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: left"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: right"></div> + </div> + <div style="clear: both"></div> + + <!-- page-break-before specified on third item, at a point where breaking + is already necessary: --> + <!-- * With 'page-break-before: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: auto"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: avoid"></div> + </div> + <!-- * With 'page-break-before: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: always"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: left"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: right"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-break-request-vert-001b.html b/testing/web-platform/tests/css/css-flexbox/flexbox-break-request-vert-001b.html new file mode 100644 index 0000000000..8c5a88683d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-break-request-vert-001b.html @@ -0,0 +1,109 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing page-break-after in vertical multi-line flex containers</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#change-201409-algo-breaks"> + <link rel="match" href="flexbox-break-request-vert-001-ref.html"> + <meta charset="utf-8"> + <style> + div.flexbox { + display: flex; + flex-direction: column; + flex-wrap: wrap; + border: 1px dashed black; + width: 20px; + height: 60px; + margin: 2px; + float: left; + } + div.item { + height: 28px; + border: 1px solid blue; + background: lightblue; + } + </style> +</head> +<body> + <!-- page-break-after specified on first (and only) item, at a point where + we're already "breaking" (the end): --> + <!-- * With 'page-break-after: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-after: auto"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: avoid"></div> + </div> + <!-- * With 'page-break-after: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-after: always"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: left"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: right"></div> + </div> + <div style="clear: both"></div> + + <!-- page-break-after specified on first item, at a point where breaking + would otherwise be unnecessary: --> + <!-- * With 'page-break-after: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-after: auto"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: avoid"></div> + <div class="item"></div> + </div> + <!-- * With 'page-break-after: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-after: always"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: left"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: right"></div> + <div class="item"></div> + </div> + <div style="clear: both"></div> + + <!-- page-break-after specified on second item, at a point where breaking + is already necessary: --> + <!-- * With 'page-break-after: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: auto"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: avoid"></div> + <div class="item"></div> + </div> + <!-- * With 'page-break-after: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: always"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: left"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: right"></div> + <div class="item"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-break-request-vert-002-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-break-request-vert-002-ref.html new file mode 100644 index 0000000000..eeb8a4ea72 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-break-request-vert-002-ref.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + div.flexbox { + border: 1px dashed black; + width: 20px; + height: 60px; + margin: 2px; + float: left; + } + div.item { + height: 28px; + border: 1px solid blue; + background: lightblue; + } + div.fullCrossSize { + width: 18px; + } + div.halfCrossSize { + width: 8px; + } + div.shrunkMainSize { + height: 18px; + } + </style> +</head> +<body> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div style="clear: both"></div> + + <div class="flexbox"> + <div class="item fullCrossSize"></div> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + <div class="item fullCrossSize"></div> + </div> + <div style="clear: both"></div> + + <div class="flexbox"> + <div class="item fullCrossSize shrunkMainSize"></div> + <div class="item fullCrossSize shrunkMainSize"></div> + <div class="item fullCrossSize shrunkMainSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize shrunkMainSize"></div> + <div class="item fullCrossSize shrunkMainSize"></div> + <div class="item fullCrossSize shrunkMainSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize shrunkMainSize"></div> + <div class="item fullCrossSize shrunkMainSize"></div> + <div class="item fullCrossSize shrunkMainSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize shrunkMainSize"></div> + <div class="item fullCrossSize shrunkMainSize"></div> + <div class="item fullCrossSize shrunkMainSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize shrunkMainSize"></div> + <div class="item fullCrossSize shrunkMainSize"></div> + <div class="item fullCrossSize shrunkMainSize"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-break-request-vert-002a.html b/testing/web-platform/tests/css/css-flexbox/flexbox-break-request-vert-002a.html new file mode 100644 index 0000000000..e68b98a5ae --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-break-request-vert-002a.html @@ -0,0 +1,108 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing page-break-before in vertical single-line flex containers (should have no effect)</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-line-break"> + <link rel="match" href="flexbox-break-request-vert-002-ref.html"> + <meta charset="utf-8"> + <style> + div.flexbox { + display: flex; + flex-direction: column; + border: 1px dashed black; + width: 20px; + height: 60px; + margin: 2px; + float: left; + } + div.item { + height: 28px; + border: 1px solid blue; + background: lightblue; + } + </style> +</head> +<body> + <!-- page-break-before specified on first (and only) item, at a point where + we're already "breaking" (the beginning): --> + <!-- * With 'page-break-before: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-before: auto"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-before: avoid"></div> + </div> + <!-- * With 'page-break-before: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-before: always"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-before: left"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-before: right"></div> + </div> + <div style="clear: both"></div> + + <!-- page-break-before specified on second item, at a point where breaking + would otherwise be unnecessary: --> + <!-- * With 'page-break-before: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: auto"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: avoid"></div> + </div> + <!-- * With 'page-break-before: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: always"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: left"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-before: right"></div> + </div> + <div style="clear: both"></div> + + <!-- page-break-before specified on third item, at a point where breaking + is already necessary: --> + <!-- * With 'page-break-before: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: auto"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: avoid"></div> + </div> + <!-- * With 'page-break-before: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: always"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: left"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="page-break-before: right"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-break-request-vert-002b.html b/testing/web-platform/tests/css/css-flexbox/flexbox-break-request-vert-002b.html new file mode 100644 index 0000000000..cda5fecd44 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-break-request-vert-002b.html @@ -0,0 +1,108 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing page-break-after in vertical single-line flex containers (should have no effect)</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-line-break"> + <link rel="match" href="flexbox-break-request-vert-002-ref.html"> + <meta charset="utf-8"> + <style> + div.flexbox { + display: flex; + flex-direction: column; + border: 1px dashed black; + width: 20px; + height: 60px; + margin: 2px; + float: left; + } + div.item { + height: 28px; + border: 1px solid blue; + background: lightblue; + } + </style> +</head> +<body> + <!-- page-break-after specified on first (and only) item, at a point where + we're already "breaking" (the end): --> + <!-- * With 'page-break-after: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-after: auto"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: avoid"></div> + </div> + <!-- * With 'page-break-after: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-after: always"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: left"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: right"></div> + </div> + <div style="clear: both"></div> + + <!-- page-break-after specified on first item, at a point where breaking + would otherwise be unnecessary: --> + <!-- * With 'page-break-after: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-after: auto"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: avoid"></div> + <div class="item"></div> + </div> + <!-- * With 'page-break-after: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item" style="page-break-after: always"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: left"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item" style="page-break-after: right"></div> + <div class="item"></div> + </div> + <div style="clear: both"></div> + + <!-- page-break-after specified on second item, at a point where breaking + is already necessary: --> + <!-- * With 'page-break-after: auto, avoid' (not requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: auto"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: avoid"></div> + <div class="item"></div> + </div> + <!-- * With 'page-break-after: always, left, right' (requesting a break): --> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: always"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: left"></div> + <div class="item"></div> + </div> + <div class="flexbox"> + <div class="item"></div> + <div class="item" style="page-break-after: right"></div> + <div class="item"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-collapsed-item-baseline-001-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-collapsed-item-baseline-001-ref.html new file mode 100644 index 0000000000..2aa1d74bfd --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-collapsed-item-baseline-001-ref.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- In this reference case, we get each container to be sized the same as + in the testcase, without any visible baseline alignemnt, by using some + hidden flex items. +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + width: 50px; + background: yellow; + border: 1px dotted black; + margin: 5px; + align-items: flex-start; + } + .hiddenItemForSizing { + width: 0; + min-width: 0; /* disable default min-width:auto behavior */ + color: transparent; + align-self: baseline; + } + .largeFont { + font-size: 20px; + background: lightblue; + /* Our flex items get padding on opposite sides (top/bottom) so that they + produce a large combined height when baseline-aligned: */ + padding-top: 5px; + } + .smallFont { + font-size: 10px; + background: pink; + /* Our flex items get padding on opposite sides (top/bottom) so that they + produce a large combined height when baseline-aligned: */ + padding-bottom: 20px; + } + </style> +</head> +<body> + <div class="flexContainer"> + <div class="largeFont">a</div> + <!-- Hidden flex items used to determine container's cross size, + based on their baseline-aligned combined cross size: --> + <div class="largeFont hiddenItemForSizing">a</div> + <div class="smallFont hiddenItemForSizing">b</div> + </div> + + <div class="flexContainer"> + <div class="smallFont">b</div> + <!-- Hidden flex items used to determine container's cross size, + based on their baseline-aligned combined cross size: --> + <div class="largeFont hiddenItemForSizing">a</div> + <div class="smallFont hiddenItemForSizing">b</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-collapsed-item-baseline-001.html b/testing/web-platform/tests/css/css-flexbox/flexbox-collapsed-item-baseline-001.html new file mode 100644 index 0000000000..0ffa277619 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-collapsed-item-baseline-001.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing that a collapsed flex item participates in baseline alignment only for the purpose of establishing container's cross size</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-visibility"> + <link rel="match" href="flexbox-collapsed-item-baseline-001-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + width: 50px; + background: yellow; + border: 1px dotted black; + margin: 5px; + align-items: baseline; + } + .collapse { + visibility: collapse; + } + .largeFont { + font-size: 20px; + background: lightblue; + /* Our flex items get padding on opposite sides (top/bottom) so that they + produce a large combined height when baseline-aligned: */ + padding-top: 5px; + } + .smallFont { + font-size: 10px; + background: pink; + /* Our flex items get padding on opposite sides (top/bottom) so that they + produce a large combined height when baseline-aligned: */ + padding-bottom: 20px; + } + </style> +</head> +<body> + <!-- Second item collapsed: --> + <div class="flexContainer"> + <div class="largeFont">a</div> + <div class="smallFont collapse">b</div> + </div> + + <!-- First item collapsed: --> + <div class="flexContainer"> + <div class="largeFont collapse">a</div> + <div class="smallFont">b</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-collapsed-item-horiz-001-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-collapsed-item-horiz-001-ref.html new file mode 100644 index 0000000000..9013187842 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-collapsed-item-horiz-001-ref.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- In this reference case, we have blocks in place of the testcase's + flex containers. The testcase's collapsed flex items are entirely + absent here (and the remaining content is sized using exact pixel + values). +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + background: yellow; + border: 1px dotted black; + float: left; + margin: 5px; + } + .flexContainer > * { + /* All flex items have 20px base size */ + width: 20px; + } + .collapse { + flex-basis: 0; + height: 20px; + } + .flexible { + flex: 1 auto; + } + .heightTall { + height: 40px; + background: purple; + } + .heightAuto { + background: teal; + } + .heightShort { + height: 10px; + background: pink; + } + </style> +</head> +<body> + <!-- FIRST ROW: --> + <!-- Just one (collapsed) flex item, which ends up establishing + the container's size (even though it's collapsed): --> + <div class="flexContainer"> + <div class="heightTall collapse"></div> + </div> + + <div style="clear: both"></div> + + <!-- SECOND ROW: --> + <!-- One collapsed flex item, one short flex item. + (Container ends up with collapsed item's height) --> + <div class="flexContainer"> + <div class="heightTall collapse"></div> + <div class="heightShort"></div> + </div> + <!-- (same, but with items in opposite order) --> + <div class="flexContainer"> + <div class="heightShort"></div> + <div class="heightTall collapse"></div> + </div> + + <div style="clear: both"></div> + + <!-- THIRD ROW: --> + <!-- One collapsed flex item, one stretched flex item. + (Container and stretched item end up with collapsed item's height) --> + <div class="flexContainer"> + <div class="heightTall collapse"></div> + <div class="heightAuto"></div> + </div> + <!-- (again, with items in opposite order) --> + <div class="flexContainer"> + <div class="heightAuto"></div> + <div class="heightTall collapse"></div> + </div> + + <div style="clear: both"></div> + + <!-- FOURTH ROW: --> + <!-- One collapsed flex item, one other flex item; both are flexible. + (The non-collapsed one should take all of the available width.) --> + <div class="flexContainer"> + <div class="heightAuto collapse"></div> + <div class="heightTall flexible"></div> + </div> + <!-- (again, with items in opposite order) --> + <div class="flexContainer"> + <div class="heightTall flexible"></div> + <div class="heightAuto collapse"></div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-collapsed-item-horiz-001.html b/testing/web-platform/tests/css/css-flexbox/flexbox-collapsed-item-horiz-001.html new file mode 100644 index 0000000000..2c4385af8c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-collapsed-item-horiz-001.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing that visibility:collapse on a flex item in a single-line flex container maintains the containers's cross size, but doesn't otherwise impact flex layout</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-visibility"> + <link rel="match" href="flexbox-collapsed-item-horiz-001-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + background: yellow; + border: 1px dotted black; + float: left; + margin: 5px; + } + .flexContainer > * { + /* All flex items have 20px base size */ + width: 20px; + } + .collapse { + visibility: collapse; + } + .flexible { + flex: 1 auto; + } + .heightTall { + height: 40px; + background: purple; + } + .heightAuto { + background: teal; + } + .heightShort { + height: 10px; + background: pink; + } + </style> +</head> +<body> + <!-- FIRST ROW: --> + <!-- Just one (collapsed) flex item, which ends up establishing + the container's size (even though it's collapsed): --> + <div class="flexContainer"> + <div class="heightTall collapse"></div> + </div> + + <div style="clear: both"></div> + + <!-- SECOND ROW: --> + <!-- One collapsed flex item, one short flex item. + (Container ends up with collapsed item's height) --> + <div class="flexContainer"> + <div class="heightTall collapse"></div> + <div class="heightShort"></div> + </div> + <!-- (same, but with items in opposite order) --> + <div class="flexContainer"> + <div class="heightShort"></div> + <div class="heightTall collapse"></div> + </div> + + <div style="clear: both"></div> + + <!-- THIRD ROW: --> + <!-- One collapsed flex item, one stretched flex item. + (Container and stretched item end up with collapsed item's height) --> + <div class="flexContainer"> + <div class="heightTall collapse"></div> + <div class="heightAuto"></div> + </div> + <!-- (again, with items in opposite order) --> + <div class="flexContainer"> + <div class="heightAuto"></div> + <div class="heightTall collapse"></div> + </div> + + <div style="clear: both"></div> + + <!-- FOURTH ROW: --> + <!-- One collapsed flex item, one other flex item; both are flexible. + (The non-collapsed one should take all of the available width.) --> + <div class="flexContainer"> + <div class="heightAuto flexible collapse"></div> + <div class="heightTall flexible"></div> + </div> + <!-- (again, with items in opposite order) --> + <div class="flexContainer"> + <div class="heightTall flexible"></div> + <div class="heightAuto flexible collapse"></div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-collapsed-item-horiz-002-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-collapsed-item-horiz-002-ref.html new file mode 100644 index 0000000000..a9040e306c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-collapsed-item-horiz-002-ref.html @@ -0,0 +1,108 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + flex-wrap: wrap; + + /* These let us show where each flex line begins (and hence, how tall + the flex lines end up) */ + align-content: flex-start; + align-items: flex-start; + + width: 30px; + background: yellow; + border: 1px dotted black; + float: left; + margin: 5px; + } + .collapsedItem { + width: 0; + height: 25px; + } + .halfWidthItem { + width: 15px; + height: 15px; + background: teal; + } + .fullWidthItem { + width: 30px; + height: 20px; + background: purple; + } + .veryTallItem { + width: 15px; + height: 40px; + background: olive; + } + </style> +</head> +<body> + <!-- FIRST ROW: --> + <!-- One collapsed flex item, at the beginning of a flex line, which + ends up establishing its flex line's cross size: --> + <div class="flexContainer"> + <div class="collapsedItem"></div> + <div class="halfWidthItem"></div> + <div class="fullWidthItem"></div> + </div> + <!-- ...and now with it being at the end of that flex line: --> + <div class="flexContainer"> + <div class="halfWidthItem"></div> + <div class="collapsedItem"></div> + <div class="fullWidthItem"></div> + </div> + + <div style="clear: both"></div> + + <!-- SECOND ROW: --> + <!-- One collapsed flex item, initially in its own line. It ends + up being merged into another line after it collapses, due to its + (post-collapse) zero main-size. --> + <div class="flexContainer"> + <div class="collapsedItem"></div> + <div class="fullWidthItem"></div> + <div class="fullWidthItem"></div> + </div> + <div class="flexContainer"> + <div class="fullWidthItem"></div> + <div class="collapsedItem"></div> + <div class="fullWidthItem"></div> + </div> + <div class="flexContainer"> + <div class="fullWidthItem"></div> + <div class="fullWidthItem"></div> + <div class="collapsedItem"></div> + </div> + + <div style="clear: both"></div> + + <!-- THIRD ROW: --> + <!-- One collapsed flex item, initially in a line with an even-taller item. + The collapsed item ends up shifting into another line after it + collapses, but it carries the taller item's cross size with it, as its + strut size. --> + <div class="flexContainer"> + <div class="fullWidthItem"></div> + <div class="collapsedItem" style="height: 40px"></div> + <div class="veryTallItem"></div> + </div> + <!-- ...and now with two (differently-sized) struts in first line: + (the one that's taller - due to being initially grouped with the tall + item - wins out.) --> + <div class="flexContainer"> + <div class="collapsedItem"></div> + <div class="fullWidthItem"></div> + <div class="collapsedItem" style="height: 40px"></div> + <div class="veryTallItem"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-collapsed-item-horiz-002.html b/testing/web-platform/tests/css/css-flexbox/flexbox-collapsed-item-horiz-002.html new file mode 100644 index 0000000000..97af3805ce --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-collapsed-item-horiz-002.html @@ -0,0 +1,111 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing that visibility:collapse on a flex item in a multi-line flex container creates struts, and that they can migrate between lines</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-visibility"> + <link rel="match" href="flexbox-collapsed-item-horiz-002-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + flex-wrap: wrap; + + /* These let us show where each flex line begins (and hence, how tall + the flex lines end up) */ + align-content: flex-start; + align-items: flex-start; + + width: 30px; + background: yellow; + border: 1px dotted black; + float: left; + margin: 5px; + } + .collapsedItem { + visibility: collapse; + width: 15px; + height: 25px; + } + .halfWidthItem { + width: 15px; + height: 15px; + background: teal; + } + .fullWidthItem { + width: 30px; + height: 20px; + background: purple; + } + .veryTallItem { + width: 15px; + height: 40px; + background: olive; + } + </style> +</head> +<body> + <!-- FIRST ROW: --> + <!-- One collapsed flex item, at the beginning of a flex line, which + ends up establishing its flex line's cross size: --> + <div class="flexContainer"> + <div class="collapsedItem"></div> + <div class="halfWidthItem"></div> + <div class="fullWidthItem"></div> + </div> + <!-- ...and now with it being at the end of that flex line: --> + <div class="flexContainer"> + <div class="halfWidthItem"></div> + <div class="collapsedItem"></div> + <div class="fullWidthItem"></div> + </div> + + <div style="clear: both"></div> + + <!-- SECOND ROW: --> + <!-- One collapsed flex item, initially in its own line. It ends + up being merged into another line after it collapses, due to its + (post-collapse) zero main-size. --> + <div class="flexContainer"> + <div class="collapsedItem"></div> + <div class="fullWidthItem"></div> + <div class="fullWidthItem"></div> + </div> + <div class="flexContainer"> + <div class="fullWidthItem"></div> + <div class="collapsedItem"></div> + <div class="fullWidthItem"></div> + </div> + <div class="flexContainer"> + <div class="fullWidthItem"></div> + <div class="fullWidthItem"></div> + <div class="collapsedItem"></div> + </div> + + <div style="clear: both"></div> + + <!-- THIRD ROW: --> + <!-- One collapsed flex item, initially in a line with an even-taller item. + The collapsed item ends up shifting into another line after it + collapses, but it carries the taller item's cross size with it, as its + strut size. --> + <div class="flexContainer"> + <div class="fullWidthItem"></div> + <div class="collapsedItem"></div> + <div class="veryTallItem"></div> + </div> + <!-- ...and now with two (differently-sized) struts in first line: + (the one that's taller - due to being initially grouped with the tall + item - wins out.) --> + <div class="flexContainer"> + <div class="collapsedItem"></div> + <div class="fullWidthItem"></div> + <div class="collapsedItem"></div> + <div class="veryTallItem"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-collapsed-item-horiz-003-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-collapsed-item-horiz-003-ref.html new file mode 100644 index 0000000000..c8242106ba --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-collapsed-item-horiz-003-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + flex-wrap: wrap; + align-content: stretch; /* Initial value; just here for emphasis */ + width: 25px; + height: 60px; + background: yellow; + border: 1px dotted black; + float: left; + margin: 5px; + } + .collapsedItem { + width: 0; + height: 40px; + } + .shortItem { + width: 25px; + height: 10px; + background: purple; + } + .tallItem { + width: 10px; + height: 30px; + background: olive; + } + </style> +</head> +<body> + <div class="flexContainer"> + <div class="shortItem"></div> + <div class="collapsedItem"></div> + <div class="tallItem"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-collapsed-item-horiz-003.html b/testing/web-platform/tests/css/css-flexbox/flexbox-collapsed-item-horiz-003.html new file mode 100644 index 0000000000..4476bc18f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-collapsed-item-horiz-003.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing that strut formation (from visibility:collapse) happens *after* lines have been stretched</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-visibility"> + <link rel="match" href="flexbox-collapsed-item-horiz-003-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + flex-wrap: wrap; + align-content: stretch; /* Initial value; just here for emphasis */ + width: 25px; + height: 60px; + background: yellow; + border: 1px dotted black; + float: left; + margin: 5px; + } + .collapsedItem { + visibility: collapse; + width: 10px; + } + .shortItem { + width: 25px; + height: 10px; + background: purple; + } + .tallItem { + width: 10px; + height: 30px; + background: olive; + } + </style> +</head> +<body> + <!-- In this testcase, the first flex line initially has a cross-size of + 10px, and the second flex line has a cross-size of 30px. Both lines are + stretched by 10px each (to hit the container's total cross-size, 60px). + Then, we handle "visibility:collapse" and convert the collapsed item + into a strut with the second line's stretched cross-size (40px), and we + restart flex layout. This strut then ends up in the *first* line (since + it has 0 main-size), which means both flex lines end up being 40px tall. + --> + <div class="flexContainer"> + <div class="shortItem"></div> + <div class="collapsedItem"></div> + <div class="tallItem"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-column-row-gap-001-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-column-row-gap-001-ref.html new file mode 100644 index 0000000000..0606afe539 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-column-row-gap-001-ref.html @@ -0,0 +1,97 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0 +--> +<!-- + Reference for the correctness of gaps in horizontal and vertical multi-line + flex containers. +--> +<html> +<head> + <title>Reference: Testing row and column gaps in horizontal and vertical multi-line flex containers with the space-around property and auto margins</title> + <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> + <meta charset="utf-8"> + <style> + .outerBox { + width: 200px; + height: 220px; + border: 1px solid black; + float: left; + } + .flexContainer { + display: flex; + align-content: space-around; + justify-content: space-around; + } + .rowNoWrap { + flex-flow: row nowrap; + } + .columnNoWrap { + flex-flow: column nowrap; + } + .item { + border: 1px solid blue; + background: lightblue; + width: 28px; + height: 28px; + } + .autoLBMargins { + margin-left: auto; + margin-bottom: auto; + } + .autoBMargin { + margin-bottom: auto; + } + .right20 { + margin-right: 20px; + } + .bottom40 { + margin-bottom: 40px; + } + .tb30100 { + margin-top: 30px; + margin-bottom: 100px; + } + .lr3080 { + margin-left: 30px; + margin-right: 80px; + } + .w200 { + width: 200px; + } + .h220 { + height: 220px; + } + .fleft { + float: left; + } + </style> +</head> +<body> + <div class="outerBox"> + <div class="flexContainer w200 rowNoWrap tb30100"> + <div class="item right20"></div> + <div class="item right20"></div> + <div class="item right20"></div> + <div class="item"></div> + </div> + <div class="flexContainer w200 rowNoWrap"> + <div class="item autoLBMargins right20"></div> + <div class="item"></div> + </div> + </div> + <div class="outerBox"> + <div class="flexContainer fleft h220 columnNoWrap lr3080"> + <div class="item bottom40"></div> + <div class="item bottom40"></div> + <div class="item"></div> + </div> + <div class="flexContainer fleft h220 columnNoWrap"> + <div class="item bottom40"></div> + <div class="item bottom40"></div> + <div class="item autoBMargin"></div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-column-row-gap-001.html b/testing/web-platform/tests/css/css-flexbox/flexbox-column-row-gap-001.html new file mode 100644 index 0000000000..25b28e8094 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-column-row-gap-001.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0 +--> +<!-- + Testcase for the correctness of gaps in horizontal and vertical multi-line + flex containers. +--> +<html> +<head> + <title>CSS Test: Testing row and column gaps in horizontal and vertical multi-line flex containers with the space-around property and auto margins</title> + <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align/#gap-flex"> + <link rel="match" href="flexbox-column-row-gap-001-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + width: 200px; + height: 220px; + border: 1px solid black; + column-gap: 10%; + row-gap: 40px; + align-content: space-around; + justify-content: space-around; + float: left; + } + .rowWrap { + flex-flow: row wrap; + } + .columnWrap { + flex-flow: column wrap; + } + .item { + border: 1px solid blue; + background: lightblue; + width: 28px; + height: 28px; + } + .autoLBMargins { + margin-left: auto; + margin-bottom: auto; + } + </style> +</head> +<body> + <div class="flexContainer rowWrap"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item autoLBMargins"></div> + <div class="item"></div> + </div> + <div class="flexContainer columnWrap"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item autoLBMargins"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-column-row-gap-002-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-column-row-gap-002-ref.html new file mode 100644 index 0000000000..e23ddfe261 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-column-row-gap-002-ref.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0 +--> +<!-- + Testcase for the correctness of gaps in vertical writing mode + multi-line flex containers. +--> +<html> +<head> + <title>Reference: Testing row and column gaps in vertical writing mode multi-line flex containers</title> + <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + width: 220px; + height: 200px; + border: 1px solid black; + align-content: flex-start; + justify-content: flex-end; + float: left; + writing-mode: vertical-lr; + } + .rowWrap { + flex-flow: row wrap; + } + .columnWrap { + flex-flow: column wrap; + } + .item { + border: 1px solid blue; + background: lightblue; + width: 28px; + height: 28px; + } + .b20 { + margin-bottom: 20px; + } + .t20 { + margin-top: 20px; + } + .l10 { + margin-left: 10px; + } + </style> +</head> +<body> + <div class="flexContainer rowWrap"> + <div class="item b20"></div> + <div class="item b20"></div> + <div class="item b20"></div> + <div class="item"></div> + <div class="item l10 b20"></div> + <div class="item l10"></div> + </div> + <div class="flexContainer columnWrap"> + <div class="item"></div> + <div class="item l10"></div> + <div class="item l10"></div> + <div class="item l10"></div> + <div class="item l10"></div> + <div class="item l10 t20"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-column-row-gap-002.html b/testing/web-platform/tests/css/css-flexbox/flexbox-column-row-gap-002.html new file mode 100644 index 0000000000..fcd19cf8d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-column-row-gap-002.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0 +--> +<!-- + Testcase for the correctness of gaps in vertical writing mode multi-line + flex containers. +--> +<html> +<head> + <title>CSS Test: Testing row and column gaps in vertical writing mode multi-line flex containers</title> + <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align/#gap-flex"> + <link rel="match" href="flexbox-column-row-gap-002-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + width: 220px; + height: 200px; + border: 1px solid black; + column-gap: 10%; + row-gap: 10px; + align-content: flex-start; + justify-content: flex-end; + float: left; + writing-mode: vertical-lr; + } + .rowWrap { + flex-flow: row wrap; + } + .columnWrap { + flex-flow: column wrap; + } + .item { + border: 1px solid blue; + background: lightblue; + width: 28px; + height: 28px; + } + </style> +</head> +<body> + <div class="flexContainer rowWrap"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + </div> + <div class="flexContainer columnWrap"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-column-row-gap-003-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-column-row-gap-003-ref.html new file mode 100644 index 0000000000..6e7f220b44 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-column-row-gap-003-ref.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0 +--> +<html> +<head> + <title>Reference: Testing cross size computation with row and column gaps in horizontal multi-line flex containers</title> + <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> + <meta charset="utf-8"> +</html> + <style> + .flexContainer { + display: flex; + border: 1px solid black; + column-gap: 20px; + row-gap: 40px; + align-content: space-around; + justify-content: space-around; + } + .rowWrap { + flex-flow: row wrap; + } + .item { + border: 1px solid blue; + background: lightblue; + width: 28px; + height: 28px; + } + .autoLBMargins { + margin-left: auto; + margin-bottom: auto; + } + .w200 { + width: 200px; + } + .h100 { + height: 100px; + } + .h90 { + height: 90px; + } + </style> +</head> +<body> + <div class="flexContainer rowWrap w200 h100"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item autoLBMargins"></div> + <div class="item"></div> + </div> + <div class="flexContainer rowWrap w200 h90"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item autoLBMargins"></div> + <div class="item"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-column-row-gap-003.html b/testing/web-platform/tests/css/css-flexbox/flexbox-column-row-gap-003.html new file mode 100644 index 0000000000..2dcd027173 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-column-row-gap-003.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0 +--> +<html> +<head> + <title>CSS Test: Testing cross size computation with row and column gaps in horizontal multi-line flex containers</title> + <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align/#gap-flex"> + <link rel="match" href="flexbox-column-row-gap-003-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + border: 1px solid black; + column-gap: 20px; + row-gap: 40px; + align-content: space-around; + justify-content: space-around; + } + .rowWrap { + flex-flow: row wrap; + } + .item { + border: 1px solid blue; + background: lightblue; + width: 28px; + height: 28px; + } + .autoLBMargins { + margin-left: auto; + margin-bottom: auto; + } + .w200 { + width: 200px; + } + .hclamp { + max-height: 90px; + } + </style> +</head> +<body> + <div class="flexContainer rowWrap w200"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item autoLBMargins"></div> + <div class="item"></div> + </div> + <div class="flexContainer rowWrap w200 hclamp"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item autoLBMargins"></div> + <div class="item"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-column-row-gap-004-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-column-row-gap-004-ref.html new file mode 100644 index 0000000000..0b40fb2d62 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-column-row-gap-004-ref.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0 +--> +<html> +<head> + <title>Reference: Testing percentage gap resolution in flex containers</title> + <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + border: 2px solid black; + column-gap: 10px; + align-content: start; + justify-content: start; + margin-top: 20px; + } + .item { + border: 1px solid blue; + background: yellow; + width: 48px; + height: 48px; + flex: none; + } + .vertLR { + writing-mode: vertical-lr; + } + .rowWrap { + flex-flow: row wrap; + } + .colWrap { + flex-flow: column wrap; + } + .w50 { + width: 50px; + } + .h100 { + height: 100px; + } + .w100 { + width: 100px; + } + .noWrap { + flex-wrap: nowrap; + } + </style> +</head> +<body> + <div class="flexContainer rowWrap w50 h100"> + <div class="item"></div> + <div class="item"></div> + </div> + <div class="flexContainer colWrap w50 h100 noWrap"> + <div class="item"></div> + <div class="item"></div> + </div> + <div class="flexContainer vertLR rowWrap h100 w100"> + <div class="item"></div> + <div class="item"></div> + </div> + <div class="flexContainer vertLR colWrap w100 noWrap"> + <div class="item"></div> + <div class="item"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-column-row-gap-004.html b/testing/web-platform/tests/css/css-flexbox/flexbox-column-row-gap-004.html new file mode 100644 index 0000000000..0d86b3818f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-column-row-gap-004.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0 +--> +<html> +<head> + <title>CSS Test: Testing percentage gap resolution in flex containers</title> + <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align/#column-row-gap"> + <link rel="match" href="flexbox-column-row-gap-004-ref.html"> + <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5081"> + <meta charset="utf-8"> + <meta name="assert" content="% row-gaps in a flexbox with indefinite block size are treated as 'normal'." /> + <style> + .flexContainer { + display: flex; + border: 2px solid black; + row-gap: 20%; + column-gap: 10%; + align-content: start; + justify-content: start; + margin-top: 20px; + } + .item { + border: 1px solid blue; + background: yellow; + width: 48px; + height: 48px; + flex: none; + } + .vertLR { + writing-mode: vertical-lr; + } + .rowWrap { + flex-flow: row wrap; + } + .colWrap { + flex-flow: column wrap; + } + .w50 { + width: 50px; + } + </style> +</head> +<body> + <div class="flexContainer rowWrap w50"> + <div class="item"></div> + <div class="item"></div> + </div> + <div class="flexContainer colWrap w50"> + <div class="item"></div> + <div class="item"></div> + </div> + <div class="flexContainer vertLR rowWrap"> + <div class="item"></div> + <div class="item"></div> + </div> + <div class="flexContainer vertLR colWrap"> + <div class="item"></div> + <div class="item"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-definite-cross-size-constrained-percentage-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-definite-cross-size-constrained-percentage-ref.html new file mode 100644 index 0000000000..ed9ac4f1a5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-definite-cross-size-constrained-percentage-ref.html @@ -0,0 +1,17 @@ +<html> + <meta charset="utf-8"> + <link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#min-size-auto"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#definite"> + <link rel="help" href="https://www.w3.org/TR/css-sizing-3/#definite"> + <title>Flex item cross size set by definite flex container size with percentage height</title> + <style> + img { + width: 25px; + height: 25px; + } + </style> + <body> + <img src="support/60x60-green.png"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-definite-cross-size-constrained-percentage.html b/testing/web-platform/tests/css/css-flexbox/flexbox-definite-cross-size-constrained-percentage.html new file mode 100644 index 0000000000..ae0836fdad --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-definite-cross-size-constrained-percentage.html @@ -0,0 +1,26 @@ +<html> + <meta charset="utf-8"> + <link rel="match" href="flexbox-definite-cross-size-constrained-percentage-ref.html"> + <link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#min-size-auto"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#definite"> + <link rel="help" href="https://www.w3.org/TR/css-sizing-3/#definite"> + <title>Flex item cross size set by definite flex container size with percentage height</title> + <style> + .constraining-container { + height: 50px; + } + + .flex-container { + height: 50%; + display: flex; + } + </style> + <body> + <div class="constraining-container"> + <div class="flex-container"> + <img src="support/60x60-green.png"> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-definite-sizes-001-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-definite-sizes-001-ref.html new file mode 100644 index 0000000000..ed0cc575f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-definite-sizes-001-ref.html @@ -0,0 +1,13 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<style> +div { + width: 100px; + height: 100px; + background: green; +} +</style> +<p>Test passes if you see a green 100px x 100px square, and no red</p> +<div></div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-definite-sizes-001.html b/testing/web-platform/tests/css/css-flexbox/flexbox-definite-sizes-001.html new file mode 100644 index 0000000000..5bff6146e0 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-definite-sizes-001.html @@ -0,0 +1,30 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test: nested flex containers with height established by 'min-height'</title> +<link rel="match" href="flexbox-definite-sizes-001-ref.html"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1449326"> +<style> +div { + display: flex; +} + +.item { + width: 100px; + background: red; + align-items: center; +} + +.item span { + min-height: 100%; + width: 100%; + background: green; +} +</style> +<p>Test passes if you see a green 100px x 100px square, and no red</p> +<div style="min-height: 100px;"> + <div class="item"> + <span></span> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-definite-sizes-002.html b/testing/web-platform/tests/css/css-flexbox/flexbox-definite-sizes-002.html new file mode 100644 index 0000000000..126fd5e50c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-definite-sizes-002.html @@ -0,0 +1,31 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test: nested flex containers with height established by 'min-height'</title> +<link rel="match" href="flexbox-definite-sizes-001-ref.html"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1449326"> +<style> +div { + display: flex; +} + +.item { + width: 100px; + background: red; + align-items: center; + min-height: 100px; +} + +.item span { + min-height: 100%; + width: 100%; + background: green; +} +</style> +<p>Test passes if you see a green 100px x 100px square, and no red</p> +<div> + <div class="item"> + <span></span> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-definite-sizes-003.html b/testing/web-platform/tests/css/css-flexbox/flexbox-definite-sizes-003.html new file mode 100644 index 0000000000..bc5b0751db --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-definite-sizes-003.html @@ -0,0 +1,38 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test: nested flex containers with definite max-height</title> +<link rel="match" href="flexbox-definite-sizes-001-ref.html"> +<link rel="author" href="mailto:dholbert@mozilla.com" title="Daniel Holbert"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1449326"> +<style> +body { overflow: hidden } + +.outerFlex { + display: flex; + width: 100px; + /* Implicit "align-items:stretch" */ +} + +.innerFlex { + display: flex; + width: 100px; + background: red; + + /* This reveals if we miscalculate the height of our flex item: */ + align-items: flex-end; +} + +.block { + width: 100px; + max-height: 100%; + background-color: green; +} +</style> +<p>Test passes if you see a green 100px x 100px square, and no red</p> +<div class="outerFlex" style="max-height: 100px"> + <div class="innerFlex"> + <div class="block"><div style="height:9999px"></div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-definite-sizes-004.html b/testing/web-platform/tests/css/css-flexbox/flexbox-definite-sizes-004.html new file mode 100644 index 0000000000..cf54aabe99 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-definite-sizes-004.html @@ -0,0 +1,38 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test: nested flex containers with definite max-height</title> +<link rel="match" href="flexbox-definite-sizes-001-ref.html"> +<link rel="author" href="mailto:dholbert@mozilla.com" title="Daniel Holbert"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1449326"> +<style> +body { overflow: hidden } + +.outerFlex { + display: flex; + width: 100px; + /* Implicit "align-items:stretch" */ +} + +.innerFlex { + display: flex; + width: 100px; + background: red; + + /* This reveals if we miscalculate the height of our flex item: */ + align-items: flex-end; +} + +.block { + width: 100px; + max-height: 100%; + background-color: green; +} +</style> +<p>Test passes if you see a green 100px x 100px square, and no red</p> +<div class="outerFlex"> + <div class="innerFlex" style="max-height: 100px"> + <div class="block"><div style="height:9999px"></div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-definite-sizes-005-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-definite-sizes-005-ref.html new file mode 100644 index 0000000000..fca146671c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-definite-sizes-005-ref.html @@ -0,0 +1,20 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" href="mailto:dholbert@mozilla.com" title="Daniel Holbert"> +<style> + .outer { + margin-bottom: 2px; + height: 60px; + } + .inner { + background: lime; + height: 100%; + } +</style> +<p>Test passes if you see four 60px-tall lime rows (with platform-appropriate scrollbars on the last one).</p> + +<div class="outer"><div class="inner"></div></div> +<div class="outer"><div class="inner"></div></div> +<div class="outer"><div class="inner"></div></div> +<div class="outer" style="overflow: scroll"><div class="inner"></div></div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-definite-sizes-005.html b/testing/web-platform/tests/css/css-flexbox/flexbox-definite-sizes-005.html new file mode 100644 index 0000000000..76beb2a41d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-definite-sizes-005.html @@ -0,0 +1,47 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test: nested flex containers with definite max-height</title> +<link rel="match" href="flexbox-definite-sizes-005-ref.html"> +<link rel="author" href="mailto:dholbert@mozilla.com" title="Daniel Holbert"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1503173"> +<style> + .horizFlex { + display: flex; + margin-bottom: 2px; + } + .vertFlex { + display: flex; + flex-grow: 1; + flex-direction: column; + min-height: 60px; + } + .item { + background: lime; + height: 100%; + } +</style> +<p>Test passes if you see four 60px-tall lime rows (with platform-appropriate scrollbars on the last one).</p> + +<div class="horizFlex"> + <div class="vertFlex"> + <div class="item"></div> + </div> +</div> + +<div class="horizFlex"> + <div class="vertFlex" style="overflow: hidden"> + <div class="item"></div> + </div> +</div> +<div class="horizFlex"> + <div class="vertFlex" style="overflow: auto"> + <div class="item"></div> + </div> +</div> + +<div class="horizFlex"> + <div class="vertFlex" style="overflow: scroll"> + <div class="item"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-definite-sizes-006.html b/testing/web-platform/tests/css/css-flexbox/flexbox-definite-sizes-006.html new file mode 100644 index 0000000000..4b5aaf8dc4 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-definite-sizes-006.html @@ -0,0 +1,12 @@ +<!doctype html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-stretch"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="Item stretches to row flexbox's height when the row flexbox has a definite height but is a child of a column flexbox with an indefinite height." /> +<p>Test passes if there is a filled green square.</p> + +<div style="display: flex; flex-direction: column;"> + <div style="height: 100px; display: flex;"> + <div style="width: 100px; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-dyn-resize-001-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-dyn-resize-001-ref.html new file mode 100644 index 0000000000..5e5561cadf --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-dyn-resize-001-ref.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Reftest Reference + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + width: 100px; + display: flex; + border: 1px solid purple; + margin-bottom: 15px; + } + .item { + margin: 2px; + background: lightblue; + } + .inline-box { + display: inline-block; + height: 10px; + width: 10px; + background: lightgray; + border: 1px solid black; + } + #change-width { + /* Using hardcoded CSS as reference for testcase's tweak: */ + width: 300px; + } + #change-flex { + /* Using hardcoded CSS as reference for testcase's tweak: */ + flex: 0 0 75px; + } + </style> +</head> +<body> + <div class="container"> + <div class="item" id="change-width"> + <div class="inline-box"></div><div class="inline-box"></div> + </div> + <div class="item"> + <div class="inline-box"></div><div class="inline-box"></div> + </div> + </div> + + <div class="container"> + <div class="item" id="change-flex"> + <div class="inline-box"></div><div class="inline-box"></div> + </div> + <div class="item"> + <div class="inline-box"></div><div class="inline-box"></div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-dyn-resize-001.html b/testing/web-platform/tests/css/css-flexbox/flexbox-dyn-resize-001.html new file mode 100644 index 0000000000..d64c4bdf28 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-dyn-resize-001.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Test: Testing how a sizing change to one flex item impacts its sibling + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#layout-algorithm"> + <link rel="match" href="flexbox-dyn-resize-001-ref.html"> + <style> + .container { + width: 100px; + display: flex; + border: 1px solid purple; + margin-bottom: 15px; + } + .item { + margin: 2px; + background: lightblue; + } + .inline-box { + display: inline-block; + height: 10px; + width: 10px; + background: lightgray; + border: 1px solid black; + } + </style> + <script> + function go() { + // Make this item steal all the spare width (forcing its sibling to shrink) + // by giving it a huge 'width' and therefore huge flex-basis: + document.getElementById("change-width").style.width = "300px"; + + // Make this item steal all the spare width (forcing its sibling to shrink) + // by giving it a pretty big flex-basis and no shrinkability: + document.getElementById("change-flex").style.flex = "0 0 75px" + } + </script> +</head> +<body onload="go()"> + <div class="container"> + <div class="item" id="change-width"> + <div class="inline-box"></div><div class="inline-box"></div> + </div> + <div class="item"> + <div class="inline-box"></div><div class="inline-box"></div> + </div> + </div> + + <div class="container"> + <div class="item" id="change-flex"> + <div class="inline-box"></div><div class="inline-box"></div> + </div> + <div class="item"> + <div class="inline-box"></div><div class="inline-box"></div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-flex-basis-content-001-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-basis-content-001-ref.html new file mode 100644 index 0000000000..3ed3687cf0 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-basis-content-001-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> + .container { + display: flex; + flex-direction: row; + justify-content: space-between; + border: 2px solid purple; + padding: 2px; + margin-bottom: 2em; + height: 50px; + width: 200px; + } + + .container > * { + flex-shrink: 0; + min-width: 0; + border: 2px solid teal; + } + + .smallText { font: 10px Ahem; } + .bigText { font: 20px Ahem; } + .spacerChild::before { + content: ''; + display: block; + background: brown; + height: 10px; + width: 10px; + } + .justPadding { + /* Empty div with 5px padding on each side */ + padding: 5px; + background: cyan; + } + canvas { background: fuchsia } + </style> +</head> +<body> +<!-- Flex items have unspecified size properties: --> +<div class="container"> + <div class="smallText">a b</div> + <div class="bigText">c</div> + <div class="spacerChild"></div> + <div class="justPadding"></div> + <canvas width="20"></canvas> +</div> + +<!-- Various specified main-size values, in testcase + (removed here in reference case, because they shouldn't affect sizing): --> +<div class="container"> + <div class="smallText">a b</div> + <div class="bigText">c</div> + <div class="spacerChild"></div> + <div class="justPadding"></div> + <canvas width="20"></canvas> +</div> + +<!-- Various specified cross-size values (should be honored): --> +<div class="container"> + <div class="smallText" style="height: 0px">a b</div> + <div class="bigText" style="height: 40px">c</div> + <div class="spacerChild" style="height: 20px"></div> + <div class="justPadding" style="height: 10px"></div> + <canvas width="20" style="height: 8px"></canvas> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-flex-basis-content-001a.html b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-basis-content-001a.html new file mode 100644 index 0000000000..1ac926498c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-basis-content-001a.html @@ -0,0 +1,83 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: Testing "flex-basis: content" in a row-oriented flex container + </title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#propdef-flex-basis"> + <link rel="match" href="flexbox-flex-basis-content-001-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> + .container { + display: flex; + flex-direction: row; + justify-content: space-between; + border: 2px solid purple; + padding: 2px; + margin-bottom: 2em; + height: 50px; + width: 200px; + } + + .container > * { + /* All flex items have "flex-basis: content" (and zero flex-shrink and + min-main-size, to avoid any influence from those). */ + flex-basis: content; + flex-shrink: 0; + min-width: 0; + border: 2px solid teal; + } + + .smallText { font: 10px Ahem; } + .bigText { font: 20px Ahem; } + .spacerChild::before { + content: ''; + display: block; + background: brown; + height: 10px; + width: 10px; + } + .justPadding { + /* Empty div with 5px padding on each side */ + padding: 5px; + background: cyan; + } + canvas { background: fuchsia } + </style> +</head> +<body> +<!-- Flex items have unspecified size properties: --> +<div class="container"> + <div class="smallText">a b</div> + <div class="bigText">c</div> + <div class="spacerChild"></div> + <div class="justPadding"></div> + <canvas width="20"></canvas> +</div> + +<!-- Various specified main-size values (should be ignored): --> +<div class="container"> + <div class="smallText" style="width: 0px">a b</div> + <div class="bigText" style="width: 40px">c</div> + <div class="spacerChild" style="width: 20px"></div> + <div class="justPadding" style="width: 10px"></div> + <canvas width="20" style="width: 8px"></canvas> +</div> + +<!-- Various specified cross-size values (should be honored): --> +<div class="container"> + <div class="smallText" style="height: 0px">a b</div> + <div class="bigText" style="height: 40px">c</div> + <div class="spacerChild" style="height: 20px"></div> + <div class="justPadding" style="height: 10px"></div> + <canvas width="20" style="height: 8px"></canvas> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-flex-basis-content-001b.html b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-basis-content-001b.html new file mode 100644 index 0000000000..b41fd409b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-basis-content-001b.html @@ -0,0 +1,83 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: Testing "flex-basis: content" (set via the "flex" shorthand) + in a row-oriented flex container. + </title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#propdef-flex-basis"> + <link rel="match" href="flexbox-flex-basis-content-001-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> + .container { + display: flex; + flex-direction: row; + justify-content: space-between; + border: 2px solid purple; + padding: 2px; + margin-bottom: 2em; + height: 50px; + width: 200px; + } + + .container > * { + /* All flex items have "flex-basis: content" (and zero flex-shrink and + min-main-size, to avoid any influence from those). */ + flex: 0 0 content; + min-width: 0; + border: 2px solid teal; + } + + .smallText { font: 10px Ahem; } + .bigText { font: 20px Ahem; } + .spacerChild::before { + content: ''; + display: block; + background: brown; + height: 10px; + width: 10px; + } + .justPadding { + /* Empty div with 5px padding on each side */ + padding: 5px; + background: cyan; + } + canvas { background: fuchsia } + </style> +</head> +<body> +<!-- Flex items have unspecified size properties: --> +<div class="container"> + <div class="smallText">a b</div> + <div class="bigText">c</div> + <div class="spacerChild"></div> + <div class="justPadding"></div> + <canvas width="20"></canvas> +</div> + +<!-- Various specified main-size values (should be ignored): --> +<div class="container"> + <div class="smallText" style="width: 0px">a b</div> + <div class="bigText" style="width: 40px">c</div> + <div class="spacerChild" style="width: 20px"></div> + <div class="justPadding" style="width: 10px"></div> + <canvas width="20" style="width: 8px"></canvas> +</div> + +<!-- Various specified cross-size values (should be honored): --> +<div class="container"> + <div class="smallText" style="height: 0px">a b</div> + <div class="bigText" style="height: 40px">c</div> + <div class="spacerChild" style="height: 20px"></div> + <div class="justPadding" style="height: 10px"></div> + <canvas width="20" style="height: 8px"></canvas> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-flex-basis-content-002-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-basis-content-002-ref.html new file mode 100644 index 0000000000..35b4b783a1 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-basis-content-002-ref.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> + .container { + display: flex; + flex-direction: column; + justify-content: space-between; + border: 2px solid purple; + padding: 2px; + margin-right: 2em; + width: 50px; + height: 200px; + float: left; + } + + .container > * { + flex-shrink: 0; + min-height: 0; + border: 2px solid teal; + } + + .smallText { font: 10px Ahem; } + .bigText { font: 20px Ahem; } + .spacerChild::before { + content: ''; + display: block; + background: brown; + height: 10px; + width: 10px; + } + .justPadding { + /* Empty div with 5px padding on each side */ + padding: 5px; + background: cyan; + } + canvas { background: fuchsia } + </style> +</head> +<body> +<!-- Flex items have unspecified size properties: --> +<div class="container"> + <div class="smallText">a b</div> + <div class="bigText">c</div> + <div class="spacerChild"></div> + <div class="justPadding"></div> + <canvas height="20"></canvas> +</div> + +<!-- Various specified main-size values, in testcase + (removed here in reference case, because they shouldn't affect sizing): --> +<div class="container"> + <div class="smallText">a b</div> + <div class="bigText">c</div> + <div class="spacerChild"></div> + <div class="justPadding"></div> + <canvas height="20"></canvas> +</div> + +<!-- Various specified cross-size values (should be honored): --> +<div class="container"> + <div class="smallText" style="width: 0px">a b</div> + <div class="bigText" style="width: 40px">c</div> + <div class="spacerChild" style="width: 20px"></div> + <div class="justPadding" style="width: 10px"></div> + <canvas height="20" style="width: 8px"></canvas> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-flex-basis-content-002a.html b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-basis-content-002a.html new file mode 100644 index 0000000000..68c67987dd --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-basis-content-002a.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: Testing "flex-basis: content" in a column-oriented flex container + </title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#propdef-flex-basis"> + <link rel="match" href="flexbox-flex-basis-content-002-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> + .container { + display: flex; + flex-direction: column; + justify-content: space-between; + border: 2px solid purple; + padding: 2px; + margin-right: 2em; + width: 50px; + height: 200px; + float: left; + } + + .container > * { + /* All flex items have "flex-basis: content" (and zero flex-shrink and + min-main-size, to avoid any influence from those). */ + flex-basis: content; + flex-shrink: 0; + min-height: 0; + border: 2px solid teal; + } + + .smallText { font: 10px Ahem; } + .bigText { font: 20px Ahem; } + .spacerChild::before { + content: ''; + display: block; + background: brown; + height: 10px; + width: 10px; + } + .justPadding { + /* Empty div with 5px padding on each side */ + padding: 5px; + background: cyan; + } + canvas { background: fuchsia } + </style> +</head> +<body> +<!-- Flex items have unspecified size properties: --> +<div class="container"> + <div class="smallText">a b</div> + <div class="bigText">c</div> + <div class="spacerChild"></div> + <div class="justPadding"></div> + <canvas height="20"></canvas> +</div> + +<!-- Various specified main-size values (should be ignored): --> +<div class="container"> + <div class="smallText" style="height: 0px">a b</div> + <div class="bigText" style="height: 40px">c</div> + <div class="spacerChild" style="height: 20px"></div> + <div class="justPadding" style="height: 10px"></div> + <canvas height="20" style="height: 8px"></canvas> +</div> + +<!-- Various specified cross-size values (should be honored): --> +<div class="container"> + <div class="smallText" style="width: 0px">a b</div> + <div class="bigText" style="width: 40px">c</div> + <div class="spacerChild" style="width: 20px"></div> + <div class="justPadding" style="width: 10px"></div> + <canvas height="20" style="width: 8px"></canvas> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-flex-basis-content-002b.html b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-basis-content-002b.html new file mode 100644 index 0000000000..d6d4171eed --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-basis-content-002b.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: Testing "flex-basis: content" (set via the "flex" shorthand) + in a column-oriented flex container. + </title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#propdef-flex-basis"> + <link rel="match" href="flexbox-flex-basis-content-002-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> + .container { + display: flex; + flex-direction: column; + justify-content: space-between; + border: 2px solid purple; + padding: 2px; + margin-right: 2em; + width: 50px; + height: 200px; + float: left; + } + + .container > * { + /* All flex items have "flex-basis: content" (and zero flex-shrink and + min-main-size, to avoid any influence from those). */ + flex: 0 0 content; + min-height: 0; + border: 2px solid teal; + } + + .smallText { font: 10px Ahem; } + .bigText { font: 20px Ahem; } + .spacerChild::before { + content: ''; + display: block; + background: brown; + height: 10px; + width: 10px; + } + .justPadding { + /* Empty div with 5px padding on each side */ + padding: 5px; + background: cyan; + } + canvas { background: fuchsia } + </style> +</head> +<body> +<!-- Flex items have unspecified size properties: --> +<div class="container"> + <div class="smallText">a b</div> + <div class="bigText">c</div> + <div class="spacerChild"></div> + <div class="justPadding"></div> + <canvas height="20"></canvas> +</div> + +<!-- Various specified main-size values (should be ignored): --> +<div class="container"> + <div class="smallText" style="height: 0px">a b</div> + <div class="bigText" style="height: 40px">c</div> + <div class="spacerChild" style="height: 20px"></div> + <div class="justPadding" style="height: 10px"></div> + <canvas height="20" style="height: 8px"></canvas> +</div> + +<!-- Various specified cross-size values (should be honored): --> +<div class="container"> + <div class="smallText" style="width: 0px">a b</div> + <div class="bigText" style="width: 40px">c</div> + <div class="spacerChild" style="width: 20px"></div> + <div class="justPadding" style="width: 10px"></div> + <canvas height="20" style="width: 8px"></canvas> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-flex-basis-content-003-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-basis-content-003-ref.html new file mode 100644 index 0000000000..63ce9d7429 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-basis-content-003-ref.html @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + clear: both; /* In this reference case, we use floats instead of + flex items (see below), so the container just + needs to reset the float state for each example. */ + } + + .item { + border: 2px solid teal; + float: left; /* Use floated elements as a reference for (hopefully) + max-content sized flex items in testcase. */ + } + ib { + display: inline-block; + background: blue; + border: 1px solid gray; + width: 15px; + height: 10px; + } + float { + float: left; + background: fuchsia; + border: 1px solid gray; + width: 15px; + height: 10px; + } + canvas { + background: brown; + border: 1px solid gray; + } + .innerFlex { + display: flex; + } + innerItem { + background: salmon; + border: 1px solid gray; + height: 10px; + width: 15px; + flex: none; + } + </style> +</head> +<body> +<!-- In testcase, flex item has several inline-blocks + (no spaces, to avoid any text-layout dependency): --> +<div class="container"> + <div class="item"><ib></ib><ib></ib><ib></ib></div> +</div> + +<!-- In testcase, flex item has several floats: --> +<div class="container"> + <div class="item"> + <float></float> + <float></float> + <float></float> + </div> +</div> + +<!-- In testcase, flex item has several inline replaced elements: + (no spaces, to avoid any text-layout dependency): --> +<div class="container"> + <div class="item"> + <canvas width="15" height="10"></canvas + ><canvas width="15" height="10"></canvas + ><canvas width="15" height="10"></canvas> + </div> +</div> + +<!-- In testcase, flex item *is* a replaced element: --> +<div class="container"> + <canvas class="item" width="25" height="10"></canvas> +</div> + +<!-- In testcase, flex item is itself a flex container: --> +<div class="container"> + <div class="item innerFlex"> + <innerItem></innerItem> + <innerItem></innerItem> + <innerItem></innerItem> + </div> +</div> + +<!-- In testcase, flex item is itself a multi-line flex container: --> +<div class="container"> + <div class="item innerFlex" style="flex-wrap: wrap"> + <innerItem></innerItem> + <innerItem></innerItem> + <innerItem></innerItem> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-flex-basis-content-003a.html b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-basis-content-003a.html new file mode 100644 index 0000000000..83dbae0868 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-basis-content-003a.html @@ -0,0 +1,123 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: Testing that explicit "flex-basis: content" is treated as + "max-content" when calculating flex base size + </title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-base-size"> + <link rel="match" href="flexbox-flex-basis-content-003-ref.html"> + <style> + .container { + display: flex; + /* flex container has an extremely-constrained width (and items will + overflow horizontally). This is intentional, as part of stress-testing + item sizing. */ + width: 1px; + } + + .item { + /* We give all flex items "flex-basis: content". + We also give them zero flex-grow, flex-shrink, and min-main-size, so + that the flex base size entirely determines the flex item's size. */ + flex: 0 0 content; + min-width: 0; + border: 2px solid teal; + } + ib { + display: inline-block; + background: blue; + border: 1px solid gray; + width: 15px; + height: 10px; + } + float { + float: left; + background: fuchsia; + border: 1px solid gray; + width: 15px; + height: 10px; + } + canvas { + background: brown; + border: 1px solid gray; + } + .innerFlex { + display: flex; + } + innerItem { + background: salmon; + border: 1px solid gray; + height: 10px; + width: 15px; + flex: none; + } + </style> +</head> +<body> +<!-- The idea of this test is to be sure the UA is using the "max-content" size + (and not e.g. the "fit-content size") when resolving the flex base size + inside each flex container. To differentiate between max-content and + other intrinsic size possibilities (min-content/fit-content), we: + - use flex items with a large difference between its min-content size & + its max-content size (e.g. wrappable content). + - use a very small container (to compress the size, if the UA incorrectly + allows the size to be influenced by the container size). +--> + +<!-- Flex item has several inline-blocks + (no spaces, to avoid any text-layout dependency): --> +<div class="container"> + <div class="item"><ib></ib><ib></ib><ib></ib></div> +</div> + +<!-- Flex item has several floats: --> +<div class="container"> + <div class="item"> + <float></float> + <float></float> + <float></float> + </div> +</div> + +<!-- Flex item has several inline replaced elements: + (no spaces, to avoid any text-layout dependency): --> +<div class="container"> + <div class="item"> + <canvas width="15" height="10"></canvas + ><canvas width="15" height="10"></canvas + ><canvas width="15" height="10"></canvas> + </div> +</div> + +<!-- Flex item *is* a replaced element: --> +<div class="container"> + <canvas class="item" width="25" height="10"></canvas> +</div> + +<!-- Flex item is itself a flex container: --> +<div class="container"> + <div class="item innerFlex"> + <innerItem></innerItem> + <innerItem></innerItem> + <innerItem></innerItem> + </div> +</div> + +<!-- Flex item is itself a multi-line flex container: --> +<div class="container"> + <div class="item innerFlex" style="flex-wrap: wrap"> + <innerItem></innerItem> + <innerItem></innerItem> + <innerItem></innerItem> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-flex-basis-content-003b.html b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-basis-content-003b.html new file mode 100644 index 0000000000..a81403c098 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-basis-content-003b.html @@ -0,0 +1,124 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: Testing that used "flex-basis: content" is treated as + "max-content" when calculating flex base size + </title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-base-size"> + <link rel="match" href="flexbox-flex-basis-content-003-ref.html"> + <style> + .container { + display: flex; + /* flex container has an extremely-constrained width (and items will + overflow horizontally). This is intentional, as part of stress-testing + item sizing. */ + width: 1px; + } + + .item { + /* We give all flex items a used "flex-basis" of "content" + (from "flex-basis:auto" and default "width:auto"). + We also give them zero flex-grow, flex-shrink, and min-main-size, so + that the flex base size entirely determines the flex item's size. */ + flex: 0 0 auto; + min-width: 0; + border: 2px solid teal; + } + ib { + display: inline-block; + background: blue; + border: 1px solid gray; + width: 15px; + height: 10px; + } + float { + float: left; + background: fuchsia; + border: 1px solid gray; + width: 15px; + height: 10px; + } + canvas { + background: brown; + border: 1px solid gray; + } + .innerFlex { + display: flex; + } + innerItem { + background: salmon; + border: 1px solid gray; + height: 10px; + width: 15px; + flex: none; + } + </style> +</head> +<body> +<!-- The idea of this test is to be sure the UA is using the "max-content" size + (and not e.g. the "fit-content size") when resolving the flex base size + inside each flex container. To differentiate between max-content and + other intrinsic size possibilities (min-content/fit-content), we: + - use flex items with a large difference between its min-content size & + its max-content size (e.g. wrappable content). + - use a very small container (to compress the size, if the UA incorrectly + allows the size to be influenced by the container size). +--> + +<!-- Flex item has several inline-blocks + (no spaces, to avoid any text-layout dependency): --> +<div class="container"> + <div class="item"><ib></ib><ib></ib><ib></ib></div> +</div> + +<!-- Flex item has several floats: --> +<div class="container"> + <div class="item"> + <float></float> + <float></float> + <float></float> + </div> +</div> + +<!-- Flex item has several inline replaced elements: + (no spaces, to avoid any text-layout dependency): --> +<div class="container"> + <div class="item"> + <canvas width="15" height="10"></canvas + ><canvas width="15" height="10"></canvas + ><canvas width="15" height="10"></canvas> + </div> +</div> + +<!-- Flex item *is* a replaced element: --> +<div class="container"> + <canvas class="item" width="25" height="10"></canvas> +</div> + +<!-- Flex item is itself a flex container: --> +<div class="container"> + <div class="item innerFlex"> + <innerItem></innerItem> + <innerItem></innerItem> + <innerItem></innerItem> + </div> +</div> + +<!-- Flex item is itself a multi-line flex container: --> +<div class="container"> + <div class="item innerFlex" style="flex-wrap: wrap"> + <innerItem></innerItem> + <innerItem></innerItem> + <innerItem></innerItem> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-flex-basis-content-004-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-basis-content-004-ref.html new file mode 100644 index 0000000000..7da4de7a5a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-basis-content-004-ref.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + clear: both; /* In this reference case, we use floats instead of + flex items (see below), so the container just + needs to reset the float state for each example. */ + height: 50px; + } + + .item { + border: 2px solid teal; + float: left; /* Use floated elements as a reference for (hopefully) + max-content sized flex items in testcase. */ + } + ib { + display: inline-block; + background: blue; + border: 1px solid gray; + width: 15px; + height: 10px; + } + float { + float: left; + background: fuchsia; + border: 1px solid gray; + width: 15px; + height: 10px; + } + canvas { + background: brown; + border: 1px solid gray; + } + .innerFlex { + display: flex; + flex-direction: column; + } + innerItem { + background: salmon; + border: 1px solid gray; + height: 10px; + width: 15px; + flex: none; + } + </style> +</head> +<body> +<!-- In testcase, flex item has several inline-blocks + (no spaces, to avoid any text-layout dependency): --> +<div class="container"> + <div class="item"><ib></ib><ib></ib><ib></ib></div> +</div> + +<!-- In testcase, flex item has several floats: --> +<div class="container"> + <div class="item"> + <float></float> + <float></float> + <float></float> + </div> +</div> + +<!-- In testcase, flex item has several inline replaced elements: + (no spaces, to avoid any text-layout dependency): --> +<div class="container"> + <div class="item"> + <canvas width="15" height="10"></canvas + ><canvas width="15" height="10"></canvas + ><canvas width="15" height="10"></canvas> + </div> +</div> + +<!-- In testcase, flex item *is* a replaced element: --> +<div class="container"> + <canvas class="item" width="25" height="10"></canvas> +</div> + +<!-- In testcase, flex item is itself a flex container: --> +<div class="container"> + <div class="item innerFlex"> + <innerItem></innerItem> + <innerItem></innerItem> + <innerItem></innerItem> + </div> +</div> + +<!-- In testcase, flex item is itself a multi-line flex container: --> +<div class="container"> + <div class="item innerFlex" style="flex-wrap: wrap"> + <innerItem></innerItem> + <innerItem></innerItem> + <innerItem></innerItem> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-flex-basis-content-004a.html b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-basis-content-004a.html new file mode 100644 index 0000000000..65a86b508f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-basis-content-004a.html @@ -0,0 +1,129 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: Testing that explicit "flex-basis: content" is treated as + "max-content" when calculating flex base size + </title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-base-size"> + <link rel="match" href="flexbox-flex-basis-content-004-ref.html"> + <style> + .container { + display: flex; + flex-direction: column; + align-items: flex-start; + /* flex container has an extremely-constrained height (and items will + overflow vertically). This is intentional, as part of stress-testing + item sizing. We add a large margin-bottom so that overflowing + items don't overlap between examples. */ + height: 1px; + margin-bottom: 49px; + } + + .item { + /* We give all flex items "flex-basis: content". + We also give them zero flex-grow, flex-shrink, and min-main-size, so + that the flex base size entirely determines the flex item's size. */ + flex: 0 0 content; + min-height: 0; + border: 2px solid teal; + } + ib { + display: inline-block; + background: blue; + border: 1px solid gray; + width: 15px; + height: 10px; + } + float { + float: left; + background: fuchsia; + border: 1px solid gray; + width: 15px; + height: 10px; + } + canvas { + background: brown; + border: 1px solid gray; + } + .innerFlex { + display: flex; + flex-direction: column; + } + innerItem { + background: salmon; + border: 1px solid gray; + height: 10px; + width: 15px; + flex: none; + } + </style> +</head> +<body> +<!-- This test exists for symmetry with the previous set of tests + (flexbox-flex-basis-content-003*). Those previous tests check how + "flex-basis:content" is resolved to a flex base size, in the inline axis, + when the container's size is constrained in that axis. This test does the + same, but for the *block* axis, using flex-direction:column. As with the + previous set of tests, the expectation here is that we should use the + item's max-content size as its flex base size. Note that there's a bit + less subtlety here because intrinsic sizes (min-content, max-content) are + typically all the same in the block axis. +--> + +<!-- Flex item has several inline-blocks + (no spaces, to avoid any text-layout dependency): --> +<div class="container"> + <div class="item"><ib></ib><ib></ib><ib></ib></div> +</div> + +<!-- Flex item has several floats: --> +<div class="container"> + <div class="item"> + <float></float> + <float></float> + <float></float> + </div> +</div> + +<!-- Flex item has several inline replaced elements: + (no spaces, to avoid any text-layout dependency): --> +<div class="container"> + <div class="item"> + <canvas width="15" height="10"></canvas + ><canvas width="15" height="10"></canvas + ><canvas width="15" height="10"></canvas> + </div> +</div> + +<!-- Flex item *is* a replaced element: --> +<div class="container"> + <canvas class="item" width="25" height="10"></canvas> +</div> + +<!-- Flex item is itself a flex container: --> +<div class="container"> + <div class="item innerFlex"> + <innerItem></innerItem> + <innerItem></innerItem> + <innerItem></innerItem> + </div> +</div> + +<!-- Flex item is itself a multi-line flex container: --> +<div class="container"> + <div class="item innerFlex" style="flex-wrap: wrap"> + <innerItem></innerItem> + <innerItem></innerItem> + <innerItem></innerItem> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-flex-basis-content-004b.html b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-basis-content-004b.html new file mode 100644 index 0000000000..a686f1aa1e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-basis-content-004b.html @@ -0,0 +1,130 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: Testing that used "flex-basis: content" is treated as + "max-content" when calculating flex base size + </title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-base-size"> + <link rel="match" href="flexbox-flex-basis-content-004-ref.html"> + <style> + .container { + display: flex; + flex-direction: column; + align-items: flex-start; + /* flex container has an extremely-constrained height (and items will + overflow vertically). This is intentional, as part of stress-testing + item sizing. We add a large margin-bottom so that overflowing + items don't overlap between examples. */ + height: 1px; + margin-bottom: 49px; + } + + .item { + /* We give all flex items a used "flex-basis" of "content" + (from "flex-basis:auto" and default "width:auto"). + We also give them zero flex-grow, flex-shrink, and min-main-size, so + that the flex base size entirely determines the flex item's size. */ + flex: 0 0 auto; + min-height: 0; + border: 2px solid teal; + } + ib { + display: inline-block; + background: blue; + border: 1px solid gray; + width: 15px; + height: 10px; + } + float { + float: left; + background: fuchsia; + border: 1px solid gray; + width: 15px; + height: 10px; + } + canvas { + background: brown; + border: 1px solid gray; + } + .innerFlex { + display: flex; + flex-direction: column; + } + innerItem { + background: salmon; + border: 1px solid gray; + height: 10px; + width: 15px; + flex: none; + } + </style> +</head> +<body> +<!-- This test exists for symmetry with the previous set of tests + (flexbox-flex-basis-content-003*). Those previous tests check how + "flex-basis:content" is resolved to a flex base size, in the inline axis, + when the container's size is constrained in that axis. This test does the + same, but for the *block* axis, using flex-direction:column. As with the + previous set of tests, the expectation here is that we should use the + item's max-content size as its flex base size. Note that there's a bit + less subtlety here because intrinsic sizes (min-content, max-content) are + typically all the same in the block axis. +--> + +<!-- Flex item has several inline-blocks + (no spaces, to avoid any text-layout dependency): --> +<div class="container"> + <div class="item"><ib></ib><ib></ib><ib></ib></div> +</div> + +<!-- Flex item has several floats: --> +<div class="container"> + <div class="item"> + <float></float> + <float></float> + <float></float> + </div> +</div> + +<!-- Flex item has several inline replaced elements: + (no spaces, to avoid any text-layout dependency): --> +<div class="container"> + <div class="item"> + <canvas width="15" height="10"></canvas + ><canvas width="15" height="10"></canvas + ><canvas width="15" height="10"></canvas> + </div> +</div> + +<!-- Flex item *is* a replaced element: --> +<div class="container"> + <canvas class="item" width="25" height="10"></canvas> +</div> + +<!-- Flex item is itself a flex container: --> +<div class="container"> + <div class="item innerFlex"> + <innerItem></innerItem> + <innerItem></innerItem> + <innerItem></innerItem> + </div> +</div> + +<!-- Flex item is itself a multi-line flex container: --> +<div class="container"> + <div class="item innerFlex" style="flex-wrap: wrap"> + <innerItem></innerItem> + <innerItem></innerItem> + <innerItem></innerItem> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-flex-direction-column-percentage-ignored.html b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-direction-column-percentage-ignored.html new file mode 100644 index 0000000000..037ef3e83f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-direction-column-percentage-ignored.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>CSS Flexbox: height of a child of a flexbox with flex-direction: column</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes"> +<link rel="bookmark" href="https://crbug.com/404337"> +<link rel="match" href="reference/flexbox-flex-direction-column-percentage-ignored-ref.html"> +<meta name="assert" content="This test ensures that the percentage height of child of a flexbox with 'flex-direction: column' and no explicit height but with max-height set should be treated as 'auto'."> +<link href="support/flexbox.css" rel="stylesheet"> +<style> +.flexbox { + max-height: 10px; + overflow: hidden; +} +</style> + +<div class="flexbox column"> + <div style="height: 1%"> + The height here should be ignored. + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-flex-direction-column-reverse.htm b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-direction-column-reverse.htm new file mode 100644 index 0000000000..aeff3f7cc1 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-direction-column-reverse.htm @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Flexbox Test: Flex-direction = column-reverse</title> + <link rel="author" title="Gavin Elster" href="mailto:gavin.elster@me.com"> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> + <link rel="match" href="reference/flexbox-flex-direction-ref.htm" /> + <meta name="assert" content="Test checks that flex container's main axis has the same orientation as the block axis of the current writing mode, and main-start and main-end are swapped, when flex-direction = column-reverse. This assumes writing-direction = horizontal-tb', and direction = 'ltr'."> + <style> + + /* Test specific Styles */ + + .flex-wrapper { + display: flex; + flex-direction: column-reverse; + flex-wrap: wrap; + } + + /* Test-series styles */ + + .flex-wrapper { + width: 120px; + height: 120px; + + /* should only display on error */ + background: red; + + /* Enforce writing mode */ + direction: ltr; + writing-mode: horizontal-tb; + } + + .flex-wrapper div { + width: 38px; + height: 38px; + + background: green; + border: 1px solid limegreen; + + color: white; + line-height: 40px; + text-align: center; + vertical-align: middle; + } + </style> + </head> + <body> + <p>The test passes if there is a 3x3 grid of green squares, numbered 1-9 left-to-right and top-to-bottom, and there is no red.</p> + <div class="flex-wrapper"> + <div>7</div><div>4</div><div>1</div> + <div>8</div><div>5</div><div>2</div> + <div>9</div><div>6</div><div>3</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-flex-direction-column.htm b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-direction-column.htm new file mode 100644 index 0000000000..56920400cd --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-direction-column.htm @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Flexbox Test: Flex-direction = column</title> + <link rel="author" title="Gavin Elster" href="mailto:gavin.elster@me.com"> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> + <link rel="match" href="reference/flexbox-flex-direction-ref.htm" /> + <meta name="assert" content="Test checks that flex container's main axis has the same orientation as the block axis of the current writing mode, when flex-direction = column. This assumes writing-direction = horizontal-tb', and direction = 'ltr'."> + <style> + + /* Test specific Styles */ + + .flex-wrapper { + display: flex; + flex-direction: column; + flex-wrap: wrap; + } + + /* Test-series styles */ + + .flex-wrapper { + width: 120px; + height: 120px; + + /* should only display on error */ + background: red; + + /* Enforce writing mode */ + direction: ltr; + writing-mode: horizontal-tb; + } + + .flex-wrapper div { + width: 38px; + height: 38px; + + background: green; + border: 1px solid limegreen; + + color: white; + line-height: 40px; + text-align: center; + vertical-align: middle; + } + </style> + </head> + <body> + <p>The test passes if there is a 3x3 grid of green squares, numbered 1-9 left-to-right and top-to-bottom, and there is no red.</p> + <div class="flex-wrapper"> + <div>1</div><div>4</div><div>7</div> + <div>2</div><div>5</div><div>8</div> + <div>3</div><div>6</div><div>9</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-flex-direction-default.htm b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-direction-default.htm new file mode 100644 index 0000000000..0d41d54e6d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-direction-default.htm @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Flexbox Test: Flex-direction = row by default</title> + <link rel="author" title="Gavin Elster" href="mailto:gavin.elster@me.com"> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> + <link rel="match" href="reference/flexbox-flex-direction-ref.htm" /> + <meta name="assert" content="Test checks that flex container's main axis has the same orientation as the inline axis of the current writing mode by default. This assumes writing-direction = horizontal-tb', and direction = 'ltr'."> + <style> + + /* Test specific Styles */ + + .flex-wrapper { + display: flex; + flex-wrap: wrap; + } + + /* Test-series styles */ + + .flex-wrapper { + width: 120px; + height: 120px; + + /* should only display on error */ + background: red; + + /* Enforce writing mode */ + direction: ltr; + writing-mode: horizontal-tb; + } + + .flex-wrapper div { + width: 38px; + height: 38px; + + background: green; + border: 1px solid limegreen; + + color: white; + line-height: 40px; + text-align: center; + vertical-align: middle; + } + </style> + </head> + <body> + <p>The test passes if there is a 3x3 grid of green squares, numbered 1-9 left-to-right and top-to-bottom, and there is no red.</p> + <div class="flex-wrapper"> + <div>1</div><div>2</div><div>3</div> + <div>4</div><div>5</div><div>6</div> + <div>7</div><div>8</div><div>9</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-flex-direction-row-reverse.htm b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-direction-row-reverse.htm new file mode 100644 index 0000000000..eaa2649382 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-direction-row-reverse.htm @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Flexbox Test: Flex-direction = row-reverse</title> + <link rel="author" title="Gavin Elster" href="mailto:gavin.elster@me.com"> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> + <link rel="match" href="reference/flexbox-flex-direction-ref.htm" /> + <meta name="assert" content="Test checks that flex container's main axis has the opposite orientation as the inline axis of the current writing mode, when flex-direction = row-reverse. This assumes writing-direction = horizontal-tb', and direction = 'ltr'."> + <style> + + /* Test specific Styles */ + + .flex-wrapper { + display: flex; + flex-direction: row-reverse; + flex-wrap: wrap; + } + + /* Test-series styles */ + + .flex-wrapper { + width: 120px; + height: 120px; + + /* should only display on error */ + background: red; + + /* Enforce writing mode */ + direction: ltr; + writing-mode: horizontal-tb; + } + + .flex-wrapper div { + width: 38px; + height: 38px; + + background: green; + border: 1px solid limegreen; + + color: white; + line-height: 40px; + text-align: center; + vertical-align: middle; + } + </style> + </head> + <body> + <p>The test passes if there is a 3x3 grid of green squares, numbered 1-9 left-to-right and top-to-bottom, and there is no red.</p> + <div class="flex-wrapper"> + <div>3</div><div>2</div><div>1</div> + <div>6</div><div>5</div><div>4</div> + <div>9</div><div>8</div><div>7</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-flex-direction-row.htm b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-direction-row.htm new file mode 100644 index 0000000000..9dbb80f233 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-direction-row.htm @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Flexbox Test: Flex-direction = row</title> + <link rel="author" title="Gavin Elster" href="mailto:gavin.elster@me.com"> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> + <link rel="match" href="reference/flexbox-flex-direction-ref.htm" /> + <meta name="assert" content="Test checks that flex container's main axis has the same orientation as the inline axis of the current writing mode, when flex-direction = row. This assumes writing-direction = horizontal-tb', and direction = 'ltr'."> + <style> + + /* Test specific Styles */ + + .flex-wrapper { + display: flex; + flex-direction: row; + flex-wrap: wrap; + } + + /* Test-series styles */ + + .flex-wrapper { + width: 120px; + height: 120px; + + /* should only display on error */ + background: red; + + /* Enforce writing mode */ + direction: ltr; + writing-mode: horizontal-tb; + } + + .flex-wrapper div { + width: 38px; + height: 38px; + + background: green; + border: 1px solid limegreen; + + color: white; + line-height: 40px; + text-align: center; + vertical-align: middle; + } + </style> + </head> + <body> + <p>The test passes if there is a 3x3 grid of green squares, numbered 1-9 left-to-right and top-to-bottom, and there is no red.</p> + <div class="flex-wrapper"> + <div>1</div><div>2</div><div>3</div> + <div>4</div><div>5</div><div>6</div> + <div>7</div><div>8</div><div>9</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-flex-flow-001-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-flow-001-ref.html new file mode 100644 index 0000000000..f46e11b39a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-flow-001-ref.html @@ -0,0 +1,127 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .flexContainer { + height: 60px; + width: 60px; + font: 10px sans-serif; + background: yellow; + float: left; + border: 1px solid black; + } + .flexContainer > * { + border: 1px dotted gray; + width: 28px; + height: 28px; + float: left; + } + + /* The single-line flex containers' flex items are shrunk in main axis: */ + .singleLineHoriz > * { + width: 13px; + } + .singleLineVert > * { + height: 13px; + float: none; + } + </style> +</head> +<body> + <!-- single-line (flex-wrap unspecified): --> + <div class="flexContainer singleLineHoriz"><!-- flex-flow: row --> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer singleLineHoriz"><!-- flex-flow: row-reverse --> + <div>4</div><div>3</div><div>2</div><div>1</div> + </div> + <div class="flexContainer singleLineVert"><!-- flex-flow: column --> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer singleLineVert"><!-- flex-flow: column-reverse --> + <div>4</div><div>3</div><div>2</div><div>1</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap", after flex-direction: --> + <div class="flexContainer"><!-- flex-flow: row wrap --> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer"><!-- flex-flow: row-reverse wrap --> + <div>2</div><div>1</div><div>4</div><div>3</div> + </div> + <div class="flexContainer"><!-- flex-flow: column wrap --> + <div>1</div><div>3</div><div>2</div><div>4</div> + </div> + <div class="flexContainer"><!-- flex-flow: column-reverse wrap --> + <div>2</div><div>4</div><div>1</div><div>3</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap", before flex-direction: --> + <div class="flexContainer"><!-- flex-flow: wrap row --> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer"><!-- flex-flow: wrap row-reverse --> + <div>2</div><div>1</div><div>4</div><div>3</div> + </div> + <div class="flexContainer"><!-- flex-flow: wrap column --> + <div>1</div><div>3</div><div>2</div><div>4</div> + </div> + <div class="flexContainer"><!-- flex-flow: wrap column-reverse --> + <div>2</div><div>4</div><div>1</div><div>3</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap-reverse", after flex-direction: --> + <div class="flexContainer"><!-- flex-flow: row wrap-reverse --> + <div>3</div><div>4</div><div>1</div><div>2</div> + </div> + <div class="flexContainer"><!-- flex-flow: row-reverse wrap-reverse --> + <div>4</div><div>3</div><div>2</div><div>1</div> + </div> + <div class="flexContainer"><!-- flex-flow: column wrap-reverse --> + <div>3</div><div>1</div><div>4</div><div>2</div> + </div> + <div class="flexContainer"><!-- flex-flow: column-reverse wrap-reverse --> + <div>4</div><div>2</div><div>3</div><div>1</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap-reverse", before flex-direction: --> + <div class="flexContainer"><!-- flex-flow: wrap-reverse row --> + <div>3</div><div>4</div><div>1</div><div>2</div> + </div> + <div class="flexContainer"><!-- flex-flow: wrap-reverse row-reverse --> + <div>4</div><div>3</div><div>2</div><div>1</div> + </div> + <div class="flexContainer"> <!-- flex-flow: wrap-reverse column --> + <div>3</div><div>1</div><div>4</div><div>2</div> + </div> + <div class="flexContainer"><!-- flex-flow: wrap-reverse column-reverse --> + <div>4</div><div>2</div><div>3</div><div>1</div> + </div> + + <div style="clear:both"></div> + + <!-- now just specifying flex-wrap (no flex-direction) --> + <div class="flexContainer"><!-- flex-flow: wrap --> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer"><!-- flex-flow: wrap-reverse --> + <div>3</div><div>4</div><div>1</div><div>2</div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-flex-flow-001.html b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-flow-001.html new file mode 100644 index 0000000000..a29b89aa69 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-flow-001.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing all the values of the "flex-flow" shorthand property, with 4 flex items in each 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/#flex-flow-property"> + <link rel="match" href="flexbox-flex-flow-001-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + height: 60px; + width: 60px; + font: 10px sans-serif; + background: yellow; + float: left; + border: 1px solid black; + } + .flexContainer > * { + border: 1px dotted gray; + width: 28px; + height: 28px; + /* Explicitly set min-width & min-height to 0, to prevent their "auto" + value from influencing the sizes of our flex items (particularly for + the single-line chunks of this testcase, whose items may be shrunk a + little below the numerals' intrinsic sizes): */ + min-width: 0; + min-height: 0; + } + </style> +</head> +<body> + <!-- single-line (flex-wrap unspecified): --> + <div class="flexContainer" style="flex-flow: row"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer" style="flex-flow: row-reverse"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer" style="flex-flow: column"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer" style="flex-flow: column-reverse"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap", after flex-direction: --> + <div class="flexContainer" style="flex-flow: row wrap"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer" style="flex-flow: row-reverse wrap"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer" style="flex-flow: column wrap"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer" style="flex-flow: column-reverse wrap"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap", before flex-direction: --> + <div class="flexContainer" style="flex-flow: wrap row"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer" style="flex-flow: wrap row-reverse"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer" style="flex-flow: wrap column"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer" style="flex-flow: wrap column-reverse"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap-reverse", after flex-direction: --> + <div class="flexContainer" style="flex-flow: row wrap-reverse"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer" style="flex-flow: row-reverse wrap-reverse"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer" style="flex-flow: column wrap-reverse"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer" style="flex-flow: column-reverse wrap-reverse"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap-reverse", before flex-direction: --> + <div class="flexContainer" style="flex-flow: wrap-reverse row"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer" style="flex-flow: wrap-reverse row-reverse"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer" style="flex-flow: wrap-reverse column"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer" style="flex-flow: wrap-reverse column-reverse"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + + <div style="clear:both"></div> + + <!-- now just specifying flex-wrap (no flex-direction) --> + <div class="flexContainer" style="flex-flow: wrap"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer" style="flex-flow: wrap-reverse"> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-flex-flow-002-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-flow-002-ref.html new file mode 100644 index 0000000000..a325959a23 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-flow-002-ref.html @@ -0,0 +1,133 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .flexContainer { + height: 60px; + width: 60px; + font: 10px sans-serif; + background: yellow; + float: left; + border: 1px solid black; + } + .flexContainer > * { + border: 1px dotted gray; + width: 28px; + height: 28px; + float: left; + } + + /* The single-line flex containers' flex items are shrunk in main axis: */ + .singleLineHoriz > * { + width: 18px; + } + .singleLineVert > * { + height: 18px; + float: none; + } + .hidden { + /* We use this to hide the "4" box in each of the multi-line chunks. + The testcase has 3 flex items in each flex container, but it's easier + to write this reference case w/ a hidden 4th box as a space-filler. */ + visibility: hidden; + } + </style> +</head> +<body> + <!-- single-line (flex-wrap unspecified): --> + <div class="flexContainer singleLineHoriz"><!-- flex-flow: row --> + <div>1</div><div>2</div><div>3</div> + </div> + <div class="flexContainer singleLineHoriz"><!-- flex-flow: row-reverse --> + <div>3</div><div>2</div><div>1</div> + </div> + <div class="flexContainer singleLineVert"><!-- flex-flow: column --> + <div>1</div><div>2</div><div>3</div> + </div> + <div class="flexContainer singleLineVert"><!-- flex-flow: column-reverse --> + <div>3</div><div>2</div><div>1</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap", after flex-direction: --> + <div class="flexContainer"><!-- flex-flow: row wrap --> + <div>1</div><div>2</div><div>3</div><div class="hidden">4</div> + </div> + <div class="flexContainer"><!-- flex-flow: row-reverse wrap --> + <div>2</div><div>1</div><div class="hidden">4</div><div>3</div> + </div> + <div class="flexContainer"><!-- flex-flow: column wrap --> + <div>1</div><div>3</div><div>2</div><div class="hidden">4</div> + </div> + <div class="flexContainer"><!-- flex-flow: column-reverse wrap --> + <div>2</div><div class="hidden">4</div><div>1</div><div>3</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap", before flex-direction: --> + <div class="flexContainer"><!-- flex-flow: wrap row --> + <div>1</div><div>2</div><div>3</div><div class="hidden">4</div> + </div> + <div class="flexContainer"><!-- flex-flow: wrap row-reverse --> + <div>2</div><div>1</div><div class="hidden">4</div><div>3</div> + </div> + <div class="flexContainer"><!-- flex-flow: wrap column --> + <div>1</div><div>3</div><div>2</div><div class="hidden">4</div> + </div> + <div class="flexContainer"><!-- flex-flow: wrap column-reverse --> + <div>2</div><div class="hidden">4</div><div>1</div><div>3</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap-reverse", after flex-direction: --> + <div class="flexContainer"><!-- flex-flow: row wrap-reverse --> + <div>3</div><div class="hidden">4</div><div>1</div><div>2</div> + </div> + <div class="flexContainer"><!-- flex-flow: row-reverse wrap-reverse --> + <div class="hidden">4</div><div>3</div><div>2</div><div>1</div> + </div> + <div class="flexContainer"><!-- flex-flow: column wrap-reverse --> + <div>3</div><div>1</div><div class="hidden">4</div><div>2</div> + </div> + <div class="flexContainer"><!-- flex-flow: column-reverse wrap-reverse --> + <div class="hidden">4</div><div>2</div><div>3</div><div>1</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap-reverse", before flex-direction: --> + <div class="flexContainer"><!-- flex-flow: wrap-reverse row --> + <div>3</div><div class="hidden">4</div><div>1</div><div>2</div> + </div> + <div class="flexContainer"><!-- flex-flow: wrap-reverse row-reverse --> + <div class="hidden">4</div><div>3</div><div>2</div><div>1</div> + </div> + <div class="flexContainer"> <!-- flex-flow: wrap-reverse column --> + <div>3</div><div>1</div><div class="hidden">4</div><div>2</div> + </div> + <div class="flexContainer"><!-- flex-flow: wrap-reverse column-reverse --> + <div class="hidden">4</div><div>2</div><div>3</div><div>1</div> + </div> + + <div style="clear:both"></div> + + <!-- now just specifying flex-wrap (no flex-direction) --> + <div class="flexContainer"><!-- flex-flow: wrap --> + <div>1</div><div>2</div><div>3</div><div class="hidden">4</div> + </div> + <div class="flexContainer"><!-- flex-flow: wrap-reverse --> + <div>3</div><div class="hidden">4</div><div>1</div><div>2</div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-flex-flow-002.html b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-flow-002.html new file mode 100644 index 0000000000..8ba3abdf4b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-flow-002.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing all the values of the "flex-flow" shorthand property, with 3 flex items in each 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/#flex-flow-property"> + <link rel="match" href="flexbox-flex-flow-002-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + height: 60px; + width: 60px; + font: 10px sans-serif; + background: yellow; + float: left; + border: 1px solid black; + } + .flexContainer > * { + border: 1px dotted gray; + width: 28px; + height: 28px; + /* Explicitly set min-width & min-height to 0, to prevent their "auto" + value from influencing the sizes of our flex items (particularly for + the single-line chunks of this testcase, whose items may be shrunk a + little below the numerals' intrinsic sizes): */ + min-width: 0; + min-height: 0; + } + </style> +</head> +<body> + <!-- single-line (flex-wrap unspecified): --> + <div class="flexContainer" style="flex-flow: row"> + <div>1</div><div>2</div><div>3</div> + </div> + <div class="flexContainer" style="flex-flow: row-reverse"> + <div>1</div><div>2</div><div>3</div> + </div> + <div class="flexContainer" style="flex-flow: column"> + <div>1</div><div>2</div><div>3</div> + </div> + <div class="flexContainer" style="flex-flow: column-reverse"> + <div>1</div><div>2</div><div>3</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap", after flex-direction: --> + <div class="flexContainer" style="flex-flow: row wrap"> + <div>1</div><div>2</div><div>3</div> + </div> + <div class="flexContainer" style="flex-flow: row-reverse wrap"> + <div>1</div><div>2</div><div>3</div> + </div> + <div class="flexContainer" style="flex-flow: column wrap"> + <div>1</div><div>2</div><div>3</div> + </div> + <div class="flexContainer" style="flex-flow: column-reverse wrap"> + <div>1</div><div>2</div><div>3</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap", before flex-direction: --> + <div class="flexContainer" style="flex-flow: wrap row"> + <div>1</div><div>2</div><div>3</div> + </div> + <div class="flexContainer" style="flex-flow: wrap row-reverse"> + <div>1</div><div>2</div><div>3</div> + </div> + <div class="flexContainer" style="flex-flow: wrap column"> + <div>1</div><div>2</div><div>3</div> + </div> + <div class="flexContainer" style="flex-flow: wrap column-reverse"> + <div>1</div><div>2</div><div>3</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap-reverse", after flex-direction: --> + <div class="flexContainer" style="flex-flow: row wrap-reverse"> + <div>1</div><div>2</div><div>3</div> + </div> + <div class="flexContainer" style="flex-flow: row-reverse wrap-reverse"> + <div>1</div><div>2</div><div>3</div> + </div> + <div class="flexContainer" style="flex-flow: column wrap-reverse"> + <div>1</div><div>2</div><div>3</div> + </div> + <div class="flexContainer" style="flex-flow: column-reverse wrap-reverse"> + <div>1</div><div>2</div><div>3</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap-reverse", before flex-direction: --> + <div class="flexContainer" style="flex-flow: wrap-reverse row"> + <div>1</div><div>2</div><div>3</div> + </div> + <div class="flexContainer" style="flex-flow: wrap-reverse row-reverse"> + <div>1</div><div>2</div><div>3</div> + </div> + <div class="flexContainer" style="flex-flow: wrap-reverse column"> + <div>1</div><div>2</div><div>3</div> + </div> + <div class="flexContainer" style="flex-flow: wrap-reverse column-reverse"> + <div>1</div><div>2</div><div>3</div> + </div> + + <div style="clear:both"></div> + + <!-- now just specifying flex-wrap (no flex-direction) --> + <div class="flexContainer" style="flex-flow: wrap"> + <div>1</div><div>2</div><div>3</div> + </div> + <div class="flexContainer" style="flex-flow: wrap-reverse"> + <div>1</div><div>2</div><div>3</div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-default.htm b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-default.htm new file mode 100644 index 0000000000..e3046fd126 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-default.htm @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Flexbox Test: Flex-wrap defaults to nowrap</title> + <link rel="author" title="Gavin Elster" href="mailto:gavin.elster@me.com"> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> + <link rel="match" href="reference/flexbox-flex-wrap-nowrap-ref.htm" /> + <meta name="assert" content="Test checks that flex elements default to flex-wrap: nowrap if flex-wrap is not set. With wrapping disabled, the .green flex item should extend outside the bounds of its container, as it is set to flex:none."> + <style> + .flex-wrapper { + display: flex; + + background: green; + border-right: 60px solid red; + + width: 60px; + height: 120px; + } + + .flex-wrapper div{ + width: 60px; + flex: none; + } + + .green { + background: green; + } + </style> + </head> + <body> + <p>The test passes if there is a green square and no red.</p> + <div class="flex-wrapper"> + <div></div> + <div class="green"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-flexing-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-flexing-ref.html new file mode 100644 index 0000000000..924297d051 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-flexing-ref.html @@ -0,0 +1,18 @@ +<!doctype html> +<html> +<head> + <title>CSS Flexbox Test: flex-wrap flexes widths after line breaking</title> + <link rel="author" title="Alan Stearns" href="mailto:stearns@adobe.com"> + <style> + .container { + width: 150px; + height: 100px; + background: green; + } + </style> +</head> +<body> + <p>Test passes if there is a green rectangle and no red.</p> + <div class="container"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-flexing.html b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-flexing.html new file mode 100644 index 0000000000..b172fe6fbd --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-flexing.html @@ -0,0 +1,36 @@ +<!doctype html> +<html> +<head> + <title>CSS Flexbox Test: flex-wrap flexes widths after line breaking</title> + <link rel="author" title="Alan Stearns" href="mailto:stearns@adobe.com"> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-lines"> + <link rel="match" href="flexbox-flex-wrap-flexing-ref.html"/> + <meta name="assert" content="Flex items given more space after line breaking should flex wider"> + <meta name="assert" content="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> + <meta name="assert" content="http://www.w3.org/TR/css-flexbox-1/#flex-property"> + <style> + .container { + display: flex; + width: 150px; + height: 100px; + flex-wrap: wrap; + background: red; + } + .item { + min-width: 100px; + flex: 1; + height: 50px; + display: inline-block; /*to fail the test if display:flex fails*/; + background: green; + } + </style> +</head> +<body> + <p>Test passes if there is a green rectangle and no red.</p> + <div class="container"> + <div class="item"></div> + <div class="item"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-horiz-001-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-horiz-001-ref.html new file mode 100644 index 0000000000..bb76cafff1 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-horiz-001-ref.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + div.flexbox { + border: 1px dashed black; + width: 100px; + height: 12px; + margin-bottom: 2px; + } + div.halfMainSize { + width: 48px; + border: 1px solid blue; + background: lightblue; + } + div.hugeMainSize { + width: 148px; + border: 1px solid purple; + background: fuchsia; + } + div.fullCrossSize { + height: 10px; + } + div.halfCrossSize { + height: 4px; + } + </style> +</head> +<body> + + <!-- Single small flex item --> + <div class="flexbox"> + <div class="halfMainSize fullCrossSize"></div> + </div> + + <!-- Single small flex item with 'margin-left' set to push it to protrude + from the far edge of the container (and to shrink as a result) --> + <div class="flexbox"> + <div class="halfMainSize fullCrossSize" + style="margin-left: 80px; width: 18px"></div> + </div> + + <!-- Single small inflexible flex item with 'margin-left' set to push it to + protrude from the far edge of the container --> + <div class="flexbox"> + <div class="halfMainSize fullCrossSize" + style="margin-left: 80px"></div> + </div> + + <!-- Two flex items, exactly large enough to fit in line (no wrapping): --> + <div class="flexbox"> + <div class="halfMainSize fullCrossSize" style="float: left"></div> + <div class="halfMainSize fullCrossSize" style="float: left"></div> + </div> + + <!-- and now with some margin on first item, to force second item to wrap: --> + <div class="flexbox"> + <div class="halfMainSize halfCrossSize"></div> + <div class="halfMainSize halfCrossSize"></div> + </div> + + <!-- and now with some margin on second item, again forcing it to wrap: --> + <div class="flexbox"> + <div class="halfMainSize halfCrossSize"></div> + <div class="halfMainSize halfCrossSize"></div> + </div> + + <!-- Single large flex item: overflows (but does not wrap) and is shrunk + to fit container's main-size --> + <div class="flexbox"> + <div class="hugeMainSize fullCrossSize" style="width: 98px"></div> + </div> + + <!-- Single large flex item: overflows (but does not wrap) --> + <div class="flexbox"> + <div class="hugeMainSize fullCrossSize"></div> + </div> + + <!-- Small flex item, followed by large flex item (which wraps to + its own line and then shrink to container's main-size) --> + <div class="flexbox"> + <div class="halfMainSize halfCrossSize"></div> + <div class="hugeMainSize halfCrossSize" style="width: 98px"></div> + </div> + + <!-- Small flex item, followed by large inflexible flex item (which wraps to + its own line and then shrink to container's main-size) --> + <div class="flexbox"> + <div class="halfMainSize halfCrossSize"></div> + <div class="hugeMainSize halfCrossSize"></div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-horiz-001.html b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-horiz-001.html new file mode 100644 index 0000000000..75137a2f31 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-horiz-001.html @@ -0,0 +1,97 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing flex-wrap in horizontal flex containers</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> + <link rel="match" href="flexbox-flex-wrap-horiz-001-ref.html"> + <meta charset="utf-8"> + <style> + div.flexbox { + display: flex; + flex-wrap: wrap; + border: 1px dashed black; + width: 100px; + height: 12px; + margin-bottom: 2px; + } + div.halfMainSize { + width: 48px; + border: 1px solid blue; + background: lightblue; + } + div.hugeMainSize { + width: 148px; + border: 1px solid purple; + background: fuchsia; + } + </style> +</head> +<body> + + <!-- Single small flex item --> + <div class="flexbox"> + <div class="halfMainSize"></div> + </div> + + <!-- Single small flex item with 'margin-left' set to push it to protrude + from the far edge of the container (and to shrink as a result) --> + <div class="flexbox"> + <div class="halfMainSize" style="margin-left: 80px"></div> + </div> + + <!-- Single small inflexible flex item with 'margin-left' set to push it to + protrude from the far edge of the container --> + <div class="flexbox"> + <div class="halfMainSize" style="margin-left: 80px; flex: none"></div> + </div> + + <!-- Two flex items, exactly large enough to fit in line (no wrapping): --> + <div class="flexbox"> + <div class="halfMainSize"></div> + <div class="halfMainSize"></div> + </div> + + <!-- and now with some margin on first item, to force second item to wrap: --> + <div class="flexbox"> + <div class="halfMainSize" style="margin-right: 1px"></div> + <div class="halfMainSize"></div> + </div> + + <!-- and now with some margin on second item, again forcing it to wrap: --> + <div class="flexbox"> + <div class="halfMainSize"></div> + <div class="halfMainSize" style="margin-right: 1px"></div> + </div> + + <!-- Single large flex item: overflows (but does not wrap) and is shrunk + to fit container's main-size --> + <div class="flexbox"> + <div class="hugeMainSize"></div> + </div> + + <!-- Single large flex item: overflows (but does not wrap) --> + <div class="flexbox"> + <div class="hugeMainSize" style="flex: none"></div> + </div> + + <!-- Small flex item, followed by large flex item (which wraps to + its own line and then shrink to container's main-size) --> + <div class="flexbox"> + <div class="halfMainSize"></div> + <div class="hugeMainSize"></div> + </div> + + <!-- Small flex item, followed by large inflexible flex item (which wraps to + its own line and then shrink to container's main-size) --> + <div class="flexbox"> + <div class="halfMainSize"></div> + <div class="hugeMainSize" style="flex: none"></div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-horiz-002-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-horiz-002-ref.html new file mode 100644 index 0000000000..88c3beb19e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-horiz-002-ref.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + div.flexbox { + border: 1px dashed black; + min-width: 100px; + height: 12px; + float: left; + clear: both; + margin-bottom: 2px; + } + div.smallItem { + width: 30px; + border: 1px solid blue; + background: lightblue; + float: left; + } + div.fullCrossSize { + height: 10px; + } + div.halfCrossSize { + height: 4px; + } + </style> +</head> +<body> + + <!-- No flex items --> + <div class="flexbox"> + </div> + + <!-- Single small flex item --> + <div class="flexbox"> + <div class="smallItem fullCrossSize"></div> + </div> + + <!-- Multiple flex items, larger than flex container's min-size: --> + <div class="flexbox"> + <div class="smallItem fullCrossSize"></div> + <div class="smallItem fullCrossSize"></div> + <div class="smallItem fullCrossSize"></div> + <div class="smallItem fullCrossSize"></div> + <div class="smallItem fullCrossSize"></div> + </div> + + <!--- ...and now with flex container constrained by both min and max-size --> + <div class="flexbox" style="max-width: 120px"> + <div class="smallItem halfCrossSize"></div> + <div class="smallItem halfCrossSize"></div> + <div class="smallItem halfCrossSize"></div> + <div class="smallItem halfCrossSize"></div> + <div class="smallItem halfCrossSize"></div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-horiz-002.html b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-horiz-002.html new file mode 100644 index 0000000000..901a31ec57 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-horiz-002.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Ensure that min-width is honored for horizontal multi-line flex containers</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> + <link rel="match" href="flexbox-flex-wrap-horiz-002-ref.html"> + <meta charset="utf-8"> + <style> + div.flexbox { + display: flex; + flex-wrap: wrap; + border: 1px dashed black; + min-width: 100px; + height: 12px; + float: left; + clear: both; + margin-bottom: 2px; + } + div.smallItem { + width: 30px; + border: 1px solid blue; + background: lightblue; + } + </style> +</head> +<body> + + <!-- No flex items --> + <div class="flexbox"> + </div> + + <!-- Single small flex item --> + <div class="flexbox"> + <div class="smallItem"></div> + </div> + + <!-- Multiple flex items, larger than flex container's min-size: --> + <div class="flexbox"> + <div class="smallItem"></div> + <div class="smallItem"></div> + <div class="smallItem"></div> + <div class="smallItem"></div> + <div class="smallItem"></div> + </div> + + <!--- ...and now with flex container constrained by both min and max-size --> + <div class="flexbox" style="max-width: 120px"> + <div class="smallItem"></div> + <div class="smallItem"></div> + <div class="smallItem"></div> + <div class="smallItem"></div> + <div class="smallItem"></div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-nowrap.htm b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-nowrap.htm new file mode 100644 index 0000000000..3f385e0f70 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-nowrap.htm @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Flexbox Test: Flex-wrap = nowrap</title> + <link rel="author" title="Gavin Elster" href="mailto:gavin.elster@me.com"> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> + <link rel="match" href="reference/flexbox-flex-wrap-nowrap-ref.htm" /> + <meta name="assert" content="Test checks that flex elements set to flex-wrap: nowrap will not wrap their flex items. With wrapping disabled, the .green flex item should extend outside the bounds of its container, as it is set to flex:none."> + <style> + .flex-wrapper { + display: flex; + flex-wrap: nowrap; + + background: green; + border-right: 60px solid red; + + width: 60px; + height: 120px; + } + + .flex-wrapper div{ + width: 60px; + flex: none; + } + + .green { + background: green; + } + </style> + </head> + <body> + <p>The test passes if there is a green square and no red.</p> + <div class="flex-wrapper"> + <div></div> + <div class="green"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-vert-001-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-vert-001-ref.html new file mode 100644 index 0000000000..67f2c75da2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-vert-001-ref.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + div.flexbox { + border: 1px dashed black; + width: 12px; + height: 100px; + margin-right: 2px; + float: left; + } + div.halfMainSize { + height: 48px; + border: 1px solid blue; + background: lightblue; + } + div.hugeMainSize { + height: 148px; + border: 1px solid purple; + background: fuchsia; + } + div.fullCrossSize { + width: 10px; + } + div.halfCrossSize { + width: 4px; + } + </style> +</head> +<body> + + <!-- Single small flex item --> + <div class="flexbox"> + <div class="halfMainSize fullCrossSize"></div> + </div> + + <!-- Single small flex item with 'margin-left' set to push it to protrude + from the far edge of the container (and to shrink as a result) --> + <div class="flexbox"> + <div class="halfMainSize fullCrossSize" + style="margin-top: 80px; height: 18px"></div> + </div> + + <!-- Single small inflexible flex item with 'margin-left' set to push it to + protrude from the far edge of the container --> + <div class="flexbox"> + <div class="halfMainSize fullCrossSize" + style="margin-top: 80px"></div> + </div> + + <!-- Two flex items, exactly large enough to fit in line (no wrapping): --> + <div class="flexbox"> + <div class="halfMainSize fullCrossSize"></div> + <div class="halfMainSize fullCrossSize"></div> + </div> + + <!-- and now with some margin on first item, to force second item to wrap: --> + <div class="flexbox"> + <div class="halfMainSize halfCrossSize" style="float: left"></div> + <div class="halfMainSize halfCrossSize" style="float: left"></div> + </div> + + <!-- and now with some margin on second item, again forcing it to wrap: --> + <div class="flexbox"> + <div class="halfMainSize halfCrossSize" style="float: left"></div> + <div class="halfMainSize halfCrossSize" style="float: left"></div> + </div> + + <!-- Single large flex item: overflows (but does not wrap) and is shrunk + to fit container's main-size --> + <div class="flexbox"> + <div class="hugeMainSize fullCrossSize" style="height: 98px"></div> + </div> + + <!-- Single large flex item: overflows (but does not wrap) --> + <div class="flexbox"> + <div class="hugeMainSize fullCrossSize"></div> + </div> + + <!-- Small flex item, followed by large flex item (which wraps to + its own line and then shrink to container's main-size) --> + <div class="flexbox"> + <div class="halfMainSize halfCrossSize" style="float: left"></div> + <div class="hugeMainSize halfCrossSize" style="float: left; height: 98px"></div> + </div> + + <!-- Small flex item, followed by large inflexible flex item (which wraps to + its own line and then shrink to container's main-size) --> + <div class="flexbox"> + <div class="halfMainSize halfCrossSize" style="float: left"></div> + <div class="hugeMainSize halfCrossSize" style="float: left"></div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-vert-001.html b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-vert-001.html new file mode 100644 index 0000000000..b5229b65be --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-vert-001.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing flex-wrap in vertical flex containers</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> + <link rel="match" href="flexbox-flex-wrap-vert-001-ref.html"> + <meta charset="utf-8"> + <style> + div.flexbox { + display: flex; + flex-direction: column; + flex-wrap: wrap; + border: 1px dashed black; + width: 12px; + height: 100px; + margin-right: 2px; + float: left; + } + div.halfMainSize { + height: 48px; + border: 1px solid blue; + background: lightblue; + } + div.hugeMainSize { + height: 148px; + border: 1px solid purple; + background: fuchsia; + } + </style> +</head> +<body> + + <!-- Single small flex item --> + <div class="flexbox"> + <div class="halfMainSize"></div> + </div> + + <!-- Single small flex item with 'margin-top' set to push it to protrude + from the far edge of the container (and to shrink as a result) --> + <div class="flexbox"> + <div class="halfMainSize" style="margin-top: 80px"></div> + </div> + + <!-- Single small inflexible flex item with 'margin-top' set to push it to + protrude from the far edge of the container --> + <div class="flexbox"> + <div class="halfMainSize" style="margin-top: 80px; flex: none"></div> + </div> + + <!-- Two flex items, exactly large enough to fit in line (no wrapping): --> + <div class="flexbox"> + <div class="halfMainSize"></div> + <div class="halfMainSize"></div> + </div> + + <!-- and now with some margin on first item, to force second item to wrap: --> + <div class="flexbox"> + <div class="halfMainSize" style="margin-bottom: 1px"></div> + <div class="halfMainSize"></div> + </div> + + <!-- and now with some margin on second item, again forcing it to wrap: --> + <div class="flexbox"> + <div class="halfMainSize"></div> + <div class="halfMainSize" style="margin-bottom: 1px"></div> + </div> + + <!-- Single large flex item: overflows (but does not wrap) and is shrunk + to fit container's main-size --> + <div class="flexbox"> + <div class="hugeMainSize"></div> + </div> + + <!-- Single large flex item: overflows (but does not wrap) --> + <div class="flexbox"> + <div class="hugeMainSize" style="flex: none"></div> + </div> + + <!-- Small flex item, followed by large flex item (which wraps to + its own line and then shrink to container's main-size) --> + <div class="flexbox"> + <div class="halfMainSize"></div> + <div class="hugeMainSize"></div> + </div> + + <!-- Small flex item, followed by large inflexible flex item (which wraps to + its own line and then shrink to container's main-size) --> + <div class="flexbox"> + <div class="halfMainSize"></div> + <div class="hugeMainSize" style="flex: none"></div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-vert-002-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-vert-002-ref.html new file mode 100644 index 0000000000..f9a4553ccb --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-vert-002-ref.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + div.flexbox { + border: 1px dashed black; + width: 12px; + min-height: 100px; + margin-right: 2px; + float: left; + } + div.smallItem { + height: 30px; + border: 1px solid blue; + background: lightblue; + } + div.halfCrossSize { + width: 4px; + } + </style> +</head> +<body> + + <!-- No flex items --> + <div class="flexbox"> + </div> + + <!-- Single small flex item --> + <div class="flexbox"> + <div class="smallItem"></div> + </div> + + <!-- Multiple flex items, larger than flex container's min-size: --> + <div class="flexbox"> + <div class="smallItem"></div> + <div class="smallItem"></div> + <div class="smallItem"></div> + <div class="smallItem"></div> + <div class="smallItem"></div> + </div> + + <!--- ...and now with flex container constrained by both min and max-size --> + <div class="flexbox" style="max-height: 120px"> + <div class="smallItem halfCrossSize" style="float: left"></div> + <div class="smallItem halfCrossSize" style="float: left"></div> + <div class="smallItem halfCrossSize" style="float: left"></div> + <div class="smallItem halfCrossSize" style="float: left"></div> + <div class="smallItem halfCrossSize" style="float: left"></div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-vert-002.html b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-vert-002.html new file mode 100644 index 0000000000..8a2dcbc402 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-vert-002.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Ensure that min-height is honored for vertical multi-line flex containers</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> + <link rel="match" href="flexbox-flex-wrap-vert-002-ref.html"> + <meta charset="utf-8"> + <style> + div.flexbox { + display: flex; + flex-direction: column; + flex-wrap: wrap; + border: 1px dashed black; + width: 12px; + min-height: 100px; + margin-right: 2px; + float: left; + } + div.smallItem { + height: 30px; + border: 1px solid blue; + background: lightblue; + } + </style> +</head> +<body> + + <!-- No flex items --> + <div class="flexbox"> + </div> + + <!-- Single small flex item --> + <div class="flexbox"> + <div class="smallItem"></div> + </div> + + <!-- Multiple flex items, larger than flex container's min-size: --> + <div class="flexbox"> + <div class="smallItem"></div> + <div class="smallItem"></div> + <div class="smallItem"></div> + <div class="smallItem"></div> + <div class="smallItem"></div> + </div> + + <!--- ...and now with flex container constrained by both min and max-size --> + <div class="flexbox" style="max-height: 120px"> + <div class="smallItem"></div> + <div class="smallItem"></div> + <div class="smallItem"></div> + <div class="smallItem"></div> + <div class="smallItem"></div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-wrap-reverse.htm b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-wrap-reverse.htm new file mode 100644 index 0000000000..9c12a37b45 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-wrap-reverse.htm @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Flexbox Test: Flex-wrap = wrap-reverse</title> + <link rel="author" title="Gavin Elster" href="mailto:gavin.elster@me.com"> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> + <link rel="match" href="reference/flexbox-flex-direction-ref.htm" /> + <meta name="assert" content="Test checks that flex elements wrap left-to-right and bottom-to-top within their flex container when flex-wrap = 'wrap-reverse'. This assumes writing-direction = horizontal-tb', and direction = 'ltr'."> + <style> + + /* Test specific Styles */ + + .flex-wrapper { + display: flex; + flex-wrap: wrap-reverse; + } + + /* Test-series styles */ + + .flex-wrapper { + width: 120px; + height: 120px; + + /* should only display on error */ + background: red; + + /* Enforce writing mode */ + direction: ltr; + writing-mode: horizontal-tb; + } + + .flex-wrapper div { + width: 38px; + height: 38px; + + background: green; + border: 1px solid limegreen; + + color: white; + line-height: 40px; + text-align: center; + vertical-align: middle; + } + </style> + </head> + <body> + <p>The test passes if there is a 3x3 grid of green squares, numbered 1-9 left-to-right and top-to-bottom, and there is no red.</p> + <div class="flex-wrapper"> + <div>7</div><div>8</div><div>9</div> + <div>4</div><div>5</div><div>6</div> + <div>1</div><div>2</div><div>3</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-wrap.htm b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-wrap.htm new file mode 100644 index 0000000000..dbd3081e44 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-flex-wrap-wrap.htm @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Flexbox Test: Flex-wrap = wrap</title> + <link rel="author" title="Gavin Elster" href="mailto:gavin.elster@me.com"> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> + <link rel="match" href="reference/flexbox-flex-direction-ref.htm" /> + <meta name="assert" content="Test checks that flex elements wrap left-to-right within their flex container when flex-wrap = 'wrap', matching the writing direction. This assumes writing-direction = horizontal-tb', and direction = 'ltr'."> + <style> + + /* Test specific Styles */ + + .flex-wrapper { + display: flex; + flex-wrap: wrap; + } + + /* Test-series styles */ + + .flex-wrapper { + width: 120px; + height: 120px; + + /* should only display on error */ + background: red; + + /* Enforce writing mode */ + direction: ltr; + writing-mode: horizontal-tb; + } + + .flex-wrapper div { + width: 38px; + height: 38px; + + background: green; + border: 1px solid limegreen; + + color: white; + line-height: 40px; + text-align: center; + vertical-align: middle; + } + </style> + </head> + <body> + <p>The test passes if there is a 3x3 grid of green squares, numbered 1-9 left-to-right and top-to-bottom, and there is no red.</p> + <div class="flex-wrapper"> + <div>1</div><div>2</div><div>3</div> + <div>4</div><div>5</div><div>6</div> + <div>7</div><div>8</div><div>9</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-gap-position-absolute-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-gap-position-absolute-ref.html new file mode 100644 index 0000000000..7cea1fb1dd --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-gap-position-absolute-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Flexible Box Layout Test Reference: Test flexbox intrinsic inline-size, gap, and absolute-positioned children</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + div { + display: inline-flex; + background: fuchsia; + } + </style> + + <div> + <span>B</span> + <span style="width: 100px;"></span> + <span>C</span> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-gap-position-absolute.html b/testing/web-platform/tests/css/css-flexbox/flexbox-gap-position-absolute.html new file mode 100644 index 0000000000..850f1a42d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-gap-position-absolute.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Flexible Box Layout Test: Test flexbox intrinsic inline-size, gap, and absolute-positioned children</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#intrinsic-sizes"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#gaps"> + <link rel="match" href="flexbox-gap-position-absolute-ref.html"> + <meta name="assert" content="This test verifies the absolute-positioned children do not contribute the gap size to the flexbox's intrinsic inline-size."> + + <style> + div { + display: inline-flex; + gap: 100px; + background: fuchsia; + } + </style> + + <div> + <span style="position: absolute;"></span> + <span style="position: fixed;"></span> + <span>B</span> + <span>C</span> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-iframe-intrinsic-size-001-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-iframe-intrinsic-size-001-ref.html new file mode 100644 index 0000000000..58f2ee6905 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-iframe-intrinsic-size-001-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<style> +div { + height: 400px; + border: 0; +} +div > div { + width: 50%; + float: left; +} + +</style> +<p>This test PASS if you see two equally sized blue and green boxes.</p> +<div> + <div style='background: blue;'></div> + <div style='background: green;'></div> +</div> + + diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-iframe-intrinsic-size-001.html b/testing/web-platform/tests/css/css-flexbox/flexbox-iframe-intrinsic-size-001.html new file mode 100644 index 0000000000..8c5127b690 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-iframe-intrinsic-size-001.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com"/> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Part E"> +<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#intrinsic-sizes" title="For boxes with no preferred aspect ratio"> +<link rel="match" href="flexbox-iframe-intrinsic-size-001-ref.html"> +<meta name="assert" content="Checks that the default iframe size does not imply having an aspect ratio." /> +<style> +div { + display: flex; + height: 400px; +} + +iframe { + flex: 1 1 auto; + border: 0; +} +</style> +<p>This test PASS if you see two equally sized blue and green boxes.</p> +<div> + <iframe style='background: blue;'></iframe> + <iframe style='background: green;'></iframe> +</div> + + diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-items-as-stacking-contexts-001-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-items-as-stacking-contexts-001-ref.xhtml new file mode 100644 index 0000000000..7e02b799f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-items-as-stacking-contexts-001-ref.xhtml @@ -0,0 +1,115 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case, with floated elements in place of flex items, and using + "position: relative" on those elements, to make z-index work on them + outside of a flex container. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + width: 90px; + height: 10px; + border: 2px solid gray; + margin-bottom: 10px; + } + .a { + width: 10px; + height: 10px; + background: lightblue; + min-width: 0; + float: left; + } + .b { + width: 10px; + height: 10px; + background: pink; + min-width: 0; + margin-right: 10px; + float: left; + } + .aKid { + margin-left: 3px; + margin-top: 3px; + width: 10px; + height: 10px; + background: steelblue; + border: 1px solid blue; + } + .bKid { + margin-left: 3px; + margin-top: 6px; + width: 10px; + height: 10px; + background: violet; + border: 1px solid purple; + } + + .z0, .z1, .zn1 { position: relative; } + .z0 { z-index: 0; } + .z1 { z-index: 1; } + .zn1 { z-index: -1; } + + </style> + </head> + <body> + <!-- No "z-index" --> + <div class="flexbox"> + <div class="a"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div> + + <!-- Various "z-index" just on the first item --> + <div class="flexbox"> + <div class="a zn1"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + + <div class="a z0"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + + <div class="a z1"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div> + + <!-- Various "z-index" just on the second item --> + <div class="flexbox"> + <div class="a"><div class="aKid"/></div> + <div class="b zn1"><div class="bKid"/></div> + + <div class="a"><div class="aKid"/></div> + <div class="b z0"><div class="bKid"/></div> + + <div class="a"><div class="aKid"/></div> + <div class="b z1"><div class="bKid"/></div> + </div> + + <!-- Various "z-index" on the first item, w/ "z-index:0" on second item --> + <div class="flexbox"> + <div class="a zn1"><div class="aKid"/></div> + <div class="b z0"><div class="bKid"/></div> + + <div class="a z0"><div class="aKid"/></div> + <div class="b z0"><div class="bKid"/></div> + + <div class="a z1"><div class="aKid"/></div> + <div class="b z0"><div class="bKid"/></div> + </div> + + <!-- Various "z-index" on the second item, w/ "z-index:0" on first item --> + <div class="flexbox"> + <div class="a z0"><div class="aKid"/></div> + <div class="b zn1"><div class="bKid"/></div> + + <div class="a z0"><div class="aKid"/></div> + <div class="b z0"><div class="bKid"/></div> + + <div class="a z0"><div class="aKid"/></div> + <div class="b z1"><div class="bKid"/></div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-items-as-stacking-contexts-001.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-items-as-stacking-contexts-001.xhtml new file mode 100644 index 0000000000..fac9053391 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-items-as-stacking-contexts-001.xhtml @@ -0,0 +1,114 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with flex items containing overlapping content, with + "z-index" set on some of them, which should make them create + stacking contexts. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing that 'z-index' property makes flex items form stacking contexts</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#painting"/> + <link rel="match" href="flexbox-items-as-stacking-contexts-001-ref.xhtml"/> + <style> + .flexbox { + width: 90px; + height: 10px; + border: 2px solid gray; + display: flex; + margin-bottom: 10px; + } + .a { + width: 10px; + height: 10px; + background: lightblue; + min-width: 0; + } + .b { + width: 10px; + height: 10px; + background: pink; + min-width: 0; + margin-right: 10px; + } + .aKid { + margin-left: 3px; + margin-top: 3px; + width: 10px; + height: 10px; + background: steelblue; + border: 1px solid blue; + } + .bKid { + margin-left: 3px; + margin-top: 6px; + width: 10px; + height: 10px; + background: violet; + border: 1px solid purple; + } + .z0 { z-index: 0; } + .z1 { z-index: 1; } + .zn1 { z-index: -1; } + + </style> + </head> + <body> + <!-- No "z-index" --> + <div class="flexbox"> + <div class="a"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div> + + <!-- Various "z-index" just on the first item --> + <div class="flexbox"> + <div class="a zn1"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + + <div class="a z0"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + + <div class="a z1"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div> + + <!-- Various "z-index" just on the second item --> + <div class="flexbox"> + <div class="a"><div class="aKid"/></div> + <div class="b zn1"><div class="bKid"/></div> + + <div class="a"><div class="aKid"/></div> + <div class="b z0"><div class="bKid"/></div> + + <div class="a"><div class="aKid"/></div> + <div class="b z1"><div class="bKid"/></div> + </div> + + <!-- Various "z-index" on the first item, w/ "z-index:0" on second item --> + <div class="flexbox"> + <div class="a zn1"><div class="aKid"/></div> + <div class="b z0"><div class="bKid"/></div> + + <div class="a z0"><div class="aKid"/></div> + <div class="b z0"><div class="bKid"/></div> + + <div class="a z1"><div class="aKid"/></div> + <div class="b z0"><div class="bKid"/></div> + </div> + + <!-- Various "z-index" on the second item, w/ "z-index:0" on first item --> + <div class="flexbox"> + <div class="a z0"><div class="aKid"/></div> + <div class="b zn1"><div class="bKid"/></div> + + <div class="a z0"><div class="aKid"/></div> + <div class="b z0"><div class="bKid"/></div> + + <div class="a z0"><div class="aKid"/></div> + <div class="b z1"><div class="bKid"/></div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-items-as-stacking-contexts-002-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-items-as-stacking-contexts-002-ref.html new file mode 100644 index 0000000000..a67a31936d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-items-as-stacking-contexts-002-ref.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + body { font: 10px sans-serif } + .flexContainer { + background: orange; + width: 70px; + padding: 2px; + margin-bottom: 2px; + } + + .flexContainer > div:first-child { + margin-right: 10px; /* the space between the flex items, in testcase */ + } + + .item1 { + display: inline-block; + background: lightblue; + width: 30px; + } + .item2 { + display: inline-block; + background: yellow; + width: 30px; + } + </style> +</head> +<body> + <div class="flexContainer" + ><div class="item1">ThisIsALongUnbrokenString</div + ><div class="item2">HereIsSomeMoreLongText</div + ></div> + + <div class="flexContainer" + ><div class="item1" style="position:relative">ThisIsALongUnbrokenString</div + ><div class="item2">HereIsSomeMoreLongText</div + ></div> + + <div class="flexContainer" + ><div class="item1" style="position:relative">ThisIsALongUnbrokenString</div + ><div class="item2">HereIsSomeMoreLongText</div + ></div> + + <div class="flexContainer" + ><div class="item2">HereIsSomeMoreLongText</div + ><div class="item1">ThisIsALongUnbrokenString</div + ></div> + + <div class="flexContainer" + ><div class="item2">HereIsSomeMoreLongText</div + ><div class="item1">ThisIsALongUnbrokenString</div + ></div> + + <div class="flexContainer" + ><div class="item2" style="position:relative">HereIsSomeMoreLongText</div + ><div class="item1">ThisIsALongUnbrokenString</div + ></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-items-as-stacking-contexts-002.html b/testing/web-platform/tests/css/css-flexbox/flexbox-items-as-stacking-contexts-002.html new file mode 100644 index 0000000000..4b21404a9b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-items-as-stacking-contexts-002.html @@ -0,0 +1,90 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- This testcase checks flex items are painted atomically. In particular, + if one item has content that overflows into the region of another item, + then one item is painted "behind" the other; there shouldn't normally + any interleaving of backgrounds and content between the two items. + + This testcase also tests some special cases that will change the paint + ordering - specifically, the properties "position", "z-index", and + "order" on flex items. + --> +<!-- This was resolved by the CSSWG in April 2013: + http://krijnhoetmer.nl/irc-logs/css/20130403#l-455 --> +<html> +<head> + <title>CSS Test: Testing that flex items paint as pseudo-stacking contexts (like inline-blocks): atomically, in the absence of 'z-index' on descendants</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#painting"> + <link rel="match" href="flexbox-items-as-stacking-contexts-002-ref.html"> + <style> + body { font: 10px sans-serif } + .flexContainer { + background: orange; + display: flex; + justify-content: space-between; + width: 70px; + padding: 2px; + margin-bottom: 2px; + } + .item1 { + background: lightblue; + width: 30px; + min-width: 0; /* disable default min-width:auto behavior */ + } + .item2 { + background: yellow; + width: 30px; + min-width: 0; /* disable default min-width:auto behavior */ + } + </style> +</head> +<body> + <!-- This container has two flex items, the first of which has content + sticking out & overlapping the second. If they're painting atomically + (and in the right order), the second item's background should cover the + first item's overflowing content. --> + <div class="flexContainer" + ><div class="item1">ThisIsALongUnbrokenString</div + ><div class="item2">HereIsSomeMoreLongText</div + ></div> + + <!-- Now, the first item is relatively positioned, which should make it paint + on top of everything. --> + <div class="flexContainer" + ><div class="item1" style="position:relative">ThisIsALongUnbrokenString</div + ><div class="item2">HereIsSomeMoreLongText</div + ></div> + + <!-- Now, the first item is has "z-index" set, which should make it paint on + top of everything. --> + <div class="flexContainer" + ><div class="item1" style="z-index: 1">ThisIsALongUnbrokenString</div + ><div class="item2">HereIsSomeMoreLongText</div + ></div> + + <!-- Now, the first item has "order" set to a higher value than default, + which should make it paint on top (and at the far right) --> + <div class="flexContainer" + ><div class="item1" style="order: 1">ThisIsALongUnbrokenString</div + ><div class="item2">HereIsSomeMoreLongText</div + ></div> + + <!-- And for thoroughness, let's set "order" to a lower value than default, + on the second item. (Should render the same as previous example.) --> + <div class="flexContainer" + ><div class="item1">ThisIsALongUnbrokenString</div + ><div class="item2" style="order: -1">HereIsSomeMoreLongText</div + ></div> + + <!-- ...but if we relatively position that second item, it should paint + on top again, despite its low "order" value. --> + <div class="flexContainer" + ><div class="item1">ThisIsALongUnbrokenString</div + ><div class="item2" style="order: -1; position: relative">HereIsSomeMoreLongText</div + ></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-items-as-stacking-contexts-003-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-items-as-stacking-contexts-003-ref.html new file mode 100644 index 0000000000..814f06cca1 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-items-as-stacking-contexts-003-ref.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .flexContainer { + background: orange; + width: 70px; + height: 20px; + padding: 2px; + margin-bottom: 2px; + } + .item1 { + display: inline-block; + background: lightblue; + width: 30px; + height: 16px; + padding: 2px; + margin-right: 2px; + vertical-align: top; + } + .item2 { + display: inline-block; + background: yellow; + width: 30px; + height: 16px; + padding: 2px; + vertical-align: top; + } + .grandchildA { + background: purple; + width: 80px; + height: 6px; + position: relative; + z-index: 10; + } + .grandchildB { + background: teal; + width: 80px; + height: 6px; + position: relative; + z-index: 20; + } + .grandchildC { + background: lime; + width: 20px; + height: 16px; + position: relative; + /* This z-index should interleave this content + between grandchildA and grandchildB: */ + z-index: 15; + } + </style> +</head> +<body> + <div class="flexContainer" + ><div class="item1" + ><div class="grandchildA"></div + ><div class="grandchildB"></div + ></div + ><div class="item2" + ><div class="grandchildC"></div + ></div + ></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-items-as-stacking-contexts-003.html b/testing/web-platform/tests/css/css-flexbox/flexbox-items-as-stacking-contexts-003.html new file mode 100644 index 0000000000..5f0fd8ba35 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-items-as-stacking-contexts-003.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- This testcase checks that flex items are painted as pseudo-stacking + contexts, instead of full stacking contexts. In other words, content + inside of one flex item should be able to iterleave between pieces of + content in another flex item, if we set appropriately interleaving + "z-index" values. --> +<!-- This was resolved by the CSSWG in April 2013: + http://krijnhoetmer.nl/irc-logs/css/20130403#l-455 --> +<html> +<head> + <title>CSS Test: Testing that flex items paint as pseudo-stacking contexts (like inline-blocks), instead of full stacking contexts: 'z-index' should let descendants interleave</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#painting"> + <link rel="match" href="flexbox-items-as-stacking-contexts-003-ref.html"> + <style> + .flexContainer { + background: orange; + display: flex; + justify-content: space-between; + width: 70px; + height: 20px; + padding: 2px; + margin-bottom: 2px; + } + .item1 { + background: lightblue; + width: 30px; + min-width: 0; /* disable default min-width:auto behavior */ + padding: 2px; + } + .item2 { + background: yellow; + width: 30px; + padding: 2px; + } + .grandchildA { + background: purple; + width: 80px; + height: 6px; + position: relative; + z-index: 10; + } + .grandchildB { + background: teal; + width: 80px; + height: 6px; + position: relative; + z-index: 20; + } + .grandchildC { + background: lime; + width: 20px; + height: 16px; + position: relative; + /* This z-index should interleave this content + between grandchildA and grandchildB: */ + z-index: 15; + } + </style> +</head> +<body> + <!-- This flex container's first flex item has content that overflows + and overlap the second flex item. The z-index values are set such + that this content should interleave; grandchildC should + paint on top of grandchildA, but underneath grandchildB. --> + <div class="flexContainer" + ><div class="item1" + ><div class="grandchildA"></div + ><div class="grandchildB"></div + ></div + ><div class="item2" + ><div class="grandchildC"></div + ></div + ></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-horiz-001-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-horiz-001-ref.xhtml new file mode 100644 index 0000000000..e3f0276fda --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-horiz-001-ref.xhtml @@ -0,0 +1,145 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + margin-bottom: 2px; + line-height: 0; + } + div.flexbox > * { + display: inline-block; + } + div.a { + height: 10px; + width: 10px; + background: lightgreen; + } + div.b { + height: 10px; + width: 50px; + background: pink; + } + div.c { + height: 10px; + width: 100px; + background: orange; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox"> + <div class="a" style="margin-left: 190px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 140px"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 40px"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox"> + <div class="a" style="margin-left: 95px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 70px"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 20px"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b" style="margin-left: 140px"/> + </div> + <div class="flexbox"> + <div class="a" + /><div class="b" style="margin-left: 20px" + /><div class="c" style="margin-left: 20px"/> + </div> + + <!-- space-around --> + <div class="flexbox"> + <div class="a" style="margin-left: 95px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 35px" + /><div class="b" style="margin-left: 70px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: calc(40px / 6)" + /><div class="b" style="margin-left: calc(40px / 3)" + /><div class="c" style="margin-left: calc(40px / 3)"/> + </div> + + <!-- space-evenly --> + <div class="flexbox"> + <div class="a" style="margin-left: 95px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: calc(140px / 3)" + /><div class="b" style="margin-left: calc(140px / 3)"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 10px" + /><div class="b" style="margin-left: 10px" + /><div class="c" style="margin-left: 10px"/> + </div> + + <!-- left --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox"> + <div class="a" style="margin-left: 190px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 140px"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 40px"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-horiz-001a.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-horiz-001a.xhtml new file mode 100644 index 0000000000..494c35bb68 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-horiz-001a.xhtml @@ -0,0 +1,139 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with a series of horizontal flex containers, testing each + possible value of the 'justify-content' property. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing 'justify-content' in a horizontal 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/#justify-content-property"/> + <link rel="match" href="flexbox-justify-content-horiz-001-ref.xhtml"/> + <style> + div.flexbox { + width: 200px; + display: flex; + margin-bottom: 2px; + } + div.a { + height: 10px; + flex: 0 10px; + background: lightgreen; + } + div.b { + height: 10px; + flex: 0 50px; + background: pink; + } + div.c { + height: 10px; + flex: 0 100px; + background: orange; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="justify-content: center"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- left --> + <div class="flexbox" style="justify-content: left"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="justify-content: right"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-horiz-001b.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-horiz-001b.xhtml new file mode 100644 index 0000000000..468d5150fb --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-horiz-001b.xhtml @@ -0,0 +1,145 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with a series of horizontal flex containers, testing each + possible value of the 'justify-content' property. The flex containers' + widths are determined by their "min-width" property. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing 'justify-content' in a horizontal flex container with "min-width"</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/> + <link rel="match" href="flexbox-justify-content-horiz-001-ref.xhtml"/> + <style> + div.flexbox { + min-width: 200px; + display: flex; + margin-bottom: 2px; + + /* Use "float" to trigger intrinsic sizing, which in this case will + make us clamp to "min-width": */ + float: left; + clear: both; + } + div.a { + height: 10px; + flex: 0 10px; + background: lightgreen; + } + div.b { + height: 10px; + flex: 0 50px; + background: pink; + } + div.c { + height: 10px; + flex: 0 100px; + background: orange; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="justify-content: center"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- left --> + <div class="flexbox" style="justify-content: left"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="justify-content: right"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-horiz-002-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-horiz-002-ref.xhtml new file mode 100644 index 0000000000..0e43e6ff88 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-horiz-002-ref.xhtml @@ -0,0 +1,159 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + width: 200px; + line-height: 0; + margin-bottom: 4px; + border: 1px dotted black; + } + div.flexbox > * { + vertical-align: top; + display: inline-block; + } + div.a { + height: 10px; + width: 10px; + background: lightgreen; + border-style: solid; + border-color: purple; + border-top-width: 1px; + border-right-width: 2px; + border-bottom-width: 3px; + border-left-width: 4px; + padding: 2px; + } + div.b { + height: 10px; + width: 50px; + background: pink; + padding: 4px 3px 2px 1px; + margin: 2px 3px 4px 5px; + } + div.c { + height: 10px; + width: 100px; + background: orange; + margin: 3px; + border: 2px dashed teal; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox"> + <div class="a" style="margin-left: 180px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 118px"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 8px"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox"> + <div class="a" style="margin-left: 90px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 59px"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 4px"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div style="margin-left: 118px"><div class="b"/></div> + </div> + <div class="flexbox"> + <div class="a" + /><div style="margin-left: 4px"><div class="b"/></div + ><div style="margin-left: 4px"><div class="c"/></div> + </div> + + <!-- space-around --> + <div class="flexbox"> + <div class="a" style="margin-left: 90px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 29.5px" + /><div style="margin-left: 59px"><div class="b"/></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: calc(8px / 6)" + /><div style="margin-left: calc(8px / 3)"><div class="b"/></div + ><div style="margin-left: calc(8px / 3)"><div class="c"/></div> + </div> + + <!-- space-evenly --> + <div class="flexbox"> + <div class="a" style="margin-left: 90px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: calc(118px / 3)" + /><div style="margin-left: calc(118px / 3)"><div class="b"/></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 2px" + /><div style="margin-left: 2px"><div class="b"/></div + ><div style="margin-left: 2px"><div class="c"/></div> + </div> + + <!-- left --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox"> + <div class="a" style="margin-left: 180px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 118px"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 8px"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-horiz-002.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-horiz-002.xhtml new file mode 100644 index 0000000000..93d34ab798 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-horiz-002.xhtml @@ -0,0 +1,152 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with a series of flex containers testing each possible value of + the 'justify-content' property, with margin/border/padding on the + flex items. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing 'justify-content' in a horizontal flex container, with margins/border/padding on flex items</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/> + <link rel="match" href="flexbox-justify-content-horiz-002-ref.xhtml"/> + <style> + div.flexbox { + width: 200px; + display: flex; + margin-bottom: 4px; + border: 1px dotted black; + } + div.a { + height: 10px; + flex: 0 10px; + background: lightgreen; + border-style: solid; + border-color: purple; + border-top-width: 1px; + border-right-width: 2px; + border-bottom-width: 3px; + border-left-width: 4px; + padding: 2px; + } + div.b { + height: 10px; + flex: 0 50px; + background: pink; + padding: 4px 3px 2px 1px; + margin: 2px 3px 4px 5px; + } + div.c { + height: 10px; + flex: 0 100px; + background: orange; + margin: 3px; + border: 2px dashed teal; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="justify-content: center"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- left --> + <div class="flexbox" style="justify-content: left"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="justify-content: right"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-horiz-003-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-horiz-003-ref.xhtml new file mode 100644 index 0000000000..444ead8665 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-horiz-003-ref.xhtml @@ -0,0 +1,138 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + body { margin-left: 0px; } /* We'll apply margins w/ style attribute */ + div.flexbox { + margin-bottom: 2px; + line-height: 0; + } + div.flexbox > * { + display: inline-block; + } + div.a { + height: 20px; + width: 35px; + background: lightgreen; + } + div.b { + height: 20px; + width: 40px; + background: pink; + } + div.c { + height: 20px; + width: 45px; + background: orange; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="margin-left: 95px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 55px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 10px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="margin-left: 97.5px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 77.5px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 55px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- left --> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="margin-left: 95px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 55px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 10px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-horiz-003.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-horiz-003.xhtml new file mode 100644 index 0000000000..40c8fb5c02 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-horiz-003.xhtml @@ -0,0 +1,147 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with a variety of 'display: flex' examples testing each + possible value of the 'justify-content' property, and with each + individual flex item being wider than the flexbox itself (so that + there isn't any packing space available). + * For 'flex-start'/'space-between', we should overflow on the end + (right) side. + * For 'flex-end', we should overflow on the start (left) side. + * For 'center'/'space-around', we should overflow equally on both sides. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing 'justify-content' in a horizontal flex container, and its effects on flex items that overflow</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/> + <link rel="match" href="flexbox-justify-content-horiz-003-ref.xhtml"/> + <style> + body { margin-left: 100px; } /* So we can see left-overflowed stuff */ + div.flexbox { + width: 30px; + display: flex; + margin-bottom: 2px; + } + div.a { + height: 20px; + flex: 0 0 35px; + background: lightgreen; + } + div.b { + height: 20px; + flex: 0 0 40px; + background: pink; + } + div.c { + height: 20px; + flex: 0 0 45px; + background: orange; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="justify-content: center"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- left --> + <div class="flexbox" style="justify-content: left"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="justify-content: right"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-horiz-004-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-horiz-004-ref.xhtml new file mode 100644 index 0000000000..23a6d98904 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-horiz-004-ref.xhtml @@ -0,0 +1,150 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + body { margin-left: 0px; } /* We'll apply margins w/ style attribute */ + div.flexbox { + line-height: 0; + margin-bottom: 4px; + } + div.flexbox > * { + vertical-align: top; + display: inline-block; + } + div.a { + height: 10px; + width: 35px; + background: lightgreen; + border-style: solid; + border-color: purple; + border-top-width: 1px; + border-right-width: 2px; + border-bottom-width: 3px; + border-left-width: 4px; + padding: 2px; + } + div.b { + height: 10px; + width: 40px; + background: pink; + padding: 4px 3px 2px 1px; + margin: 2px 3px 4px 5px; + } + div.c { + height: 10px; + width: 45px; + background: orange; + margin: 3px; + border: 2px dashed teal; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="margin-left: 85px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 33px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: -22px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="margin-left: 92.5px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 66.5px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 39px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- left --> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 0px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-horiz-004.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-horiz-004.xhtml new file mode 100644 index 0000000000..8f46426e4f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-horiz-004.xhtml @@ -0,0 +1,158 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with a variety of 'display: flex' examples testing each + possible value of the 'justify-content' property, and with each + individual flex item being wider than the flexbox itself (so that + there isn't any packing space available). + * For 'flex-start'/'space-between', we should overflow on the end + (right) side. + * For 'flex-end', we should overflow on the start (left) side. + * For 'center'/'space-around', we should overflow equally on both sides. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing 'justify-content' in a horizontal flex container, and its effects on flex items that overflow, with margins/border/padding on flex items</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/> + <link rel="match" href="flexbox-justify-content-horiz-004-ref.xhtml"/> + <style> + body { margin-left: 100px; } /* So we can see left-overflowed stuff */ + div.flexbox { + width: 30px; + display: flex; + margin-bottom: 4px; + } + div.a { + height: 10px; + flex: 0 0 35px; + background: lightgreen; + border-style: solid; + border-color: purple; + border-top-width: 1px; + border-right-width: 2px; + border-bottom-width: 3px; + border-left-width: 4px; + padding: 2px; + } + div.b { + height: 10px; + flex: 0 0 40px; + background: pink; + padding: 4px 3px 2px 1px; + margin: 2px 3px 4px 5px; + } + div.c { + height: 10px; + flex: 0 0 45px; + background: orange; + margin: 3px; + border: 2px dashed teal; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="justify-content: center"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- left --> + <div class="flexbox" style="justify-content: left"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="justify-content: right"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-horiz-005-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-horiz-005-ref.xhtml new file mode 100644 index 0000000000..82f872d291 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-horiz-005-ref.xhtml @@ -0,0 +1,189 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + body { line-height: 0; } + + div.flexbox > * { + display: inline-block; + } + div.a { + height: 20px; + width: 10px; + background: lightgreen; + } + div.b { + height: 20px; + width: 50px; + background: pink; + } + div.c { + height: 20px; + width: 100px; + background: orange; + } + .centerParent { + text-align: center; + } + .center { + display: inline-block; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="float:right; clear:right;"> + <div class="a"/> + </div> + <div class="flexbox" style="float:right; clear:right;"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="float:right; clear:right;"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + <div style="clear:right;"></div> + + <!-- center --> + <div class="centerParent"> + <div class="flexbox center"> + <div class="a"/> + </div> + </div> + <div class="centerParent"> + <div class="flexbox center"> + <div class="a"/><div class="b"/> + </div> + </div> + <div class="centerParent"> + <div class="flexbox center"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + </div> + + <!-- space-between --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b" style="float: right"/> + </div> + <div class="flexbox"> + <div class="a" style="display:block; float: left"/> + <div class="c" style="float:right"/> + <!-- Use fixed-size margins to subtract space for "a" and "c", and then + use auto margins to center 'b' within the remaining space --> + <div style="display: block; margin-left: 10px; margin-right: 100px"> + <div class="b" style="margin: auto"/> + </div> + </div> + + <!-- space-around --> + <!-- Center "a" here just as we did above in the "center" case. --> + <div class="centerParent"> + <div class="flexbox center"> + <div class="a"/> + </div> + </div> + <!-- For the rest, we'll use a flex container with invisible flexible items + instead of packing space. That's simpler than trying to hack up + a width-independent reference case for "justify-content: space-around". + (There are other reftests to ensure that basic flex container + behavior is correct, so it's safe to rely on it here.) --> + <div class="flexbox" style="display: flex"> + <div style="flex: 0.5"/> + <div class="a"/> + <div style="flex: 1"/> + <div class="b"/> + <div style="flex: 0.5"/> + </div> + <div class="flexbox" style="display: flex"> + <div style="flex: 0.5"/> + <div class="a"/> + <div style="flex: 1"/> + <div class="b"/> + <div style="flex: 1"/> + <div class="c"/> + <div style="flex: 0.5"/> + </div> + + <!-- space-evenly --> + <!-- Center "a" here just as we did above in the "center" case. --> + <div class="centerParent"> + <div class="flexbox center"> + <div class="a"/> + </div> + </div> + <!-- As above with space-around, we'll use a flex container with invisible + flexible items instead of packing space. --> + <div class="flexbox" style="display: flex"> + <div style="flex: 1"/> + <div class="a"/> + <div style="flex: 1"/> + <div class="b"/> + <div style="flex: 1"/> + </div> + <div class="flexbox" style="display: flex"> + <div style="flex: 1"/> + <div class="a"/> + <div style="flex: 1"/> + <div class="b"/> + <div style="flex: 1"/> + <div class="c"/> + <div style="flex: 1"/> + </div> + + + <!-- left --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="float:right; clear:right;"> + <div class="a"/> + </div> + <div class="flexbox" style="float:right; clear:right;"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="float:right; clear:right;"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + <div style="clear:right;"></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-horiz-005.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-horiz-005.xhtml new file mode 100644 index 0000000000..53cba03fbe --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-horiz-005.xhtml @@ -0,0 +1,138 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase to exercise each possible value of the 'justify-content' + property, in an auto-sized horizontal flex container. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing 'justify-content' in an auto-sized horizontal 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/#justify-content-property"/> + <link rel="match" href="flexbox-justify-content-horiz-005-ref.xhtml"/> + <style> + div.flexbox { + display: flex; + } + div.a { + height: 20px; + flex: 0 10px; + background: lightgreen; + } + div.b { + height: 20px; + flex: 0 50px; + background: pink; + } + div.c { + height: 20px; + flex: 0 100px; + background: orange; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="justify-content: center"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + + <!-- left --> + <div class="flexbox" style="justify-content: left"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="justify-content: right"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-horiz-006-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-horiz-006-ref.xhtml new file mode 100644 index 0000000000..7723b5fa20 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-horiz-006-ref.xhtml @@ -0,0 +1,192 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/> + <style> + body { line-height: 0; } + + div.flexbox { + width: 200px; + margin-bottom: 2px; + direction: rtl; + } + div.flexbox > * { + display: inline-block; + } + div.a { + height: 20px; + width: 10px; + background: lightgreen; + } + div.b { + height: 20px; + width: 50px; + background: pink; + } + div.c { + height: 20px; + width: 100px; + background: orange; + } + .centerParent { + text-align: center; + } + .center { + display: inline-block; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="text-align: left"> + <div class="a"/> + </div> + <div class="flexbox" style="text-align: left;"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="text-align: left;"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="centerParent"> + <div class="flexbox"> + <div class="a"/> + </div> + </div> + <div class="centerParent"> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + </div> + <div class="centerParent"> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + </div> + + <!-- space-between --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b" style="float: left"/> + </div> + <div class="flexbox"> + <div class="a" style="display:block; float: right"/> + <div class="c" style="float:left"/> + <!-- Use fixed-size margins to subtract space for "a" and "c", and then + use auto margins to center 'b' within the remaining space --> + <div style="display: block; margin-right: 10px; margin-left: 100px"> + <div class="b" style="margin: auto"/> + </div> + </div> + + <!-- space-around --> + <!-- Center "a" here just as we did above in the "center" case. --> + <div class="centerParent"> + <div class="flexbox"> + <div class="a"/> + </div> + </div> + <!-- For the rest, we'll use a flex container with invisible flexible items + instead of packing space. That's simpler than trying to hack up + a width-independent reference case for "justify-content: space-around". + (There are other reftests to ensure that basic flex container + behavior is correct, so it's safe to rely on it here.) --> + <div class="flexbox" style="display: flex"> + <div style="flex: 0.5"/> + <div class="a"/> + <div style="flex: 1"/> + <div class="b"/> + <div style="flex: 0.5"/> + </div> + <div class="flexbox" style="display: flex"> + <div style="flex: 0.5"/> + <div class="a"/> + <div style="flex: 1"/> + <div class="b"/> + <div style="flex: 1"/> + <div class="c"/> + <div style="flex: 0.5"/> + </div> + + <!-- space-evenly --> + <!-- Center "a" here just as we did above in the "center" case. --> + <div class="centerParent"> + <div class="flexbox"> + <div class="a"/> + </div> + </div> + <!-- As above with space-around, we'll use a flex container with invisible + flexible items instead of packing space. --> + <div class="flexbox" style="display: flex"> + <div style="flex: 1"/> + <div class="a"/> + <div style="flex: 1"/> + <div class="b"/> + <div style="flex: 1"/> + </div> + <div class="flexbox" style="display: flex"> + <div style="flex: 1"/> + <div class="a"/> + <div style="flex: 1"/> + <div class="b"/> + <div style="flex: 1"/> + <div class="c"/> + <div style="flex: 1"/> + </div> + + + <!-- left --> + <div class="flexbox" style="text-align:left"> + <div class="a"/> + </div> + <div class="flexbox" style="text-align:left"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="text-align:left"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-horiz-006.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-horiz-006.xhtml new file mode 100644 index 0000000000..dcbe6184c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-horiz-006.xhtml @@ -0,0 +1,140 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase to exercise each possible value of the 'justify-content' + property, in an auto-sized horizontal flex container. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing 'justify-content' in an auto-sized reversed horizontal flex container</title> + <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/> + <link rel="match" href="flexbox-justify-content-horiz-006-ref.xhtml"/> + <style> + div.flexbox { + display: flex; + flex-direction: row-reverse; + width: 200px; + margin-bottom: 2px; + } + div.a { + height: 20px; + flex: 0 10px; + background: lightgreen; + } + div.b { + height: 20px; + flex: 0 50px; + background: pink; + } + div.c { + height: 20px; + flex: 0 100px; + background: orange; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="justify-content: center"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + + <!-- left --> + <div class="flexbox" style="justify-content: left"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="justify-content: right"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-vert-001-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-vert-001-ref.xhtml new file mode 100644 index 0000000000..20f1c5df34 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-vert-001-ref.xhtml @@ -0,0 +1,143 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + height: 200px; + margin-right: 2px; + float: left; + } + div.a { + width: 20px; + height: 10px; + background: lightgreen; + } + div.b { + width: 20px; + height: 50px; + background: pink; + } + div.c { + width: 20px; + height: 100px; + background: orange; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox"> + <div class="a" style="margin-top: 190px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 140px"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 40px"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox"> + <div class="a" style="margin-top: 95px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 70px"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 20px"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b" style="margin-top: 140px"/> + </div> + <div class="flexbox"> + <div class="a" + /><div class="b" style="margin-top: 20px" + /><div class="c" style="margin-top: 20px"/> + </div> + + <!-- space-around --> + <div class="flexbox"> + <div class="a" style="margin-top: 95px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 35px" + /><div class="b" style="margin-top: 70px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: calc(40px / 6)" + /><div class="b" style="margin-top: calc(40px / 3)" + /><div class="c" style="margin-top: calc(40px / 3)"/> + </div> + + <!-- space-evenly --> + <div class="flexbox"> + <div class="a" style="margin-top: 95px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: calc(140px / 3)" + /><div class="b" style="margin-top: calc(140px / 3)"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 10px" + /><div class="b" style="margin-top: 10px" + /><div class="c" style="margin-top: 10px"/> + </div> + + <!-- left --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-vert-001a.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-vert-001a.xhtml new file mode 100644 index 0000000000..d4b32b3914 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-vert-001a.xhtml @@ -0,0 +1,141 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with a series of vertical flex containers, testing each + possible value of the 'justify-content' property. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing 'justify-content' in a vertical 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/#justify-content-property"/> + <link rel="match" href="flexbox-justify-content-vert-001-ref.xhtml"/> + <style> + div.flexbox { + height: 200px; + display: flex; + flex-direction: column; + margin-right: 2px; + float: left; + } + div.a { + width: 20px; + flex: 0 10px; + background: lightgreen; + } + div.b { + width: 20px; + flex: 0 50px; + background: pink; + } + div.c { + width: 20px; + flex: 0 100px; + background: orange; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="justify-content: center"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- left --> + <div class="flexbox" style="justify-content: left"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="justify-content: right"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-vert-001b.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-vert-001b.xhtml new file mode 100644 index 0000000000..0ce154e242 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-vert-001b.xhtml @@ -0,0 +1,142 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with a series of vertical flex containers, testing each + possible value of the 'justify-content' property. The flex containers' + heights are determined by their "min-height" property. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing 'justify-content' in a vertical flex container with "min-height"</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/> + <link rel="match" href="flexbox-justify-content-vert-001-ref.xhtml"/> + <style> + div.flexbox { + min-height: 200px; + display: flex; + flex-direction: column; + margin-right: 2px; + float: left; + } + div.a { + width: 20px; + flex: 0 10px; + background: lightgreen; + } + div.b { + width: 20px; + flex: 0 50px; + background: pink; + } + div.c { + width: 20px; + flex: 0 100px; + background: orange; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="justify-content: center"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- left --> + <div class="flexbox" style="justify-content: left"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="justify-content: right"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-vert-002-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-vert-002-ref.xhtml new file mode 100644 index 0000000000..d0ca310120 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-vert-002-ref.xhtml @@ -0,0 +1,156 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + height: 200px; + margin-right: 2px; + border: 1px dotted black; + float: left; + } + div.a { + width: 10px; + height: 10px; + background: lightgreen; + border-style: solid; + border-color: purple; + border-top-width: 4px; + border-right-width: 3px; + border-bottom-width: 2px; + border-left-width: 1px; + padding: 2px; + } + div.b { + width: 10px; + height: 50px; + background: pink; + padding: 1px 2px 3px 4px; + margin: 5px 4px 3px 2px; + } + div.c { + width: 10px; + height: 100px; + background: orange; + margin: 3px; + margin-top: 6px; /* Increased to counteract for collapsing */ + border: 2px dashed teal; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox"> + <div class="a" style="margin-top: 180px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 118px"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 8px"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox"> + <div class="a" style="margin-top: 90px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 59px"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 4px"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div style="margin-top: 123px"><div class="b"/></div> + </div> + <div class="flexbox"> + <div class="a" + /><div style="margin-top: 9px"><div class="b"/></div + ><div style="margin-top: 10px"><div class="c"/></div> + </div> + + <!-- space-around --> + <div class="flexbox"> + <div class="a" style="margin-top: 90px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 29.5px" + /><div style="margin-top: 64px"><div class="b"/></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: calc(8px / 6)" + /><div style="margin-top: calc(5px + 8px / 3)"><div class="b"/></div + ><div style="margin-top: calc(6px + 8px / 3)"><div class="c"/></div> + </div> + + <!-- space-evenly --> + <div class="flexbox"> + <div class="a" style="margin-top: 90px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: calc(118px / 3)" + /><div style="margin-top: calc(5px + 118px / 3)"><div class="b"/></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 2px" + /><div style="margin-top: 7px"><div class="b"/></div + ><div style="margin-top: 8px"><div class="c"/></div> + </div> + + <!-- left --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-vert-002.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-vert-002.xhtml new file mode 100644 index 0000000000..21683a6cc7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-vert-002.xhtml @@ -0,0 +1,154 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with a series of flex containers testing each possible value of + the 'justify-content' property, with margin/border/padding on the + flex items. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing 'justify-content' in a vertical flex container, with margins/border/padding on flex items</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/> + <link rel="match" href="flexbox-justify-content-vert-002-ref.xhtml"/> + <style> + div.flexbox { + height: 200px; + display: flex; + flex-direction: column; + margin-right: 2px; + float: left; + border: 1px dotted black; + } + div.a { + width: 10px; + flex: 0 10px; + background: lightgreen; + border-style: solid; + border-color: purple; + border-top-width: 4px; + border-right-width: 3px; + border-bottom-width: 2px; + border-left-width: 1px; + padding: 2px; + } + div.b { + width: 10px; + flex: 0 50px; + background: pink; + padding: 1px 2px 3px 4px; + margin: 5px 4px 3px 2px; + } + div.c { + width: 10px; + flex: 0 100px; + background: orange; + margin: 3px; + border: 2px dashed teal; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="justify-content: center"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- left --> + <div class="flexbox" style="justify-content: left"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="justify-content: right"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-vert-003-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-vert-003-ref.xhtml new file mode 100644 index 0000000000..ee3714e08b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-vert-003-ref.xhtml @@ -0,0 +1,136 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + body { margin-top: 0px; } /* We'll apply margins w/ style attribute */ + div.flexbox { + height: 200px; + margin-right: 2px; + float: left; + } + div.a { + width: 10px; + height: 35px; + background: lightgreen; + } + div.b { + width: 10px; + height: 40px; + background: pink; + } + div.c { + width: 10px; + height: 45px; + background: orange; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="margin-top: 95px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 55px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 10px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="margin-top: 97.5px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 77.5px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 55px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- left --> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-vert-003.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-vert-003.xhtml new file mode 100644 index 0000000000..8b99455e71 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-vert-003.xhtml @@ -0,0 +1,150 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with a series of vertical flex containers testing each possible + value of the 'justify-content' property, and with each individual + flex item being larger than the flexbox itself (so that there isn't any + packing space available). + + * For 'flex-start'/'space-between', we should overflow on the end + (bottom) side. + * For 'flex-end', we should overflow on the start (top) side. + * For 'center'/'space-around', we should overflow equally on both sides. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing 'justify-content' in a vertical flex container, and its effects on flex items that overflow</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/> + <link rel="match" href="flexbox-justify-content-vert-003-ref.xhtml"/> + <style> + body { margin-top: 100px; } /* So we can see top-overflowed stuff */ + div.flexbox { + height: 30px; + display: flex; + flex-direction: column; + margin-right: 2px; + float: left; + } + div.a { + width: 10px; + flex: 0 0 35px; + background: lightgreen; + } + div.b { + width: 10px; + flex: 0 0 40px; + background: pink; + } + div.c { + width: 10px; + flex: 0 0 45px; + background: orange; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="justify-content: center"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- left --> + <div class="flexbox" style="justify-content: left"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="justify-content: right"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-vert-004-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-vert-004-ref.xhtml new file mode 100644 index 0000000000..7ef2c3ac11 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-vert-004-ref.xhtml @@ -0,0 +1,147 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + body { margin-top: 0px; } /* We'll apply margins w/ style attribute */ + div.flexbox { + margin-right: 4px; + float: left; + } + div.a { + width: 10px; + height: 35px; + background: lightgreen; + border-style: solid; + border-color: purple; + border-top-width: 4px; + border-right-width: 3px; + border-bottom-width: 2px; + border-left-width: 1px; + padding: 2px; + } + div.b { + width: 10px; + height: 40px; + background: pink; + padding: 1px 2px 3px 4px; + margin: 5px 4px 3px 2px; + } + div.c { + width: 10px; + height: 45px; + background: orange; + margin: 3px; + margin-top: 6px; /* Increased to counteract for collapsing */ + border: 2px dashed teal; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="margin-top: 85px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 33px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: -22px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="margin-top: 92.5px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 66.5px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 39px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- left --> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-vert-004.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-vert-004.xhtml new file mode 100644 index 0000000000..770ba7ba44 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-vert-004.xhtml @@ -0,0 +1,161 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with a series of vertical flex containers, testing each possible + value of the 'justify-content' property, and with each individual + flex item being larger than the flexbox itself (so that there isn't any + packing space available). Also, we've got margin/border/padding on the + flex items. + * For 'flex-start'/'space-between', we should overflow on the end + (bottom) side. + * For 'flex-end', we should overflow on the start (top) side. + * For 'center'/'space-around', we should overflow equally on both sides. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing 'justify-content' in a vertical flex container, and its effects on flex items that overflow, with margins/border/padding on flex items</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/> + <link rel="match" href="flexbox-justify-content-vert-004-ref.xhtml"/> + <style> + body { margin-top: 100px; } /* So we can see top-overflowed stuff */ + div.flexbox { + height: 30px; + display: flex; + flex-direction: column; + margin-right: 4px; + float: left; + } + div.a { + width: 10px; + flex: 0 0 35px; + background: lightgreen; + border-style: solid; + border-color: purple; + border-top-width: 4px; + border-right-width: 3px; + border-bottom-width: 2px; + border-left-width: 1px; + padding: 2px; + } + div.b { + width: 10px; + flex: 0 0 40px; + background: pink; + padding: 1px 2px 3px 4px; + margin: 5px 4px 3px 2px; + } + div.c { + width: 10px; + flex: 0 0 45px; + background: orange; + margin: 3px; + border: 2px dashed teal; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="justify-content: center"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- left --> + <div class="flexbox" style="justify-content: left"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="justify-content: right"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-vert-005-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-vert-005-ref.xhtml new file mode 100644 index 0000000000..ebc97819a5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-vert-005-ref.xhtml @@ -0,0 +1,135 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + margin-right: 2px; + float: left; + border: 1px dotted black; + } + div.a { + width: 20px; + height: 10px; + background: lightgreen; + } + div.b { + width: 20px; + height: 50px; + background: pink; + } + div.c { + width: 20px; + height: 100px; + background: orange; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- left --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-vert-005.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-vert-005.xhtml new file mode 100644 index 0000000000..bb99dd09b4 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-vert-005.xhtml @@ -0,0 +1,144 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase to exercise each possible value of the 'justify-content' + property, in an auto-sized vertical flex container. The flex container + should shrink-wrap its contents' heights, leaving no packing space + available. So, the "justify-content" values should have no effect + in this testcase. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing 'justify-content' in an auto-sized vertical 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/#justify-content-property"/> + <link rel="match" href="flexbox-justify-content-vert-005-ref.xhtml"/> + <style> + div.flexbox { + display: flex; + flex-direction: column; + margin-right: 2px; + float: left; + border: 1px dotted black; + } + div.a { + width: 20px; + flex: 0 10px; + background: lightgreen; + } + div.b { + width: 20px; + flex: 0 50px; + background: pink; + } + div.c { + width: 20px; + flex: 0 100px; + background: orange; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="justify-content: center"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- left --> + <div class="flexbox" style="justify-content: left"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="justify-content: right"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-vert-006-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-vert-006-ref.xhtml new file mode 100644 index 0000000000..b1a5bf2a98 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-vert-006-ref.xhtml @@ -0,0 +1,143 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/> + <style> + div.flexbox { + height: 200px; + margin-right: 2px; + float: left; + } + div.a { + width: 20px; + height: 10px; + background: lightgreen; + } + div.b { + width: 20px; + height: 50px; + background: pink; + } + div.c { + width: 20px; + height: 100px; + background: orange; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a" style="margin-top:190px"/> + </div> + <div class="flexbox"> + <div class="b" style="margin-top:140px"/><div class="a"></div> + </div> + <div class="flexbox"> + <div class="c" style="margin-top:40px"/><div class="b"/><div class="a"/> + </div> + + <!-- flex-start --> + <div class="flexbox"> + <div class="a" style="margin-top:190px"/> + </div> + <div class="flexbox"> + <div class="b" style="margin-top:140px"/><div class="a"></div> + </div> + <div class="flexbox"> + <div class="c" style="margin-top:40px"/><div class="b"/><div class="a"/> + </div> + + <!-- flex-end --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="b"/><div class="a"/> + </div> + <div class="flexbox"> + <div class="c"/><div class="b"/><div class="a"/> + </div> + + <!-- center --> + <div class="flexbox"> + <div class="a" style="margin-top: 95px"/> + </div> + <div class="flexbox"> + <div class="b" style="margin-top: 70px"/><div class="a"/> + </div> + <div class="flexbox"> + <div class="c" style="margin-top: 20px"/><div class="b"/><div class="a"/> + </div> + + <!-- space-between --> + <div class="flexbox"> + <div class="a" style="margin-top:190px"/> + </div> + <div class="flexbox"> + <div class="b"/><div class="a" style="margin-top: 140px"/> + </div> + <div class="flexbox"> + <div class="c" + /><div class="b" style="margin-top: 20px" + /><div class="a" style="margin-top: 20px"/> + </div> + + <!-- space-around --> + <div class="flexbox"> + <div class="a" style="margin-top: 95px"/> + </div> + <div class="flexbox"> + <div class="b" style="margin-top: 35px" + /><div class="a" style="margin-top: 70px"/> + </div> + <div class="flexbox"> + <div class="c" style="margin-top: calc(40px / 6)" + /><div class="b" style="margin-top: calc(40px / 3)" + /><div class="a" style="margin-top: calc(40px / 3)"/> + </div> + + <!-- space-evenly --> + <div class="flexbox"> + <div class="a" style="margin-top: 95px"/> + </div> + <div class="flexbox"> + <div class="b" style="margin-top: calc(140px / 3)" + /><div class="a" style="margin-top: calc(140px / 3)"/> + </div> + <div class="flexbox"> + <div class="c" style="margin-top: 10px" + /><div class="b" style="margin-top: 10px" + /><div class="a" style="margin-top: 10px"/> + </div> + + <!-- left --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="b"/><div class="a"/> + </div> + <div class="flexbox"> + <div class="c"/><div class="b"/><div class="a"/> + </div> + + <!-- right --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="b"/><div class="a"/> + </div> + <div class="flexbox"> + <div class="c"/><div class="b"/><div class="a"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-vert-006.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-vert-006.xhtml new file mode 100644 index 0000000000..38a7f91d78 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-vert-006.xhtml @@ -0,0 +1,141 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with a series of vertical flex containers, testing each + possible value of the 'justify-content' property. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing 'justify-content' in a vertical flex container</title> + <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/> + <link rel="match" href="flexbox-justify-content-vert-006-ref.xhtml"/> + <style> + div.flexbox { + height: 200px; + display: flex; + flex-direction: column-reverse; + margin-right: 2px; + float: left; + } + div.a { + width: 20px; + flex: 0 10px; + background: lightgreen; + } + div.b { + width: 20px; + flex: 0 50px; + background: pink; + } + div.c { + width: 20px; + flex: 0 100px; + background: orange; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="justify-content: center"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- left --> + <div class="flexbox" style="justify-content: left"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="justify-content: right"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-wmvert-001-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-wmvert-001-ref.xhtml new file mode 100644 index 0000000000..0b99be2f25 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-wmvert-001-ref.xhtml @@ -0,0 +1,143 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/> + <style> + div.flexbox { + height: 200px; + margin-right: 2px; + float: left; + } + div.a { + width: 20px; + height: 10px; + background: lightgreen; + } + div.b { + width: 20px; + height: 50px; + background: pink; + } + div.c { + width: 20px; + height: 100px; + background: orange; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a" style="margin-top:190px"/> + </div> + <div class="flexbox"> + <div class="b" style="margin-top:140px"/><div class="a"></div> + </div> + <div class="flexbox"> + <div class="c" style="margin-top:40px"/><div class="b"/><div class="a"/> + </div> + + <!-- flex-start --> + <div class="flexbox"> + <div class="a" style="margin-top:190px"/> + </div> + <div class="flexbox"> + <div class="b" style="margin-top:140px"/><div class="a"></div> + </div> + <div class="flexbox"> + <div class="c" style="margin-top:40px"/><div class="b"/><div class="a"/> + </div> + + <!-- flex-end --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="b"/><div class="a"/> + </div> + <div class="flexbox"> + <div class="c"/><div class="b"/><div class="a"/> + </div> + + <!-- center --> + <div class="flexbox"> + <div class="a" style="margin-top: 95px"/> + </div> + <div class="flexbox"> + <div class="b" style="margin-top: 70px"/><div class="a"/> + </div> + <div class="flexbox"> + <div class="c" style="margin-top: 20px"/><div class="b"/><div class="a"/> + </div> + + <!-- space-between --> + <div class="flexbox"> + <div class="a" style="margin-top:190px"/> + </div> + <div class="flexbox"> + <div class="b"/><div class="a" style="margin-top: 140px"/> + </div> + <div class="flexbox"> + <div class="c" + /><div class="b" style="margin-top: 20px" + /><div class="a" style="margin-top: 20px"/> + </div> + + <!-- space-around --> + <div class="flexbox"> + <div class="a" style="margin-top: 95px"/> + </div> + <div class="flexbox"> + <div class="b" style="margin-top: 35px" + /><div class="a" style="margin-top: 70px"/> + </div> + <div class="flexbox"> + <div class="c" style="margin-top: calc(40px / 6)" + /><div class="b" style="margin-top: calc(40px / 3)" + /><div class="a" style="margin-top: calc(40px / 3)"/> + </div> + + <!-- space-evenly --> + <div class="flexbox"> + <div class="a" style="margin-top: 95px"/> + </div> + <div class="flexbox"> + <div class="b" style="margin-top: calc(140px / 3)" + /><div class="a" style="margin-top: calc(140px / 3)"/> + </div> + <div class="flexbox"> + <div class="c" style="margin-top: 10px" + /><div class="b" style="margin-top: 10px" + /><div class="a" style="margin-top: 10px"/> + </div> + + <!-- left --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="b"/><div class="a"/> + </div> + <div class="flexbox"> + <div class="c"/><div class="b"/><div class="a"/> + </div> + + <!-- right --> + <div class="flexbox"> + <div class="a" style="margin-top: 190px"/> + </div> + <div class="flexbox"> + <div class="b" style="margin-top: 140px"/><div class="a"/> + </div> + <div class="flexbox"> + <div class="c" style="margin-top: 40px"/><div class="b"/><div class="a"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-wmvert-001.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-wmvert-001.xhtml new file mode 100644 index 0000000000..f676c6c1cd --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-wmvert-001.xhtml @@ -0,0 +1,142 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with a series of vertical flex containers, testing each + possible value of the 'justify-content' property. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing 'justify-content' in a vertical writing mode flex container</title> + <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/> + <link rel="match" href="flexbox-justify-content-wmvert-001-ref.xhtml"/> + <style> + div.flexbox { + height: 200px; + display: flex; + flex-direction: row-reverse; + margin-right: 2px; + float: left; + writing-mode: vertical-lr; + } + div.a { + width: 20px; + flex: 0 10px; + background: lightgreen; + } + div.b { + width: 20px; + flex: 0 50px; + background: pink; + } + div.c { + width: 20px; + flex: 0 100px; + background: orange; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-start"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: flex-end"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="justify-content: center"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: center"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-between"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-around"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-evenly --> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: space-evenly"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- left --> + <div class="flexbox" style="justify-content: left"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: left"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- right --> + <div class="flexbox" style="justify-content: right"> + <div class="a"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="justify-content: right"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-wmvert-002.html b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-wmvert-002.html new file mode 100644 index 0000000000..2aaee48596 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-wmvert-002.html @@ -0,0 +1,43 @@ +<!doctype html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#justify-content-property" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#positional-values" /> +<meta name="assert" content="Flexbox honors physical justify-content values when column flexboxes have main size in the physical left <-> right axis."> + +<style> +.flexbox { + display: flex; + flex-direction: column; + width: 100px; + background: orange; + border: 1px solid; + margin-bottom: 20px; + position: relative; +} + +.flexitem { + width: 50px; + height: 50px; + background: blue; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.flexitem')"> + +Both should be Blue to the left of Orange. +<div class=flexbox style="justify-content: left; writing-mode: vertical-rl;"> + <div class=flexitem data-offset-x=0></div> +</div> +<div class=flexbox style="justify-content: left; writing-mode: vertical-lr;"> + <div class=flexitem data-offset-x=0></div> +</div> + +Both should be Orange to the left of Blue. +<div class=flexbox style="justify-content: right; writing-mode: vertical-rl;"> + <div class=flexitem data-offset-x=50></div> +</div> +<div class=flexbox style="justify-content: right; writing-mode: vertical-lr;"> + <div class=flexitem data-offset-x=50></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-wmvert-003.html b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-wmvert-003.html new file mode 100644 index 0000000000..5e5036c581 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-justify-content-wmvert-003.html @@ -0,0 +1,43 @@ +<!doctype html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#justify-content-property" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#positional-values" /> +<meta name="assert" content="Flexbox honors justify-content values when vertical row flexboxes have main axis parallel to line-left <-> line-right axis."> + +<style> +.flexbox { + display: flex; + height: 100px; + background: orange; + border: 1px solid; + margin-bottom: 20px; + position: relative; +} + +.flexitem { + width: 50px; + height: 50px; + background: blue; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.flexitem')"> + +Both should be Blue on top of Orange. +<div class=flexbox style="justify-content: left; writing-mode: vertical-rl;"> + <div class=flexitem data-offset-y=0></div> +</div> +<div class=flexbox style="justify-content: left; writing-mode: vertical-lr;"> + <div class=flexitem data-offset-y=0></div> +</div> + +Both should be Orange on top of Blue. +<div class=flexbox style="justify-content: right; writing-mode: vertical-rl;"> + <div class=flexitem data-offset-y=50></div> +</div> +<div class=flexbox style="justify-content: right; writing-mode: vertical-lr;"> + <div class=flexitem data-offset-y=50></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-lines-must-be-stretched-by-default.html b/testing/web-platform/tests/css/css-flexbox/flexbox-lines-must-be-stretched-by-default.html new file mode 100644 index 0000000000..f705a3882b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-lines-must-be-stretched-by-default.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<title>CSS Flexbox: align-content initial value.</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#align-content-property"> +<meta name="assert" content="This test ensures that a flexbox container's align-content value default to 'stretch'."/> +<style> +.flex-container { + display: flex; + height: 100px; + width: 200px; + background-color: pink; + flex-wrap: wrap; +} +.flex-item1 { + width: 100%; + background-color: blue; + border: 1px solid; + border-color: red; +} +.flex-item2 { + width: 100%; + background-color: blue; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.flex-container')"> + <div id="flexContainer" class="flex-container"> + <div id="flexItem1" class="flex-item1" data-expected-height=51></div> + <div id="flexItem2" class="flex-item2" data-expected-height=49></div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-margin-auto-horiz-001-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-margin-auto-horiz-001-ref.xhtml new file mode 100644 index 0000000000..1321e5a387 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-margin-auto-horiz-001-ref.xhtml @@ -0,0 +1,87 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { height: 20px; } + div.flexbox { + width: 200px; + background: lightgray; + margin-bottom: 2px; + } + div.a { + width: 20px; + background: green; + display: inline-block; + } + div.b { + width: 20px; + background: pink; + display: inline-block; + } + div.c { + width: 20px; + background: purple; + display: inline-block; + } + + <!-- These classes allow us to conveniently/concisely specify margin + values below, for exact positioning of the items on each reference + line. ("l" = "margin-_l_eft", and the number = number of pixels) --> + div.l180 { margin-left: 180px } + div.l90 { margin-left: 90px } + div.l80 { margin-left: 80px } + div.l70 { margin-left: 70px } + div.l53 { margin-left: calc(160px / 3) } <!-- == 53.33333px --> + div.l35 { margin-left: 35px } + </style> + </head> + <body> + <!-- just one item --> + <div class="flexbox"> + <div class="a l180"/> + </div> + <div class="flexbox"> + <div class="b l90"/> + </div> + <div class="flexbox"> + <div class="c"/> + </div> + + <!-- Two items --> + <div class="flexbox"> + <div class="a l53"/><div class="b l53"/> + </div> + <div class="flexbox"> + <div class="a l80"/><div class="c"/> + </div> + <div class="flexbox"> + <div class="b l53"/><div class="c l53"/> + </div> + + <!-- Three items --> + <div class="flexbox"> + <div class="a l35"/><div class="b l35"/><div class="c l35"/> + </div> + <div class="flexbox"> + <div class="a l35"/><div class="c"/><div class="b l70"/> + </div> + <div class="flexbox"> + <div class="b l35"/><div class="a l70"/><div class="c"/> + </div> + <div class="flexbox"> + <div class="b l35"/><div class="c l35"/><div class="a l70"/> + </div> + <div class="flexbox"> + <div class="c"/><div class="a l70"/><div class="b l35"/> + </div> + <div class="flexbox"> + <div class="c"/><div class="b l70"/><div class="a l70"/> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-margin-auto-horiz-001.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-margin-auto-horiz-001.xhtml new file mode 100644 index 0000000000..76d7a88312 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-margin-auto-horiz-001.xhtml @@ -0,0 +1,83 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with a variety of 'display: flex' examples + with margin-left and/or margin-right set to 'auto'. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing horizontal auto margins on flex items in a horizontal 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/#auto-margins"/> + <link rel="match" href="flexbox-margin-auto-horiz-001-ref.xhtml"/> + <style> + div.flexbox { + width: 200px; + height: 20px; + background: lightgray; + display: flex; + margin-bottom: 2px; + } + div.a { + width: 20px; + background: green; + margin-left: auto; + } + div.b { + width: 20px; + background: pink; + margin-left: auto; + margin-right: auto; + } + div.c { + width: 20px; + background: purple; + margin-right: auto; + } + </style> + </head> + <body> + <!-- just one item --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="b"/> + </div> + <div class="flexbox"> + <div class="c"/> + </div> + + <!-- Two items --> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="c"/> + </div> + <div class="flexbox"> + <div class="b"/><div class="c"/> + </div> + + <!-- Three items --> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="c"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="b"/><div class="a"/><div class="c"/> + </div> + <div class="flexbox"> + <div class="b"/><div class="c"/><div class="a"/> + </div> + <div class="flexbox"> + <div class="c"/><div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="c"/><div class="b"/><div class="a"/> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-margin-auto-horiz-002-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-margin-auto-horiz-002-ref.xhtml new file mode 100644 index 0000000000..b310ab97cc --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-margin-auto-horiz-002-ref.xhtml @@ -0,0 +1,61 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with a variety of 'display: flex' examples + with margin-top and/or margin-bottom set to 'auto' on flex items. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + border: 2px dotted black; + display: flex; + margin-bottom: 2px; + width: 100px; + } + div.fixedSize { + width: 20px; + height: 20px; + } + div.gray { background: gray; } + div.green { background: green; } + div.pink { background: pink; } + div.blue { background: blue; } + </style> + </head> + <body> + + <!-- fixed-height flexbox, with items that have auto margins --> + <div class="flexbox" style="height: 100px"> + <div class="fixedSize green" style="margin-top: 80px"/> + <div class="fixedSize pink"/> + <div class="fixedSize blue" style="margin-top: 40px"/> + </div> + <!-- fixed-height flexbox, with items that have auto & fixed margins --> + <div class="flexbox" style="height: 100px"> + <div class="fixedSize green" style="margin-top: 70px"/> + <div class="fixedSize pink" style="margin-top: 10px"/> + </div> + + <!-- height-shrinkwrapping flexbox, sized by item w/ fixed height & margins, + with other items that have auto margins --> + <div class="flexbox" style="height: 50px"> + <div class="fixedSize green" style="margin-top: 30px"/> + <div class="fixedSize pink"/> + <div class="fixedSize blue" style="margin-top: 15px"/> + <div class="gray" style="width: 10px; height: 30px; margin-top: 10px"/> + </div> + + <!-- height-shrinkwrapping flexbox, sized by item w/ fixed height & margins, + with other items that have auto & fixed margins --> + <div class="flexbox" style="height: 50px"> + <div class="fixedSize green" style="margin-top: 20px"/> + <div class="fixedSize pink" style="margin-top: 10px"/> + <div class="gray" style="width: 10px; height: 30px; margin-top: 10px"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-margin-auto-horiz-002.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-margin-auto-horiz-002.xhtml new file mode 100644 index 0000000000..a31bc7d6f7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-margin-auto-horiz-002.xhtml @@ -0,0 +1,68 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with a variety of 'display: flex' examples + with margin-top and/or margin-bottom set to 'auto' on flex items. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing vertical auto margins on flex items in a horizontal 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/#auto-margins"/> + <link rel="match" href="flexbox-margin-auto-horiz-002-ref.xhtml"/> + <style> + div.flexbox { + border: 2px dotted black; + display: flex; + margin-bottom: 2px; + width: 100px; + } + div.fixedSize { + width: 20px; + height: 20px; + } + div.gray { background: gray; } + div.green { background: green; } + div.pink { background: pink; } + div.blue { background: blue; } + + div.autoTop { margin-top: auto; } + div.autoBottom { margin-bottom: auto; } + div.fixedTop { margin-top: 10px; } + div.fixedBottom { margin-bottom: 10px; } + </style> + </head> + <body> + + <!-- fixed-height flexbox, with items that have auto margins --> + <div class="flexbox" style="height: 100px"> + <div class="fixedSize green autoTop"/> + <div class="fixedSize pink autoBottom"/> + <div class="fixedSize blue autoTop autoBottom"/> + </div> + <!-- fixed-height flexbox, with items that have auto & fixed margins --> + <div class="flexbox" style="height: 100px"> + <div class="fixedSize green autoTop fixedBottom"/> + <div class="fixedSize pink autoBottom fixedTop"/> + </div> + + <!-- height-shrinkwrapping flexbox, sized by item w/ fixed height & margins, + with other items that have auto margins --> + <div class="flexbox"> + <div class="fixedSize green autoTop"/> + <div class="fixedSize pink autoBottom"/> + <div class="fixedSize blue autoTop autoBottom"/> + <div class="fixedTop fixedBottom gray" style="width: 10px; height: 30px"/> + </div> + + <!-- height-shrinkwrapping flexbox, sized by item w/ fixed height & margins, + with other items that have auto & fixed margins --> + <div class="flexbox"> + <div class="fixedSize green autoTop fixedBottom"/> + <div class="fixedSize pink autoBottom fixedTop"/> + <div class="fixedTop fixedBottom gray" style="width: 10px; height: 30px"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-001-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-001-ref.xhtml new file mode 100644 index 0000000000..d30386618e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-001-ref.xhtml @@ -0,0 +1,71 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { height: 100px; border: 0; } + div.flexbox { + width: 200px; + } + div.a { + display: inline-block; + background: lightgreen; + border-style: dotted; + border-left-width: 2px; + border-right-width: 4px; + } + div.b { + display: inline-block; + background: yellow; + border-style: dashed; + border-left-width: 7px; + border-right-width: 3px; + } + div.c { + display: inline-block; + background: orange; + } + div.flexNone { + display: inline-block; + background: pink; + } + div.flexBasis { + display: inline-block; + background: gray; + } + div.spacer { + height: 15px; + background: purple; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="a" style="width: 74px"/><div class="b" style="width: 110px"/> + </div> + <div class="flexbox"> + <div class="a" style="width: 56.5px"/><div class="c" style="width: 137.5px"/> + </div> + <div class="flexbox"> + <div class="a" style="width: 179px"/><div class="flexNone"> + <div class="spacer" style="width: 15px"/></div> + </div> + <div class="flexbox"> + <div class="b" style="width: 66px"/><div class="c" style="width: 124px"/> + </div> + <div class="flexbox"> + <div class="b" style="width: 160px"/><div class="flexNone"> + <div class="spacer" style="width: 30px"/></div> + </div> + <div class="flexbox"> + <div class="a" style="width: 39px"/><div class="b" style="width: 40px" + /><div class="flexBasis" style="width: 20px"/><div class="c" style="width: 85px"/> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-001-reverse-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-001-reverse-ref.xhtml new file mode 100644 index 0000000000..ca4ef80ba3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-001-reverse-ref.xhtml @@ -0,0 +1,74 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { height: 100px; border: 0; } + div.flexbox { + width: 200px; + } + div.a { + display: inline-block; + background: lightgreen; + border-style: dotted; + border-left-width: 2px; + border-right-width: 4px; + } + div.b { + display: inline-block; + background: yellow; + border-style: dashed; + border-left-width: 7px; + border-right-width: 3px; + } + div.c { + display: inline-block; + background: orange; + } + div.flexNone { + display: inline-block; + background: pink; + } + div.flexBasis { + display: inline-block; + background: gray; + } + div.spacer { + height: 15px; + background: purple; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="b" style="width: 110px"/><div class="a" style="width: 74px"/> + </div> + <div class="flexbox"> + <div class="c" style="width: 137.5px"/><div class="a" style="width: 56.5px"/> + </div> + <div class="flexbox"> + <div class="flexNone"><div class="spacer" style="width: 15px"/> + </div><div class="a" style="width: 179px"/> + </div> + <div class="flexbox"> + <div class="c" style="width: 124px" + /><div class="b" style="width: 66px"/> + </div> + <div class="flexbox"> + <div class="flexNone"><div class="spacer" style="width: 30px"/> + </div><div class="b" style="width: 160px"/> + </div> + <div class="flexbox"> + <div class="c" style="width: 85px" + /><div class="flexBasis" style="width: 20px" + /><div class="b" style="width: 40px" + /><div class="a" style="width: 39px"/> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-001-reverse.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-001-reverse.xhtml new file mode 100644 index 0000000000..11c723221f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-001-reverse.xhtml @@ -0,0 +1,72 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with borders on flex items, and "flex-direction: row-reverse" to + reverse the flex container's main axis. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing borders on flex items in a row-reverse horizontal 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/#layout-algorithm"/> + <link rel="match" href="flexbox-mbp-horiz-001-reverse-ref.xhtml"/> + <style> + div { height: 100px; border: 0; } + div.flexbox { + width: 200px; + font-size: 10px; + display: flex; + flex-direction: row-reverse; + } + div.a { + flex: 1 0 24px; + background: lightgreen; + border-style: dotted; + border-left-width: 2px; + border-right-width: 4px; + } + div.b { + flex: 2 0 10px; + background: yellow; + border-style: dashed; + border-left-width: 7px; + border-right-width: 3px; + } + div.c { + flex: 3 0 40px; + background: orange; + } + div.flexNone { + flex: none; + background: pink; + } + div.flexBasis { + flex: 0 0 20px; + background: gray; + } + div.spacer { + display: inline-block; + width: 15px; + height: 15px; + background: purple; + } + </style> + </head> + <body> + <div class="flexbox"><div class="a"></div><div class="b"/></div> + <div class="flexbox"><div class="a"/><div class="c"/></div> + <div class="flexbox"><div class="a"/> + <div class="flexNone"><div class="spacer"/></div> + </div> + <div class="flexbox"><div class="b"/><div class="c"/></div> + <div class="flexbox"><div class="b"/> + <div class="flexNone"><div class="spacer"/><div class="spacer"/></div> + </div> + + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-001-rtl-reverse.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-001-rtl-reverse.xhtml new file mode 100644 index 0000000000..b09f121fe7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-001-rtl-reverse.xhtml @@ -0,0 +1,74 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with borders on flex items, and "direction: rtl" and + "flex-direction: row-reverse" to *doubly* reverse the flex container's + main axis. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing borders on flex items in a row-reverse horizontal flex container, with 'direction: rtl'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-mbp-horiz-001-ref.xhtml"/> + <style> + div { height: 100px; border: 0; } + div.flexbox { + width: 200px; + font-size: 10px; + display: flex; + flex-direction: row-reverse; + direction: rtl; + } + div.a { + flex: 1 0 24px; + background: lightgreen; + border-style: dotted; + border-left-width: 2px; + border-right-width: 4px; + } + div.b { + flex: 2 0 10px; + background: yellow; + border-style: dashed; + border-left-width: 7px; + border-right-width: 3px; + } + div.c { + flex: 3 0 40px; + background: orange; + } + div.flexNone { + flex: none; + background: pink; + } + div.flexBasis { + flex: 0 0 20px; + background: gray; + } + div.spacer { + display: inline-block; + width: 15px; + height: 15px; + background: purple; + } + </style> + </head> + <body> + <div class="flexbox"><div class="a"></div><div class="b"/></div> + <div class="flexbox"><div class="a"/><div class="c"/></div> + <div class="flexbox"><div class="a"/> + <div class="flexNone"><div class="spacer"/></div> + </div> + <div class="flexbox"><div class="b"/><div class="c"/></div> + <div class="flexbox"><div class="b"/> + <div class="flexNone"><div class="spacer"/><div class="spacer"/></div> + </div> + + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-001-rtl.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-001-rtl.xhtml new file mode 100644 index 0000000000..00f5aa54f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-001-rtl.xhtml @@ -0,0 +1,72 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with borders on flex items, and "direction: rtl" to reverse + the flex container's main axis. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing borders on flex items in a horizontal flex container with 'direction: rtl'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-mbp-horiz-001-reverse-ref.xhtml"/> + <style> + div { height: 100px; border: 0; } + div.flexbox { + width: 200px; + font-size: 10px; + display: flex; + direction: rtl; + } + div.a { + flex: 1 0 24px; + background: lightgreen; + border-style: dotted; + border-left-width: 2px; + border-right-width: 4px; + } + div.b { + flex: 2 0 10px; + background: yellow; + border-style: dashed; + border-left-width: 7px; + border-right-width: 3px; + } + div.c { + flex: 3 0 40px; + background: orange; + } + div.flexNone { + flex: none; + background: pink; + } + div.flexBasis { + flex: 0 0 20px; + background: gray; + } + div.spacer { + display: inline-block; + width: 15px; + height: 15px; + background: purple; + } + </style> + </head> + <body> + <div class="flexbox"><div class="a"></div><div class="b"/></div> + <div class="flexbox"><div class="a"/><div class="c"/></div> + <div class="flexbox"><div class="a"/> + <div class="flexNone"><div class="spacer"/></div> + </div> + <div class="flexbox"><div class="b"/><div class="c"/></div> + <div class="flexbox"><div class="b"/> + <div class="flexNone"><div class="spacer"/><div class="spacer"/></div> + </div> + + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-001.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-001.xhtml new file mode 100644 index 0000000000..31560f4461 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-001.xhtml @@ -0,0 +1,70 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with borders on flex items. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing borders on flex items in a horizontal 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/#layout-algorithm"/> + <link rel="match" href="flexbox-mbp-horiz-001-ref.xhtml"/> + <style> + div { height: 100px; border: 0; } + div.flexbox { + width: 200px; + font-size: 10px; + display: flex; + } + div.a { + flex: 1 0 24px; + background: lightgreen; + border-style: dotted; + border-left-width: 2px; + border-right-width: 4px; + } + div.b { + flex: 2 0 10px; + background: yellow; + border-style: dashed; + border-left-width: 7px; + border-right-width: 3px; + } + div.c { + flex: 3 0 40px; + background: orange; + } + div.flexNone { + flex: none; + background: pink; + } + div.flexBasis { + flex: 0 0 20px; + background: gray; + } + div.spacer { + display: inline-block; + width: 15px; + height: 15px; + background: purple; + } + </style> + </head> + <body> + <div class="flexbox"><div class="a"></div><div class="b"/></div> + <div class="flexbox"><div class="a"/><div class="c"/></div> + <div class="flexbox"><div class="a"/> + <div class="flexNone"><div class="spacer"/></div> + </div> + <div class="flexbox"><div class="b"/><div class="c"/></div> + <div class="flexbox"><div class="b"/> + <div class="flexNone"><div class="spacer"/><div class="spacer"/></div> + </div> + + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-002-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-002-ref.xhtml new file mode 100644 index 0000000000..6203a40a00 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-002-ref.xhtml @@ -0,0 +1,75 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { height: 100px; border: 0; } + div.flexbox { + width: 200px; + } + div.a { + display: inline-block; + background: lightgreen; + margin-left: 1px; + margin-right: 3px; + border-style: dotted; + border-left-width: 2px; + border-right-width: 4px; + } + div.b { + display: inline-block; + background: yellow; + margin-left: 2px; + margin-right: 4px; + border-style: dashed; + border-left-width: 7px; + border-right-width: 3px; + } + div.c { + display: inline-block; + background: orange; + } + div.flexNone { + display: inline-block; + background: pink; + } + div.flexBasis { + display: inline-block; + background: gray; + } + div.spacer { + height: 15px; + background: purple; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="a" style="width: 70px"/><div class="b" style="width: 104px"/> + </div> + <div class="flexbox"> + <div class="a" style="width: 52.5px"/><div class="c" style="width: 137.5px"/> + </div> + <div class="flexbox"> + <div class="a" style="width: 175px"/><div class="flexNone"> + <div class="spacer" style="width: 15px"/></div> + </div> + <div class="flexbox"> + <div class="b" style="width: 60px"/><div class="c" style="width: 124px"/> + </div> + <div class="flexbox"> + <div class="b" style="width: 154px"/><div class="flexNone"> + <div class="spacer" style="width: 30px"/></div> + </div> + <div class="flexbox"> + <div class="a" style="width: 35px"/><div class="b" style="width: 34px" + /><div class="flexBasis" style="width: 20px"/><div class="c" style="width: 85px"/> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-002a.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-002a.xhtml new file mode 100644 index 0000000000..b47b7aa55a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-002a.xhtml @@ -0,0 +1,74 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with margin/border on flex items. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing margins and borders on flex items in a horizontal 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/#layout-algorithm"/> + <link rel="match" href="flexbox-mbp-horiz-002-ref.xhtml"/> + <style> + div { height: 100px; border: 0; } + div.flexbox { + width: 200px; + font-size: 10px; + display: flex; + } + div.a { + flex: 1 0 20px; + background: lightgreen; + margin-left: 1px; + margin-right: 3px; + border-style: dotted; + border-left-width: 2px; + border-right-width: 4px; + } + div.b { + flex: 2 0 4px; + background: yellow; + margin-left: 2px; + margin-right: 4px; + border-style: dashed; + border-left-width: 7px; + border-right-width: 3px; + } + div.c { + flex: 3 0 40px; + background: orange; + } + div.flexNone { + flex: none; + background: pink; + } + div.flexBasis { + flex: 0 0 20px; + background: gray; + } + div.spacer { + display: inline-block; + width: 15px; + height: 15px; + background: purple; + } + </style> + </head> + <body> + <div class="flexbox"><div class="a"></div><div class="b"/></div> + <div class="flexbox"><div class="a"/><div class="c"/></div> + <div class="flexbox"><div class="a"/> + <div class="flexNone"><div class="spacer"/></div> + </div> + <div class="flexbox"><div class="b"/><div class="c"/></div> + <div class="flexbox"><div class="b"/> + <div class="flexNone"><div class="spacer"/><div class="spacer"/></div> + </div> + + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-002b.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-002b.xhtml new file mode 100644 index 0000000000..b8a8616552 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-002b.xhtml @@ -0,0 +1,81 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with margin/border/padding on flex items. (NOTE: This renders + the same as the "-2a" variant, which lacks padding, because we've + just replaced some of the "-2a" variant's content-box area with + padding-box area in this test.) --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing margins, borders, and padding on flex items in a horizontal 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/#layout-algorithm"/> + <link rel="match" href="flexbox-mbp-horiz-002-ref.xhtml"/> + <style> + div { height: 100px; border: 0; } + div.flexbox { + width: 200px; + font-size: 10px; + display: flex; + } + div.a { + flex: 1 0 9px; + background: lightgreen; + margin-left: 1px; + margin-right: 3px; + border-style: dotted; + border-left-width: 2px; + border-right-width: 4px; + padding-left: 5px; + padding-right: 6px; + } + div.b { + flex: 2 0 1px; + background: yellow; + margin-left: 2px; + margin-right: 4px; + border-style: dashed; + border-left-width: 7px; + border-right-width: 3px; + padding-left: 1px; + padding-right: 2px; + } + div.c { + flex: 3 0 40px; + background: orange; + } + div.flexNone { + flex: none; + background: pink; + } + div.flexBasis { + flex: 0 0 20px; + background: gray; + } + div.spacer { + display: inline-block; + width: 15px; + height: 15px; + background: purple; + } + </style> + </head> + <body> + <div class="flexbox"><div class="a"></div><div class="b"/></div> + <div class="flexbox"><div class="a"/><div class="c"/></div> + <div class="flexbox"><div class="a"/> + <div class="flexNone"><div class="spacer"/></div> + </div> + <div class="flexbox"><div class="b"/><div class="c"/></div> + <div class="flexbox"><div class="b"/> + <div class="flexNone"><div class="spacer"/><div class="spacer"/></div> + </div> + + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-002v.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-002v.xhtml new file mode 100644 index 0000000000..a02e3406c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-002v.xhtml @@ -0,0 +1,86 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with margin/border/padding on flex items + and with various writing-modes on the items. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title> + CSS Test: Testing margins, borders, and padding on flex items in a horizontal flex container + (with a vertical writing-mode on the flex items). + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-mbp-horiz-002-ref.xhtml"/> + <style> + div { height: 100px; border: 0; } + div.flexbox { + width: 200px; + font-size: 10px; + display: flex; + } + div.a { + flex: 1 0 9px; + background: lightgreen; + margin-left: 1px; + margin-right: 3px; + border-style: dotted; + border-left-width: 2px; + border-right-width: 4px; + padding-left: 5px; + padding-right: 6px; + writing-mode: vertical-lr; + } + div.b { + flex: 2 0 1px; + background: yellow; + margin-left: 2px; + margin-right: 4px; + border-style: dashed; + border-left-width: 7px; + border-right-width: 3px; + padding-left: 1px; + padding-right: 2px; + writing-mode: vertical-rl; + } + div.c { + flex: 3 0 40px; + background: orange; + writing-mode: sideways-lr; + } + div.flexNone { + flex: none; + background: pink; + writing-mode: vertical-lr; + } + div.flexBasis { + flex: 0 0 20px; + background: gray; + writing-mode: sideways-rl; + } + div.spacer { + width: 15px; + height: 15px; + background: purple; + } + </style> + </head> + <body> + <div class="flexbox"><div class="a"></div><div class="b"/></div> + <div class="flexbox"><div class="a"/><div class="c"/></div> + <div class="flexbox"><div class="a"/> + <div class="flexNone"><div class="spacer"/></div> + </div> + <div class="flexbox"><div class="b"/><div class="c"/></div> + <div class="flexbox"><div class="b"/> + <div class="flexNone"><div class="spacer"/><div class="spacer"/></div> + </div> + + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-003-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-003-ref.xhtml new file mode 100644 index 0000000000..a91d72b9f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-003-ref.xhtml @@ -0,0 +1,81 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { height: 20px; border: 0; } + div.flexbox { + width: 200px; + margin-bottom: 2px; + } + + <!-- customizations for flexbox border/padding --> + .borderA { + border-style: dashed; + border-color: purple; + border-top-width: 6px; + border-right-width: 4px; + border-bottom-width: 2px; + border-left-width: 8px; + } + + .borderB { + border-style: dashed; + border-color: purple; + border-top-width: 4px; + border-right-width: 5px; + border-bottom-width: 6px; + border-left-width: 7px; + } + + .paddingA { + padding: 4px 3px 2px 1px; + } + + .paddingB { + padding: 8px 11px 14px 17px; + } + + div.child1 { + display: inline-block; + width: 74px; + background: lightgreen; + border-style: dotted; + border-left-width: 2px; + border-right-width: 4px; + } + div.child2 { + display: inline-block; + width: 110px; + background: yellow; + border-style: dashed; + border-left-width: 7px; + border-right-width: 3px; + } + </style> + </head> + <body> + <div class="flexbox borderA" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderA paddingA" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderA paddingB" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderB" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderB paddingA" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderB paddingB" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox paddingA" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox paddingB" + ><div class="child1"/><div class="child2"/></div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-003-reverse-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-003-reverse-ref.xhtml new file mode 100644 index 0000000000..7929c89070 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-003-reverse-ref.xhtml @@ -0,0 +1,81 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { height: 20px; border: 0; } + div.flexbox { + width: 200px; + margin-bottom: 2px; + } + + <!-- customizations for flexbox border/padding --> + .borderA { + border-style: dashed; + border-color: purple; + border-top-width: 6px; + border-right-width: 4px; + border-bottom-width: 2px; + border-left-width: 8px; + } + + .borderB { + border-style: dashed; + border-color: purple; + border-top-width: 4px; + border-right-width: 5px; + border-bottom-width: 6px; + border-left-width: 7px; + } + + .paddingA { + padding: 4px 3px 2px 1px; + } + + .paddingB { + padding: 8px 11px 14px 17px; + } + + div.child1 { + display: inline-block; + width: 74px; + background: lightgreen; + border-style: dotted; + border-left-width: 2px; + border-right-width: 4px; + } + div.child2 { + display: inline-block; + width: 110px; + background: yellow; + border-style: dashed; + border-left-width: 7px; + border-right-width: 3px; + } + </style> + </head> + <body> + <div class="flexbox borderA" + ><div class="child2"/><div class="child1"/></div> + <div class="flexbox borderA paddingA" + ><div class="child2"/><div class="child1"/></div> + <div class="flexbox borderA paddingB" + ><div class="child2"/><div class="child1"/></div> + <div class="flexbox borderB" + ><div class="child2"/><div class="child1"/></div> + <div class="flexbox borderB paddingA" + ><div class="child2"/><div class="child1"/></div> + <div class="flexbox borderB paddingB" + ><div class="child2"/><div class="child1"/></div> + <div class="flexbox paddingA" + ><div class="child2"/><div class="child1"/></div> + <div class="flexbox paddingB" + ><div class="child2"/><div class="child1"/></div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-003-reverse.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-003-reverse.xhtml new file mode 100644 index 0000000000..cbe4c58b41 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-003-reverse.xhtml @@ -0,0 +1,84 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with border/padding on a row-reverse flex container and on its children --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing borders and padding on a row-reverse horizontal flex container and its flex items</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-mbp-horiz-003-reverse-ref.xhtml"/> + <style> + div { height: 20px; border: 0; } + div.flexbox { + width: 200px; + display: flex; + flex-direction: row-reverse; + margin-bottom: 2px; + } + + <!-- customizations for flex container border/padding --> + .borderA { + border-style: dashed; + border-color: purple; + border-top-width: 6px; + border-right-width: 4px; + border-bottom-width: 2px; + border-left-width: 8px; + } + + .borderB { + border-style: dashed; + border-color: purple; + border-top-width: 4px; + border-right-width: 5px; + border-bottom-width: 6px; + border-left-width: 7px; + } + + .paddingA { + padding: 4px 3px 2px 1px; + } + + .paddingB { + padding: 8px 11px 14px 17px; + } + + div.child1 { + flex: 1 0 24px; + background: lightgreen; + border-style: dotted; + border-left-width: 2px; + border-right-width: 4px; + } + div.child2 { + flex: 2 0 10px; + background: yellow; + border-style: dashed; + border-left-width: 7px; + border-right-width: 3px; + } + </style> + </head> + <body> + <div class="flexbox borderA" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderA paddingA" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderA paddingB" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderB" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderB paddingA" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderB paddingB" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox paddingA" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox paddingB" + ><div class="child1"/><div class="child2"/></div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-003.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-003.xhtml new file mode 100644 index 0000000000..f0dc49b5ac --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-003.xhtml @@ -0,0 +1,83 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with border/padding on a flex container and on its children --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing borders and padding on a horizontal flex container and its flex items</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-mbp-horiz-003-ref.xhtml"/> + <style> + div { height: 20px; border: 0; } + div.flexbox { + width: 200px; + display: flex; + margin-bottom: 2px; + } + + <!-- customizations for flex container border/padding --> + .borderA { + border-style: dashed; + border-color: purple; + border-top-width: 6px; + border-right-width: 4px; + border-bottom-width: 2px; + border-left-width: 8px; + } + + .borderB { + border-style: dashed; + border-color: purple; + border-top-width: 4px; + border-right-width: 5px; + border-bottom-width: 6px; + border-left-width: 7px; + } + + .paddingA { + padding: 4px 3px 2px 1px; + } + + .paddingB { + padding: 8px 11px 14px 17px; + } + + div.child1 { + flex: 1 0 24px; + background: lightgreen; + border-style: dotted; + border-left-width: 2px; + border-right-width: 4px; + } + div.child2 { + flex: 2 0 10px; + background: yellow; + border-style: dashed; + border-left-width: 7px; + border-right-width: 3px; + } + </style> + </head> + <body> + <div class="flexbox borderA" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderA paddingA" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderA paddingB" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderB" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderB paddingA" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderB paddingB" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox paddingA" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox paddingB" + ><div class="child1"/><div class="child2"/></div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-003v.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-003v.xhtml new file mode 100644 index 0000000000..8baef30227 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-003v.xhtml @@ -0,0 +1,88 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with border/padding on a flex container and on its children --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title> + CSS Test: Testing borders and padding on a horizontal flex container and its flex items + (with a vertical writing-mode on the flex items). + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-mbp-horiz-003-ref.xhtml"/> + <style> + div { height: 20px; border: 0; } + div.flexbox { + width: 200px; + display: flex; + margin-bottom: 2px; + } + + <!-- customizations for flex container border/padding --> + .borderA { + border-style: dashed; + border-color: purple; + border-top-width: 6px; + border-right-width: 4px; + border-bottom-width: 2px; + border-left-width: 8px; + } + + .borderB { + border-style: dashed; + border-color: purple; + border-top-width: 4px; + border-right-width: 5px; + border-bottom-width: 6px; + border-left-width: 7px; + } + + .paddingA { + padding: 4px 3px 2px 1px; + } + + .paddingB { + padding: 8px 11px 14px 17px; + } + + div.child1 { + flex: 1 0 24px; + background: lightgreen; + border-style: dotted; + border-left-width: 2px; + border-right-width: 4px; + writing-mode: vertical-rl; + } + div.child2 { + flex: 2 0 10px; + background: yellow; + border-style: dashed; + border-left-width: 7px; + border-right-width: 3px; + writing-mode: vertical-lr; + } + </style> + </head> + <body> + <div class="flexbox borderA" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderA paddingA" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderA paddingB" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderB" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderB paddingA" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderB paddingB" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox paddingA" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox paddingB" + ><div class="child1"/><div class="child2"/></div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-004-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-004-ref.xhtml new file mode 100644 index 0000000000..245e6f9e3c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-004-ref.xhtml @@ -0,0 +1,78 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case - identical to the testcase, but with with the flex items' + margin and padding values set to explicit pixel values. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { border: 0; } + div.flexbox { + width: 200px; + display: flex; + margin-bottom: 2px; + border: 1px dotted black; + } + div.height50 { height: 50px; } + + .marginA { margin: 20px 16px 12px 8px; } + .marginB { margin: 16px 20px 24px 28px; } + .paddingA { padding: 16px 12px 8px 4px; } + .paddingB { padding: 12px 16px 20px 24px; } + + + div.child1 { + flex: none; + width: 10px; + height: 10px; + background: lightgreen; + } + div.child2 { + flex: none; + width: 10px; + height: 10px; + background: purple; + } + + div.filler { + /* Filler-div to fill up content-box and make padding easier to see. */ + height: 10px; + width: 100%; + background: lightgrey; + } + + </style> + </head> + <body> + <div class="flexbox" + ><div class="child1 paddingA"><div class="filler"/></div + ><div class="child2 paddingB"><div class="filler"/></div + ><div class="child1 marginA"></div + ><div class="child2 marginB"></div + ></div> + + <div class="flexbox height50" + ><div class="child1 paddingA"><div class="filler"/></div + ><div class="child2 paddingB"><div class="filler"/></div + ><div class="child1 marginA"></div + ><div class="child2 marginB"></div + ></div> + + <div class="flexbox height50" style="align-items: flex-end" + ><div class="child1 paddingA"><div class="filler"/></div + ><div class="child2 paddingB"><div class="filler"/></div + ><div class="child1 marginA"></div + ><div class="child2 marginB"></div + ></div> + + <div class="flexbox height50" + ><div class="child1 paddingA marginA"><div class="filler"/></div + ><div class="child2 paddingB marginB"><div class="filler"/></div + ></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-004.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-004.xhtml new file mode 100644 index 0000000000..b513253fd1 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-mbp-horiz-004.xhtml @@ -0,0 +1,88 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with percent-valued padding and/or margin on flex items. + The spec allows these to be resolved against the flex container's + inline size (regardless of which axis the percent padding/margin is in). +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing percent-valued padding and margin on flex items</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#item-margins"/> + <link rel="match" href="flexbox-mbp-horiz-004-ref.xhtml"/> + <style> + div.flexbox { + width: 200px; + display: flex; + margin-bottom: 2px; + border: 1px dotted black; + } + div.height50 { height: 50px; } + + .marginA { margin: 10% 8% 6% 4%; } + .marginB { margin: 8% 10% 12% 14%; } + .paddingA { padding: 8% 6% 4% 2%; } + .paddingB { padding: 6% 8% 10% 12%; } + + div.child1 { + flex: none; + width: 10px; + height: 10px; + background: lightgreen; + } + div.child2 { + flex: none; + width: 10px; + height: 10px; + background: purple; + } + + div.filler { + /* Filler-div to fill up content-box and make padding easier to see. */ + height: 10px; + width: 100%; + background: lightgrey; + } + + </style> + </head> + <body> + <!-- Flex container is auto-height - this shouldn't impact percent + margin/padding resolution, since they resolve against container's + inline-size, i.e. its width in this case. --> + <div class="flexbox" + ><div class="child1 paddingA"><div class="filler"/></div + ><div class="child2 paddingB"><div class="filler"/></div + ><div class="child1 marginA"></div + ><div class="child2 marginB"></div + ></div> + + <!-- Flex container has height: 50px - again, this shouldn't impact percent + margin/padding resolution, since they resolve against container's + inline-size, i.e. its width in this case. --> + <div class="flexbox height50" + ><div class="child1 paddingA"><div class="filler"/></div + ><div class="child2 paddingB"><div class="filler"/></div + ><div class="child1 marginA"></div + ><div class="child2 marginB"></div + ></div> + + <!-- ...and now with align-items: flex-end, so we can see the margin-bottom + in action --> + <div class="flexbox height50" style="align-items: flex-end" + ><div class="child1 paddingA"><div class="filler"/></div + ><div class="child2 paddingB"><div class="filler"/></div + ><div class="child1 marginA"></div + ><div class="child2 marginB"></div + ></div> + + <!-- ...and finally, with margin and padding applied to the same items --> + <div class="flexbox height50" + ><div class="child1 paddingA marginA"><div class="filler"/></div + ><div class="child2 paddingB marginB"><div class="filler"/></div + ></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-min-height-auto-001-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-min-height-auto-001-ref.html new file mode 100644 index 0000000000..146a6ad6bc --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-min-height-auto-001-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .item { + /* Flex items have purple border: */ + border: 2px dotted purple; + margin-right: 2px; /* (Just for spacing things out, visually) */ + float: left; + } + + .small { height: 50px; } + .big { height: 80px; } + + .item > * { + /* Flex items' contents are gray & fixed-size: */ + background: gray; + width: 10px; + height: 80px; + } + </style> + </head> + <body> + <div class="item small"><div></div></div> + <div class="item small"><div></div></div> + <div class="item small"><div></div></div> + <div class="item small"><div></div></div> + <div class="item small"><div></div></div> + <div class="item small"><div></div></div> + + <div class="item big"><div></div></div> + <div class="item big"><div></div></div> + <div class="item big"><div></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-min-height-auto-001.html b/testing/web-platform/tests/css/css-flexbox/flexbox-min-height-auto-001.html new file mode 100644 index 0000000000..f69ed95619 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-min-height-auto-001.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: Testing min-height:auto</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto"> + <link rel="match" href="flexbox-min-height-auto-001-ref.html"> +<!-- + This testcase tests the used value of "min-height:auto" (the property's + initial value) on flex items in a vertical flex container. + + It's supposed to resolve to the smallest of: + a) The used 'flex-basis' (taken from 'height'), if 'flex-basis' is at its + initial value. + b) The computed 'max-height' property + c) If there's no intrinsic aspect ratio: the item's min-content height. + d) If there is an intrinsic aspect ratio: the item's height derived from + the ratio & constraints in the other dimension. + + We measure what the used value is by putting flex items in a small flex + container, which will shrink its items down to their min-height. + + This test checks for situations where we should resolve the min-height as + (a), (b), or (c) above. Another test will check (d). +--> + <style> + .flexbox { + display: flex; + flex-direction: column; + height: 1px; /* No available space; shrink flex items to min-height */ + margin-right: 2px; /* (Just for spacing things out, visually) */ + float: left; + } + + .flexbox > * { + /* Flex items have purple border: */ + border: 2px dotted purple; + } + + .flexbox > * > * { + /* Flex items' contents are gray & fixed-size: */ + background: gray; + width: 10px; + height: 80px; + } + </style> + </head> + <body> + <!-- Check for min-height:auto resolving correctly when the smallest + candidate value is: --> + <!-- *** (a) Used 'flex-basis' (from 'height') *** --> + <!-- First, without definite max-height: --> + <div class="flexbox"> + <div style="height: 50px"><div></div></div> + </div> + <!-- ...and now with definite (& large) 'max-height': --> + <div class="flexbox"> + <div style="height: 50px; max-height: 120px;"><div></div></div> + </div> + <!-- ...and now with used 'flex-basis' being a calc expression:--> + <div class="flexbox"> + <div style="height: calc(10% + 50px)"><div></div></div> + </div> + + <!-- *** (b) The computed 'max-height' *** --> + <!-- First, with a larger candidate 'flex-basis' value (from 'height') --> + <div class="flexbox"> + <div style="height: 100px; max-height:50px"><div></div></div> + </div> + <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't + be considered for 'min-height:auto' anyway) --> + <div class="flexbox"> + <div style="flex-basis: 100px; max-height:50px"><div></div></div> + </div> + <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't + be considered for 'min-height:auto' anyway) --> + <div class="flexbox"> + <div style="flex-basis: 10px; max-height:50px"><div></div></div> + </div> + + <!-- *** (c) (no intrinsic aspect ratio) The min-content size *** --> + <!-- First, with a larger candidate 'flex-basis' value (from 'height') --> + <div class="flexbox"> + <div style="height: 100px"><div></div></div> + </div> + <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't + be considered for 'min-height:auto' anyway) --> + <div class="flexbox"> + <div style="flex-basis: 100px"><div></div></div> + </div> + <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't + be considered for 'min-height:auto' anyway) --> + <div class="flexbox"> + <div style="flex-basis: 10px"><div></div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-min-height-auto-002-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-min-height-auto-002-ref.html new file mode 100644 index 0000000000..ca1aad42aa --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-min-height-auto-002-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + img { + width: 30px; + height: 30px; + float: left; + border: 2px dotted purple; + margin-right: 2px; /* (Just for spacing things out, visually) */ + } + </style> + </head> + <body> + <img src="support/solidblue.png" alt="blue square"> + <img src="support/solidblue.png" alt="blue square"> + <img src="support/solidblue.png" alt="blue square"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-min-height-auto-002a.html b/testing/web-platform/tests/css/css-flexbox/flexbox-min-height-auto-002a.html new file mode 100644 index 0000000000..0fd9207fb4 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-min-height-auto-002a.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: Testing min-height:auto</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto"> + <link rel="match" href="flexbox-min-height-auto-002-ref.html"> +<!-- + This testcase tests the used value of "min-height:auto" (the property's + initial value) on flex items in a vertical flex container. + + It's supposed to resolve to the smallest of: + a) The used 'flex-basis' (taken from 'height'), if 'flex-basis' is at its + initial value. + b) The computed 'max-height' property + c) If there's no intrinsic aspect ratio: the item's min-content height. + d) If there is an intrinsic aspect ratio: the item's height derived from + the ratio & constraints in the other dimension. + + We measure what the used value is by putting flex items in a small flex + container, which will shrink its items down to their min-height. + + This test checks for situations where we should resolve the min-height as + (d) above, with "constraints in the other dimension" being "width". +--> + <style> + .flexbox { + display: flex; + flex-direction: column; + height: 1px; /* No available space; shrink flex items to min-height */ + margin-right: 2px; /* (Just for spacing things out, visually) */ + float: left; + } + + .flexbox > * { + /* Flex items have purple border: */ + border: 2px dotted purple; + /* Flex items have sizing constraint in cross axis: */ + width: 30px; + } + </style> + </head> + <body> + <!-- Check for min-height:auto resolving correctly when the smallest + candidate value is: --> + + <!-- *** (d) (with intrinsic aspect ratio) The height derived from ratio + and constraints in the other dimension *** --> + <!-- First, with a larger candidate 'flex-basis' value (from 'height') --> + <div class="flexbox"> + <img style="height: 100px" src="support/solidblue.png" alt="blue square"> + </div> + <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't + be considered for 'min-height:auto' anyway) --> + <div class="flexbox"> + <img style="flex-basis: 100px" src="support/solidblue.png" alt="blue square"> + </div> + <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't + be considered for 'min-height:auto' anyway) --> + <div class="flexbox"> + <img style="flex-basis: 10px" src="support/solidblue.png" alt="blue square"> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-min-height-auto-002b.html b/testing/web-platform/tests/css/css-flexbox/flexbox-min-height-auto-002b.html new file mode 100644 index 0000000000..412b4b98c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-min-height-auto-002b.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: Testing min-height:auto</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto"> + <link rel="match" href="flexbox-min-height-auto-002-ref.html"> +<!-- + This testcase tests the used value of "min-height:auto" (the property's + initial value) on flex items in a vertical flex container. + + It's supposed to resolve to the smallest of: + a) The used 'flex-basis' (taken from 'height'), if 'flex-basis' is at its + initial value. + b) The computed 'max-height' property + c) If there's no intrinsic aspect ratio: the item's min-content height. + d) If there is an intrinsic aspect ratio: the item's height derived from + the ratio & constraints in the other dimension. + + We measure what the used value is by putting flex items in a small flex + container, which will shrink its items down to their min-height. + + This test checks for situations where we should resolve the min-height as + (d) above, with "constraints in the other dimension" being "min-width". +--> + <style> + .flexbox { + display: flex; + flex-direction: column; + max-width: 34px; /* Constrain the flex container's cross size. */ + height: 1px; /* No available space; shrink flex items to min-height */ + margin-right: 2px; /* (Just for spacing things out, visually) */ + float: left; + } + + .flexbox > * { + /* Flex items have purple border: */ + border: 2px dotted purple; + /* Flex items have sizing constraint in cross axis: */ + min-width: 30px; + } + </style> + </head> + <body> + <!-- Check for min-height:auto resolving correctly when the smallest + candidate value is: --> + + <!-- *** (d) (with intrinsic aspect ratio) The height derived from ratio + and constraints in the other dimension *** --> + <!-- First, with a larger candidate 'flex-basis' value (from 'height') --> + <div class="flexbox"> + <img style="height: 100px" src="support/solidblue.png" alt="blue square"> + </div> + <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't + be considered for 'min-height:auto' anyway) --> + <div class="flexbox"> + <img style="flex-basis: 100px" src="support/solidblue.png" alt="blue square"> + </div> + <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't + be considered for 'min-height:auto' anyway) --> + <div class="flexbox"> + <img style="flex-basis: 10px" src="support/solidblue.png" alt="blue square"> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-min-height-auto-002c.html b/testing/web-platform/tests/css/css-flexbox/flexbox-min-height-auto-002c.html new file mode 100644 index 0000000000..3093c65e5f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-min-height-auto-002c.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: Testing min-height:auto</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto"> + <link rel="match" href="flexbox-min-height-auto-002-ref.html"> +<!-- + This testcase tests the used value of "min-height:auto" (the property's + initial value) on flex items in a vertical flex container. + + It's supposed to resolve to the smallest of: + a) The used 'flex-basis' (taken from 'height'), if 'flex-basis' is at its + initial value. + b) The computed 'max-height' property + c) If there's no intrinsic aspect ratio: the item's min-content height. + d) If there is an intrinsic aspect ratio: the item's height derived from + the ratio & constraints in the other dimension. + + We measure what the used value is by putting flex items in a small flex + container, which will shrink its items down to their min-height. + + This test checks for situations where we should resolve the min-height as + (d) above, with "constraints in the other dimension" being + max-width-clamped "width". +--> + <style> + .flexbox { + display: flex; + flex-direction: column; + height: 1px; /* No available space; shrink flex items to min-height */ + margin-right: 2px; /* (Just for spacing things out, visually) */ + float: left; + } + + .flexbox > * { + /* Flex items have purple border: */ + border: 2px dotted purple; + /* Flex items have sizing constraint in cross axis: */ + max-width: 30px; + width: 60px; + } + </style> + </head> + <body> + <!-- Check for min-height:auto resolving correctly when the smallest + candidate value is: --> + + <!-- *** (d) (with intrinsic aspect ratio) The height derived from ratio + and constraints in the other dimension *** --> + <!-- First, with a larger candidate 'flex-basis' value (from 'height') --> + <div class="flexbox"> + <img style="height: 100px" src="support/solidblue.png" alt="blue square"> + </div> + <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't + be considered for 'min-height:auto' anyway) --> + <div class="flexbox"> + <img style="flex-basis: 100px" src="support/solidblue.png" alt="blue square"> + </div> + <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't + be considered for 'min-height:auto' anyway) --> + <div class="flexbox"> + <img style="flex-basis: 10px" src="support/solidblue.png" alt="blue square"> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-min-height-auto-003-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-min-height-auto-003-ref.html new file mode 100644 index 0000000000..ff1ced0c03 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-min-height-auto-003-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .item { + /* Flex items have purple border: */ + border: 2px dotted purple; + margin-right: 2px; /* (Just for spacing things out, visually) */ + float: left; + } + + .small { height: 26px; } + .big { height: 80px; } + + .item > * { + /* Flex items' contents are gray & fixed-size: */ + background: gray; + width: 40px; + height: 80px; + } + + .yvisible { overflow-y: visible; } + .yhidden { overflow-y: hidden; } + .yscroll { overflow-y: scroll; } + .yauto { overflow-y: auto; } + </style> + </head> + <body> + <div class="item big yvisible"><div></div></div> + <div class="item small yhidden"><div></div></div> + <div class="item small yscroll"><div></div></div> + <div class="item small yauto"><div></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-min-height-auto-003.html b/testing/web-platform/tests/css/css-flexbox/flexbox-min-height-auto-003.html new file mode 100644 index 0000000000..15ef35d9cd --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-min-height-auto-003.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: Testing min-height:auto & 'overflow' interaction</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto"> + <link rel="match" href="flexbox-min-height-auto-003-ref.html"> +<!-- + This testcase checks how "overflow-y" impacts the sizing behavior of flex + items with "min-height:auto" (the new initial value for "min-height"). + + In particular, the flex-item-specific "min-height:auto" behavior is + supposed to be disabled (e.g. we end up with min-height:0) when + "overflow-y" is non-"visible". +--> + <style> + .flexbox { + display: flex; + flex-direction: column; + height: 30px; /* Shrink flex items below min-height */ + margin-right: 2px; /* (Just for spacing things out, visually) */ + float: left; + } + + .flexbox > * { + /* Flex items have purple border: */ + border: 2px dotted purple; + } + + .flexbox > * > * { + /* Flex items' contents are gray & fixed-size: */ + background: gray; + width: 40px; + height: 80px; + } + + .yvisible { overflow-y: visible; } + .yhidden { overflow-y: hidden; } + .yscroll { overflow-y: scroll; } + .yauto { overflow-y: auto; } + </style> + </head> + <body> + <!-- min-height:auto should prevent shrinking below intrinsic height when + the flex item has "overflow-y: visible", but not for any other + overflow-y values. --> + <div class="flexbox"><div class="yvisible"><div></div></div></div> + <div class="flexbox"><div class="yhidden"><div></div></div></div> + <div class="flexbox"><div class="yscroll"><div></div></div></div> + <div class="flexbox"><div class="yauto"><div></div></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-min-height-auto-004-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-min-height-auto-004-ref.html new file mode 100644 index 0000000000..768185d431 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-min-height-auto-004-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .item { + /* Flex items have purple border: */ + border: 2px dotted purple; + margin-right: 2px; /* (Just for spacing things out, visually) */ + float: left; + } + + .small { height: 26px; } + .big { height: 80px; } + + .item > * { + /* Flex items' contents are gray & fixed-size: */ + background: gray; + width: 40px; + height: 80px; + } + + .xvisible { overflow-x: visible; } + .xhidden { overflow-x: hidden; } + .xscroll { overflow-x: scroll; } + .xauto { overflow-x: auto; } + </style> + </head> + <body> + <div class="item big xvisible"><div></div></div> + <div class="item small xhidden"><div></div></div> + <div class="item small xscroll"><div></div></div> + <div class="item small xauto"><div></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-min-height-auto-004.html b/testing/web-platform/tests/css/css-flexbox/flexbox-min-height-auto-004.html new file mode 100644 index 0000000000..a04b9b573e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-min-height-auto-004.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: Testing min-height:auto & 'overflow' interaction</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto"> + <link rel="match" href="flexbox-min-height-auto-004-ref.html"> +<!-- + This testcase checks how "overflow-x" indirectly impacts the sizing + behavior of flex items with "min-height:auto" (the new initial value + for "min-height"), via its influence on "overflow-y". + + In particular, the flex-item-specific "min-height:auto" behavior is + supposed to be disabled (e.g. we end up with min-height:0) when + "overflow-y" is non-"visible". Moreover, when "overflow-x" is set to a + scrolling value, it forces "overflow-y" to compute to a scrolling value + as well, as described at + http://www.w3.org/TR/css-overflow-3/#overflow-properties + So, "overflow-x" has an indirect effect (via "overflow-y") here. +--> + <style> + .flexbox { + display: flex; + flex-direction: column; + height: 30px; /* Shrink flex items below min-height */ + margin-right: 2px; /* (Just for spacing things out, visually) */ + float: left; + } + + .flexbox > * { + /* Flex items have purple border: */ + border: 2px dotted purple; + } + + .flexbox > * > * { + /* Flex items' contents are gray & fixed-size: */ + background: gray; + width: 40px; + height: 80px; + } + + .xvisible { overflow-x: visible; } + .xhidden { overflow-x: hidden; } + .xscroll { overflow-x: scroll; } + .xauto { overflow-x: auto; } + </style> + </head> + <body> + <!-- min-height:auto should prevent shrinking below intrinsic height when + the flex item has "overflow-x: visible", but not for any other + overflow-x values (because of overflow-x's influence on overflow-y). + --> + <div class="flexbox"><div class="xvisible"><div></div></div></div> + <div class="flexbox"><div class="xhidden"><div></div></div></div> + <div class="flexbox"><div class="xscroll"><div></div></div></div> + <div class="flexbox"><div class="xauto"><div></div></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-min-width-auto-001-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-min-width-auto-001-ref.html new file mode 100644 index 0000000000..946db39cf1 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-min-width-auto-001-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .item { + /* Flex items have purple border: */ + border: 2px dotted purple; + margin-bottom: 2px; /* (Just for spacing things out, visually) */ + } + + .small { width: 50px; } + .big { width: 80px; } + + .item > * { + /* Flex items' contents are gray & fixed-size: */ + background: gray; + height: 10px; + width: 80px; + } + </style> + </head> + <body> + <div class="item small"><div></div></div> + <div class="item small"><div></div></div> + <div class="item small"><div></div></div> + <div class="item small"><div></div></div> + <div class="item small"><div></div></div> + <div class="item small"><div></div></div> + + <div class="item big"><div></div></div> + <div class="item big"><div></div></div> + <div class="item big"><div></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-min-width-auto-001.html b/testing/web-platform/tests/css/css-flexbox/flexbox-min-width-auto-001.html new file mode 100644 index 0000000000..cb347abead --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-min-width-auto-001.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: Testing min-width:auto</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto"> + <link rel="match" href="flexbox-min-width-auto-001-ref.html"> +<!-- + This testcase tests the used value of "min-width:auto" (the property's + initial value) on flex items in a horizontal flex container. + + It's supposed to resolve to the smallest of: + a) The used 'flex-basis' (taken from 'width'), if 'flex-basis' is at its + initial value. + b) The computed 'max-width' property + c) If there's no intrinsic aspect ratio: the item's min-content width. + d) If there is an intrinsic aspect ratio: the item's width derived from + the ratio & constraints in the other dimension. + + We measure what the used value is by putting flex items in a small flex + container, which will shrink its items down to their min-width. + + This test checks for situations where we should resolve the min-width as + (a), (b), or (c) above. Another test will check (d). +--> + <style> + .flexbox { + display: flex; + width: 1px; /* No available space; shrink flex items to min-width */ + margin-bottom: 2px; /* (Just for spacing things out, visually) */ + } + + .flexbox > * { + /* Flex items have purple border: */ + border: 2px dotted purple; + } + + .flexbox > * > * { + /* Flex items' contents are gray & fixed-size: */ + background: gray; + height: 10px; + width: 80px; + } + </style> + </head> + <body> + <!-- Check for min-width:auto resolving correctly when the smallest + candidate value is: --> + <!-- *** (a) Used 'flex-basis' (from 'width') *** --> + <!-- First, without definite max-width: --> + <div class="flexbox"> + <div style="width: 50px"><div></div></div> + </div> + <!-- ...and now with definite (& large) 'max-width': --> + <div class="flexbox"> + <div style="width: 50px; max-width: 120px;"><div></div></div> + </div> + <!-- ...and now with used 'flex-basis' being a calc expression:--> + <div class="flexbox"> + <div style="width: calc(10% + 50px)"><div></div></div> + </div> + + <!-- *** (b) The computed 'max-width' *** --> + <!-- First, with a larger candidate 'flex-basis' value (from 'width') --> + <div class="flexbox"> + <div style="width: 100px; max-width:50px"><div></div></div> + </div> + <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't + be considered for 'min-width:auto' anyway) --> + <div class="flexbox"> + <div style="flex-basis: 100px; max-width:50px"><div></div></div> + </div> + <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't + be considered for 'min-width:auto' anyway) --> + <div class="flexbox"> + <div style="flex-basis: 10px; max-width:50px"><div></div></div> + </div> + + <!-- *** (c) (no intrinsic aspect ratio) The min-content size *** --> + <!-- First, with a larger candidate 'flex-basis' value (from 'width') --> + <div class="flexbox"> + <div style="width: 100px"><div></div></div> + </div> + <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't + be considered for 'min-width:auto' anyway) --> + <div class="flexbox"> + <div style="flex-basis: 100px"><div></div></div> + </div> + <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't + be considered for 'min-width:auto' anyway) --> + <div class="flexbox"> + <div style="flex-basis: 10px"><div></div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-min-width-auto-002-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-min-width-auto-002-ref.html new file mode 100644 index 0000000000..21beb3f934 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-min-width-auto-002-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + img { + width: 30px; + height: 30px; + display: block; + border: 2px dotted purple; + margin-bottom: 2px; /* (Just for spacing things out, visually) */ + } + </style> + </head> + <body> + <img src="support/solidblue.png" alt="blue square"> + <img src="support/solidblue.png" alt="blue square"> + <img src="support/solidblue.png" alt="blue square"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-min-width-auto-002a.html b/testing/web-platform/tests/css/css-flexbox/flexbox-min-width-auto-002a.html new file mode 100644 index 0000000000..fe60255c93 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-min-width-auto-002a.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: Testing min-width:auto</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto"> + <link rel="match" href="flexbox-min-width-auto-002-ref.html"> +<!-- + This testcase tests the used value of "min-width:auto" (the property's + initial value) on flex items in a horizontal flex container. + + It's supposed to resolve to the smallest of: + a) The used 'flex-basis' (taken from 'width'), if 'flex-basis' is at its + initial value. + b) The computed 'max-width' property + c) If there's no intrinsic aspect ratio: the item's min-content width. + d) If there is an intrinsic aspect ratio: the item's width derived from + the ratio & constraints in the other dimension. + + We measure what the used value is by putting flex items in a small flex + container, which will shrink its items down to their min-width. + + This test checks for situations where we should resolve the min-width as + (d) above, with "constraints in the other dimension" being "height". +--> + <style> + .flexbox { + display: flex; + width: 0px; /* No available space; shrink flex items to min-width */ + margin-bottom: 2px; /* (Just for spacing things out, visually) */ + } + + .flexbox > * { + /* Flex items have purple border: */ + border: 2px dotted purple; + /* Flex items have sizing constraint in cross axis: */ + height: 30px; + } + </style> + </head> + <body> + <!-- Check for min-width:auto resolving correctly when the smallest + candidate value is: --> + + <!-- *** (d) (with intrinsic aspect ratio) The width derived from ratio + and constraints in the other dimension *** --> + <!-- First, with a larger candidate 'flex-basis' value (from 'width') --> + <div class="flexbox"> + <img style="width: 100px" src="support/solidblue.png" alt="blue square"> + </div> + <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't + be considered for 'min-width:auto' anyway) --> + <div class="flexbox"> + <img style="flex-basis: 100px" src="support/solidblue.png" alt="blue square"> + </div> + <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't + be considered for 'min-width:auto' anyway) --> + <div class="flexbox"> + <img style="flex-basis: 10px" src="support/solidblue.png" alt="blue square"> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-min-width-auto-002b.html b/testing/web-platform/tests/css/css-flexbox/flexbox-min-width-auto-002b.html new file mode 100644 index 0000000000..a56b214dc6 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-min-width-auto-002b.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: Testing min-width:auto</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto"> + <link rel="match" href="flexbox-min-width-auto-002-ref.html"> +<!-- + This testcase tests the used value of "min-width:auto" (the property's + initial value) on flex items in a horizontal flex container. + + It's supposed to resolve to the smallest of: + a) The used 'flex-basis' (taken from 'width'), if 'flex-basis' is at its + initial value. + b) The computed 'max-width' property + c) If there's no intrinsic aspect ratio: the item's min-content width. + d) If there is an intrinsic aspect ratio: the item's width derived from + the ratio & constraints in the other dimension. + + We measure what the used value is by putting flex items in a small flex + container, which will shrink its items down to their min-width. + + This test checks for situations where we should resolve the min-width as + (d) above, with "constraints in the other dimension" being "min-height". +--> + <style> + .flexbox { + display: flex; + width: 0px; /* No available space; shrink flex items to min-width */ + margin-bottom: 2px; /* (Just for spacing things out, visually) */ + } + + .flexbox > * { + /* Flex items have purple border: */ + border: 2px dotted purple; + /* Flex items have sizing constraint in cross axis: */ + min-height: 30px; + } + </style> + </head> + <body> + <!-- Check for min-width:auto resolving correctly when the smallest + candidate value is: --> + + <!-- *** (d) (with intrinsic aspect ratio) The width derived from ratio + and constraints in the other dimension *** --> + <!-- First, with a larger candidate 'flex-basis' value (from 'width') --> + <div class="flexbox"> + <img style="width: 100px" src="support/solidblue.png" alt="blue square"> + </div> + <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't + be considered for 'min-width:auto' anyway) --> + <div class="flexbox"> + <img style="flex-basis: 100px" src="support/solidblue.png" alt="blue square"> + </div> + <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't + be considered for 'min-width:auto' anyway) --> + <div class="flexbox"> + <img style="flex-basis: 10px" src="support/solidblue.png" alt="blue square"> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-min-width-auto-002c.html b/testing/web-platform/tests/css/css-flexbox/flexbox-min-width-auto-002c.html new file mode 100644 index 0000000000..95b98e5b58 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-min-width-auto-002c.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: Testing min-width:auto</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto"> + <link rel="match" href="flexbox-min-width-auto-002-ref.html"> +<!-- + This testcase tests the used value of "min-width:auto" (the property's + initial value) on flex items in a horizontal flex container. + + It's supposed to resolve to the smallest of: + a) The used 'flex-basis' (taken from 'width'), if 'flex-basis' is at its + initial value. + b) The computed 'max-width' property + c) If there's no intrinsic aspect ratio: the item's min-content width. + d) If there is an intrinsic aspect ratio: the item's width derived from + the ratio & constraints in the other dimension. + + We measure what the used value is by putting flex items in a small flex + container, which will shrink its items down to their min-width. + + This test checks for situations where we should resolve the min-width as + (d) above, with "constraints in the other dimension" being + max-height-clamped "height". +--> + <style> + .flexbox { + display: flex; + width: 0px; /* No available space; shrink flex items to min-width */ + margin-bottom: 2px; /* (Just for spacing things out, visually) */ + } + + .flexbox > * { + /* Flex items have purple border: */ + border: 2px dotted purple; + /* Flex items have sizing constraint in cross axis: */ + max-height: 30px; + height: 60px; + } + </style> + </head> + <body> + <!-- Check for min-width:auto resolving correctly when the smallest + candidate value is: --> + + <!-- *** (d) (with intrinsic aspect ratio) The width derived from ratio + and constraints in the other dimension *** --> + <!-- First, with a larger candidate 'flex-basis' value (from 'width') --> + <div class="flexbox"> + <img style="width: 100px" src="support/solidblue.png" alt="blue square"> + </div> + <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't + be considered for 'min-width:auto' anyway) --> + <div class="flexbox"> + <img style="flex-basis: 100px" src="support/solidblue.png" alt="blue square"> + </div> + <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't + be considered for 'min-width:auto' anyway) --> + <div class="flexbox"> + <img style="flex-basis: 10px" src="support/solidblue.png" alt="blue square"> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-min-width-auto-003-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-min-width-auto-003-ref.html new file mode 100644 index 0000000000..09066eef74 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-min-width-auto-003-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .item { + /* Flex items have purple border: */ + border: 2px dotted purple; + margin-bottom: 2px; /* (Just for spacing things out, visually) */ + } + + .small { width: 26px; } + .big { width: 80px; } + + .item > * { + /* Flex items' contents are gray & fixed-size: */ + background: gray; + height: 40px; + width: 80px; + } + + .xvisible { overflow-x: visible; } + .xhidden { overflow-x: hidden; } + .xscroll { overflow-x: scroll; } + .xauto { overflow-x: auto; } + </style> + </head> + <body> + <div class="item big xvisible"><div></div></div> + <div class="item small xhidden"><div></div></div> + <div class="item small xscroll"><div></div></div> + <div class="item small xauto"><div></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-min-width-auto-003.html b/testing/web-platform/tests/css/css-flexbox/flexbox-min-width-auto-003.html new file mode 100644 index 0000000000..ecc7ab7170 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-min-width-auto-003.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: Testing min-width:auto & 'overflow' interaction</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto"> + <link rel="match" href="flexbox-min-width-auto-003-ref.html"> +<!-- + This testcase checks how "overflow-x" impacts the sizing behavior of flex + items with "min-width:auto" (the new initial value for "min-width"). + + In particular, the flex-item-specific "min-width:auto" behavior is + supposed to be disabled (e.g. we end up with min-width:0) when + "overflow-x" is non-"visible". +--> + <style> + .flexbox { + display: flex; + width: 30px; /* Shrink flex items below min-width */ + margin-bottom: 2px; /* (Just for spacing things out, visually) */ + } + + .flexbox > * { + /* Flex items have purple border: */ + border: 2px dotted purple; + } + + .flexbox > * > * { + /* Flex items' contents are gray & fixed-size: */ + background: gray; + height: 40px; + width: 80px; + } + + .xvisible { overflow-x: visible; } + .xhidden { overflow-x: hidden; } + .xscroll { overflow-x: scroll; } + .xauto { overflow-x: auto; } + </style> + </head> + <body> + <!-- min-width:auto should prevent shrinking below intrinsic width when + the flex item has "overflow-x: visible", but not for any other + overflow-x values. --> + <div class="flexbox"><div class="xvisible"><div></div></div></div> + <div class="flexbox"><div class="xhidden"><div></div></div></div> + <div class="flexbox"><div class="xscroll"><div></div></div></div> + <div class="flexbox"><div class="xauto"><div></div></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-min-width-auto-004-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-min-width-auto-004-ref.html new file mode 100644 index 0000000000..64501367ac --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-min-width-auto-004-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .item { + /* Flex items have purple border: */ + border: 2px dotted purple; + margin-bottom: 2px; /* (Just for spacing things out, visually) */ + } + + .small { width: 26px; } + .big { width: 80px; } + + .item > * { + /* Flex items' contents are gray & fixed-size: */ + background: gray; + height: 40px; + width: 80px; + } + + .yvisible { overflow-y: visible; } + .yhidden { overflow-y: hidden; } + .yscroll { overflow-y: scroll; } + .yauto { overflow-y: auto; } + </style> + </head> + <body> + <div class="item big yvisible"><div></div></div> + <div class="item small yhidden"><div></div></div> + <div class="item small yscroll"><div></div></div> + <div class="item small yauto"><div></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-min-width-auto-004.html b/testing/web-platform/tests/css/css-flexbox/flexbox-min-width-auto-004.html new file mode 100644 index 0000000000..a090f2154f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-min-width-auto-004.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: Testing min-width:auto & 'overflow' interaction</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto"> + <link rel="match" href="flexbox-min-width-auto-004-ref.html"> +<!-- + This testcase checks how "overflow-y" indirectly impacts the sizing + behavior of flex items with "min-width:auto" (the new initial value + for "min-width"), via its influence on "overflow-x". + + In particular, the flex-item-specific "min-width:auto" behavior is + supposed to be disabled (e.g. we end up with min-width:0) when + "overflow-x" is non-"visible". Moreover, when "overflow-y" is set to a + scrolling value, it forces "overflow-x" to compute to a scrolling value + as well, as described at + http://www.w3.org/TR/css-overflow-3/#overflow-properties + So, "overflow-y" has an indirect effect (via "overflow-x") here. +--> + <style> + .flexbox { + display: flex; + width: 30px; /* Shrink flex items below min-width */ + margin-bottom: 2px; /* (Just for spacing things out, visually) */ + } + + .flexbox > * { + /* Flex items have purple border: */ + border: 2px dotted purple; + } + + .flexbox > * > * { + /* Flex items' contents are gray & fixed-size: */ + background: gray; + height: 40px; + width: 80px; + } + + .yvisible { overflow-y: visible; } + .yhidden { overflow-y: hidden; } + .yscroll { overflow-y: scroll; } + .yauto { overflow-y: auto; } + </style> + </head> + <body> + <!-- min-width:auto should prevent shrinking below intrinsic width when + the flex item has "overflow-y: visible", but not for any other + overflow-y values (because of overflow-y's influence on overflow-x). + --> + <div class="flexbox"><div class="yvisible"><div></div></div></div> + <div class="flexbox"><div class="yhidden"><div></div></div></div> + <div class="flexbox"><div class="yscroll"><div></div></div></div> + <div class="flexbox"><div class="yauto"><div></div></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-min-width-auto-005.html b/testing/web-platform/tests/css/css-flexbox/flexbox-min-width-auto-005.html new file mode 100644 index 0000000000..7cf43c4d49 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-min-width-auto-005.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>CSS Flexible Box Test: Aspect ratio handling of images</title> +<link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto" /> +<link rel="help" href="https://github.com/web-platform-tests/wpt/issues/31609" /> +<link rel="match" href="reference/flexbox-min-width-auto-005-ref.html" /> + +<style> +.reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 50px; + z-index: -1; +} +.constrained-flex { + display: flex; + height: 50px; +} +br { margin: 50px; } +</style> + +<p>Test passes if there is <strong>no red</strong> visible on the page.</p> + +<div class="reference-overlapped-red"></div> +<div class="constrained-flex"> + <img src="support/40x20-green.png" /> +</div> + +<br> + +<div class="reference-overlapped-red"></div> +<div style="display: flex"> + <div class="constrained-flex"> + <img src="support/40x20-green.png" /> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-min-width-auto-006.html b/testing/web-platform/tests/css/css-flexbox/flexbox-min-width-auto-006.html new file mode 100644 index 0000000000..30e077e438 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-min-width-auto-006.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>CSS Flexible Box Test: Aspect ratio handling of images</title> +<link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto" /> +<link rel="help" href="https://github.com/web-platform-tests/wpt/issues/31609" /> +<link rel="match" href="reference/flexbox-min-width-auto-006-ref.html" /> + +<style> +.constrained-width-flex { + width: 100px; + display: flex; + border: 1px solid black; +} +.constrained-height-flex { + display: flex; + height: 100px; +} +</style> + +<p>Test passes if there are two 100x100 green squares.</p> + +<div class="constrained-width-flex"> + <div class="constrained-height-flex"> + <img src="data:image/svg+xml, + <svg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'> + <rect width='100%' height='100%' fill='green'/> + </svg>"/> + </div> +</div> + +<br> + +<div class="constrained-width-flex"> + <div class="constrained-height-flex"> + <img src="support/60x60-green.png"/> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-order-from-lowest.html b/testing/web-platform/tests/css/css-flexbox/flexbox-order-from-lowest.html new file mode 100644 index 0000000000..b4adcf40d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-order-from-lowest.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: flex container layout starts with lowest order item</title> + <link rel="author" title="Sylvain Galineau" href="mailto:galineau@adobe.com"> + <link rel="reviewer" title="Arron Eicholz" href="mailto:arronei@microsoft.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#order-property"> + <meta name="assert" content="This test check that a flex container layous out its content starting with the lowest numbered ordinal group and going up"> + <style> + #test { + display: flex; + } + + #leftmost { + order: -1; + } + + #middle { + order:0; + } + + #rightmost { + order:1; + } + </style> + </head> + <body> + <p>Test passes if the paragraph below reads 'First,Second,Third'.</p> + <div id="test"> + <p id="rightmost">Third</p> + <p id="middle">Second,</p> + <p id="leftmost">First,</p> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-order-only-flexitems.html b/testing/web-platform/tests/css/css-flexbox/flexbox-order-only-flexitems.html new file mode 100644 index 0000000000..0d99139e0d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-order-only-flexitems.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: order only affects flex items</title> + <link rel="author" title="Sylvain Galineau" href="mailto:galineau@adobe.com"> + <link rel="reviewer" title="Arron Eicholz" href="mailto:arronei@microsoft.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#order-property"> + <link rel="match" href="reference/flexbox-order-only-flexitems-ref.html"> + <meta name="assert" content="This test check that the order property has no effect on elements that are not flex items"> + <style> + #test { + display: block; /* Not a flex container */ + } + + #leftmost { + order: 2; + } + + #middle { + order:1; + } + + #rightmost { + order:0; + } + </style> + </head> + <body> + <p>Test passes if the paragraph below reads 'First, Second, Third'.</p> + <div id="test"> + <span id="leftmost">First,</span> + <span id="middle">Second,</span> + <span id="rightmost">Third</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-horiz-001-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-horiz-001-ref.html new file mode 100644 index 0000000000..82af032335 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-horiz-001-ref.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .flexContainer { + background: purple; + width: 70px; + height: 70px; + float: left; + margin-right: 5px; + } + .bigItem { + background: blue; + display: inline-block; + height: 200px; + width: 75%; + float: left; + } + .smallItem { + background: teal; + width: 25%; + /* In the testcase, we'll stretch to container's height, + minus our 10px margin-bottom. */ + height: calc(100% - 10px); + float: left; + } + .scroll { overflow: scroll } + .auto { overflow: auto } + .hidden { overflow: hidden } + </style> +</head> +<body> + <div class="flexContainer"><!-- (overflow un-set) --> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer hidden"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer scroll"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer auto"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-horiz-001.html b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-horiz-001.html new file mode 100644 index 0000000000..afc08d8c47 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-horiz-001.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- This testcase checks that we correctly handle the "overflow" property on + a horizontal flex container. --> +<html> +<head> + <title>CSS Test: Testing 'overflow' property on a horizontal flex container, with contents not overflowing</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> + <link rel="match" href="flexbox-overflow-horiz-001-ref.html"> + <style> + .flexContainer { + background: purple; + display: flex; + width: 70px; + height: 70px; + float: left; + margin-right: 5px; + } + .bigItem { + background: blue; + height: 200px; + flex: 3; + } + .smallItem { + background: teal; + margin-bottom: 10px; + flex: 1; + } + .scroll { overflow: scroll } + .auto { overflow: auto } + .hidden { overflow: hidden } + </style> +</head> +<body> + <div class="flexContainer"><!-- (overflow un-set) --> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer hidden"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer scroll"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer auto"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-horiz-002-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-horiz-002-ref.html new file mode 100644 index 0000000000..16cc9f4fa4 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-horiz-002-ref.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .flexContainer { + background: purple; + display: flex; + align-items: center; + width: 70px; + height: 70px; + float: left; + margin-right: 5px; + } + .bigItem { + background: blue; + height: 10px; + /* Tall border (taller than our container): */ + border: solid coral; + border-width: 50px 2px; + flex: 3; + } + .smallItem { + background: teal; + height: 20px; + flex: 1; + } + .hidden > .bigItem { + /* To match the testcase's "overflow:hidden"-cropped flex item, we + just use a smaller border that exactly fits our container (and + doesn't overflow). */ + border-width: 30px 2px; + } + </style> +</head> +<body> + <div class="flexContainer"><!-- (overflow un-set) --> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer hidden"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-horiz-002.html b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-horiz-002.html new file mode 100644 index 0000000000..545ebb12e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-horiz-002.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- This testcase checks that we honor "align-items" on a horizontal + flex container that has "overflow: hidden". We use a huge border on + one of the flex items, large enough that it overflows the container, + to be sure that "overflow: hidden" is actually applying. --> +<html> +<head> + <title>CSS Test: Testing 'overflow' property on a horizontal flex container, with 'align-items: center'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> + <link rel="match" href="flexbox-overflow-horiz-002-ref.html"> + <style> + .flexContainer { + background: purple; + display: flex; + align-items: center; + width: 70px; + height: 70px; + float: left; + margin-right: 5px; + } + .bigItem { + background: blue; + height: 10px; + /* Tall border (taller than our container): */ + border: solid coral; + border-width: 50px 2px; + flex: 3; + } + .smallItem { + background: teal; + height: 20px; + flex: 1; + } + .hidden { overflow: hidden } + </style> +</head> +<body> + <div class="flexContainer"><!-- (overflow un-set) --> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer hidden"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-horiz-003-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-horiz-003-ref.html new file mode 100644 index 0000000000..5693c9328e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-horiz-003-ref.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .flexContainer { + background: purple; + display: flex; + justify-content: space-around; + width: 70px; + height: 70px; + float: left; + margin-right: 5px; + } + .bigItem { + background: blue; + width: 20px; + height: 200px; + } + .smallItem { + background: teal; + width: 20px; + height: 20px; + } + .hidden > .bigItem { + /* To match the testcase's "overflow:hidden"-cropped flex item, we + just use a smaller height that exactly fits our container (and + doesn't overflow). */ + height: 70px; + } + </style> +</head> +<body> + <div class="flexContainer"><!-- (overflow un-set) --> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer hidden"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-horiz-003.html b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-horiz-003.html new file mode 100644 index 0000000000..66cbe76622 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-horiz-003.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- This testcase checks that we honor "justify-content" on a horizontal + flex container that has "overflow:hidden". We use a large flex item, + large enough that it overflows the container, to be sure that + "overflow: hidden" is actually applying. --> +<html> +<head> + <title>CSS Test: Testing 'overflow' property on a horizontal flex container, with 'justify-content: space-around'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> + <link rel="match" href="flexbox-overflow-horiz-003-ref.html"> + <style> + .flexContainer { + background: purple; + display: flex; + justify-content: space-around; + width: 70px; + height: 70px; + float: left; + margin-right: 5px; + } + .bigItem { + background: blue; + width: 20px; + height: 200px; + } + .smallItem { + background: teal; + width: 20px; + height: 20px; + } + .hidden { overflow: hidden } + </style> +</head> +<body> + <div class="flexContainer"><!-- (overflow un-set) --> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer hidden"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-horiz-004-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-horiz-004-ref.html new file mode 100644 index 0000000000..f9ae88ce48 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-horiz-004-ref.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .flexContainer { + background: purple; + display: flex; + flex-wrap: wrap; + width: 70px; + height: 70px; + float: left; + margin-right: 5px; + } + .bigItem { + background: blue; + width: 50px; + height: 200px; + } + .smallItem { + background: teal; + width: 50px; + height: 20px; + } + .hidden > .bigItem { + /* To match the testcase's "overflow:hidden"-cropped flex item, we + just use a smaller height that exactly fits the space remaining + in our container, after wrapping */ + height: 50px; + } + </style> +</head> +<body> + <div class="flexContainer"><!-- (overflow un-set) --> + <div class="smallItem"></div> + <div class="bigItem"></div> + </div> + <div class="flexContainer hidden"> + <div class="smallItem"></div> + <div class="bigItem"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-horiz-004.html b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-horiz-004.html new file mode 100644 index 0000000000..ca7471f1d2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-horiz-004.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- This testcase checks that we honor "flex-wrap" on a horizontal + flex container that has "overflow:hidden". We use a large flex item, + large enough that it overflows the container in the cross axis, to be + sure that "overflow: hidden" is actually applying. --> +<html> +<head> + <title>CSS Test: Testing 'overflow' property on a horizontal flex container, with 'flex-wrap: wrap'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> + <link rel="match" href="flexbox-overflow-horiz-004-ref.html"> + <style> + .flexContainer { + background: purple; + display: flex; + flex-wrap: wrap; + width: 70px; + height: 70px; + float: left; + margin-right: 5px; + } + .bigItem { + background: blue; + width: 50px; + height: 200px; + } + .smallItem { + background: teal; + width: 50px; + height: 20px; + } + .hidden { overflow: hidden } + </style> +</head> +<body> + <div class="flexContainer"><!-- (overflow un-set) --> + <div class="smallItem"></div> + <div class="bigItem"></div> + </div> + <div class="flexContainer hidden"> + <div class="smallItem"></div> + <div class="bigItem"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-horiz-005-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-horiz-005-ref.html new file mode 100644 index 0000000000..589712c6ac --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-horiz-005-ref.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .flexContainer { + background: purple; + display: flex; + flex-wrap: wrap; + align-content: space-around; + width: 70px; + height: 70px; + float: left; + margin-right: 5px; + } + .bigItem { + background: blue; + flex: none; /* prevent shrinking (so we can intentionally overflow) */ + width: 72px; + height: 20px; + } + .smallItem { + background: teal; + width: 20px; + height: 20px; + } + .hidden > .bigItem { + /* To match the testcase's "overflow:hidden"-cropped flex item, we + just use a smaller width that exactly fits our container (and + doesn't overflow). */ + width: 70px; + } + </style> +</head> +<body> + <div class="flexContainer"><!-- (overflow un-set) --> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer hidden"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-horiz-005.html b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-horiz-005.html new file mode 100644 index 0000000000..da4e063ca8 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-horiz-005.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- This testcase checks that we honor "align-content" on a horizontal + flex container that has "overflow:hidden". We use a large flex item, + large enough that it overflows the container in the main axis, to be + sure that "overflow: hidden" is actually applying. --> +<html> +<head> + <title>CSS Test: Testing 'overflow' property on a horizontal flex container, with 'align-content: space-around'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"> + <link rel="match" href="flexbox-overflow-horiz-005-ref.html"> + <style> + .flexContainer { + background: purple; + display: flex; + flex-wrap: wrap; + align-content: space-around; + width: 70px; + height: 70px; + float: left; + margin-right: 5px; + } + .bigItem { + background: blue; + flex: none; /* prevent shrinking (so we can intentionally overflow) */ + width: 72px; + height: 20px; + } + .smallItem { + background: teal; + width: 20px; + height: 20px; + } + .hidden { overflow: hidden } + </style> +</head> +<body> + <div class="flexContainer"><!-- (overflow un-set) --> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer hidden"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-padding-001.html b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-padding-001.html new file mode 100644 index 0000000000..1b5737a9e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-padding-001.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Flexible Box Layout Test: Test flex container's overflow rect</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + <meta name="assert" content="When computing flex container's overflow area, its padding rect is added to flex item's margin-box, not flex item's overflow rect. This test verifies that last part; making sure it's not mistakenly added to the flex container's overflow rect."> + + <style> + .scroll { + overflow: auto; + width: 100px; + height: 100px; + background: red; + } + .flexContainer { + display: flex; + padding: 25px; + background: green; + } + .flexItem { + flex-shrink: 0; + width: 30px; + height: 30px; + margin: 10px; + } + .flexItemOverflow { + width: 65px; + height: 65px; + } + </style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div class="scroll"> + <div class="flexContainer"> + <div class="flexItem"> + <!-- The item's right and bottom overflow edges should exactly touch the + flex container's right bottom left padding edges. --> + <div class="flexItemOverflow"></div> + </div> + </div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-padding-002.html b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-padding-002.html new file mode 100644 index 0000000000..60feedb44c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-padding-002.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Flexible Box Layout Test: Test flex container's overflow rect</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + <meta name="assert" content="When computing flex container's overflow area, its padding rect is added to flex item's margin-box, not flex item's overflow rect. This test verifies that last part; making sure it's not mistakenly added to the flex container's overflow rect."> + + <style> + .scroll { + overflow: auto; + width: 100px; + height: 100px; + background: red; + } + .flexContainer { + display: flex; + writing-mode: vertical-rl; + direction: rtl; + padding: 25px; + background: green; + } + .flexItem { + flex-shrink: 0; + width: 30px; + height: 30px; + margin: 10px; + } + .flexItemOverflow { + width: 65px; + height: 65px; + } + </style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div class="scroll"> + <div class="flexContainer"> + <div class="flexItem"> + <!-- The item's top and left overflow edges should exactly touch the + flex container's top and left padding edges. --> + <div class="flexItemOverflow"></div> + </div> + </div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-vert-001-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-vert-001-ref.html new file mode 100644 index 0000000000..3dfddb7bbc --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-vert-001-ref.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .flexContainer { + background: purple; + width: 70px; + height: 70px; + margin-bottom: 5px; + } + .bigItem { + width: 200px; + background: blue; + height: 75%; + } + .smallItem { + background: teal; + margin-right: 10px; + height: 25%; + } + .scroll { overflow: scroll } + .auto { overflow: auto } + .hidden { overflow: hidden } + </style> +</head> +<body> + <div class="flexContainer"><!-- (overflow un-set) --> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer hidden"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer scroll"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer auto"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-vert-001.html b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-vert-001.html new file mode 100644 index 0000000000..9c6ad35c18 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-vert-001.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- This testcase checks that we correctly handle the "overflow" property on + a vertical flex container with overflowing contents. --> +<html> +<head> + <title>CSS Test: Testing 'overflow' property on a vertical 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/#flex-containers"> + <link rel="match" href="flexbox-overflow-vert-001-ref.html"> + <style> + .flexContainer { + background: purple; + display: flex; + flex-direction: column; + width: 70px; + height: 70px; + margin-bottom: 5px; + } + .bigItem { + background: blue; + width: 200px; + flex: 3; + } + .smallItem { + background: teal; + margin-right: 10px; + flex: 1; + } + .scroll { overflow: scroll } + .auto { overflow: auto } + .hidden { overflow: hidden } + </style> +</head> +<body> + <div class="flexContainer"><!-- (overflow un-set) --> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer hidden"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer scroll"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer auto"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-vert-002-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-vert-002-ref.html new file mode 100644 index 0000000000..cf95a6b7bc --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-vert-002-ref.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .flexContainer { + background: purple; + display: flex; + flex-direction: column; + align-items: center; + width: 70px; + height: 70px; + margin-bottom: 5px; + } + .bigItem { + background: blue; + width: 10px; + /* Tall border (taller than our container): */ + border: solid coral; + border-width: 2px 50px; + flex: 3; + } + .smallItem { + background: teal; + width: 20px; + flex: 1; + } + .hidden > .bigItem { + /* To match the testcase's "overflow:hidden"-cropped flex item, we + just use a smaller border that exactly fits our container (and + doesn't overflow). */ + border-width: 2px 30px; + } + </style> +</head> +<body> + <div class="flexContainer"><!-- (overflow un-set) --> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer hidden"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-vert-002.html b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-vert-002.html new file mode 100644 index 0000000000..aeec44e54d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-vert-002.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- This testcase checks that we honor "align-items" on a vertical + flex container that has "overflow: hidden". We use a huge border on + one of the flex items, large enough that it overflows the container, + to be sure that "overflow: hidden" is actually applying. --> +<html> +<head> + <title>CSS Test: Testing 'overflow' property on a vertical flex container, with 'align-items: center'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> + <link rel="match" href="flexbox-overflow-vert-002-ref.html"> + <style> + .flexContainer { + background: purple; + display: flex; + flex-direction: column; + align-items: center; + width: 70px; + height: 70px; + margin-bottom: 5px; + } + .bigItem { + background: blue; + width: 10px; + /* Tall border (taller than our container): */ + border: solid coral; + border-width: 2px 50px; + flex: 3; + } + .smallItem { + background: teal; + width: 20px; + flex: 1; + } + .hidden { overflow: hidden } + </style> +</head> +<body> + <div class="flexContainer"><!-- (overflow un-set) --> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer hidden"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-vert-003-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-vert-003-ref.html new file mode 100644 index 0000000000..84bf022276 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-vert-003-ref.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .flexContainer { + background: purple; + display: flex; + flex-direction: column; + justify-content: space-around; + width: 70px; + height: 70px; + margin-bottom: 5px; + } + .bigItem { + background: blue; + width: 200px; + height: 20px; + } + .smallItem { + background: teal; + width: 20px; + height: 20px; + } + .hidden > .bigItem { + /* To match the testcase's "overflow:hidden"-cropped flex item, we + just use a smaller width that exactly fits our container (and + doesn't overflow). */ + width: 70px; + } + </style> +</head> +<body> + <div class="flexContainer"><!-- (overflow un-set) --> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer hidden"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-vert-003.html b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-vert-003.html new file mode 100644 index 0000000000..965b99a40f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-vert-003.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- This testcase checks that we honor "justify-content" on a vertical + flex container that has "overflow:hidden". We use a large flex item, + large enough that it overflows the container, to be sure that + "overflow: hidden" is actually applying. --> +<html> +<head> + <title>CSS Test: Testing 'overflow' property on a vertical flex container, with 'justify-content: space-around'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> + <link rel="match" href="flexbox-overflow-vert-003-ref.html"> + <style> + .flexContainer { + background: purple; + display: flex; + flex-direction: column; + justify-content: space-around; + width: 70px; + height: 70px; + margin-bottom: 5px; + } + .bigItem { + background: blue; + width: 200px; + height: 20px; + } + .smallItem { + background: teal; + width: 20px; + height: 20px; + } + .hidden { overflow: hidden } + </style> +</head> +<body> + <div class="flexContainer"><!-- (overflow un-set) --> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer hidden"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-vert-004-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-vert-004-ref.html new file mode 100644 index 0000000000..154fca8cc5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-vert-004-ref.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .flexContainer { + background: purple; + display: flex; + flex-direction: column; + flex-wrap: wrap; + width: 70px; + height: 70px; + margin-bottom: 5px; + } + .bigItem { + background: blue; + width: 200px; + height: 50px; + } + .smallItem { + background: teal; + width: 20px; + height: 50px; + } + .hidden > .bigItem { + /* To match the testcase's "overflow:hidden"-cropped flex item, we + just use a smaller width that exactly fits the space remaining + in our container, after wrapping */ + width: 50px; + } + </style> +</head> +<body> + <div class="flexContainer"><!-- (overflow un-set) --> + <div class="smallItem"></div> + <div class="bigItem"></div> + </div> + <div class="flexContainer hidden"> + <div class="smallItem"></div> + <div class="bigItem"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-vert-004.html b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-vert-004.html new file mode 100644 index 0000000000..579cb4fd1a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-vert-004.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- This testcase checks that we honor "flex-wrap" on a vertical + flex container that has "overflow:hidden". We use a large flex item, + large enough that it overflows the container in the cross axis, to be + sure that "overflow: hidden" is actually applying. --> +<html> +<head> + <title>CSS Test: Testing 'overflow' property on a vertical flex container, with 'flex-wrap: wrap'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> + <link rel="match" href="flexbox-overflow-vert-004-ref.html"> + <style> + .flexContainer { + background: purple; + display: flex; + flex-direction: column; + flex-wrap: wrap; + width: 70px; + height: 70px; + margin-bottom: 5px; + } + .bigItem { + background: blue; + width: 200px; + height: 50px; + } + .smallItem { + background: teal; + width: 20px; + height: 50px; + } + .hidden { overflow: hidden } + </style> +</head> +<body> + <div class="flexContainer"><!-- (overflow un-set) --> + <div class="smallItem"></div> + <div class="bigItem"></div> + </div> + <div class="flexContainer hidden"> + <div class="smallItem"></div> + <div class="bigItem"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-vert-005-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-vert-005-ref.html new file mode 100644 index 0000000000..56022a478d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-vert-005-ref.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .flexContainer { + background: purple; + display: flex; + flex-direction: column; + flex-wrap: wrap; + align-content: space-around; + width: 70px; + height: 70px; + margin-bottom: 5px; + } + .bigItem { + background: blue; + flex: none; /* prevent shrinking (so we can intentionally overflow) */ + width: 20px; + height: 72px; + } + .smallItem { + background: teal; + width: 20px; + height: 20px; + } + .hidden > .bigItem { + /* To match the testcase's "overflow:hidden"-cropped flex item, we + just use a smaller height that exactly fits our container (and + doesn't overflow). */ + height: 70px; + } + </style> +</head> +<body> + <div class="flexContainer"><!-- (overflow un-set) --> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer hidden"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-vert-005.html b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-vert-005.html new file mode 100644 index 0000000000..1de6d1b8c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-overflow-vert-005.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- This testcase checks that we honor "align-content" on a vertical + flex container that has "overflow:hidden". We use a large flex item, + large enough that it overflows the container in the main axis, to be + sure that "overflow: hidden" is actually applying. --> +<html> +<head> + <title>CSS Test: Testing 'overflow' property on a vertical flex container, with 'align-content: space-around'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"> + <link rel="match" href="flexbox-overflow-vert-005-ref.html"> + <style> + .flexContainer { + background: purple; + display: flex; + flex-direction: column; + flex-wrap: wrap; + align-content: space-around; + width: 70px; + height: 70px; + margin-bottom: 5px; + } + .bigItem { + background: blue; + flex: none; /* prevent shrinking (so we can intentionally overflow) */ + width: 20px; + height: 72px; + } + .smallItem { + background: teal; + width: 20px; + height: 20px; + } + .hidden { overflow: hidden } + </style> +</head> +<body> + <div class="flexContainer"><!-- (overflow un-set) --> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer hidden"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-paint-ordering-001-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-paint-ordering-001-ref.xhtml new file mode 100644 index 0000000000..635b0b29c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-paint-ordering-001-ref.xhtml @@ -0,0 +1,78 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .container { + width: 40px; + height: 14px; + border: 2px solid green; + margin-bottom: 2px; + } + .a { + width: 16px; + height: 10px; + background: blue; + min-width: 0; + border: 2px solid lightblue; + } + .b { + width: 16px; + height: 10px; + background: purple; + min-width: 0; + border: 2px solid slateblue; + } + .aKid { + margin-left: 10px; + margin-top: 2px; + width: 16px; + height: 6px; + background: yellow; + border: 1px solid black; + } + .a, .b { float: left; } + </style> + </head> + <body> + <!-- Just 6 copies of the same container, since they all should look the + same (except for the final "position: fixed" one, which needs to be + explicitly marked as "position: fixed" or else it paints differently + on Android.) --> + <div class="container"> + <div class="a"><div class="aKid"/></div> + <div class="b"></div> + </div> + + <div class="container"> + <div class="a"><div class="aKid"/></div> + <div class="b"></div> + </div> + + <div class="container"> + <div class="a"><div class="aKid"/></div> + <div class="b"></div> + </div> + + <div class="container"> + <div class="a"><div class="aKid"/></div> + <div class="b"></div> + </div> + + <div class="container"> + <div class="a"><div class="aKid"/></div> + <div class="b"></div> + </div> + + <div class="container" style="position: fixed"> + <div class="a"><div class="aKid"/></div> + <div class="b"></div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-paint-ordering-001.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-paint-ordering-001.xhtml new file mode 100644 index 0000000000..06b42e126a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-paint-ordering-001.xhtml @@ -0,0 +1,90 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with flex items containing overlapping content, to test + their paint-order. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing the paint-order of overlapping flex items, with varying tweaks on the 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/#painting"/> + <link rel="match" href="flexbox-paint-ordering-001-ref.xhtml"/> + <style> + body { + line-height: 0; + } + .container { + width: 40px; + height: 14px; + border: 2px solid green; + margin-bottom: 2px; + } + .a { + width: 16px; + height: 10px; + background: blue; + min-width: 0; + border: 2px solid lightblue; + } + .b { + width: 16px; + height: 10px; + background: purple; + min-width: 0; + border: 2px solid slateblue; + } + .aKid { + margin-left: 10px; + margin-top: 2px; + width: 16px; + height: 6px; + background: yellow; + border: 1px solid black; + } + </style> + </head> + <body> + <!-- inline-level flex container --> + <div class="container" style="display: inline-flex"> + <div class="a"><div class="aKid"/></div> + <div class="b"></div> + </div> + + <!-- block-level flex container --> + <div class="container" style="display: flex"> + <div class="a"><div class="aKid"/></div> + <div class="b"></div> + </div> + + <!-- floated flex container --> + <div class="container" style="display: flex; float: left"> + <div class="a"><div class="aKid"/></div> + <div class="b"></div> + </div> + <!-- Helper-div to clear floats: --> + <div style="clear: both"/> + + <!-- relatively-positioned flex container --> + <div class="container" style="display: flex; position: relative"> + <div class="a"><div class="aKid"/></div> + <div class="b"></div> + </div> + + <!-- absolutely-positioned flex container --> + <div class="container" style="display: flex; position: absolute"> + <div class="a"><div class="aKid"/></div> + <div class="b"></div> + </div> + <!--- Spacer div, since abspos div doesn't set aside space for itself --> + <div style="height: 20px"/> + + <!-- fixed-position flex container --> + <div class="container" style="display: flex; position: fixed"> + <div class="a"><div class="aKid"/></div> + <div class="b"></div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-paint-ordering-002-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-paint-ordering-002-ref.xhtml new file mode 100644 index 0000000000..55ca62df74 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-paint-ordering-002-ref.xhtml @@ -0,0 +1,170 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for flex items containing overlapping content. + This reference uses inline-block in place of inline-flex, with floated + children in place of flex items, and with hardcoded DOM-reordering in + place of "order" reordering. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + body { + line-height: 0; + } + + .flexbox { + display: inline-block; + width: 20px; + height: 10px; + border: 2px solid gray; + margin-bottom: 10px; + margin-right: 10px; + } + .a { + width: 10px; + height: 10px; + background: lightblue; + float: left; /* to stack horizontally, like a flex item */ + } + .b { + width: 10px; + height: 10px; + background: pink; + float: left; /* to stack horizontally, like a flex item */ + } + .aKid { + margin-left: 3px; + margin-top: 3px; + width: 10px; + height: 10px; + background: steelblue; + border: 1px solid blue; + } + .bKid { + margin-left: 3px; + margin-top: 6px; + width: 10px; + height: 10px; + background: violet; + border: 1px solid purple; + } + + /* Need to set 'position' for z-index to take effect. */ + .zn2 { z-index: -2; position: relative; } + .zn1 { z-index: -1; position: relative; } + .z0 { z-index: 0; position: relative; } + .z1 { z-index: 1; position: relative; } + + </style> + </head> + <body> + <!-- order not set: --> + <div class="flexbox"> + <div class="a"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div> + + <br/> + + <!-- order set, but it matches content order, so it shouldn't matter: --> + <div class="flexbox"> + <div class="a"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div + ><div class="flexbox"> + <div class="a"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div + ><div class="flexbox"> + <div class="a"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div + ><div class="flexbox"> + <div class="a"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div + ><div class="flexbox"> + <div class="a"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div + ><div class="flexbox"> + <div class="a"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div> + + <br/> + + <!-- order set to reverse of content-order: --> + <div class="flexbox"> + <div class="b"><div class="bKid"/></div> + <div class="a"><div class="aKid"/></div> + </div + ><div class="flexbox"> + <div class="b"><div class="bKid"/></div> + <div class="a"><div class="aKid"/></div> + </div + ><div class="flexbox"> + <div class="b"><div class="bKid"/></div> + <div class="a"><div class="aKid"/></div> + </div + ><div class="flexbox"> + <div class="b"><div class="bKid"/></div> + <div class="a"><div class="aKid"/></div> + </div> + + <br/> + + <!-- order set to reverse of content-order, AND with z-index set on + one or both items, but not such that it changes the paint order --> + <div class="flexbox"> + <div class="b"><div class="bKid"/></div> + <div class="a"><div class="aKid"/></div> + </div + ><div class="flexbox"> + <div class="b"><div class="bKid"/></div> + <div class="a"><div class="aKid"/></div> + </div + ><div class="flexbox"> + <div class="b"><div class="bKid"/></div> + <div class="a"><div class="aKid"/></div> + </div + ><div class="flexbox"> + <div class="b"><div class="bKid"/></div> + <div class="a"><div class="aKid"/></div> + </div> + + <br/> + + <!-- order set to reverse of content-order, AND with z-index set on + one or both items, in such a way that it affects paint order --> + <div class="flexbox"> + <!-- 'a' is behind the container's border --> + <div class="b"><div class="bKid"/></div> + <div class="a zn1"><div class="aKid"/></div> + </div + ><div class="flexbox"> + <!-- 'a' and 'b' are both behind the container's border --> + <div class="b zn1"><div class="bKid"/></div> + <div class="a zn1"><div class="aKid"/></div> + </div + ><div class="flexbox"> + <!-- 'a' and 'b' are both behind the container's border, + and 'a' is behind 'b' despite coming after it in the 'order' + ordering--> + <div class="b zn1"><div class="bKid"/></div> + <div class="a zn2"><div class="aKid"/></div> + </div + ><div class="flexbox"> + <!-- 'a' and 'b' are both in front of the container's border, + and 'a' is behind 'b' despite coming after it in the 'order' + ordering--> + <div class="b z1"><div class="bKid"/></div> + <div class="a z0"><div class="aKid"/></div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-paint-ordering-002.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-paint-ordering-002.xhtml new file mode 100644 index 0000000000..55a18d5b77 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-paint-ordering-002.xhtml @@ -0,0 +1,176 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with flex items containing overlapping content, with + "order" and "z-index" set on some of them, to test how that affects + paint-order. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing the paint-order of overlapping flex items with 'order' and 'z-index' set</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#painting"/> + <link rel="match" href="flexbox-paint-ordering-002-ref.xhtml"/> + <style> + body { + line-height: 0; + } + + .flexbox { + display: inline-flex; + width: 20px; + height: 10px; + border: 2px solid gray; + margin-bottom: 10px; + margin-right: 10px; + } + .a { + width: 10px; + height: 10px; + background: lightblue; + min-width: 0; + } + .b { + width: 10px; + height: 10px; + background: pink; + min-width: 0; + } + + .aKid { + margin-left: 3px; + margin-top: 3px; + width: 10px; + height: 10px; + background: steelblue; + border: 1px solid blue; + } + .bKid { + margin-left: 3px; + margin-top: 6px; + width: 10px; + height: 10px; + background: violet; + border: 1px solid purple; + } + + .on1 { order: -1; } + .o0 { order: 0; } + .o1 { order: 1; } + .o2 { order: 2; } + + .zn2 { z-index: -2; } + .zn1 { z-index: -1; } + .z0 { z-index: 0; } + .z1 { z-index: 1; } + + </style> + </head> + <body> + <!-- order not set: --> + <div class="flexbox"> + <div class="a"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div> + + <br/> + + <!-- order set, but it matches content order, so it shouldn't matter: --> + <div class="flexbox"> + <div class="a on1"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div + ><div class="flexbox"> + <div class="a o0"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div + ><div class="flexbox"> + <div class="a o0"><div class="aKid"/></div> + <div class="b o0"><div class="bKid"/></div> + </div + ><div class="flexbox"> + <div class="a o2"><div class="aKid"/></div> + <div class="b o2"><div class="bKid"/></div> + </div + ><div class="flexbox"> + <div class="a"><div class="aKid"/></div> + <div class="b o0"><div class="bKid"/></div> + </div + ><div class="flexbox"> + <div class="a"><div class="aKid"/></div> + <div class="b o1"><div class="bKid"/></div> + </div> + + <br/> + + <!-- order set to reverse of content-order: --> + <div class="flexbox"> + <div class="a o1"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div + ><div class="flexbox"> + <div class="a"><div class="aKid"/></div> + <div class="b on1"><div class="bKid"/></div> + </div + ><div class="flexbox"> + <div class="a o0"><div class="aKid"/></div> + <div class="b on1"><div class="bKid"/></div> + </div + ><div class="flexbox"> + <div class="a o2"><div class="aKid"/></div> + <div class="b o1"><div class="bKid"/></div> + </div> + + <br/> + + <!-- order set to reverse of content-order, AND with z-index set on + one or both items, but not such that it changes the paint order --> + <div class="flexbox"> + <div class="a o1 z0"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div + ><div class="flexbox"> + <div class="a o1 z1"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div + ><div class="flexbox"> + <div class="a o1 z0"><div class="aKid"/></div> + <div class="b z0"><div class="bKid"/></div> + </div + ><div class="flexbox"> + <div class="a o1 z1"><div class="aKid"/></div> + <div class="b z0"><div class="bKid"/></div> + </div> + + <br/> + + <!-- order set to reverse of content-order, AND with z-index set on + one or both items, in such a way that it affects paint order --> + <div class="flexbox"> + <!-- 'a' is behind the container's border --> + <div class="a o1 zn1"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div + ><div class="flexbox"> + <!-- 'a' and 'b' are both behind the container's border --> + <div class="a o1 zn1"><div class="aKid"/></div> + <div class="b zn1"><div class="bKid"/></div> + </div + ><div class="flexbox"> + <!-- 'a' and 'b' are both behind the container's border, + and 'a' is behind 'b' despite coming after it in the 'order' + ordering--> + <div class="a o1 zn2"><div class="aKid"/></div> + <div class="b zn1"><div class="bKid"/></div> + </div + ><div class="flexbox"> + <!-- 'a' and 'b' are both in front of the container's border, + and 'a' is behind 'b' despite coming after it in the 'order' + ordering--> + <div class="a o1 z0"><div class="aKid"/></div> + <div class="b z1"><div class="bKid"/></div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-paint-ordering-003-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-paint-ordering-003-ref.html new file mode 100644 index 0000000000..5eadc30418 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-paint-ordering-003-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .limeSquare { + background: lime; + height: 100px; width: 100px; + } + </style> +</head> +<body> + <div class="limeSquare"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-paint-ordering-003.html b/testing/web-platform/tests/css/css-flexbox/flexbox-paint-ordering-003.html new file mode 100644 index 0000000000..1a5175cb31 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-paint-ordering-003.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Testing that paint order isn't influenced + by "order" for absolutely positioned flex children</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#abspos-items"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#painting"> + <link rel="match" href="flexbox-paint-ordering-003-ref.html"> + <style> + .container { display: flex; } + .absPosLowOrder { + position: absolute; + order: 5; + background: red; + height: 0; + width: 0; + } + .absPosHighOrder { + position: absolute; + order: 10; + height: 0; + width: 0; + } + .redBlock { + height: 100px; + width: 100px; + background: red; + } + .limeBlock { + height: 100px; + width: 100px; + background: lime; + } + </style> +</head> +<body> + <div class="container"> + <!-- Note: The following elements will be superimposed. If they weren't + positioned, then they'd be flex items, and their relative "order" + values would force the first one (with the red child) to paint on top. + But since they're absolutely positioned, they're not flex items & + "order" has no effect, and so the lime one should end up on top. --> + <div class="absPosHighOrder"><div class="redBlock"></div></div> + <div class="absPosLowOrder"><div class="limeBlock"></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-root-node-001-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-root-node-001-ref.html new file mode 100644 index 0000000000..6a72f7618b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-root-node-001-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html style="display: flex; justify-content: center"> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + div { + display: flex; + justify-content: center; + } + </style> +</head> +<body> + <div>centered</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-root-node-001a.html b/testing/web-platform/tests/css/css-flexbox/flexbox-root-node-001a.html new file mode 100644 index 0000000000..195503b943 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-root-node-001a.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- This testcase checks that we correctly handle 'display:flex' property on + the root <html> element, with the <body> as the sole flex item. --> +<html style="display: flex; justify-content: center"> +<head> + <title>CSS Test: Testing 'display:flex' on root node</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> + <link rel="match" href="flexbox-root-node-001-ref.html"> + <style> + html { + display: flex; + justify-content: center; + } + </style> +</head> +<body> + centered +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-root-node-001b.html b/testing/web-platform/tests/css/css-flexbox/flexbox-root-node-001b.html new file mode 100644 index 0000000000..87d4fc1e10 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-root-node-001b.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- This testcase checks that we correctly handle 'display:flex' property on + the root <html> element, with no explicit <body>. --> +<html style="display: flex; justify-content: center"> +<head> + <title>CSS Test: Testing 'display:flex' on root node</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> + <link rel="match" href="flexbox-root-node-001-ref.html"> + <style> + html { + display: flex; + justify-content: center; + } + </style> +</head> +centered +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-safe-overflow-position-001-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-safe-overflow-position-001-ref.html new file mode 100644 index 0000000000..b921f35ca3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-safe-overflow-position-001-ref.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0 +--> +<html> +<head> + <title>Reference: Testing safe overflow-position for align-content, justify-content, and align-items in flex containers</title> + <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> + <meta charset="utf-8"> + <style> + .flex { + display: flex; + width: 85px; + height: 65px; + border: 1px solid black; + align-content: flex-end; + justify-content: center; + align-items: center; + float: left; + clear: both; + margin-top: 100px; + } + .rowNoWrap { + flex-flow: row nowrap; + } + .columnNoWrap { + flex-flow: column wrap; + } + .item { + border: 1px solid blue; + background: lightblue; + width: 28px; + height: 28px; + flex-shrink: 0; + } + .bigItem { + border: 1px solid blue; + background: lightblue; + width: 28px; + height: 90px; + flex-shrink: 0; + } + .alignContentStart { + align-content: start; + } + .justifyContentStart { + justify-content: start; + } + .alignSelfStart { + align-self: start; + } + </style> +</head> +<body> + <div class="flex rowNoWrap justifyContentStart"> + <div class="item"></div> + <div class="item"></div> + <div class="bigItem alignSelfStart"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + </div> + <div class="flex columnNoWrap alignContentStart"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-safe-overflow-position-001.html b/testing/web-platform/tests/css/css-flexbox/flexbox-safe-overflow-position-001.html new file mode 100644 index 0000000000..8114832aa3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-safe-overflow-position-001.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0 +--> +<html> +<head> + <title>CSS Test: Testing safe overflow-position for align-content, justify-content, and align-items in flex containers</title> + <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#overflow-values"> + <link rel="match" href="flexbox-safe-overflow-position-001-ref.html"> + <meta charset="utf-8"> + <style> + .flex { + display: flex; + width: 85px; + height: 65px; + border: 1px solid black; + align-content: safe flex-end; + justify-content: safe center; + align-items: safe center; + float: left; + clear: both; + margin-top: 100px; + } + .rowNoWrap { + flex-flow: row nowrap; + } + .columnNoWrap { + flex-flow: column wrap; + } + .item { + border: 1px solid blue; + background: lightblue; + width: 28px; + height: 28px; + flex-shrink: 0; + } + .bigItem { + border: 1px solid blue; + background: lightblue; + width: 28px; + height: 90px; + flex-shrink: 0; + } + </style> +</head> +<body> + <div class="flex rowNoWrap"> + <div class="item"></div> + <div class="item"></div> + <div class="bigItem"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + </div> + <div class="flex columnNoWrap"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-safe-overflow-position-002.html b/testing/web-platform/tests/css/css-flexbox/flexbox-safe-overflow-position-002.html new file mode 100644 index 0000000000..38700c7603 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-safe-overflow-position-002.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#overflow-values"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" + content="safe flex-start allows for overflow past the end edge, which is bottom/right even in the case of wrap-reverse" /> + +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + .flex { + display: flex; + width: 90px; + height: 90px; + align-content: safe flex-start; + justify-content: safe flex-start; + flex-wrap: wrap-reverse; + } + + .item { + flex: 0 0 100px; + width: 100px; + height: 100px; + background: green; + } + +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> +<div id="reference-overlapped-red"></div> + +<div class="flex"> + <div class="item"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-safe-overflow-position-003.html b/testing/web-platform/tests/css/css-flexbox/flexbox-safe-overflow-position-003.html new file mode 100644 index 0000000000..0849a8ea88 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-safe-overflow-position-003.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#overflow-values"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" + content="safe flex-start allows for overflow past the end edge, which is bottom/right even in the case of row-reverse" /> + +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + .flex { + display: flex; + flex-flow: row-reverse; + width: 90px; + height: 90px; + align-content: safe flex-start; + justify-content: safe flex-start; + } + + .item { + flex: 0 0 100px; + width: 100px; + height: 100px; + background: green; + } + +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> +<div id="reference-overlapped-red"></div> + +<div class="flex"> + <div class="item"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-safe-overflow-position-004.html b/testing/web-platform/tests/css/css-flexbox/flexbox-safe-overflow-position-004.html new file mode 100644 index 0000000000..59245cf352 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-safe-overflow-position-004.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#overflow-values"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" + content="safe flex-start allows for overflow past the end edge, which is bottom/right even in the case of column-reverse" /> + +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + .flex { + display: flex; + flex-flow: column-reverse; + width: 90px; + height: 90px; + align-content: safe flex-start; + justify-content: safe flex-start; + } + + .item { + flex: 0 0 100px; + width: 100px; + height: 100px; + background: green; + } + +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> +<div id="reference-overlapped-red"></div> + +<div class="flex"> + <div class="item"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-safe-overflow-position-005.html b/testing/web-platform/tests/css/css-flexbox/flexbox-safe-overflow-position-005.html new file mode 100644 index 0000000000..c39defda73 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-safe-overflow-position-005.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#overflow-values"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" + content="safe flex-start allows for overflow past the end edge, which is bottom/right in the case of wrap-reverse + vertical-lr" /> + +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + .flex { + display: flex; + flex-flow: wrap-reverse; + writing-mode: vertical-lr; + inline-size: 90px; + block-size: 90px; + align-content: safe flex-start; + justify-content: safe flex-start; + } + + .item { + flex: 0 0 100px; + width: 100px; + height: 100px; + background: green; + } + +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> +<div id="reference-overlapped-red"></div> + +<div class="flex"> + <div class="item"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-safe-overflow-position-006.html b/testing/web-platform/tests/css/css-flexbox/flexbox-safe-overflow-position-006.html new file mode 100644 index 0000000000..fc1b66ff0c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-safe-overflow-position-006.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#overflow-values"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="align-self:safe has no effect on -webkit-box" /> + +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + .flex { + display: -webkit-box; + -webkit-box-align: end; + width: 90px; + height: 90px; + /* Make the green square cover the red square. */ + translate: 0 10px; + } + + .item { + min-width: 100px; + min-height: 100px; + background: green; + align-self: safe center; + } + +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> +<div id="reference-overlapped-red"></div> + +<div class="flex"> + <div class="item"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-single-line-clamp-1-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-single-line-clamp-1-ref.html new file mode 100644 index 0000000000..602c027f70 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-single-line-clamp-1-ref.html @@ -0,0 +1,26 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecoal95@gmail.com"> +<style> +.container { + display: block; + background: gray; + max-height: 200px; +} +.panel { + background: lightblue; + width: 150px; + height: 200px; + border: 1px solid purple; + box-sizing: border-box; +} +</style> +<div class="container"> + <div class="panel"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-single-line-clamp-1.html b/testing/web-platform/tests/css/css-flexbox/flexbox-single-line-clamp-1.html new file mode 100644 index 0000000000..f97d5c578a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-single-line-clamp-1.html @@ -0,0 +1,32 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<meta charset="utf-8"> +<title>CSS Test: Single-line flex containers should clamp their line's height to the container's computed min and max cross-size.</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecoal95@gmail.com"> +<link rel="match" href="flexbox-single-line-clamp-1-ref.html"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#algo-cross-line"> +<style> +.container { + display: flex; + background: gray; + max-height: 200px; +} +.panel { + background: lightblue; + width: 150px; + border: 1px solid purple; + box-sizing: border-box; +} +.tall-child { + width: 50px; + height: 400px; +} +</style> +<div class="container"> + <div class="panel"> + <div class="tall-child"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-single-line-clamp-2-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-single-line-clamp-2-ref.html new file mode 100644 index 0000000000..fda5fa7ccc --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-single-line-clamp-2-ref.html @@ -0,0 +1,26 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecoal95@gmail.com"> +<style> +.container { + background: gray; + height: 500px; + width: 250px; +} +.panel { + background: lightblue; + border: 1px solid purple; + height: 100px; +} +</style> +<div class="container"> + <div class="panel"> + </div> + <div class="panel"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-single-line-clamp-2.html b/testing/web-platform/tests/css/css-flexbox/flexbox-single-line-clamp-2.html new file mode 100644 index 0000000000..be9e50b90d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-single-line-clamp-2.html @@ -0,0 +1,39 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<meta charset="utf-8"> +<title>CSS Test: Single-line flex containers should clamp their line's height to the container's computed min and max cross-size.</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecoal95@gmail.com"> +<link rel="match" href="flexbox-single-line-clamp-2-ref.html"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#algo-cross-line"> +<style> +.container { + display: flex; + background: gray; + height: 500px; + flex-direction: column; + max-width: 250px; +} +.panel { + background: lightblue; + border: 1px solid purple; +} +.small-box { + width: 100px; + height: 100px; +} +.big-box { + width: 500px; + height: 100px; +} +</style> +<div class="container"> + <div class="panel"> + <div class="small-box"></div> + </div> + <div class="panel"> + <div class="big-box"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-single-line-clamp-3-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-single-line-clamp-3-ref.html new file mode 100644 index 0000000000..02f7eaa96a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-single-line-clamp-3-ref.html @@ -0,0 +1,30 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecoal95@gmail.com"> +<style> +.container { + background: gray; + height: 80px; +} +.panel { + background: lightblue; + width: 150px; + height: 80px; +} +.contents { + height: 10px; + width: 10px; + background: purple; +} +</style> +</head> +<div class="container"> + <div class="panel"> + <div class="contents"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-single-line-clamp-3.html b/testing/web-platform/tests/css/css-flexbox/flexbox-single-line-clamp-3.html new file mode 100644 index 0000000000..f3afbd4100 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-single-line-clamp-3.html @@ -0,0 +1,38 @@ +<!doctype html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<meta charset="utf-8"> +<title>CSS Test: Single-line flex containers should clamp their line's height to the container's computed min and max cross-size.</title> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<link rel="match" href="flexbox-single-line-clamp-3-ref.html"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#algo-cross-line"> +<style> +.container { + display: flex; + background: gray; + min-height: 80px; + + /* Don't let (default) align-content:stretch save us + by stretching the line to fit the container! The point + here is that the line should already be clamped to the + container's min-height. */ + align-content: flex-start; +} +.panel { + background: lightblue; + width: 150px; +} +.contents { + height: 10px; + width: 10px; + background: purple; +} +</style> +</head> +<div class="container"> + <div class="panel"> + <div class="contents"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-sizing-horiz-001-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-sizing-horiz-001-ref.xhtml new file mode 100644 index 0000000000..54bafd034e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-sizing-horiz-001-ref.xhtml @@ -0,0 +1,79 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { height: 10px; } + div.flexbox { + border: 1px dashed blue; + font-size: 10px; + margin-bottom: 2px; + } + div.a, div.b, div.c { float: left } + div.a { + width: 20px; + background: lightgreen; + } + div.b { + width: 40px; + background: purple; + } + div.c { + width: 40px; + background: orange; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="a" style="width: 60px"/> + <div class="b" style="width: 60px"/> + <div class="c" style="width: 60px"/> + </div> + + <div class="flexbox"> + <div class="a" style="width: 60px"/> + <div class="b" style="width: 60px"/> + <div class="c" style="width: 60px"/> + </div> + + <div class="flexbox" style="width: 300px"> + <div class="a" style="width: 60px"/> + <div class="b" style="width: 60px"/> + <div class="c" style="width: 60px"/> + </div> + + <div class="flexbox" style="width: 70px"> + <div class="a" style="width: 10px"/> + <div class="b"/> + <div class="c" style="width: 20px"/> + </div> + + <div class="flexbox" style="width: 20px"> + <!-- We add an extra layer of <div> wrapping in this chunk, with a + fixed width, to keep the overflowing children from wrapping. --> + <div style="width: 50px"> + <div class="b"/> + <div class="c" style="width: 10px"/> + </div> + </div> + + <div class="flexbox" style="width: 58px"> + <div class="a" style="width: 6px"/> + <div class="b"/> + <div class="c" style="width: 12px"/> + </div> + + <div class="flexbox" style="width: 140px"> + <div class="a" style="width: 40px"/> + <div class="b" style="width: 40px"/> + <div class="c" style="width: 60px"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-sizing-horiz-001.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-sizing-horiz-001.xhtml new file mode 100644 index 0000000000..0f9b5846de --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-sizing-horiz-001.xhtml @@ -0,0 +1,84 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This testcase checks how "min-width" and "max-width" affect the sizing + of horizontal flex containers that have no explicit "width" property. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing sizing of an auto-sized horizontal flex container with min-width and max-width constraints</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-sizing-horiz-001-ref.xhtml"/> + <style> + div { height: 10px; } + div.flexbox { + border: 1px dashed blue; + font-size: 10px; + display: flex; + margin-bottom: 2px; + } + div.a { + flex: 1 20px; + max-width: 60px; + background: lightgreen; + } + div.b { + flex: 1 20px; + min-width: 40px; + max-width: 60px; + background: purple; + } + div.c { + flex: 1 40px; + min-width: 10px; + max-width: 60px; + background: orange; + } + </style> + </head> + <body> + <!-- auto-sized horizontal flexbox should occupy the available width. --> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- Adding a small min-size shouldn't affect that. --> + <div class="flexbox" style="min-width: 10px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- ...but a (large) max-size will limit us to that size, instead of + our available size.--> + <div class="flexbox" style="max-width: 300px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- If we set a maximum size that's even smaller, it'll limit our + size and compress our children. --> + <div class="flexbox" style="max-width: 70px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- The max-size may be small enough that our items will overflow. --> + <div class="flexbox" style="max-width: 20px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- But if we add a min-size, it beats the max-size. Here, we use a + min-size smaller than the sum of the items' base sizes... --> + <div class="flexbox" style="min-width: 58px; max-width: 20px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- ...and here we use a min-size larger than the sum of the items' + base sizes. --> + <div class="flexbox" style="min-width: 140px; max-width: 20px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-sizing-horiz-002-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-sizing-horiz-002-ref.xhtml new file mode 100644 index 0000000000..29aa55a624 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-sizing-horiz-002-ref.xhtml @@ -0,0 +1,46 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { width: 200px; } + div.flexbox { + border: 1px dashed blue; + background: lightgreen; + font-size: 10px; + margin-bottom: 5px; + } + </style> + </head> + <body> + <div class="flexbox"> + <div>text</div> + </div> + + <div class="flexbox"> + <div>text</div> + </div> + + <div class="flexbox"> + <div>text</div> + </div> + + <div class="flexbox" style="height: 30px"> + <div>text</div> + </div> + + <div class="flexbox" style="height: 6px"> + <div>text</div> + </div> + + <div class="flexbox" style="height: 30px"> + <div>text</div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-sizing-horiz-002.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-sizing-horiz-002.xhtml new file mode 100644 index 0000000000..c450dd3016 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-sizing-horiz-002.xhtml @@ -0,0 +1,61 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This testcase checks how "min-height" and "max-height" affect the sizing + of horizontal flex containers that have no explicit "height" property. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing sizing of an auto-sized horizontal flex container with min-height and max-height constraints</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-sizing-horiz-002-ref.xhtml"/> + <style> + div { width: 200px; } + div.flexbox { + border: 1px dashed blue; + background: lightgreen; + font-size: 10px; + display: flex; + margin-bottom: 5px; + } + </style> + </head> + <body> + <!-- auto-height horizontal flexbox should shrinkwrap its contents. --> + <div class="flexbox"> + <div>text</div> + </div> + + <!-- Adding a small min-size shouldn't affect that. --> + <div class="flexbox" style="min-height: 2px"> + <div>text</div> + </div> + + <!-- ...nor should a large max-size. --> + <div class="flexbox" style="max-height: 300px"> + <div>text</div> + </div> + + <!-- OK. Now, if we set a minimum size that's larger than the shrinkwrap + size, we should jump up to that size.--> + <div class="flexbox" style="min-height: 30px"> + <div>text</div> + </div> + + <!-- If we set a maximum size that's smaller than the shrinkwrap size, + we should max out at that size.--> + <div class="flexbox" style="max-height: 6px"> + <div>text</div> + </div> + + <!-- But if we add a min-size, it beats the max-size. --> + <div class="flexbox" style="min-height: 30px; max-height: 5px"> + <div>text</div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-sizing-vert-001-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-sizing-vert-001-ref.xhtml new file mode 100644 index 0000000000..00c8dbaa40 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-sizing-vert-001-ref.xhtml @@ -0,0 +1,81 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { width: 10px; } + div.flexbox { + float: left; + border: 1px dashed blue; + font-size: 10px; + margin-right: 2px; + } + div.a { + height: 20px; + background: lightgreen; + } + div.b { + height: 40px; + background: purple; + } + div.c { + height: 40px; + background: orange; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <div class="flexbox"> + <div class="a" style="height: 30px"/> + <div class="b"/> + <div class="c" style="height: 50px"/> + </div> + + <div class="flexbox" style="height: 200px"> + <div class="a" style="height: 60px"/> + <div class="b" style="height: 60px"/> + <div class="c" style="height: 60px"/> + </div> + + <div class="flexbox"> + <div class="a" style="height: 10px"/> + <div class="b"/> + <div class="c" style="height: 20px"/> + </div> + + <div class="flexbox" style="height: 20px"> + <div class="b"/> + <div class="c" style="height: 10px"/> + </div> + + <div class="flexbox"> + <div class="a" style="height: 6px"/> + <div class="b"/> + <div class="c" style="height: 12px"/> + </div> + + <div class="flexbox"> + <div class="a" style="height: 40px"/> + <div class="b" style="height: 40px"/> + <div class="c" style="height: 60px"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-sizing-vert-001.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-sizing-vert-001.xhtml new file mode 100644 index 0000000000..5ac29a7001 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-sizing-vert-001.xhtml @@ -0,0 +1,98 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This testcase checks how "min-height" and "max-height" affect the sizing + of vertical flex containers that have no explicit "height" property. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing sizing of an auto-sized vertical flex container with min-height and max-height constraints</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-sizing-vert-001-ref.xhtml"/> + <style> + div { width: 10px; } + div.flexbox { + float: left; + border: 1px dashed blue; + font-size: 10px; + display: flex; + flex-direction: column; + margin-right: 2px; + } + div.a { + flex: 1 20px; + max-height: 60px; + background: lightgreen; + } + div.b { + flex: 1 20px; + min-height: 40px; + max-height: 60px; + background: purple; + } + div.c { + flex: 1 40px; + min-height: 10px; + max-height: 60px; + background: orange; + } + </style> + </head> + <body> + <!-- floated auto-sized vertical flexbox should shrinkwrap its flex items' + hypothetical main sizes (their flex base sizes, clamped to min/max) --> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- Adding a small min-size shouldn't affect that. --> + <div class="flexbox" style="min-height: 10px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- ...nor should a large max-size. --> + <div class="flexbox" style="max-height: 300px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- OK. Now, if we set a minimum size that's larger than the shrinkwrap + size, we should jump up to that size.--> + <div class="flexbox" style="min-height: 120px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- ...even if it's large enough that our items won't occupy all the + space. --> + <div class="flexbox" style="min-height: 200px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- If we set a maximum size that's smaller than the shrinkwrap size, + we should max out at that size.--> + <div class="flexbox" style="max-height: 70px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- The max-size may be small enough that our items will overflow. --> + <div class="flexbox" style="max-height: 20px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- But if we add a min-size, it beats the max-size. Here, we use a + min-size smaller than the sum of the items' base sizes... --> + <div class="flexbox" style="min-height: 58px; max-height: 20px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- ...and here we use a min-size larger than the sum of the items' + base sizes. --> + <div class="flexbox" style="min-height: 140px; max-height: 20px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-sizing-vert-002-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-sizing-vert-002-ref.xhtml new file mode 100644 index 0000000000..4a4cc5891b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-sizing-vert-002-ref.xhtml @@ -0,0 +1,47 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { height: 100px; } + div.flexbox { + float: left; + border: 1px dashed blue; + background: lightgreen; + font-size: 10px; + margin-right: 10px; + } + </style> + </head> + <body> + <div class="flexbox"> + <div>AB</div> + </div> + + <div class="flexbox"> + <div>AB</div> + </div> + + <div class="flexbox"> + <div>AB</div> + </div> + + <div class="flexbox" style="width: 30px"> + <div>AB</div> + </div> + + <div class="flexbox" style="width: 3px"> + <div>AB</div> + </div> + + <div class="flexbox" style="width: 30px"> + <div>AB</div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-sizing-vert-002.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-sizing-vert-002.xhtml new file mode 100644 index 0000000000..9cba454e90 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-sizing-vert-002.xhtml @@ -0,0 +1,62 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This testcase checks how "min-width" and "max-width" affect the sizing + of vertical flex containers that have no explicit "width" property. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing sizing of an auto-sized vertical flex container with min-width and max-width constraints</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-sizing-vert-002-ref.xhtml"/> + <style> + div { height: 100px; } + div.flexbox { + float: left; + border: 1px dashed blue; + background: lightgreen; + font-size: 10px; + display: flex; + margin-right: 10px; + } + </style> + </head> + <body> + <!-- floated auto-width vertical flexbox should shrinkwrap its contents. --> + <div class="flexbox"> + <div>AB</div> + </div> + + <!-- Adding a small min-size shouldn't affect that. --> + <div class="flexbox" style="min-width: 2px"> + <div>AB</div> + </div> + + <!-- ...nor should a large max-size. --> + <div class="flexbox" style="max-width: 300px"> + <div>AB</div> + </div> + + <!-- OK. Now, if we set a minimum size that's larger than the shrinkwrap + size, we should jump up to that size.--> + <div class="flexbox" style="min-width: 30px"> + <div>AB</div> + </div> + + <!-- If we set a maximum size that's smaller than the shrinkwrap size, + we should max out at that size.--> + <div class="flexbox" style="max-width: 3px"> + <div>AB</div> + </div> + + <!-- But if we add a min-size, it beats the max-size. --> + <div class="flexbox" style="min-width: 30px; max-width: 5px"> + <div>AB</div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-table-fixup-001-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-table-fixup-001-ref.xhtml new file mode 100644 index 0000000000..4611521543 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-table-fixup-001-ref.xhtml @@ -0,0 +1,51 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for ensuring table-fixup does not happen to adjacent + table parts directly inside of a flex container. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + border: 1px dashed blue; + width: 200px; + display: flex; + justify-content: space-around; + } + + .a { + background: lightgreen; + width: 48px; + } + + .b { + background: yellow; + width: 48px; + } + + .c { + background: pink; + width: 48px; + } + </style> + </head> + <body> + <!-- In each example here, we simply use blocks instead of table parts --> + <div class="flexbox" + ><div class="a">cell1</div><div class="b">cell2</div + ></div> + + <div class="flexbox" + ><div class="a">cell1</div><div class="b">t</div + ></div> + + <div class="flexbox" + ><div></div + ><div class="b">cell1</div + ></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-table-fixup-001.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-table-fixup-001.xhtml new file mode 100644 index 0000000000..00e1a54ffa --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-table-fixup-001.xhtml @@ -0,0 +1,65 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + Testcase with table parts inside of a flex container, which should *not* + trigger table-fixup. We use justify-content:space-between to stick packing + space between flex items, so that we can verify that e.g. a contiguous + run of <td>s will each be blockified & form its own flex item (instead of + being aggregated into a single table & single flex item). +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Testing that table cells in a flex container get blockified and each form their own flex item</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"/> + <link rel="match" href="flexbox-table-fixup-001-ref.xhtml"/> + <style> + div.flexbox { + border: 1px dashed blue; + width: 200px; + display: flex; + justify-content: space-around; + } + + td { + /* Remove any default padding for td elements, so we can compare them + easily against blocks in the reference case. */ + padding: 0px; + } + + .a { + background: lightgreen; + width: 48px; + } + + .b { + background: yellow; + width: 48px; + } + + .c { + background: pink; + width: 48px; + } + </style> + </head> + <body> + <!-- The adjacent table-parts in each example below should *not* be + grouped into the same flex item. --> + <!-- 2 adjacent table cells --> + <div class="flexbox" + ><td class="a">cell1</td><td class="b">cell2</td></div> + + <!-- Table cell followed by tbody --> + <div class="flexbox" + ><td class="a">cell1</td><tbody class="b">t</tbody></div> + + <!-- Empty table cell (ends up occupying 2px of width), followed by + nonempty table cell.--> + <div class="flexbox" + ><td></td><td class="b">cell1</td></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-whitespace-handling-001-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-whitespace-handling-001-ref.xhtml new file mode 100644 index 0000000000..236e3ee3bb --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-whitespace-handling-001-ref.xhtml @@ -0,0 +1,52 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + Reference case, with inline-blocks instead of flexbox/flex items, + with positioning done using margins. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { height: 100px; } + div.flexbox { + border: 1px dashed blue; + width: 200px; + } + div.a { + width: 30px; + background: lightgreen; + display: inline-block; + } + div.b { + width: 20px; + background: lightblue; + display: inline-block; + } + img { + width: 40px; + height: 100%; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="a" style="margin-left: 85px"/> + </div> + + <div class="flexbox"> + <div class="a" style="margin-left: 37.5px" + /><div class="b" style="margin-left: 75px"/> + </div> + + <div class="flexbox"> + <img src="support/solidblue.png" style="margin-left: 30px" + /><img src="support/solidblue.png" style="margin-left: 60px"/> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-whitespace-handling-001a.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-whitespace-handling-001a.xhtml new file mode 100644 index 0000000000..3bae116b40 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-whitespace-handling-001a.xhtml @@ -0,0 +1,57 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test verifies that we don't create anonymous flex items around + runs of inline content that are _purely_ whitespace. + + The test uses "white-space: pre", to try to tempt us into honoring + that whitespace. (but we should resist that temptation). + + The test also uses 'justify-content: space-around' to be sure we can + tell whether anonymous flex items are being created around the whitespace + (since they'd claim a share of the packing space if they were there). +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Test that anonymous flex items aren't created for pure-whitespace inline content</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"/> + <link rel="match" href="flexbox-whitespace-handling-001-ref.xhtml"/> + <style> + div { height: 100px; } + div.flexbox { + white-space: pre; + border: 1px dashed blue; + width: 200px; + display: flex; + justify-content: space-around; + } + div.a { + flex: none; + width: 30px; + background: lightgreen; + } + div.b { + flex: none; + width: 20px; + background: lightblue; + } + img { width: 40px; } + </style> + </head> + <body> + <!-- whitespace & tab after flex item --> + <div class="flexbox"><div class="a"/> </div> + + <!-- 2 spaces before flex item --> + <div class="flexbox"> <div class="a"/><div class="b"/></div> + + <!-- newline & whitespace between flex items --> + <div class="flexbox"><img src="support/solidblue.png"/> + <img src="support/solidblue.png"/></div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-whitespace-handling-001b.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-whitespace-handling-001b.xhtml new file mode 100644 index 0000000000..43a4c60ce0 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-whitespace-handling-001b.xhtml @@ -0,0 +1,48 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test is like the -1a variant, but with the whitespace removed between + flex items (since that whitespace should be ignored anyway, if we're + doing things right). +--> +<!-- XXXdholbert Does this testcase add value? + (Maybe it should be an alternate reference case.) --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Test that flex items are created correctly</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"/> + <link rel="match" href="flexbox-whitespace-handling-001-ref.xhtml"/> + <style> + div { height: 100px; } + div.flexbox { + border: 1px dashed blue; + width: 200px; + display: flex; + justify-content: space-around; + } + div.a { + width: 30px; + background: lightgreen; + } + div.b { + width: 20px; + background: lightblue; + } + img { width: 40px; } + </style> + </head> + <body> + <div class="flexbox"><div class="a"/></div> + + <div class="flexbox"><div class="a"/><div class="b"/></div> + + <div class="flexbox" + ><img src="support/solidblue.png" + /><img src="support/solidblue.png"/></div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-whitespace-handling-002-ref.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-whitespace-handling-002-ref.xhtml new file mode 100644 index 0000000000..eeeebb482d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-whitespace-handling-002-ref.xhtml @@ -0,0 +1,52 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This reference case is the same as the testcase, but with an explicit <div> + around each run of content that we expect to turn into an anonymous + flex item (to ensure that the whitespace is included). +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"/> + <style> + div { height: 100px; } + div.flexbox { + white-space: pre; + border: 1px dashed blue; + width: 200px; + display: flex; + justify-content: space-around; + } + div.a { + width: 30px; + background: lightgreen; + } + div.b { + width: 20px; + background: lightblue; + } + </style> + </head> + <body> + <!-- spaces around inline content at the beginning of flexbox --> + <div class="flexbox"><div> abc</div><div class="a"/></div> + <div class="flexbox"><div>abc </div><div class="a"/></div> + <div class="flexbox"><div> abc </div><div class="a"/></div> + + <!-- spaces around inline content at the end of flexbox --> + <div class="flexbox"><div class="a"/><div> abc</div></div> + <div class="flexbox"><div class="a"/><div>abc </div></div> + <div class="flexbox"><div class="a"/><div> abc </div></div> + + <!-- whitespace around inline content in between flex items --> + <div class="flexbox"><div class="a"/><div> abc</div><div class="b"/></div> + <div class="flexbox"><div class="a"/><div>abc </div><div class="b"/></div> + <div class="flexbox"><div class="a"/><div> abc </div><div class="b"/></div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-whitespace-handling-002.xhtml b/testing/web-platform/tests/css/css-flexbox/flexbox-whitespace-handling-002.xhtml new file mode 100644 index 0000000000..c80947f812 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-whitespace-handling-002.xhtml @@ -0,0 +1,54 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test verifies that we preserve whitespace at the beginning & end of + anonymous flex items (using "white-space: pre" so that it actually + occupies space and affects the rendering). +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Test that whitespace is preserved at the edges of anonymous flex items if 'white-space: pre' is set</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"/> + <link rel="match" href="flexbox-whitespace-handling-002-ref.xhtml"/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"/> + <style> + div { height: 100px; } + div.flexbox { + white-space: pre; + border: 1px dashed blue; + width: 200px; + display: flex; + justify-content: space-around; + } + div.a { + width: 30px; + background: lightgreen; + } + div.b { + width: 20px; + background: lightblue; + } + </style> + </head> + <body> + <!-- spaces around inline content at the beginning of flexbox --> + <div class="flexbox"> abc<div class="a"/></div> + <div class="flexbox">abc <div class="a"/></div> + <div class="flexbox"> abc <div class="a"/></div> + + <!-- spaces around inline content at the end of flexbox --> + <div class="flexbox"><div class="a"/> abc</div> + <div class="flexbox"><div class="a"/>abc </div> + <div class="flexbox"><div class="a"/> abc </div> + + <!-- whitespace around inline content in between flex items --> + <div class="flexbox"><div class="a"/> abc<div class="b"/></div> + <div class="flexbox"><div class="a"/>abc <div class="b"/></div> + <div class="flexbox"><div class="a"/> abc <div class="b"/></div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-with-multi-column-property.html b/testing/web-platform/tests/css/css-flexbox/flexbox-with-multi-column-property.html new file mode 100644 index 0000000000..56b56ca093 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-with-multi-column-property.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>CSS Flexbox: column-* properties are ignored.</title> +<link rel="stylesheet" href="support/flexbox.css"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers"> +<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#propdef-column-count"> +<link rel="match" href="reference/flexbox-with-multi-column-property-ref.html"> +<meta name="assert" content="This test ensures that column-* properties (in the Multicol module) have no effect on a flex container."/> +<style> +.flexbox, .inline-flexbox { + column-count: 2; + column-gap: 100px; + width: 20em; + font-kerning: none; +} +</style> +<div class="flexbox"> +AAAAAAAAAA BBBBBBBBBB CCCCCCCCCC DDDDDDDDDD +</div> + +<div class="inline-flexbox"> +AAAAAAAAAA BBBBBBBBBB CCCCCCCCCC DDDDDDDDDD +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-with-pseudo-elements-001-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-with-pseudo-elements-001-ref.html new file mode 100644 index 0000000000..98d23cc8de --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-with-pseudo-elements-001-ref.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case where we've swapped in actual divs (fakeBefore/fakeAfter) + for the testcase's ::before and ::after generated content. + + fakeBefore div is always the first child; fakeAfter is always the last. +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + align-items: flex-end; + justify-content: space-between; + height: 50px; + width: 300px; + margin-bottom: 2px; + background: lightgray; + } + .fakeBefore { + align-self: center; + content: 'b'; + background: yellow; + } + .fakeAfter { + align-self: center; + content: 'a'; + background: lightblue; + } + </style> +</head> +<body> + <div class="flexContainer"> + <div class="fakeBefore">b</div> + x + <div>y</div> + z + </div> + <div class="flexContainer"> + x + <div>y</div> + z + <div class="fakeAfter">a</div> + </div> + <div class="flexContainer"> + <div class="fakeBefore">b</div> + x + <div>y</div> + z + <div class="fakeAfter">a</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-with-pseudo-elements-001.html b/testing/web-platform/tests/css/css-flexbox/flexbox-with-pseudo-elements-001.html new file mode 100644 index 0000000000..0abf6ea898 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-with-pseudo-elements-001.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase to ensure we handle ::before and ::after pseudo-elements on + a flex container and treat them as flex items (e.g. honoring "align-self", + and not merging them into anonymous flex items formed around text). +--> +<html> +<head> + <title>CSS Test: Testing that generated content nodes are treated as a flex items</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"> + <link rel="match" href="flexbox-with-pseudo-elements-001-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + align-items: flex-end; + justify-content: space-between; + height: 50px; + width: 300px; + margin-bottom: 2px; + background: lightgray; + } + div.withBefore::before { + align-self: center; + content: 'b'; + background: yellow; + } + div.withAfter::after { + align-self: center; + content: 'a'; + background: lightblue; + } + </style> +</head> +<body> + <div class="flexContainer withBefore"> + x + <div>y</div> + z + </div> + <div class="flexContainer withAfter"> + x + <div>y</div> + z + </div> + <div class="flexContainer withBefore withAfter"> + x + <div>y</div> + z + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-with-pseudo-elements-002-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-with-pseudo-elements-002-ref.html new file mode 100644 index 0000000000..48d17019b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-with-pseudo-elements-002-ref.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case where we've swapped in actual divs (fakeBefore/fakeAfter) + for the testcase's ::before and ::after generated content. + + fakeBefore div is always the first child; fakeAfter is always the last. +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + margin-bottom: 2px; + background: lightgray; + } + .fakeBefore { + background: yellow; + /* This 'order' value should place us after the other elements, visually, + even though we're ::before. */ + order: 1; + } + .fakeAfter { + background: lightblue; + order: -1; + } + </style> +</head> +<body> + <!-- 'b' should be at end, due to its high 'order' value: --> + <div class="flexContainer"> + <div class="fakeBefore">b</div> + <div>I</div> + </div> + + <!-- 'b' should be at beginning, since it's '::before' and the other item has + a matching 'order' value: --> + <div class="flexContainer"> + <div class="fakeBefore">b</div> + <div style="order: 1">I</div> + </div> + + <!-- 'a' should be at beginning, due to its low 'order' value: --> + <div class="flexContainer"> + <div>I</div> + <div class="fakeAfter">a</div> + </div> + + <!-- 'a' should be at end, since it's '::after' and the other item has + a matching 'order' value: --> + <div class="flexContainer"> + <div style="order: -1">I</div> + <div class="fakeAfter">a</div> + </div> + + <!-- As above, the ::after 'a' should be at beginning, and the ::before 'b' + should be at end, due to their 'order' values --> + <div class="flexContainer"> + <div class="fakeBefore">b</div> + <div>I</div> + <div class="fakeAfter">a</div> + </div> + + <!-- ...but now the normal item "I" has its order increased, so it'll go + at the end. --> + <div class="flexContainer"> + <div class="fakeBefore">b</div> + <div style="order: 1">I</div> + <div class="fakeAfter">a</div> + </div> + + <!-- ...and now the normal item "I" has its order reduced, so it'll go + at the beginning. --> + <div class="flexContainer"> + <div class="fakeBefore">b</div> + <div style="order: -1">I</div> + <div class="fakeAfter">a</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-with-pseudo-elements-002.html b/testing/web-platform/tests/css/css-flexbox/flexbox-with-pseudo-elements-002.html new file mode 100644 index 0000000000..6e0738e749 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-with-pseudo-elements-002.html @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase to ensure we handle ::before and ::after pseudo-elements on + a flex container and treat them as flex items (e.g. honoring "order"). +--> +<html> +<head> + <title>CSS Test: Testing that generated content nodes are treated as a flex items, and honor 'order'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"> + <link rel="match" href="flexbox-with-pseudo-elements-002-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + margin-bottom: 2px; + background: lightgray; + } + .withBefore::before { + content: 'b'; + background: yellow; + /* This 'order' value should place us after the other elements, visually, + even though we're ::before. */ + order: 1; + } + .withAfter::after { + content: 'a'; + background: lightblue; + /* This 'order' value should place us before the other elements, visually, + even though we're ::after. */ + order: -1; + } + </style> +</head> +<body> + <!-- 'b' should be at end, due to its high 'order' value: --> + <div class="flexContainer withBefore"> + <div>I</div> + </div> + + <!-- 'b' should be at beginning, since it's '::before' and the other item has + a matching 'order' value: --> + <div class="flexContainer withBefore"> + <div style="order: 1">I</div> + </div> + + <!-- 'a' should be at beginning, due to its low 'order' value: --> + <div class="flexContainer withAfter"> + <div>I</div> + </div> + + <!-- 'b' should be at beginning, since it's '::after' and the other item has + a matching 'order' value: --> + <div class="flexContainer withAfter"> + <div style="order: -1">I</div> + </div> + + <!-- As above, the ::after 'a' should be at beginning, and the ::before 'b' + should be at end, due to their 'order' values --> + <div class="flexContainer withBefore withAfter"> + <div>I</div> + </div> + + <!-- ...but now the normal item "I" has its order increased, so it'll go + at the end. --> + <div class="flexContainer withBefore withAfter"> + <div style="order: 1">I</div> + </div> + + <!-- ...and now the normal item "I" has its order reduced, so it'll go + at the beginning. --> + <div class="flexContainer withBefore withAfter"> + <div style="order: -1">I</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-with-pseudo-elements-003-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-with-pseudo-elements-003-ref.html new file mode 100644 index 0000000000..bdb973023a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-with-pseudo-elements-003-ref.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case where we've swapped in actual divs (fakeBefore/fakeAfter) + for the testcase's ::before and ::after generated content. + + fakeBefore div is always the first child; fakeAfter is always the last. +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + align-items: flex-end; + justify-content: space-between; + height: 50px; + width: 300px; + margin-bottom: 2px; + background: lightgray; + } + .fakeBefore { + content: 'b'; + background: yellow; + align-self: center; + order: 1; + } + .fakeAfter { + content: 'a'; + background: lightblue; + align-self: center; + order: -1; + } + </style> +</head> +<body> + <div class="flexContainer"> + <div class="fakeBefore">b</div> + x + <div>y</div> + z + </div> + <div class="flexContainer"> + x + <div>y</div> + z + <div class="fakeAfter">a</div> + </div> + <div class="flexContainer"> + <div class="fakeBefore">b</div> + x + <div>y</div> + z + <div class="fakeAfter">a</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-with-pseudo-elements-003.html b/testing/web-platform/tests/css/css-flexbox/flexbox-with-pseudo-elements-003.html new file mode 100644 index 0000000000..fe531b126f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-with-pseudo-elements-003.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase to ensure we handle ::before and ::after pseudo-elements on a + flex container, specifically when they've got display:table-row or + table-cell. + + The table-row / table-cell 'display' values should be blockified, and the + pseudo-elements should be treated as flex items. (They should not get + wrapped in an anonymous table box.) --> +<html> +<head> + <title>CSS Test: Testing that generated content nodes with table-part display types are wrapped with an anonymous table, which forms a flex item</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"> + <link rel="match" href="flexbox-with-pseudo-elements-003-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + align-items: flex-end; + justify-content: space-between; + height: 50px; + width: 300px; + margin-bottom: 2px; + background: lightgray; + } + div.withBefore::before { + display: table-row; + content: 'b'; + background: yellow; + /* If these "align-self" & "order" properties impact the rendering (as + they should), that verifies we're being treated as a flex item. */ + align-self: center; + order: 1; + } + div.withAfter::after { + display: table-cell; + content: 'a'; + background: lightblue; + /* If these "align-self" & "order" properties impact the rendering (as + they should), that verifies we're being treated as a flex item. */ + align-self: center; + order: -1; + } + </style> +</head> +<body> + <div class="flexContainer withBefore"> + x + <div>y</div> + z + </div> + <div class="flexContainer withAfter"> + x + <div>y</div> + z + </div> + <div class="flexContainer withBefore withAfter"> + x + <div>y</div> + z + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-001-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-001-ref.html new file mode 100644 index 0000000000..e2d59662a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-001-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .flexContainer { + width: 40px; + height: 30px; + border: 1px solid gray; + margin-bottom: 5px; + /* Testcase has direction: ltr; */ + /* Testcase has writing-mode: horizontal-tb; */ + } + .flexContainer > * { + width: 20px; + height: 15px; + float: left; + } + .item1 { + /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ + background: cyan; + } + .item2 { + background: magenta; + } + .item3 { + background: yellow; + } + .item4 { + background: black; + } + </style> +</head> +<body> + <div class="flexContainer"><!-- row wrap --> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer"><!-- row wrap-reverse --> + <div class="item3"></div><div class="item4"></div> + <div class="item1"></div><div class="item2"></div> + </div> + <div class="flexContainer"><!-- row-reverse wrap --> + <div class="item2"></div><div class="item1"></div> + <div class="item4"></div><div class="item3"></div> + </div> + <div class="flexContainer"><!-- row-reverse wrap-reverse --> + <div class="item4"></div><div class="item3"></div> + <div class="item2"></div><div class="item1"></div> + </div> + + <div class="flexContainer"><!-- column wrap --> + <div class="item1"></div><div class="item3"></div> + <div class="item2"></div><div class="item4"></div> + </div> + <div class="flexContainer"><!-- column wrap-reverse --> + <div class="item3"></div><div class="item1"></div> + <div class="item4"></div><div class="item2"></div> + </div> + <div class="flexContainer"><!-- column-reverse wrap --> + <div class="item2"></div><div class="item4"></div> + <div class="item1"></div><div class="item3"></div> + </div> + <div class="flexContainer"><!-- column-reverse wrap-reverse --> + <div class="item4"></div><div class="item2"></div> + <div class="item3"></div><div class="item1"></div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-001.html b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-001.html new file mode 100644 index 0000000000..b2fb6d3f1f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-001.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Try various flex-flow values, with 'direction: ltr' and 'writing-mode: horizontal-tb'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction"> + <link rel="match" href="flexbox-writing-mode-001-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + width: 40px; + height: 30px; + border: 1px solid gray; + margin-bottom: 5px; + direction: ltr; + writing-mode: horizontal-tb; + } + .flexContainer > * { + width: 20px; + height: 15px; + } + .item1 { + /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ + background: cyan; + } + .item2 { + background: magenta; + } + .item3 { + background: yellow; + } + .item4 { + background: black; + } + </style> +</head> +<body> + <div class="flexContainer" style="flex-flow: row wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: row wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: row-reverse wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: row-reverse wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + + <div class="flexContainer" style="flex-flow: column wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: column wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: column-reverse wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: column-reverse wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-002-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-002-ref.html new file mode 100644 index 0000000000..4c3166171b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-002-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .flexContainer { + width: 40px; + height: 30px; + border: 1px solid gray; + margin-bottom: 5px; + /* Testcase has direction: ltr; */ + /* Testcase has writing-mode: vertical-rl; */ + } + .flexContainer > * { + width: 20px; + height: 15px; + float: left; + } + .item1 { + /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ + background: cyan; + } + .item2 { + background: magenta; + } + .item3 { + background: yellow; + } + .item4 { + background: black; + } + </style> +</head> +<body> + <div class="flexContainer"><!-- row wrap --> + <div class="item3"></div><div class="item1"></div> + <div class="item4"></div><div class="item2"></div> + </div> + <div class="flexContainer"><!-- row wrap-reverse --> + <div class="item1"></div><div class="item3"></div> + <div class="item2"></div><div class="item4"></div> + </div> + <div class="flexContainer"><!-- row-reverse wrap --> + <div class="item4"></div><div class="item2"></div> + <div class="item3"></div><div class="item1"></div> + </div> + <div class="flexContainer"><!-- row-reverse wrap-reverse --> + <div class="item2"></div><div class="item4"></div> + <div class="item1"></div><div class="item3"></div> + </div> + + <div class="flexContainer"><!-- column wrap --> + <div class="item2"></div><div class="item1"></div> + <div class="item4"></div><div class="item3"></div> + </div> + <div class="flexContainer"><!-- column wrap-reverse --> + <div class="item4"></div><div class="item3"></div> + <div class="item2"></div><div class="item1"></div> + </div> + <div class="flexContainer"><!-- column-reverse wrap --> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer"><!-- column-reverse wrap-reverse --> + <div class="item3"></div><div class="item4"></div> + <div class="item1"></div><div class="item2"></div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-002.html b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-002.html new file mode 100644 index 0000000000..8e1c724ed7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-002.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Try various flex-flow values, with 'direction: ltr' and 'writing-mode: vertical-rl'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction"> + <link rel="match" href="flexbox-writing-mode-002-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + width: 40px; + height: 30px; + border: 1px solid gray; + margin-bottom: 5px; + direction: ltr; + writing-mode: vertical-rl; + } + .flexContainer > * { + width: 20px; + height: 15px; + } + .item1 { + /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ + background: cyan; + } + .item2 { + background: magenta; + } + .item3 { + background: yellow; + } + .item4 { + background: black; + } + </style> +</head> +<body> + <div class="flexContainer" style="flex-flow: row wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: row wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: row-reverse wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: row-reverse wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + + <div class="flexContainer" style="flex-flow: column wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: column wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: column-reverse wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: column-reverse wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-003-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-003-ref.html new file mode 100644 index 0000000000..2d89eea66b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-003-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .flexContainer { + width: 40px; + height: 30px; + border: 1px solid gray; + margin-bottom: 5px; + /* Testcase has direction: ltr; */ + /* Testcase has writing-mode: vertical-lr; */ + } + .flexContainer > * { + width: 20px; + height: 15px; + float: left; + } + .item1 { + /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ + background: cyan; + } + .item2 { + background: magenta; + } + .item3 { + background: yellow; + } + .item4 { + background: black; + } + </style> +</head> +<body> + <div class="flexContainer"><!-- row wrap --> + <div class="item1"></div><div class="item3"></div> + <div class="item2"></div><div class="item4"></div> + </div> + <div class="flexContainer"><!-- row wrap-reverse --> + <div class="item3"></div><div class="item1"></div> + <div class="item4"></div><div class="item2"></div> + </div> + <div class="flexContainer"><!-- row-reverse wrap --> + <div class="item2"></div><div class="item4"></div> + <div class="item1"></div><div class="item3"></div> + </div> + <div class="flexContainer"><!-- row-reverse wrap-reverse --> + <div class="item4"></div><div class="item2"></div> + <div class="item3"></div><div class="item1"></div> + </div> + + <div class="flexContainer"><!-- column wrap --> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer"><!-- column wrap-reverse --> + <div class="item3"></div><div class="item4"></div> + <div class="item1"></div><div class="item2"></div> + </div> + <div class="flexContainer"><!-- column-reverse wrap --> + <div class="item2"></div><div class="item1"></div> + <div class="item4"></div><div class="item3"></div> + </div> + <div class="flexContainer"><!-- column-reverse wrap-reverse --> + <div class="item4"></div><div class="item3"></div> + <div class="item2"></div><div class="item1"></div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-003.html b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-003.html new file mode 100644 index 0000000000..9b4450487f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-003.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Try various flex-flow values, with 'direction: ltr' and 'writing-mode: vertical-lr'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction"> + <link rel="match" href="flexbox-writing-mode-003-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + width: 40px; + height: 30px; + border: 1px solid gray; + margin-bottom: 5px; + direction: ltr; + writing-mode: vertical-lr; + } + .flexContainer > * { + width: 20px; + height: 15px; + } + .item1 { + /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ + background: cyan; + } + .item2 { + background: magenta; + } + .item3 { + background: yellow; + } + .item4 { + background: black; + } + </style> +</head> +<body> + <div class="flexContainer" style="flex-flow: row wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: row wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: row-reverse wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: row-reverse wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + + <div class="flexContainer" style="flex-flow: column wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: column wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: column-reverse wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: column-reverse wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-004-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-004-ref.html new file mode 100644 index 0000000000..1176830b56 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-004-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .flexContainer { + width: 40px; + height: 30px; + border: 1px solid gray; + margin-bottom: 5px; + /* Testcase has direction: rtl; */ + /* Testcase has writing-mode: horizontal-tb; */ + } + .flexContainer > * { + width: 20px; + height: 15px; + float: left; + } + .item1 { + /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ + background: cyan; + } + .item2 { + background: magenta; + } + .item3 { + background: yellow; + } + .item4 { + background: black; + } + </style> +</head> +<body> + <div class="flexContainer"><!-- row wrap --> + <div class="item2"></div><div class="item1"></div> + <div class="item4"></div><div class="item3"></div> + </div> + <div class="flexContainer"><!-- row wrap-reverse --> + <div class="item4"></div><div class="item3"></div> + <div class="item2"></div><div class="item1"></div> + </div> + <div class="flexContainer"><!-- row-reverse wrap --> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer"><!-- row-reverse wrap-reverse --> + <div class="item3"></div><div class="item4"></div> + <div class="item1"></div><div class="item2"></div> + </div> + + <div class="flexContainer"><!-- column wrap --> + <div class="item3"></div><div class="item1"></div> + <div class="item4"></div><div class="item2"></div> + </div> + <div class="flexContainer"><!-- column wrap-reverse --> + <div class="item1"></div><div class="item3"></div> + <div class="item2"></div><div class="item4"></div> + </div> + <div class="flexContainer"><!-- column-reverse wrap --> + <div class="item4"></div><div class="item2"></div> + <div class="item3"></div><div class="item1"></div> + </div> + <div class="flexContainer"><!-- column-reverse wrap-reverse --> + <div class="item2"></div><div class="item4"></div> + <div class="item1"></div><div class="item3"></div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-004.html b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-004.html new file mode 100644 index 0000000000..38f4158680 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-004.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Try various flex-flow values, with 'direction: rtl' and 'writing-mode: horizontal-tb'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction"> + <link rel="match" href="flexbox-writing-mode-004-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + width: 40px; + height: 30px; + border: 1px solid gray; + margin-bottom: 5px; + direction: rtl; + writing-mode: horizontal-tb; + } + .flexContainer > * { + width: 20px; + height: 15px; + } + .item1 { + /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ + background: cyan; + } + .item2 { + background: magenta; + } + .item3 { + background: yellow; + } + .item4 { + background: black; + } + </style> +</head> +<body> + <div class="flexContainer" style="flex-flow: row wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: row wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: row-reverse wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: row-reverse wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + + <div class="flexContainer" style="flex-flow: column wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: column wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: column-reverse wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: column-reverse wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-005-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-005-ref.html new file mode 100644 index 0000000000..a0894911bd --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-005-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .flexContainer { + width: 40px; + height: 30px; + border: 1px solid gray; + margin-bottom: 5px; + /* Testcase has direction: rtl; */ + /* Testcase has writing-mode: vertical-rl; */ + } + .flexContainer > * { + width: 20px; + height: 15px; + float: left; + } + .item1 { + /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ + background: cyan; + } + .item2 { + background: magenta; + } + .item3 { + background: yellow; + } + .item4 { + background: black; + } + </style> +</head> +<body> + <div class="flexContainer"><!-- row wrap --> + <div class="item4"></div><div class="item2"></div> + <div class="item3"></div><div class="item1"></div> + </div> + <div class="flexContainer"><!-- row wrap-reverse --> + <div class="item2"></div><div class="item4"></div> + <div class="item1"></div><div class="item3"></div> + </div> + <div class="flexContainer"><!-- row-reverse wrap --> + <div class="item3"></div><div class="item1"></div> + <div class="item4"></div><div class="item2"></div> + </div> + <div class="flexContainer"><!-- row-reverse wrap-reverse --> + <div class="item1"></div><div class="item3"></div> + <div class="item2"></div><div class="item4"></div> + </div> + + <div class="flexContainer"><!-- column wrap --> + <div class="item4"></div><div class="item3"></div> + <div class="item2"></div><div class="item1"></div> + </div> + <div class="flexContainer"><!-- column wrap-reverse --> + <div class="item2"></div><div class="item1"></div> + <div class="item4"></div><div class="item3"></div> + </div> + <div class="flexContainer"><!-- column-reverse wrap --> + <div class="item3"></div><div class="item4"></div> + <div class="item1"></div><div class="item2"></div> + </div> + <div class="flexContainer"><!-- column-reverse wrap-reverse --> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-005.html b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-005.html new file mode 100644 index 0000000000..65826fc2e3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-005.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Try various flex-flow values, with 'direction: rtl' and 'writing-mode: vertical-rl'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction"> + <link rel="match" href="flexbox-writing-mode-005-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + width: 40px; + height: 30px; + border: 1px solid gray; + margin-bottom: 5px; + direction: rtl; + writing-mode: vertical-rl; + } + .flexContainer > * { + width: 20px; + height: 15px; + } + .item1 { + /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ + background: cyan; + } + .item2 { + background: magenta; + } + .item3 { + background: yellow; + } + .item4 { + background: black; + } + </style> +</head> +<body> + <div class="flexContainer" style="flex-flow: row wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: row wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: row-reverse wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: row-reverse wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + + <div class="flexContainer" style="flex-flow: column wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: column wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: column-reverse wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: column-reverse wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-006-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-006-ref.html new file mode 100644 index 0000000000..8c045354bc --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-006-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .flexContainer { + width: 40px; + height: 30px; + border: 1px solid gray; + margin-bottom: 5px; + /* Testcase has direction: rtl; */ + /* Testcase has writing-mode: vertical-lr; */ + } + .flexContainer > * { + width: 20px; + height: 15px; + float: left; + } + .item1 { + /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ + background: cyan; + } + .item2 { + background: magenta; + } + .item3 { + background: yellow; + } + .item4 { + background: black; + } + </style> +</head> +<body> + <div class="flexContainer"><!-- row wrap --> + <div class="item2"></div><div class="item4"></div> + <div class="item1"></div><div class="item3"></div> + </div> + <div class="flexContainer"><!-- row wrap-reverse --> + <div class="item4"></div><div class="item2"></div> + <div class="item3"></div><div class="item1"></div> + </div> + <div class="flexContainer"><!-- row-reverse wrap --> + <div class="item1"></div><div class="item3"></div> + <div class="item2"></div><div class="item4"></div> + </div> + <div class="flexContainer"><!-- row-reverse wrap-reverse --> + <div class="item3"></div><div class="item1"></div> + <div class="item4"></div><div class="item2"></div> + </div> + + <div class="flexContainer"><!-- column wrap --> + <div class="item3"></div><div class="item4"></div> + <div class="item1"></div><div class="item2"></div> + </div> + <div class="flexContainer"><!-- column wrap-reverse --> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer"><!-- column-reverse wrap --> + <div class="item4"></div><div class="item3"></div> + <div class="item2"></div><div class="item1"></div> + </div> + <div class="flexContainer"><!-- column-reverse wrap-reverse --> + <div class="item2"></div><div class="item1"></div> + <div class="item4"></div><div class="item3"></div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-006.html b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-006.html new file mode 100644 index 0000000000..3e8352a45a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-006.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Try various flex-flow values, with 'direction: rtl' and 'writing-mode: vertical-lr'</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction"> + <link rel="match" href="flexbox-writing-mode-006-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + width: 40px; + height: 30px; + border: 1px solid gray; + margin-bottom: 5px; + direction: rtl; + writing-mode: vertical-lr; + } + .flexContainer > * { + width: 20px; + height: 15px; + } + .item1 { + /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ + background: cyan; + } + .item2 { + background: magenta; + } + .item3 { + background: yellow; + } + .item4 { + background: black; + } + </style> +</head> +<body> + <div class="flexContainer" style="flex-flow: row wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: row wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: row-reverse wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: row-reverse wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + + <div class="flexContainer" style="flex-flow: column wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: column wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: column-reverse wrap"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer" style="flex-flow: column-reverse wrap-reverse"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-007-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-007-ref.html new file mode 100644 index 0000000000..0d2e9207be --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-007-ref.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .flexContainer { + width: 40px; + height: 30px; + border: 1px solid gray; + margin-bottom: 5px; + } + .flexContainer > * { + width: 20px; + height: 15px; + float: left; + } + .item1 { + /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ + background: cyan; + } + .item2 { + background: magenta; + } + .item3 { + background: yellow; + } + .item4 { + background: black; + } + </style> +</head> +<body> + <div class="flexContainer"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-007.html b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-007.html new file mode 100644 index 0000000000..521af54af4 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-007.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"> + <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode"> + <link rel="match" href="flexbox-writing-mode-007-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + width: 40px; + height: 30px; + border: 1px solid gray; + margin-bottom: 5px; + writing-mode: horizontal-tb; + flex-flow: row wrap; + } + .flexContainer > * { + width: 20px; + height: 15px; + } + .item1 { + /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ + background: cyan; + } + .item2 { + background: magenta; + } + .item3 { + background: yellow; + } + .item4 { + background: black; + } + + /* Classes applied to flex container, to customize its children + * (which should not affect their sizing): + */ + .kids_horizontal_tb > * { + writing-mode: horizontal-tb; + } + .kids_vertical_lr > * { + writing-mode: vertical-lr; + } + .kids_vertical_rl > * { + writing-mode: vertical-rl; + } + + </style> +</head> +<body> + <div class="flexContainer"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer kids_horizontal_tb"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer kids_vertical_lr"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer kids_vertical_rl"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-008-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-008-ref.html new file mode 100644 index 0000000000..8a21dd65f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-008-ref.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .flexContainer { + width: 40px; + height: 30px; + border: 1px solid gray; + margin-bottom: 5px; + } + .flexContainer > * { + width: 20px; + height: 15px; + float: left; + } + .item1 { + /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ + background: cyan; + } + .item2 { + background: magenta; + } + .item3 { + background: yellow; + } + .item4 { + background: black; + } + </style> +</head> +<body> + <div class="flexContainer"> + <div class="item1"></div><div class="item3"></div> + <div class="item2"></div><div class="item4"></div> + </div> + <div class="flexContainer"> + <div class="item1"></div><div class="item3"></div> + <div class="item2"></div><div class="item4"></div> + </div> + <div class="flexContainer"> + <div class="item1"></div><div class="item3"></div> + <div class="item2"></div><div class="item4"></div> + </div> + <div class="flexContainer"> + <div class="item1"></div><div class="item3"></div> + <div class="item2"></div><div class="item4"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-008.html b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-008.html new file mode 100644 index 0000000000..98fd83fbc8 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-008.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"> + <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode"> + <link rel="match" href="flexbox-writing-mode-008-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + width: 40px; + height: 30px; + border: 1px solid gray; + margin-bottom: 5px; + writing-mode: vertical-lr; + flex-flow: row wrap; + } + .flexContainer > * { + width: 20px; + height: 15px; + } + .item1 { + /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ + background: cyan; + } + .item2 { + background: magenta; + } + .item3 { + background: yellow; + } + .item4 { + background: black; + } + + /* Classes applied to flex container, to customize its children + * (which should not affect their sizing): + */ + .kids_horizontal_tb > * { + writing-mode: horizontal-tb; + } + .kids_vertical_lr > * { + writing-mode: vertical-lr; + } + .kids_vertical_rl > * { + writing-mode: vertical-rl; + } + + </style> +</head> +<body> + <div class="flexContainer"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer kids_horizontal_tb"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer kids_vertical_lr"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer kids_vertical_rl"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-009-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-009-ref.html new file mode 100644 index 0000000000..5a96eb9998 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-009-ref.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .flexContainer { + width: 40px; + height: 30px; + border: 1px solid gray; + margin-bottom: 5px; + } + .flexContainer > * { + width: 20px; + height: 15px; + float: left; + } + .item1 { + /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ + background: cyan; + } + .item2 { + background: magenta; + } + .item3 { + background: yellow; + } + .item4 { + background: black; + } + </style> +</head> +<body> + <div class="flexContainer"> + <div class="item3"></div><div class="item1"></div> + <div class="item4"></div><div class="item2"></div> + </div> + <div class="flexContainer"> + <div class="item3"></div><div class="item1"></div> + <div class="item4"></div><div class="item2"></div> + </div> + <div class="flexContainer"> + <div class="item3"></div><div class="item1"></div> + <div class="item4"></div><div class="item2"></div> + </div> + <div class="flexContainer"> + <div class="item3"></div><div class="item1"></div> + <div class="item4"></div><div class="item2"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-009.html b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-009.html new file mode 100644 index 0000000000..edd63a982a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-009.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"> + <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode"> + <link rel="match" href="flexbox-writing-mode-009-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + width: 40px; + height: 30px; + border: 1px solid gray; + margin-bottom: 5px; + writing-mode: vertical-rl; + flex-flow: row wrap; + } + .flexContainer > * { + width: 20px; + height: 15px; + } + .item1 { + /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ + background: cyan; + } + .item2 { + background: magenta; + } + .item3 { + background: yellow; + } + .item4 { + background: black; + } + + /* Classes applied to flex container, to customize its children + * (which should not affect their sizing): + */ + .kids_horizontal_tb > * { + writing-mode: horizontal-tb; + } + .kids_vertical_lr > * { + writing-mode: vertical-lr; + } + .kids_vertical_rl > * { + writing-mode: vertical-rl; + } + + </style> +</head> +<body> + <div class="flexContainer"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer kids_horizontal_tb"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer kids_vertical_lr"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> + <div class="flexContainer kids_vertical_rl"> + <div class="item1"></div><div class="item2"></div> + <div class="item3"></div><div class="item4"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-010-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-010-ref.html new file mode 100644 index 0000000000..d30d71e4d2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-010-ref.html @@ -0,0 +1,90 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> + .container { + display: block; + border: 2px solid purple; + padding: 2px; + margin-bottom: 2em; + height: 150px; + width: 500px; + } + + span { + display: block; + background: lightgrey; + border: 2px solid black; + margin: 11px 13px 17px 7px; + inline-size: 6px; + } + + .small { font: 12px Ahem; } + .big { font: 20px Ahem; } + + .hl { writing-mode: horizontal-tb; direction: ltr; } + .hr { writing-mode: horizontal-tb; direction: rtl; } + .vl { writing-mode: vertical-lr; direction: ltr; } + .vr { writing-mode: vertical-rl; direction: ltr; } + .vl_rtl { writing-mode: vertical-lr; direction: rtl; } + .vr_rtl { writing-mode: vertical-rl; direction: rtl; } + + .container > .hl, .container > .hr { + /* In the testcase, these items are stretched vertically + via the default "align-self:stretch" behavior, and because + they have a height of "auto". + (The rest of the items have a non-auto height from "inline-size" + and their vertical writing-mode, so those ones do not stretch.) */ + height: 118px; + } + + .container.hl > * { float: left; } + .container.hr > * { float: right; } + + </style> +</head> +<body> + +<div class="container hl"> + <span class="hl small">p b c</span> + <span class="hl big">p e</span> + <span class="hr small">p b c</span> + <span class="hr big">p e</span> + <span class="vl small">p b c</span> + <span class="vl big">p e</span> +</div> +<div class="container hl"> + <span class="vr small">p b c</span> + <span class="vr big">p e</span> + <span class="vl_rtl small">p b c</span> + <span class="vl_rtl big">p e</span> + <span class="vr_rtl small">p b c</span> + <span class="vr_rtl big">p e</span> +</div> +<div class="container hr"> + <span class="hl small">p b c</span> + <span class="hl big">p e</span> + <span class="hr small">p b c</span> + <span class="hr big">p e</span> + <span class="vl small">p b c</span> + <span class="vl big">p e</span> +</div> +<div class="container hr"> + <span class="vr small">p b c</span> + <span class="vr big">p e</span> + <span class="vl_rtl small">p b c</span> + <span class="vl_rtl big">p e</span> + <span class="vr_rtl small">p b c</span> + <span class="vr_rtl big">p e</span> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-010.html b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-010.html new file mode 100644 index 0000000000..542bde16ce --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-010.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: Testing a mix of flex items with various values for + 'writing-mode' / 'direction' in a horizontal row-oriented flex container. + </title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <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-writing-modes-3/#propdef-writing-mode"> + <link rel="match" href="flexbox-writing-mode-010-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> + .container { + display: flex; + flex-direction: row; + border: 2px solid purple; + padding: 2px; + margin-bottom: 2em; + height: 150px; + width: 500px; + } + + span { + display: block; + background: lightgrey; + border: 2px solid black; + margin: 11px 13px 17px 7px; + inline-size: 6px; + } + + .small { font: 12px Ahem; } + .big { font: 20px Ahem; } + + .hl { writing-mode: horizontal-tb; direction: ltr; } + .hr { writing-mode: horizontal-tb; direction: rtl; } + .vl { writing-mode: vertical-lr; direction: ltr; } + .vr { writing-mode: vertical-rl; direction: ltr; } + .vl_rtl { writing-mode: vertical-lr; direction: rtl; } + .vr_rtl { writing-mode: vertical-rl; direction: rtl; } + </style> +</head> +<body> + +<div class="container hl"> + <span class="hl small">p b c</span> + <span class="hl big">p e</span> + <span class="hr small">p b c</span> + <span class="hr big">p e</span> + <span class="vl small">p b c</span> + <span class="vl big">p e</span> +</div> +<div class="container hl"> + <span class="vr small">p b c</span> + <span class="vr big">p e</span> + <span class="vl_rtl small">p b c</span> + <span class="vl_rtl big">p e</span> + <span class="vr_rtl small">p b c</span> + <span class="vr_rtl big">p e</span> +</div> +<div class="container hr"> + <span class="hl small">p b c</span> + <span class="hl big">p e</span> + <span class="hr small">p b c</span> + <span class="hr big">p e</span> + <span class="vl small">p b c</span> + <span class="vl big">p e</span> +</div> +<div class="container hr"> + <span class="vr small">p b c</span> + <span class="vr big">p e</span> + <span class="vl_rtl small">p b c</span> + <span class="vl_rtl big">p e</span> + <span class="vr_rtl small">p b c</span> + <span class="vr_rtl big">p e</span> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-011-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-011-ref.html new file mode 100644 index 0000000000..0f97d42ce5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-011-ref.html @@ -0,0 +1,93 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> + .container { + display: block; + float: left; + border: 2px solid purple; + padding: 2px; + margin-bottom: 2em; + height: 500px; + width: 150px; + } + + span { + display: block; + background: lightgrey; + border: 2px solid black; + margin: 11px 13px 17px 7px; + inline-size: 6px; + + /* This really floats to top ('logical left'), since all the containers + have a vertical writing mode. */ + float: left; + } + + .small { font: 12px Ahem; } + .big { font: 20px Ahem; } + + .hl { writing-mode: horizontal-tb; direction: ltr; } + .hr { writing-mode: horizontal-tb; direction: rtl; } + .vl { writing-mode: vertical-lr; direction: ltr; } + .vr { writing-mode: vertical-rl; direction: ltr; } + .vl_rtl { writing-mode: vertical-lr; direction: rtl; } + .vr_rtl { writing-mode: vertical-rl; direction: rtl; } + + + .container > .vl, .container > .vr, + .container > .vl_rtl, .container > .vr_rtl { + /* In the testcase, these items are stretched horizontally + via the default "align-self:stretch" behavior, and because + they have a width of "auto". + (The rest of the items have a non-auto width from "inline-size" + and their horizontal writing-mode, so those ones do not stretch.) */ + width: 126px; + } + </style> +</head> +<body> + +<div class="container vl"> + <span class="hl small">p b c</span> + <span class="hl big">p e</span> + <span class="hr small">p b c</span> + <span class="hr big">p e</span> + <span class="vl small">p b c</span> + <span class="vl big">p e</span> +</div> +<div class="container vl"> + <span class="vr small">p b c</span> + <span class="vr big">p e</span> + <span class="vl_rtl small">p b c</span> + <span class="vl_rtl big">p e</span> + <span class="vr_rtl small">p b c</span> + <span class="vr_rtl big">p e</span> +</div> +<div class="container vr"> + <span class="hl small">p b c</span> + <span class="hl big">p e</span> + <span class="hr small">p b c</span> + <span class="hr big">p e</span> + <span class="vl small">p b c</span> + <span class="vl big">p e</span> +</div> +<div class="container vr"> + <span class="vr small">p b c</span> + <span class="vr big">p e</span> + <span class="vl_rtl small">p b c</span> + <span class="vl_rtl big">p e</span> + <span class="vr_rtl small">p b c</span> + <span class="vr_rtl big">p e</span> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-011.html b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-011.html new file mode 100644 index 0000000000..697edb9be0 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-011.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: Testing a mix of flex items with various values for + 'writing-mode' / 'direction' in a vertical row-oriented flex container. + </title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <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-writing-modes-3/#propdef-writing-mode"> + <link rel="match" href="flexbox-writing-mode-011-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> + .container { + display: flex; + flex-direction: row; + float: left; + border: 2px solid purple; + padding: 2px; + margin-bottom: 2em; + height: 500px; + width: 150px; + } + + span { + display: block; + background: lightgrey; + border: 2px solid black; + margin: 11px 13px 17px 7px; + inline-size: 6px; + } + + .small { font: 12px Ahem; } + .big { font: 20px Ahem; } + + .hl { writing-mode: horizontal-tb; direction: ltr; } + .hr { writing-mode: horizontal-tb; direction: rtl; } + .vl { writing-mode: vertical-lr; direction: ltr; } + .vr { writing-mode: vertical-rl; direction: ltr; } + .vl_rtl { writing-mode: vertical-lr; direction: rtl; } + .vr_rtl { writing-mode: vertical-rl; direction: rtl; } + </style> +</head> +<body> + +<div class="container vl"> + <span class="hl small">p b c</span> + <span class="hl big">p e</span> + <span class="hr small">p b c</span> + <span class="hr big">p e</span> + <span class="vl small">p b c</span> + <span class="vl big">p e</span> +</div> +<div class="container vl"> + <span class="vr small">p b c</span> + <span class="vr big">p e</span> + <span class="vl_rtl small">p b c</span> + <span class="vl_rtl big">p e</span> + <span class="vr_rtl small">p b c</span> + <span class="vr_rtl big">p e</span> +</div> +<div class="container vr"> + <span class="hl small">p b c</span> + <span class="hl big">p e</span> + <span class="hr small">p b c</span> + <span class="hr big">p e</span> + <span class="vl small">p b c</span> + <span class="vl big">p e</span> +</div> +<div class="container vr"> + <span class="vr small">p b c</span> + <span class="vr big">p e</span> + <span class="vl_rtl small">p b c</span> + <span class="vl_rtl big">p e</span> + <span class="vr_rtl small">p b c</span> + <span class="vr_rtl big">p e</span> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-012-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-012-ref.html new file mode 100644 index 0000000000..7d6ca8e565 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-012-ref.html @@ -0,0 +1,93 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> + .container { + display: block; + float: left; + border: 2px solid purple; + padding: 2px; + margin-bottom: 2em; + height: 500px; + width: 150px; + } + + span { + display: block; + background: lightgrey; + border: 2px solid black; + margin: 11px 13px 17px 7px; + inline-size: 6px; + + /* This really floats to top ('logical left'), since all the containers + have a vertical writing mode. */ + float: right; + } + + .small { font: 12px Ahem; } + .big { font: 20px Ahem; } + + .hl { writing-mode: horizontal-tb; direction: ltr; } + .hr { writing-mode: horizontal-tb; direction: rtl; } + .vl { writing-mode: vertical-lr; direction: ltr; } + .vr { writing-mode: vertical-rl; direction: ltr; } + .vl_rtl { writing-mode: vertical-lr; direction: rtl; } + .vr_rtl { writing-mode: vertical-rl; direction: rtl; } + + + .container > .vl, .container > .vr, + .container > .vl_rtl, .container > .vr_rtl { + /* In the testcase, these items are stretched horizontally + via the default "align-self:stretch" behavior, and because + they have a width of "auto". + (The rest of the items have a non-auto width from "inline-size" + and their horizontal writing-mode, so those ones do not stretch.) */ + width: 126px; + } + </style> +</head> +<body> + +<div class="container vl_rtl"> + <span class="hl small">p b c</span> + <span class="hl big">p e</span> + <span class="hr small">p b c</span> + <span class="hr big">p e</span> + <span class="vl small">p b c</span> + <span class="vl big">p e</span> +</div> +<div class="container vl_rtl"> + <span class="vr small">p b c</span> + <span class="vr big">p e</span> + <span class="vl_rtl small">p b c</span> + <span class="vl_rtl big">p e</span> + <span class="vr_rtl small">p b c</span> + <span class="vr_rtl big">p e</span> +</div> +<div class="container vr_rtl"> + <span class="hl small">p b c</span> + <span class="hl big">p e</span> + <span class="hr small">p b c</span> + <span class="hr big">p e</span> + <span class="vl small">p b c</span> + <span class="vl big">p e</span> +</div> +<div class="container vr_rtl"> + <span class="vr small">p b c</span> + <span class="vr big">p e</span> + <span class="vl_rtl small">p b c</span> + <span class="vl_rtl big">p e</span> + <span class="vr_rtl small">p b c</span> + <span class="vr_rtl big">p e</span> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-012.html b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-012.html new file mode 100644 index 0000000000..b722d459e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-012.html @@ -0,0 +1,86 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: Testing a mix of flex items with various values for + 'writing-mode' / 'direction' in a vertical row-oriented flex container + with 'direction' flipped. + </title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <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-writing-modes-3/#propdef-writing-mode"> + <link rel="match" href="flexbox-writing-mode-012-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> + .container { + display: flex; + flex-direction: row; + float: left; + border: 2px solid purple; + padding: 2px; + margin-bottom: 2em; + height: 500px; + width: 150px; + } + + span { + display: block; + background: lightgrey; + border: 2px solid black; + margin: 11px 13px 17px 7px; + inline-size: 6px; + } + + .small { font: 12px Ahem; } + .big { font: 20px Ahem; } + + .hl { writing-mode: horizontal-tb; direction: ltr; } + .hr { writing-mode: horizontal-tb; direction: rtl; } + .vl { writing-mode: vertical-lr; direction: ltr; } + .vr { writing-mode: vertical-rl; direction: ltr; } + .vl_rtl { writing-mode: vertical-lr; direction: rtl; } + .vr_rtl { writing-mode: vertical-rl; direction: rtl; } + </style> +</head> +<body> + +<div class="container vl_rtl"> + <span class="hl small">p b c</span> + <span class="hl big">p e</span> + <span class="hr small">p b c</span> + <span class="hr big">p e</span> + <span class="vl small">p b c</span> + <span class="vl big">p e</span> +</div> +<div class="container vl_rtl"> + <span class="vr small">p b c</span> + <span class="vr big">p e</span> + <span class="vl_rtl small">p b c</span> + <span class="vl_rtl big">p e</span> + <span class="vr_rtl small">p b c</span> + <span class="vr_rtl big">p e</span> +</div> +<div class="container vr_rtl"> + <span class="hl small">p b c</span> + <span class="hl big">p e</span> + <span class="hr small">p b c</span> + <span class="hr big">p e</span> + <span class="vl small">p b c</span> + <span class="vl big">p e</span> +</div> +<div class="container vr_rtl"> + <span class="vr small">p b c</span> + <span class="vr big">p e</span> + <span class="vl_rtl small">p b c</span> + <span class="vl_rtl big">p e</span> + <span class="vr_rtl small">p b c</span> + <span class="vr_rtl big">p e</span> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-013-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-013-ref.html new file mode 100644 index 0000000000..d57e801aec --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-013-ref.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> + .container { + display: block; + float: left; + border: 2px solid purple; + padding: 2px; + margin-bottom: 2em; + height: 500px; + width: 150px; + } + + span { + display: block; + background: lightgrey; + border: 2px solid black; + margin: 11px 13px 17px 7px; + inline-size: 6px; + } + + nocollapse { + /* special element to disable margin-collapsing */ + display: block; + overflow: hidden; + height: 0; + } + .small { font: 12px Ahem; } + .big { font: 20px Ahem; } + + .hl { writing-mode: horizontal-tb; direction: ltr; } + .hr { writing-mode: horizontal-tb; direction: rtl; } + .vl { writing-mode: vertical-lr; direction: ltr; } + .vr { writing-mode: vertical-rl; direction: ltr; } + .vl_rtl { writing-mode: vertical-lr; direction: rtl; } + .vr_rtl { writing-mode: vertical-rl; direction: rtl; } + + .container > .vl, .container > .vr, + .container > .vl_rtl, .container > .vr_rtl { + /* In the testcase, these items are stretched horizontally + via the default "align-self:stretch" behavior, and because + they have a width of "auto". + (The rest of the items have a non-auto width from "inline-size" + and their horizontal writing-mode, so those ones do not stretch.) */ + width: 126px; + } + </style> +</head> +<body> + +<div class="container hl"> + <span class="hl small">p b c</span> <nocollapse></nocollapse> + <span class="hl big">p e</span> <nocollapse></nocollapse> + <span class="hr small">p b c</span> <nocollapse></nocollapse> + <span class="hr big">p e</span> <nocollapse></nocollapse> + <span class="vl small">p b c</span> <nocollapse></nocollapse> + <span class="vl big">p e</span> <nocollapse></nocollapse> +</div> +<div class="container hl"> + <span class="vr small">p b c</span> <nocollapse></nocollapse> + <span class="vr big">p e</span> <nocollapse></nocollapse> + <span class="vl_rtl small">p b c</span><nocollapse></nocollapse> + <span class="vl_rtl big">p e</span> <nocollapse></nocollapse> + <span class="vr_rtl small">p b c</span><nocollapse></nocollapse> + <span class="vr_rtl big">p e</span> <nocollapse></nocollapse> +</div> +<div class="container hr"> + <span class="hl small">p b c</span> <nocollapse></nocollapse> + <span class="hl big">p e</span> <nocollapse></nocollapse> + <span class="hr small">p b c</span> <nocollapse></nocollapse> + <span class="hr big">p e</span> <nocollapse></nocollapse> + <span class="vl small">p b c</span> <nocollapse></nocollapse> + <span class="vl big">p e</span> <nocollapse></nocollapse> +</div> +<div class="container hr"> + <span class="vr small">p b c</span> <nocollapse></nocollapse> + <span class="vr big">p e</span> <nocollapse></nocollapse> + <span class="vl_rtl small">p b c</span><nocollapse></nocollapse> + <span class="vl_rtl big">p e</span> <nocollapse></nocollapse> + <span class="vr_rtl small">p b c</span><nocollapse></nocollapse> + <span class="vr_rtl big">p e</span> <nocollapse></nocollapse> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-013.html b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-013.html new file mode 100644 index 0000000000..3d90e71202 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-013.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: Testing a mix of flex items with various values for + 'writing-mode' / 'direction' in a horizontal column-oriented flex container. + </title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <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-writing-modes-3/#propdef-writing-mode"> + <link rel="match" href="flexbox-writing-mode-013-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> + .container { + display: flex; + flex-direction: column; + float: left; + border: 2px solid purple; + padding: 2px; + margin-bottom: 2em; + height: 500px; + width: 150px; + } + + span { + display: block; + background: lightgrey; + border: 2px solid black; + margin: 11px 13px 17px 7px; + inline-size: 6px; + } + + .small { font: 12px Ahem; } + .big { font: 20px Ahem; } + + .hl { writing-mode: horizontal-tb; direction: ltr; } + .hr { writing-mode: horizontal-tb; direction: rtl; } + .vl { writing-mode: vertical-lr; direction: ltr; } + .vr { writing-mode: vertical-rl; direction: ltr; } + .vl_rtl { writing-mode: vertical-lr; direction: rtl; } + .vr_rtl { writing-mode: vertical-rl; direction: rtl; } + </style> +</head> +<body> + +<div class="container hl"> + <span class="hl small">p b c</span> + <span class="hl big">p e</span> + <span class="hr small">p b c</span> + <span class="hr big">p e</span> + <span class="vl small">p b c</span> + <span class="vl big">p e</span> +</div> +<div class="container hl"> + <span class="vr small">p b c</span> + <span class="vr big">p e</span> + <span class="vl_rtl small">p b c</span> + <span class="vl_rtl big">p e</span> + <span class="vr_rtl small">p b c</span> + <span class="vr_rtl big">p e</span> +</div> +<div class="container hr"> + <span class="hl small">p b c</span> + <span class="hl big">p e</span> + <span class="hr small">p b c</span> + <span class="hr big">p e</span> + <span class="vl small">p b c</span> + <span class="vl big">p e</span> +</div> +<div class="container hr"> + <span class="vr small">p b c</span> + <span class="vr big">p e</span> + <span class="vl_rtl small">p b c</span> + <span class="vl_rtl big">p e</span> + <span class="vr_rtl small">p b c</span> + <span class="vr_rtl big">p e</span> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-014-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-014-ref.html new file mode 100644 index 0000000000..d57910ee61 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-014-ref.html @@ -0,0 +1,92 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> + .container { + display: block; + border: 2px solid purple; + padding: 2px; + margin-bottom: 2em; + height: 150px; + width: 500px; + } + + span { + display: block; + background: lightgrey; + border: 2px solid black; + margin: 11px 13px 17px 7px; + inline-size: 6px; + } + + nocollapse { + /* special element to disable margin-collapsing */ + display: block; + overflow: hidden; + height: 0; + } + .small { font: 12px Ahem; } + .big { font: 20px Ahem; } + + .hl { writing-mode: horizontal-tb; direction: ltr; } + .hr { writing-mode: horizontal-tb; direction: rtl; } + .vl { writing-mode: vertical-lr; direction: ltr; } + .vr { writing-mode: vertical-rl; direction: ltr; } + .vl_rtl { writing-mode: vertical-lr; direction: rtl; } + .vr_rtl { writing-mode: vertical-rl; direction: rtl; } + + .container > .hl, .container > .hr { + /* In the testcase, these items are stretched vertically + via the default "align-self:stretch" behavior, and because + they have a height of "auto". + (The rest of the items have a non-auto height from "inline-size" + and their vertical writing-mode, so those ones do not stretch.) */ + height: 118px; + } + </style> +</head> +<body> + +<div class="container vl"> + <span class="hl small">p b c</span> <nocollapse></nocollapse> + <span class="hl big">p e</span> <nocollapse></nocollapse> + <span class="hr small">p b c</span> <nocollapse></nocollapse> + <span class="hr big">p e</span> <nocollapse></nocollapse> + <span class="vl small">p b c</span> <nocollapse></nocollapse> + <span class="vl big">p e</span> <nocollapse></nocollapse> +</div> +<div class="container vl"> + <span class="vr small">p b c</span> <nocollapse></nocollapse> + <span class="vr big">p e</span> <nocollapse></nocollapse> + <span class="vl_rtl small">p b c</span><nocollapse></nocollapse> + <span class="vl_rtl big">p e</span> <nocollapse></nocollapse> + <span class="vr_rtl small">p b c</span><nocollapse></nocollapse> + <span class="vr_rtl big">p e</span> <nocollapse></nocollapse> +</div> +<div class="container vr"> + <span class="hl small">p b c</span> <nocollapse></nocollapse> + <span class="hl big">p e</span> <nocollapse></nocollapse> + <span class="hr small">p b c</span> <nocollapse></nocollapse> + <span class="hr big">p e</span> <nocollapse></nocollapse> + <span class="vl small">p b c</span> <nocollapse></nocollapse> + <span class="vl big">p e</span> <nocollapse></nocollapse> +</div> +<div class="container vr"> + <span class="vr small">p b c</span> <nocollapse></nocollapse> + <span class="vr big">p e</span> <nocollapse></nocollapse> + <span class="vl_rtl small">p b c</span><nocollapse></nocollapse> + <span class="vl_rtl big">p e</span> <nocollapse></nocollapse> + <span class="vr_rtl small">p b c</span><nocollapse></nocollapse> + <span class="vr_rtl big">p e</span> <nocollapse></nocollapse> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-014.html b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-014.html new file mode 100644 index 0000000000..299229b1c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-014.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: Testing a mix of flex items with various values for + 'writing-mode' / 'direction' in a vertical column-oriented flex container. + </title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <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-writing-modes-3/#propdef-writing-mode"> + <link rel="match" href="flexbox-writing-mode-014-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> + .container { + display: flex; + flex-direction: column; + border: 2px solid purple; + padding: 2px; + margin-bottom: 2em; + height: 150px; + width: 500px; + } + + span { + display: block; + background: lightgrey; + border: 2px solid black; + margin: 11px 13px 17px 7px; + inline-size: 6px; + } + + .small { font: 12px Ahem; } + .big { font: 20px Ahem; } + + .hl { writing-mode: horizontal-tb; direction: ltr; } + .hr { writing-mode: horizontal-tb; direction: rtl; } + .vl { writing-mode: vertical-lr; direction: ltr; } + .vr { writing-mode: vertical-rl; direction: ltr; } + .vl_rtl { writing-mode: vertical-lr; direction: rtl; } + .vr_rtl { writing-mode: vertical-rl; direction: rtl; } + </style> +</head> +<body> + +<div class="container vl"> + <span class="hl small">p b c</span> + <span class="hl big">p e</span> + <span class="hr small">p b c</span> + <span class="hr big">p e</span> + <span class="vl small">p b c</span> + <span class="vl big">p e</span> +</div> +<div class="container vl"> + <span class="vr small">p b c</span> + <span class="vr big">p e</span> + <span class="vl_rtl small">p b c</span> + <span class="vl_rtl big">p e</span> + <span class="vr_rtl small">p b c</span> + <span class="vr_rtl big">p e</span> +</div> +<div class="container vr"> + <span class="hl small">p b c</span> + <span class="hl big">p e</span> + <span class="hr small">p b c</span> + <span class="hr big">p e</span> + <span class="vl small">p b c</span> + <span class="vl big">p e</span> +</div> +<div class="container vr"> + <span class="vr small">p b c</span> + <span class="vr big">p e</span> + <span class="vl_rtl small">p b c</span> + <span class="vl_rtl big">p e</span> + <span class="vr_rtl small">p b c</span> + <span class="vr_rtl big">p e</span> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-015-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-015-ref.html new file mode 100644 index 0000000000..c8df3cbb87 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-015-ref.html @@ -0,0 +1,92 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> + .container { + display: block; + border: 2px solid purple; + padding: 2px; + margin-bottom: 2em; + height: 150px; + width: 500px; + } + + span { + display: block; + background: lightgrey; + border: 2px solid black; + margin: 11px 13px 17px 7px; + inline-size: 6px; + } + + nocollapse { + /* special element to disable margin-collapsing */ + display: block; + overflow: hidden; + height: 0; + } + .small { font: 12px Ahem; } + .big { font: 20px Ahem; } + + .hl { writing-mode: horizontal-tb; direction: ltr; } + .hr { writing-mode: horizontal-tb; direction: rtl; } + .vl { writing-mode: vertical-lr; direction: ltr; } + .vr { writing-mode: vertical-rl; direction: ltr; } + .vl_rtl { writing-mode: vertical-lr; direction: rtl; } + .vr_rtl { writing-mode: vertical-rl; direction: rtl; } + + .container > .hl, .container > .hr { + /* In the testcase, these items are stretched vertically + via the default "align-self:stretch" behavior, and because + they have a height of "auto". + (The rest of the items have a non-auto height from "inline-size" + and their vertical writing-mode, so those ones do not stretch.) */ + height: 118px; + } + </style> +</head> +<body> + +<div class="container vl_rtl"> + <span class="hl small">p b c</span> <nocollapse></nocollapse> + <span class="hl big">p e</span> <nocollapse></nocollapse> + <span class="hr small">p b c</span> <nocollapse></nocollapse> + <span class="hr big">p e</span> <nocollapse></nocollapse> + <span class="vl small">p b c</span> <nocollapse></nocollapse> + <span class="vl big">p e</span> <nocollapse></nocollapse> +</div> +<div class="container vl_rtl"> + <span class="vr small">p b c</span> <nocollapse></nocollapse> + <span class="vr big">p e</span> <nocollapse></nocollapse> + <span class="vl_rtl small">p b c</span><nocollapse></nocollapse> + <span class="vl_rtl big">p e</span> <nocollapse></nocollapse> + <span class="vr_rtl small">p b c</span><nocollapse></nocollapse> + <span class="vr_rtl big">p e</span> <nocollapse></nocollapse> +</div> +<div class="container vr_rtl"> + <span class="hl small">p b c</span> <nocollapse></nocollapse> + <span class="hl big">p e</span> <nocollapse></nocollapse> + <span class="hr small">p b c</span> <nocollapse></nocollapse> + <span class="hr big">p e</span> <nocollapse></nocollapse> + <span class="vl small">p b c</span> <nocollapse></nocollapse> + <span class="vl big">p e</span> <nocollapse></nocollapse> +</div> +<div class="container vr_rtl"> + <span class="vr small">p b c</span> <nocollapse></nocollapse> + <span class="vr big">p e</span> <nocollapse></nocollapse> + <span class="vl_rtl small">p b c</span><nocollapse></nocollapse> + <span class="vl_rtl big">p e</span> <nocollapse></nocollapse> + <span class="vr_rtl small">p b c</span><nocollapse></nocollapse> + <span class="vr_rtl big">p e</span> <nocollapse></nocollapse> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-015.html b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-015.html new file mode 100644 index 0000000000..eb7fa1b981 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-015.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: Testing a mix of flex items with various values for + 'writing-mode' / 'direction' in a vertical column-oriented flex container + with 'direction' flipped. + </title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <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-writing-modes-3/#propdef-writing-mode"> + <link rel="match" href="flexbox-writing-mode-015-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> + .container { + display: flex; + flex-direction: column; + border: 2px solid purple; + padding: 2px; + margin-bottom: 2em; + height: 150px; + width: 500px; + } + + span { + display: block; + background: lightgrey; + border: 2px solid black; + margin: 11px 13px 17px 7px; + inline-size: 6px; + } + + .small { font: 12px Ahem; } + .big { font: 20px Ahem; } + + .hl { writing-mode: horizontal-tb; direction: ltr; } + .hr { writing-mode: horizontal-tb; direction: rtl; } + .vl { writing-mode: vertical-lr; direction: ltr; } + .vr { writing-mode: vertical-rl; direction: ltr; } + .vl_rtl { writing-mode: vertical-lr; direction: rtl; } + .vr_rtl { writing-mode: vertical-rl; direction: rtl; } + </style> +</head> +<body> + +<div class="container vl_rtl"> + <span class="hl small">p b c</span> + <span class="hl big">p e</span> + <span class="hr small">p b c</span> + <span class="hr big">p e</span> + <span class="vl small">p b c</span> + <span class="vl big">p e</span> +</div> +<div class="container vl_rtl"> + <span class="vr small">p b c</span> + <span class="vr big">p e</span> + <span class="vl_rtl small">p b c</span> + <span class="vl_rtl big">p e</span> + <span class="vr_rtl small">p b c</span> + <span class="vr_rtl big">p e</span> +</div> +<div class="container vr_rtl"> + <span class="hl small">p b c</span> + <span class="hl big">p e</span> + <span class="hr small">p b c</span> + <span class="hr big">p e</span> + <span class="vl small">p b c</span> + <span class="vl big">p e</span> +</div> +<div class="container vr_rtl"> + <span class="vr small">p b c</span> + <span class="vr big">p e</span> + <span class="vl_rtl small">p b c</span> + <span class="vl_rtl big">p e</span> + <span class="vr_rtl small">p b c</span> + <span class="vr_rtl big">p e</span> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-016-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-016-ref.html new file mode 100644 index 0000000000..c3a223389d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-016-ref.html @@ -0,0 +1,136 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + border: 2px solid purple; + margin: 3px; + /* This red should't be visible, because each container should shrinkwrap + its sole child (and the child should cover up this background). */ + background: red; + /* Float the containers, to test in "rows", with 1 row per writing-mode. */ + float: left; + } + br { clear: both; } + + .container > * { + width: 10px; + height: 10px; + background: teal; + border: 1px solid yellow; + } + .container > * > * { + background: pink; + height: 4px; + width: 4px; + border: 1px solid black; + } + + .pad_top { padding-top: 3px; } + .pad_right { padding-right: 4px; } + .pad_bottom { padding-bottom: 5px; } + .pad_left { padding-left: 6px; } + + .hl { writing-mode: horizontal-tb; direction: ltr; } + .hr { writing-mode: horizontal-tb; direction: rtl; } + .vl { writing-mode: vertical-lr; direction: ltr; } + .vr { writing-mode: vertical-rl; direction: ltr; } + .vl_rtl { writing-mode: vertical-lr; direction: rtl; } + .vr_rtl { writing-mode: vertical-rl; direction: rtl; } + </style> +</head> +<body> + <!-- Here, we test padding on each side of a flex item, across 6 different + writing-mode combinations (writing-mode X direction). --> + <div class="container hl"> + <div class="pad_top"><div></div></div> + </div> + <div class="container hl"> + <div class="pad_right"><div></div></div> + </div> + <div class="container hl"> + <div class="pad_bottom"><div></div></div> + </div> + <div class="container hl"> + <div class="pad_left"><div></div></div> + </div> + <br> + + <div class="container hr"> + <div class="pad_top"><div></div></div> + </div> + <div class="container hr"> + <div class="pad_right"><div></div></div> + </div> + <div class="container hr"> + <div class="pad_bottom"><div></div></div> + </div> + <div class="container hr"> + <div class="pad_left"><div></div></div> + </div> + <br> + + <div class="container vl"> + <div class="pad_top"><div></div></div> + </div> + <div class="container vl"> + <div class="pad_right"><div></div></div> + </div> + <div class="container vl"> + <div class="pad_bottom"><div></div></div> + </div> + <div class="container vl"> + <div class="pad_left"><div></div></div> + </div> + <br> + + <div class="container vr"> + <div class="pad_top"><div></div></div> + </div> + <div class="container vr"> + <div class="pad_right"><div></div></div> + </div> + <div class="container vr"> + <div class="pad_bottom"><div></div></div> + </div> + <div class="container vr"> + <div class="pad_left"><div></div></div> + </div> + <br> + + <div class="container vl_rtl"> + <div class="pad_top"><div></div></div> + </div> + <div class="container vl_rtl"> + <div class="pad_right"><div></div></div> + </div> + <div class="container vl_rtl"> + <div class="pad_bottom"><div></div></div> + </div> + <div class="container vl_rtl"> + <div class="pad_left"><div></div></div> + </div> + <br> + + <div class="container vr_rtl"> + <div class="pad_top"><div></div></div> + </div> + <div class="container vr_rtl"> + <div class="pad_right"><div></div></div> + </div> + <div class="container vr_rtl"> + <div class="pad_bottom"><div></div></div> + </div> + <div class="container vr_rtl"> + <div class="pad_left"><div></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-016.html b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-016.html new file mode 100644 index 0000000000..94c7323583 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-writing-mode-016.html @@ -0,0 +1,144 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: Testing auto-sized flex containers + with various 'writing-mode' values + and various padding amounts on flex items. + </title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <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-writing-modes-3/#propdef-writing-mode"> + <link rel="match" href="flexbox-writing-mode-016-ref.html"> + <style> + .container { + display: flex; + flex-direction: row; + border: 2px solid purple; + margin: 3px; + /* This red should't be visible, because each container should shrinkwrap + its sole child (and the child should cover up this background). */ + background: red; + /* Float the containers, to test in "rows", with 1 row per writing-mode. */ + float: left; + } + br { clear: both; } + + .container > * { + width: 10px; + height: 10px; + background: teal; + border: 1px solid yellow; + } + .container > * > * { + background: pink; + height: 4px; + width: 4px; + border: 1px solid black; + } + + .pad_top { padding-top: 3px; } + .pad_right { padding-right: 4px; } + .pad_bottom { padding-bottom: 5px; } + .pad_left { padding-left: 6px; } + + .hl { writing-mode: horizontal-tb; direction: ltr; } + .hr { writing-mode: horizontal-tb; direction: rtl; } + .vl { writing-mode: vertical-lr; direction: ltr; } + .vr { writing-mode: vertical-rl; direction: ltr; } + .vl_rtl { writing-mode: vertical-lr; direction: rtl; } + .vr_rtl { writing-mode: vertical-rl; direction: rtl; } + </style> +</head> +<body> + <!-- Here, we test padding on each side of a flex item, across 6 different + writing-mode combinations (writing-mode X direction). --> + <div class="container hl"> + <div class="pad_top"><div></div></div> + </div> + <div class="container hl"> + <div class="pad_right"><div></div></div> + </div> + <div class="container hl"> + <div class="pad_bottom"><div></div></div> + </div> + <div class="container hl"> + <div class="pad_left"><div></div></div> + </div> + <br> + + <div class="container hr"> + <div class="pad_top"><div></div></div> + </div> + <div class="container hr"> + <div class="pad_right"><div></div></div> + </div> + <div class="container hr"> + <div class="pad_bottom"><div></div></div> + </div> + <div class="container hr"> + <div class="pad_left"><div></div></div> + </div> + <br> + + <div class="container vl"> + <div class="pad_top"><div></div></div> + </div> + <div class="container vl"> + <div class="pad_right"><div></div></div> + </div> + <div class="container vl"> + <div class="pad_bottom"><div></div></div> + </div> + <div class="container vl"> + <div class="pad_left"><div></div></div> + </div> + <br> + + <div class="container vr"> + <div class="pad_top"><div></div></div> + </div> + <div class="container vr"> + <div class="pad_right"><div></div></div> + </div> + <div class="container vr"> + <div class="pad_bottom"><div></div></div> + </div> + <div class="container vr"> + <div class="pad_left"><div></div></div> + </div> + <br> + + <div class="container vl_rtl"> + <div class="pad_top"><div></div></div> + </div> + <div class="container vl_rtl"> + <div class="pad_right"><div></div></div> + </div> + <div class="container vl_rtl"> + <div class="pad_bottom"><div></div></div> + </div> + <div class="container vl_rtl"> + <div class="pad_left"><div></div></div> + </div> + <br> + + <div class="container vr_rtl"> + <div class="pad_top"><div></div></div> + </div> + <div class="container vr_rtl"> + <div class="pad_right"><div></div></div> + </div> + <div class="container vr_rtl"> + <div class="pad_bottom"><div></div></div> + </div> + <div class="container vr_rtl"> + <div class="pad_left"><div></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-center-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-center-ref.html new file mode 100644 index 0000000000..e0118b707f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-center-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>flexbox | align-content: center</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 20em; + position: relative; +} +span { + background: yellow; + width: 8em; + height: 2em; + position: absolute; + top: 1em; + left: 1em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + top: 3em; + left: 1em; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-center.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-center.html new file mode 100644 index 0000000000..37c76f4c02 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-center.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title>flexbox | align-content: center</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"> +<link rel="match" href="flexbox_align-content-center-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 20em; + + display: flex; + flex-wrap: wrap; + align-content: center; +} +span { + background: white; + margin: 0 1em; + width: 8em; + height: 2em; + display: inline-block; + + flex: none; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-flexend-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-flexend-ref.html new file mode 100644 index 0000000000..08069a0e11 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-flexend-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>flexbox | align-content: flex-end</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 20em; + position: relative; +} +span { + background: yellow; + width: 8em; + height: 2em; + position: absolute; + top: 2em; + left: 1em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + top: 4em; + left: 1em; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-flexend.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-flexend.html new file mode 100644 index 0000000000..b26bf330b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-flexend.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title>flexbox | align-content: flex-end</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"> +<link rel="match" href="flexbox_align-content-flexend-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 20em; + + display: flex; + flex-wrap: wrap; + align-content: flex-end; +} +span { + background: white; + margin: 0 1em; + width: 8em; + height: 2em; + display: inline-block; + + flex: none; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-flexstart-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-flexstart-ref.html new file mode 100644 index 0000000000..8321dc6b8a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-flexstart-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>flexbox | align-content: flex-start</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 20em; + position: relative; +} +span { + background: yellow; + width: 8em; + height: 2em; + position: absolute; + top: 0; + left: 1em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + top: 2em; + left: 1em; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-flexstart.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-flexstart.html new file mode 100644 index 0000000000..e6e4a08321 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-flexstart.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title>flexbox | align-content: flex-start</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"> +<link rel="match" href="flexbox_align-content-flexstart-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 20em; + + display: flex; + flex-wrap: wrap; + align-content: flex-start; +} +span { + background: white; + margin: 0 1em; + width: 8em; + height: 2em; + display: inline-block; + + flex: none; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-spacearound-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-spacearound-ref.html new file mode 100644 index 0000000000..1664ec57de --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-spacearound-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>flexbox | align-content: space-around</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 20em; + position: relative; +} +span { + background: yellow; + width: 8em; + height: 2em; + position: absolute; + top: 0.5em; + left: 1em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + top: 3.5em; + left: 1em; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-spacearound.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-spacearound.html new file mode 100644 index 0000000000..31c06bab81 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-spacearound.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title>flexbox | align-content: space-around</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"> +<link rel="match" href="flexbox_align-content-spacearound-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 20em; + + display: flex; + flex-wrap: wrap; + align-content: space-around; +} +span { + background: white; + margin: 0 1em; + width: 8em; + height: 2em; + display: inline-block; + + flex: none; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-spacebetween-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-spacebetween-ref.html new file mode 100644 index 0000000000..0dd82438c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-spacebetween-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>flexbox | align-content: space-between</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 20em; + position: relative; +} +span { + background: yellow; + width: 8em; + height: 2em; + position: absolute; + top: 0; + left: 1em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + top: 4em; + left: 1em; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-spacebetween.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-spacebetween.html new file mode 100644 index 0000000000..aa97f2be56 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-spacebetween.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title>flexbox | align-content: space-between</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"> +<link rel="match" href="flexbox_align-content-spacebetween-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 20em; + + display: flex; + flex-wrap: wrap; + align-content: space-between; +} +span { + background: white; + margin: 0 1em; + width: 8em; + height: 2em; + display: inline-block; + + flex: none; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-stretch-2-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-stretch-2-ref.html new file mode 100644 index 0000000000..6c4af8a517 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-stretch-2-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>flexbox | align-content: stretch</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 20em; + position: relative; +} +span { + background: yellow; + width: 8em; + height: 3em; + position: absolute; + top: 0; + left: 1em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + top: 3em; + left: 1em; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-stretch-2.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-stretch-2.html new file mode 100644 index 0000000000..e04079bc91 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-stretch-2.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | align-content: stretch</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"> +<link rel="match" href="flexbox_align-content-stretch-2-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 20em; + + display: flex; + flex-wrap: wrap; + align-content: stretch; +} +span { + background: white; + margin: 0 1em; + width: 8em; + display: inline-block; + + flex: none; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-stretch-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-stretch-ref.html new file mode 100644 index 0000000000..76b2649b3b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-stretch-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>flexbox | align-content: stretch</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 20em; + position: relative; +} +span { + background: yellow; + width: 8em; + height: 2em; + position: absolute; + top: 0; + left: 1em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + top: 3em; + left: 1em; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-stretch.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-stretch.html new file mode 100644 index 0000000000..545f4e1ea5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-content-stretch.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title>flexbox | align-content: stretch</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"> +<link rel="match" href="flexbox_align-content-stretch-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 20em; + + display: flex; + flex-wrap: wrap; + align-content: stretch; +} +span { + background: white; + margin: 0 1em; + width: 8em; + height: 2em; + display: inline-block; + + flex: none; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-baseline-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-baseline-ref.html new file mode 100644 index 0000000000..15624b3031 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-baseline-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<title>flexbox | align-items: baseline</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + position: relative; +} +span { + background: white; + width: 8em; + height: 2em; + display: block; + position: absolute; + top: 1em; + left: 1em; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) { + background: pink; + height: 3em; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + height: 4em; + left: 21em; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-baseline.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-baseline.html new file mode 100644 index 0000000000..10d637b11b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-baseline.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<title>flexbox | align-items: baseline</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"> +<link rel="match" href="flexbox_align-items-baseline-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + + display: flex; + align-items: baseline; +} +span { + background: white; + margin: 0 1em; + width: 8em; + height: 2em; + display: inline-block; + + flex: none; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) { + background: pink; + margin-top: 1em; + height: 3em; +} +span:nth-child(3) { + background: lightblue; + height: 4em; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-center-2-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-center-2-ref.html new file mode 100644 index 0000000000..d9b38802d3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-center-2-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<title>flexbox | align-items: center</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + position: relative; +} +span { + background: yellow; + width: 8em; + height: 2em; + position: absolute; + top: 2em; + left: 1em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + height: 3em; + top: 1.5em; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + height: 4em; + top: 1em; + left: 21em; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-center-2.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-center-2.html new file mode 100644 index 0000000000..bbdccef989 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-center-2.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<title>flexbox | align-items: center</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"> +<link rel="match" href="flexbox_align-items-center-2-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + + display: flex; + align-items: center; +} +span { + background: white; + margin: 0 1em; + width: 8em; + height: 2em; + display: inline-block; + + flex: none; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) { + background: pink; + height: 3em; +} +span:nth-child(3) { + background: lightblue; + height: 4em; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-center-3.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-center-3.html new file mode 100644 index 0000000000..b140cd11ee --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-center-3.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-flex"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="This checks that an orthogonal flex-item with center alignment doesn't stretch."> +<p>Test passes if there is a filled green square.</p> +<style> +.container { + margin-left: -50px; + width: 200px; + display: flex; + flex-direction: column; + align-items: center; +} + +.child { + writing-mode: vertical-rl; + height: 100px; + background: green; +} +</style> +<div class="container"> + <div class="child"> + <div style="width: 100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-center-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-center-ref.html new file mode 100644 index 0000000000..232317c538 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-center-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title>flexbox | align-items: center</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + position: relative; +} +span { + background: yellow; + width: 8em; + height: 2em; + position: absolute; + top: 2em; + left: 1em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + left: 21em; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-center.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-center.html new file mode 100644 index 0000000000..5a680473b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-center.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | align-items: center</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"> +<link rel="match" href="flexbox_align-items-center-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + + display: flex; + align-items: center; +} +span { + background: white; + margin: 0 1em; + width: 8em; + height: 2em; + display: inline-block; + + flex: none; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-flexend-2-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-flexend-2-ref.html new file mode 100644 index 0000000000..b010dbe610 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-flexend-2-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>flexbox | align-items: flex-end</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + position: relative; +} +span { + background: yellow; + width: 8em; + position: absolute; + bottom: 0; + left: 1em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + height: 3em; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + height: 4em; + left: 21em; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-flexend-2.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-flexend-2.html new file mode 100644 index 0000000000..d71458518b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-flexend-2.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<title>flexbox | align-items: flex-end</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"> +<link rel="match" href="flexbox_align-items-flexend-2-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + + display: flex; + align-items: flex-end; +} +span { + background: white; + margin: 0 1em; + width: 8em; + display: inline-block; + + flex: none; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) { + background: pink; + height: 3em; +} +span:nth-child(3) { + background: lightblue; + height: 4em; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-flexend-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-flexend-ref.html new file mode 100644 index 0000000000..48bbc935f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-flexend-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | align-items: flex-end</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + position: relative; +} +span { + background: yellow; + width: 8em; + position: absolute; + bottom: 0; + left: 1em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + left: 21em; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-flexend.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-flexend.html new file mode 100644 index 0000000000..dcee2762fe --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-flexend.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>flexbox | align-items: flex-end</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"> +<link rel="match" href="flexbox_align-items-flexend-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + + display: flex; + align-items: flex-end; +} +span { + background: white; + margin: 0 1em; + width: 8em; + display: inline-block; + + flex: none; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-flexstart-2-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-flexstart-2-ref.html new file mode 100644 index 0000000000..f2e5577b97 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-flexstart-2-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>flexbox | align-items: flex-start</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + position: relative; +} +span { + background: yellow; + width: 8em; + display: inline-block; + position: absolute; + top: 0; + left: 1em; +} +span:nth-child(2) { + background: pink; + height: 3em; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + height: 4em; + left: 21em; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-flexstart-2.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-flexstart-2.html new file mode 100644 index 0000000000..d67b81e198 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-flexstart-2.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<title>flexbox | align-items: flex-start</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"> +<link rel="match" href="flexbox_align-items-flexstart-2-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + + display: flex; + align-items: flex-start; +} +span { + background: white; + margin: 0 1em; + width: 8em; + display: inline-block; + + flex: none; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) { + background: pink; + height: 3em; +} +span:nth-child(3) { + background: lightblue; + height: 4em; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-flexstart-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-flexstart-ref.html new file mode 100644 index 0000000000..c69a17adc5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-flexstart-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | align-items: flex-start</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + position: relative; +} +span { + background: yellow; + width: 8em; + position: absolute; + top: 0; + left: 1em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + left: 21em; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-flexstart.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-flexstart.html new file mode 100644 index 0000000000..d5558e5927 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-flexstart.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>flexbox | align-items: flex-start</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"> +<link rel="match" href="flexbox_align-items-flexstart-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + + display: flex; + align-items: flex-start; +} +span { + background: white; + margin: 0 1em; + width: 8em; + display: inline-block; + + flex: none; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-stretch-2-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-stretch-2-ref.html new file mode 100644 index 0000000000..001433079e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-stretch-2-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>flexbox | align-items: stretch</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: black; + margin: 1em 0 0; + width: 30em; + height: 6em; +} +span { + display: inline-block; +} +</style> + +<div></div> +<span>PASS</span> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-stretch-2.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-stretch-2.html new file mode 100644 index 0000000000..c74ad830e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-stretch-2.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title>flexbox | align-items: stretch</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"> +<link rel="match" href="flexbox_align-items-stretch-2-ref.html"> +<style> +div { + background: black; + margin: 1em 0; + width: 30em; + height: 6em; + + display: flex; + align-items: stretch; +} +span { + width: 8em; + display: inline-block; + + flex: none; +} +span:nth-child(1) { + margin-top: 6em; +} +</style> + +<div> + <span>PASS</span> + <span></span> + <span>x</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-stretch-3.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-stretch-3.html new file mode 100644 index 0000000000..19df131db2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-stretch-3.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>flex base size and stretched items</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes" title="bullet #1"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Item's stretched size is used for laying out descendants when determining flex base size." /> +<style> +x-flexbox { + display: flex; + height: 100px; +} + +x-item { + background: green; + writing-mode: vertical-lr; +} + +x-item > div { + padding-right: 70%; + width: 30px; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<x-flexbox> + <x-item> + <div></div> + </x-item> +</x-flexbox> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-stretch-4.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-stretch-4.html new file mode 100644 index 0000000000..422f8b3261 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-stretch-4.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<title>Auto cross margins and align-items: stretch</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-stretch"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Auto cross margins prevent an item from stretching." /> +<link rel="bookmark" href="https://crbug.com/1015475" /> +<style> +x-flexbox { + display: flex; + /* This makes auto margins prevent stretching without affecting position. Without + it the auto margins make the item move to the center of the window. */ + width: 100px; +} + +.item-with-auto-margin { + background: green; + margin: auto; +} + +.pct-height-child { + height: 100%; + width: 100px; + background: red; +} + +.second-child { + height: 100px; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<x-flexbox> + <div class=item-with-auto-margin> + <div class="pct-height-child"></div> + <div class="second-child"></div> + </div> +</x-flexbox> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-stretch-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-stretch-ref.html new file mode 100644 index 0000000000..540724211b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-stretch-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<title>flexbox | align-items: stretch</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + position: relative; +} +span { + background: yellow; + margin: 0; + width: 8em; + height: 6em; + position: absolute; + top: 0; + left: 1em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + height: 3em; + top: 3em; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + height: 6em; + top: 0; + left: 21em; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-stretch.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-stretch.html new file mode 100644 index 0000000000..bea0d7f015 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-items-stretch.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<title>flexbox | align-items: stretch</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"> +<link rel="match" href="flexbox_align-items-stretch-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + + display: flex; + align-items: stretch; +} +span { + background: white; + margin: 0 1em; + width: 8em; + display: inline-block; + + flex: none; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) { + background: pink; + margin-top: 3em; +} +span:nth-child(3) { + background: lightblue; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-self-auto-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-self-auto-ref.html new file mode 100644 index 0000000000..d8cbb10e6e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-self-auto-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | align-self: auto</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + position: relative; +} +span { + background: yellow; + width: 8em; + position: absolute; + bottom: 0; + left: 1em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + left: 21em; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-self-auto.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-self-auto.html new file mode 100644 index 0000000000..ccede24a66 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-self-auto.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>flexbox | align-self: auto</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"> +<link rel="match" href="flexbox_align-self-auto-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + + display: flex; + align-items: flex-end; +} +span { + background: white; + margin: 0 1em; + width: 8em; + display: inline-block; + + flex: none; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) { + background: lightblue; + align-self: auto; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-self-baseline-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-self-baseline-ref.html new file mode 100644 index 0000000000..e749a311f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-self-baseline-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>flexbox | align-self: baseline</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + position: relative; +} +span { + background: yellow; + width: 8em; + height: 3em; + position: absolute; + top: 1.5em; + left: 1em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + top: 0; + left: 21em; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-self-baseline.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-self-baseline.html new file mode 100644 index 0000000000..1c2b1e3996 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-self-baseline.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title>flexbox | align-self: baseline</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"> +<link rel="match" href="flexbox_align-self-baseline-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + + display: flex; + align-items: center; +} +span { + background: white; + margin: 0 1em; + width: 8em; + height: 3em; + display: inline-block; + + flex: none; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) { + background: lightblue; + align-self: baseline; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-self-center-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-self-center-ref.html new file mode 100644 index 0000000000..008779675e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-self-center-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>flexbox | align-self: center</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + position: relative; +} +span { + background: yellow; + width: 8em; + position: absolute; + top: 0; + left: 1em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + height: 4em; + top: 1em; + left: 21em; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-self-center.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-self-center.html new file mode 100644 index 0000000000..e269708c54 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-self-center.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title>flexbox | align-self: center</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"> +<link rel="match" href="flexbox_align-self-center-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + + display: flex; + align-items: flex-start; +} +span { + background: white; + margin: 0 1em; + width: 8em; + display: inline-block; + + flex: none; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) { + background: lightblue; + height: 4em; + align-self: center; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-self-flexend-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-self-flexend-ref.html new file mode 100644 index 0000000000..0ad7cd8e35 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-self-flexend-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>flexbox | align-self: flex-end</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + position: relative; +} +span { + background: yellow; + width: 8em; + position: absolute; + top: 0; + left: 1em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + top: auto; + bottom: 0; + left: 21em; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-self-flexend.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-self-flexend.html new file mode 100644 index 0000000000..f85931db39 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-self-flexend.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>flexbox | align-self: flex-end</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"> +<link rel="match" href="flexbox_align-self-flexend-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + + display: flex; + align-items: flex-start; +} +span { + background: white; + margin: 0 1em; + width: 8em; + display: inline-block; + + flex: none; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) { + background: lightblue; + align-self: flex-end; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-self-flexstart-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-self-flexstart-ref.html new file mode 100644 index 0000000000..b7cc9c9fea --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-self-flexstart-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>flexbox | align-self: flex-start</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + position: relative; +} +span { + background: yellow; + width: 8em; + position: absolute; + bottom: 0; + left: 1em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + top: 0; + bottom: auto; + left: 21em; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-self-flexstart.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-self-flexstart.html new file mode 100644 index 0000000000..0f03881cd1 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-self-flexstart.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>flexbox | align-self: flex-start</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"> +<link rel="match" href="flexbox_align-self-flexstart-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + + display: flex; + align-items: flex-end; +} +span { + background: white; + margin: 0 1em; + width: 8em; + display: inline-block; + + flex: none; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) { + background: lightblue; + align-self: flex-start; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-self-stretch-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-self-stretch-ref.html new file mode 100644 index 0000000000..0bda410eb2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-self-stretch-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title>flexbox | align-self: stretch</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + position: relative; +} +span { + background: yellow; + width: 8em; + height: 3em; + position: absolute; + top: 1.5em; + left: 1em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + height: 6em; + top: 0; + left: 21em; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_align-self-stretch.html b/testing/web-platform/tests/css/css-flexbox/flexbox_align-self-stretch.html new file mode 100644 index 0000000000..5287446987 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_align-self-stretch.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<title>flexbox | align-self: stretch</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"> +<link rel="match" href="flexbox_align-self-stretch-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + + display: flex; + align-items: center; +} +span { + background: white; + margin: 0 1em; + width: 8em; + height: 3em; + display: inline-block; + + flex: none; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) { + background: lightblue; + height: auto; + align-self: stretch; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_block.html b/testing/web-platform/tests/css/css-flexbox/flexbox_block.html new file mode 100644 index 0000000000..7bcec042b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_block.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>flexbox | block</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" + href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> +<link rel="match" href="../reference/blank.html"> +<style> +div { + background: red; + margin-top: -20em; + display: flex; +} +</style> + +<div>FAIL</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_box-clear-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_box-clear-ref.html new file mode 100644 index 0000000000..cc0c329a4c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_box-clear-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>flexbox | cleared box</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +#float { + background: #3366cc; + padding: 1em; + float: left; + +} +#flex { + background: #ffcc00; + padding: 2em; + clear: both; +} +div div { + background: pink; + height: 4em; + display: inline-block; +} +</style> + +<div id="float">filler</div> + +<div id="flex"> + <div>Yellow box should be below the blue box</div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_box-clear.html b/testing/web-platform/tests/css/css-flexbox/flexbox_box-clear.html new file mode 100644 index 0000000000..356f6ee9d2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_box-clear.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>flexbox | cleared box</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" + href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> +<link rel="match" href="flexbox_box-clear-ref.html"> +<style> +#float { + background: #3366cc; + padding: 1em; + float: left; + +} +#flex { + background: #ffcc00; + clear: both; + display: flex; +} +div div { + background: pink; + margin: 2em; + height: 4em; +} +</style> + +<div id="float">filler</div> + +<div id="flex"> + <div>Yellow box should be below the blue box</div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_columns-flexitems-2-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_columns-flexitems-2-ref.html new file mode 100644 index 0000000000..2acfa00b99 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_columns-flexitems-2-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>flexbox | multicol on flexbox items</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div {background: blue;} +p { + font-family: ahem; + background: yellow; + column-rule: 1em solid lime; + columns: 2; + margin: 0 auto; + width: 200px; +} +</style> + +<div> + <p> + one two three four five + one two three four five + one two three four five + </p> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_columns-flexitems-2.html b/testing/web-platform/tests/css/css-flexbox/flexbox_columns-flexitems-2.html new file mode 100644 index 0000000000..b6ca52f2a8 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_columns-flexitems-2.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<title>flexbox | multicol on flexbox items</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" + href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> +<link rel="match" href="flexbox_columns-flexitems-2-ref.html"> +<link rel="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + background: blue; + + display: flex; + justify-content: space-around; +} +p { + font-family: ahem; + background: yellow; + column-rule: 1em solid lime; + columns: 2; + margin: 0; + width: 200px; +} +</style> + +<div> + <p> + one two three four five + one two three four five + one two three four five + </p> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_columns-flexitems-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_columns-flexitems-ref.html new file mode 100644 index 0000000000..3c8e1f475a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_columns-flexitems-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>flexbox | multicol on flexbox items</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; +} +p { + font-family: monospace; + background: yellow; + column-rule: 1em solid lime; + columns: 2; + width: 200px; + margin: 0 auto; +} +</style> + +<div> + <p>one two three four five</p> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_columns-flexitems.html b/testing/web-platform/tests/css/css-flexbox/flexbox_columns-flexitems.html new file mode 100644 index 0000000000..0a7e4d9d50 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_columns-flexitems.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | multicol on flexbox items</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" + href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> +<link rel="match" href="flexbox_columns-flexitems-ref.html"> +<style> +div { + background: blue; + + display: flex; + justify-content: space-around; +} +p { + font-family: monospace; + background: yellow; + column-rule: 1em solid lime; + columns: 2; + width: 200px; + margin: 0; +} +</style> + +<div> + <p>one two three four five</p> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_columns-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_columns-ref.html new file mode 100644 index 0000000000..b8c7a22569 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_columns-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>flexbox | multicol</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: black; +} +</style> + +<div>x</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_columns.html b/testing/web-platform/tests/css/css-flexbox/flexbox_columns.html new file mode 100644 index 0000000000..d39c2db55f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_columns.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>flexbox | multicol</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" + href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> +<link rel="match" href="flexbox_columns-ref.html"> +<style> +ul { + background: black; + padding: 0; + margin: 0; + + display: flex; + justify-content: space-around; + columns: 3; + column-rule: 1em solid red; +} +::marker { font-family:inherit; } +</style> + +<ul> + <li>one two three four</li> + <li>filler</li> + <li>filler</li> + <li>filler</li> + <li>filler</li> +</ul> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_direction-column-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_direction-column-ref.html new file mode 100644 index 0000000000..9b91d50345 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_direction-column-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex-direction: column</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; +} +span { + background: white; + margin: 1em; + width: 8em; + display: block; +} +span~span { + margin: 2em 1em 1em; +} +</style> + +<div> + <span>filler</span> + <span>filler</span> + <span>filler</span> + <span>filler</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_direction-column-reverse-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_direction-column-reverse-ref.html new file mode 100644 index 0000000000..dfa87f243e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_direction-column-reverse-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>flexbox | flex-direction: column-reverse</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; +} +span { + background: white; + margin: 1em; + width: 8em; + display: block; +} +.test { + background: #ffcc00; +} +span~span { + margin: 2em 1em 1em; +} +</style> + +<div> + <span>filler</span> + <span>filler</span> + <span>filler</span> + <span class="test">filler</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_direction-column-reverse.html b/testing/web-platform/tests/css/css-flexbox/flexbox_direction-column-reverse.html new file mode 100644 index 0000000000..8d2cd330e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_direction-column-reverse.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<title>flexbox | flex-direction: column-reverse</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" + href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> +<link rel="match" href="flexbox_direction-column-reverse-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + + display: flex; + flex-direction: column-reverse; +} +span { + background: white; + margin: 1em; + width: 8em; + display: inline-block; +} +.test { + background: #ffcc00; +} +</style> + +<div> + <span class="test">filler</span> + <span>filler</span> + <span>filler</span> + <span>filler</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_direction-column.html b/testing/web-platform/tests/css/css-flexbox/flexbox_direction-column.html new file mode 100644 index 0000000000..7647d9e9f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_direction-column.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>flexbox | flex-direction: column</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" + href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> +<link rel="match" href="flexbox_direction-column-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + + display: flex; + flex-direction: column; +} +span { + background: white; + margin: 1em; + width: 8em; + display: inline-block; +} +</style> + +<div> + <span>filler</span> + <span>filler</span> + <span>filler</span> + <span>filler</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_direction-row-reverse-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_direction-row-reverse-ref.html new file mode 100644 index 0000000000..5ea38fd09e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_direction-row-reverse-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>flexbox | flex-direction: row-reverse</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +#container { + width: 13em; + font: 40px "Ahem"; + background: black; + list-style: none; + text-align: right; +} +</style> +This test makes sure that the flex-direction: row-reverse CSS property correctly orders items. +<div id="container"> +<ul> +<span style="color: red;">E</span><span style="color: purple;">F</span><span style="color: grey;">G</span><span style="color: bisque;">H</span><span style="color: lightblue;">A</span><span style="color: turquoise;">B</span><span style="color: coral;">C</span><span style="color: violet;">D</span><span style="color: green;">I</span><span style="color: blue;">J</span><span style="color: cyan;">K</span><span style="color: magenta;">L</span> +</ul> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_direction-row-reverse.html b/testing/web-platform/tests/css/css-flexbox/flexbox_direction-row-reverse.html new file mode 100644 index 0000000000..501cd0d514 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_direction-row-reverse.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>flexbox | flex-direction: row-reverse</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> +<link rel="match" href="flexbox_direction-row-reverse-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +#container { + font: 40px "Ahem"; + width: 13em; +} +ul { + background: black; + list-style: none; + + display: flex; + flex-direction: row-reverse; +} +li { + margin: 0; + width: 4em; +} +</style> +This test makes sure that the flex-direction: row-reverse CSS property correctly orders items. +<div id="container"><ul> + <li><span style="color: green;">I</span><span style="color: blue;">J</span><span style="color: cyan;">K</span><span style="color: magenta;">L</span></li> + <li><span style="color: lightblue;">A</span><span style="color: turquoise;">B</span><span style="color: coral;">C</span><span style="color: violet;">D</span></li> + <li><span style="color: red;">E</span><span style="color: purple;">F</span><span style="color: grey;">G</span><span style="color: bisque;">H</span></li> +</ul></div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_display-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_display-ref.html new file mode 100644 index 0000000000..628c2722bd --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_display-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>flexbox | display error-handling</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +ol { + background: #3366cc; + padding: 0; + list-style: none; + border: 1px solid black; +} +li { + background: #ffcc00; + margin: 2em; +} +</style> + +<ol> + <li>filler</li> + <li>Antidisestablishmentarianism</li> +</ol> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_display.html b/testing/web-platform/tests/css/css-flexbox/flexbox_display.html new file mode 100644 index 0000000000..7ab0dd3647 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_display.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>flexbox | display error-handling</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" + href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> +<link rel="match" href="flexbox_display-ref.html"> +<style> +ul { + background: #3366cc; + padding: 0; + list-style: none; + border: 1px solid black; + + display: flex inline-flex; +} +li { + background: #ffcc00; + margin: 2em; +} +</style> + +<ul> + <li>filler</li> + <li>Antidisestablishmentarianism</li> +</ul> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_fbfc-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_fbfc-ref.html new file mode 100644 index 0000000000..6ca330751d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_fbfc-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>flexbox | flex formatting context :: float intrusion</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +* {margin: 0;} +body {width: 600px;} +#float { + background: #3366cc; + width: 25%; + float: left; +} +#flex { + background: #ffcc00; + padding: 2em 0; + width: 80%; + clear: both; +} +div div { + background: pink; + margin: 0 2em; + height: 4em; + display: inline-block; +} +</style> + +<div id="float">filler</div> + +<div id="flex"> + <div>Yellow box should be below the blue box</div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_fbfc.html b/testing/web-platform/tests/css/css-flexbox/flexbox_fbfc.html new file mode 100644 index 0000000000..5a75c70ebe --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_fbfc.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title>flexbox | flex formatting context :: float intrusion</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" + href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> +<link rel="match" href="flexbox_fbfc-ref.html"> +<style> +* {margin: 0;} +body {width: 600px;} +#float { + background: #3366cc; + width: 25%; + float: left; +} +#flex { + background: #ffcc00; + width: 80%; + display: flex; +} +div div { + background: pink; + margin: 2em; + height: 4em; +} +</style> + +<div id="float">filler</div> + +<div id="flex"> + <div>Yellow box should be below the blue box</div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_fbfc2-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_fbfc2-ref.html new file mode 100644 index 0000000000..22be633040 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_fbfc2-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex formatting context :: float intrusion</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +* {margin: 0;} +#float { + background: lightblue; + width: 200px; + float: left; +} +#flex { + background: #ffcc00; + margin-left: -200px; + width: 400px; + overflow: hidden; +} +div div { + margin: 2em; +} +</style> + +<div id="float">float</div> + +<div id="flex"> + <div>Yellow box yellow box yellow box</div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_fbfc2.html b/testing/web-platform/tests/css/css-flexbox/flexbox_fbfc2.html new file mode 100644 index 0000000000..56e71cfa40 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_fbfc2.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>flexbox | flex formatting context :: float intrusion</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" + href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> +<link rel="match" href="flexbox_fbfc2-ref.html"> +<style> +* {margin: 0;} +#float { + background: lightblue; + width: 200px; + float: left; +} +#flex { + background: #ffcc00; + margin-left: -200px; + width: 400px; + display: flex; +} +div div { + margin: 2em; +} +</style> + +<div id="float">float</div> + +<div id="flex"> + <div>Yellow box yellow box yellow box</div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_first-letter.html b/testing/web-platform/tests/css/css-flexbox/flexbox_first-letter.html new file mode 100644 index 0000000000..dbbb03d524 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_first-letter.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>flexbox | first-letter</title> +<meta name="assert" content="This test is ensures that flexbox placement does not apply to ::first-letter psuedo-content"> +<link rel="author" title="Vince Falconi" href="vince.falconi@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#placement"> +<style> + div { display: flex; } + div::first-letter { order: 2 } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div>Triceratops</div> + +<script> + test(function() { + let order = getComputedStyle(document.querySelector('div'), '::first-letter').order; + assert_not_equals(order, '2'); + }); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_first-line-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_first-line-ref.html new file mode 100644 index 0000000000..02f0d112cc --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_first-line-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | first-line</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +ul { + background: #3366cc; + padding: 0; + list-style: none; + width: 900px; + display: block; +} +li { + background: #ffcc00; + margin: 2em; + border: 1px solid black; + display: inline-block; +} +</style> + +<ul> + <li>filler</li><li>Antidisestablishmentarianism</li><li>filler</li><li>Antidisestablishmentarianism</li><li>Antidisestablishmentarianism</li><li>filler</li><li>Antidisestablishmentarianism</li><li>filler</li> +</ul> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_first-line.html b/testing/web-platform/tests/css/css-flexbox/flexbox_first-line.html new file mode 100644 index 0000000000..ad8d12c275 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_first-line.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | first-line</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#placement"> +<link rel="match" href="flexbox_first-line-ref.html"> +<style> +ul { + background: #3366cc; + padding: 0; + list-style: none; + width: 900px; + + display: flex; + flex-wrap: wrap; +} +li { + background: #ffcc00; + margin: 2em; + border: 1px solid black; +} +ul:first-child::first-line { + justify-content: space-around; +} +</style> + +<ul> + <li>filler</li> + <li>Antidisestablishmentarianism</li> + <li>filler</li> + <li>Antidisestablishmentarianism</li> + <li>Antidisestablishmentarianism</li> + <li>filler</li> + <li>Antidisestablishmentarianism</li> + <li>filler</li> +</ul> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-0-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-0-ref.html new file mode 100644 index 0000000000..9f4b596313 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-0-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 0 0</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: white; + margin: 1em 0; + height: 6em; + display: inline-block; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-0-unitless.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-0-unitless.html new file mode 100644 index 0000000000..3a108b5347 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-0-unitless.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 0 0 unitless</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-0-0-0-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 0 0 0; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-0.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-0.html new file mode 100644 index 0000000000..374638ba35 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-0.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 0 0</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-0-0-0-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 0 0 0%; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-1-unitless-basis.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-1-unitless-basis.html new file mode 100644 index 0000000000..94a6ccd3a2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-1-unitless-basis.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 0 N unitless</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-unitless-basis-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 0 0 4; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-N-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-N-ref.html new file mode 100644 index 0000000000..9af2f9510e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-N-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 0 N</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + width: 40em; + height: 8em; +} +span { + background: white; + margin: 1em 0; + width: 4em; + height: 6em; + display: inline-block; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-N-shrink-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-N-shrink-ref.html new file mode 100644 index 0000000000..83e1651795 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-N-shrink-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 0 N | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + white-space: nowrap; + background: blue; + margin: 1em 0; + border: 1px solid black; + width: 12em; + height: 8em; +} +span { + background: yellow; + margin: 1em 0; + width: 4em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-N-shrink.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-N-shrink.html new file mode 100644 index 0000000000..f643048aa3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-N-shrink.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 0 N | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-0-0-N-shrink-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 0 0 4em; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-N-unitless-basis.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-N-unitless-basis.html new file mode 100644 index 0000000000..94a6ccd3a2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-N-unitless-basis.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 0 N unitless</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-unitless-basis-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 0 0 4; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-N.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-N.html new file mode 100644 index 0000000000..412781bb34 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-N.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 0 N</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-0-0-N-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 0 0 4em; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-Npercent-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-Npercent-ref.html new file mode 100644 index 0000000000..242230f2f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-Npercent-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 0 N%</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: white; + margin: 1em 0; + width: 8em; + height: 6em; + display: inline-block; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-Npercent-shrink-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-Npercent-shrink-ref.html new file mode 100644 index 0000000000..a61bea67a5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-Npercent-shrink-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 0 N% | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + white-space: nowrap; + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; +} +span { + background: yellow; + margin: 1em 0; + width: 6em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-Npercent-shrink.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-Npercent-shrink.html new file mode 100644 index 0000000000..cb3ebc351c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-Npercent-shrink.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 0 N% | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-0-0-Npercent-shrink-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 0 0 50%; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-Npercent.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-Npercent.html new file mode 100644 index 0000000000..1b2fd80bf9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-Npercent.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 0 N%</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-0-0-Npercent-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 0 0 20%; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-auto-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-auto-ref.html new file mode 100644 index 0000000000..8e34c758ce --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-auto-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 0 auto</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: white; + margin: 1em 0; + width: 5em; + height: 6em; + display: inline-block; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-auto-shrink-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-auto-shrink-ref.html new file mode 100644 index 0000000000..e981b3c261 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-auto-shrink-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 0 auto | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + white-space: nowrap; + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 16em; +} +span { + background: yellow; + margin: 1em 0; + width: 5em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-auto-shrink.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-auto-shrink.html new file mode 100644 index 0000000000..d857151cd7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-auto-shrink.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 0 auto | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-0-0-auto-shrink-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 16em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 0 0 auto; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-auto.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-auto.html new file mode 100644 index 0000000000..90e5cb12ae --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0-auto.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 0 auto</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-0-0-auto-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 0 0 auto; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0.html new file mode 100644 index 0000000000..f8b5289f65 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-0.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 0</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-0-0-0-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 0 0; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-0-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-0-ref.html new file mode 100644 index 0000000000..db1252f5f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-0-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 1 0</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: white; + margin: 1em 0; + height: 6em; + display: inline-block; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-0-unitless.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-0-unitless.html new file mode 100644 index 0000000000..e04ca3e8a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-0-unitless.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 1 0 unitless</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-0-1-0-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 0 1 0; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-0.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-0.html new file mode 100644 index 0000000000..0dc6165693 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-0.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 1 0</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-0-1-0-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 0 1 0%; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-1-unitless-basis.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-1-unitless-basis.html new file mode 100644 index 0000000000..6863882a75 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-1-unitless-basis.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 1 1 unitless</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-unitless-basis-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 0 1 1; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-N-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-N-ref.html new file mode 100644 index 0000000000..fcaba286a4 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-N-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 1 N</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: white; + margin: 1em 0; + width: 4em; + height: 6em; + display: inline-block; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-N-shrink-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-N-shrink-ref.html new file mode 100644 index 0000000000..e92a1f21a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-N-shrink-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 1 N | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; +} +span { + background: white; + margin: 1em 0; + width: 3em; + height: 6em; + display: inline-block; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-N-shrink.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-N-shrink.html new file mode 100644 index 0000000000..05016e6647 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-N-shrink.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 1 N | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-0-1-N-shrink-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 0 1 4em; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-N-unitless-basis.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-N-unitless-basis.html new file mode 100644 index 0000000000..0f8e618227 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-N-unitless-basis.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 1 N unitless</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-unitless-basis-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 0 1 4; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-N.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-N.html new file mode 100644 index 0000000000..0d358efc30 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-N.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 1 N</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-0-1-N-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 0 1 4em; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-Npercent-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-Npercent-ref.html new file mode 100644 index 0000000000..79163d5a65 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-Npercent-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 1 N%</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 8em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-Npercent-shrink-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-Npercent-shrink-ref.html new file mode 100644 index 0000000000..fabfc23293 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-Npercent-shrink-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 1 N% | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; +} +span { + background: yellow; + margin: 1em 0; + width: 3em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-Npercent-shrink.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-Npercent-shrink.html new file mode 100644 index 0000000000..4504543fab --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-Npercent-shrink.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 1 N% | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-0-1-Npercent-shrink-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 0 1 50%; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-Npercent.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-Npercent.html new file mode 100644 index 0000000000..be8354fb7b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-Npercent.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 1 N%</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-0-1-Npercent-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 0 1 20%; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-auto-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-auto-ref.html new file mode 100644 index 0000000000..861bd20160 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-auto-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 1 auto</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 5em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-auto-shrink-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-auto-shrink-ref.html new file mode 100644 index 0000000000..46d275e21b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-auto-shrink-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 1 auto | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 16em; +} +span { + background: yellow; + margin: 1em 0; + width: 4em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-auto-shrink.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-auto-shrink.html new file mode 100644 index 0000000000..dddb127caa --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-auto-shrink.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 1 auto | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-0-1-auto-shrink-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 16em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 0 1 auto; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-auto.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-auto.html new file mode 100644 index 0000000000..5a3c8a7c45 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1-auto.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 1 auto</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-0-1-auto-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 0 1 auto; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1.html new file mode 100644 index 0000000000..329ee10bcb --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-1.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 1</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-0-1-0-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 0 1; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-0-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-0-ref.html new file mode 100644 index 0000000000..7b13acfb06 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-0-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 N 0</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-0-unitless.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-0-unitless.html new file mode 100644 index 0000000000..de605b3ef2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-0-unitless.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 N 0 unitless</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-0-N-0-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 0 2 0; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-0.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-0.html new file mode 100644 index 0000000000..321fa44041 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-0.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 N 0</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-0-N-0-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 0 2 0%; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-N-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-N-ref.html new file mode 100644 index 0000000000..fbc8ccd364 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-N-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 N N</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 4em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-N-shrink-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-N-shrink-ref.html new file mode 100644 index 0000000000..62a64e5668 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-N-shrink-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 N N | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; +} +span { + background: yellow; + margin: 1em 0; + width: 3em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-N-shrink.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-N-shrink.html new file mode 100644 index 0000000000..4f76687cf9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-N-shrink.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 N N | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-0-N-N-shrink-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 1 2 4em; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-N.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-N.html new file mode 100644 index 0000000000..dc91af05b4 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-N.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 N N</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-0-N-N-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 0 2 4em; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-Npercent-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-Npercent-ref.html new file mode 100644 index 0000000000..58f776e01b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-Npercent-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 N N%</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 8em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-Npercent-shrink-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-Npercent-shrink-ref.html new file mode 100644 index 0000000000..1af66b1a0c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-Npercent-shrink-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 N N% | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; +} +span { + background: yellow; + margin: 1em 0; + width: 3em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-Npercent-shrink.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-Npercent-shrink.html new file mode 100644 index 0000000000..df275096d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-Npercent-shrink.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 N N% | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-0-N-Npercent-shrink-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 0 2 50%; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-Npercent.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-Npercent.html new file mode 100644 index 0000000000..3f739eb39c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-Npercent.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 N N%</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-0-N-Npercent-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 0 2 20%; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-auto-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-auto-ref.html new file mode 100644 index 0000000000..8ba8946852 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-auto-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 N auto</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 5em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-auto-shrink-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-auto-shrink-ref.html new file mode 100644 index 0000000000..cd034e68d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-auto-shrink-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 N auto | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + width: 16em; +} +span { + background: yellow; + margin: 1em 0; + width: 4em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-auto-shrink.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-auto-shrink.html new file mode 100644 index 0000000000..1fad1c1e41 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-auto-shrink.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 N auto | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-0-N-auto-shrink-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 16em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 0 2 auto; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-auto.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-auto.html new file mode 100644 index 0000000000..3d5948fc66 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N-auto.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 N auto</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-0-N-auto-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 0 2 auto; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N.html new file mode 100644 index 0000000000..356a36dda1 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-N.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 N</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-0-N-0-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 0 2; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-auto.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-auto.html new file mode 100644 index 0000000000..e56a8fa32a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-0-auto.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 auto</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-initial-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 22em; + + display: flex; +} +span { + background: white; + margin: 1em; + width: 5em; + display: inline-block; + flex: 0 auto; +} +#flex span { + flex: 0 1 auto; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> + +<div id="flex"> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-0-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-0-ref.html new file mode 100644 index 0000000000..53db2a565e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-0-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 0 0</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-0-unitless.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-0-unitless.html new file mode 100644 index 0000000000..8c36acd2ee --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-0-unitless.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 0 0 unitless</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-1-0-0-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 1 0 0; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-0.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-0.html new file mode 100644 index 0000000000..7761004699 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-0.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 0 0</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-1-0-0-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 1 0 0%; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-N-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-N-ref.html new file mode 100644 index 0000000000..03700a4f21 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-N-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 0 N</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-N-shrink-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-N-shrink-ref.html new file mode 100644 index 0000000000..0850566eb8 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-N-shrink-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 0 N | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + white-space: nowrap; + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; +} +span { + background: yellow; + margin: 1em 0; + width: 4em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-N-shrink.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-N-shrink.html new file mode 100644 index 0000000000..890ac0c039 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-N-shrink.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 0 N | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-1-0-N-shrink-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 1 0 4em; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-N.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-N.html new file mode 100644 index 0000000000..65ab66e1b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-N.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 0 N</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-1-0-N-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 1 1 4em; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-Npercent-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-Npercent-ref.html new file mode 100644 index 0000000000..3c92305490 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-Npercent-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 0 N%</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-Npercent-shrink-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-Npercent-shrink-ref.html new file mode 100644 index 0000000000..cb4936ebb9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-Npercent-shrink-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 0 N% | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + white-space: nowrap; + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; +} +span { + background: yellow; + margin: 1em 0; + width: 6em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-Npercent-shrink.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-Npercent-shrink.html new file mode 100644 index 0000000000..c22d8b4500 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-Npercent-shrink.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 0 N% | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-1-0-Npercent-shrink-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 1 0 50%; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-Npercent.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-Npercent.html new file mode 100644 index 0000000000..6b84d4509a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-Npercent.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 0 N%</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-1-0-Npercent-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 1 1 20%; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-auto-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-auto-ref.html new file mode 100644 index 0000000000..9106d35f8a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-auto-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 0 auto</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-auto-shrink-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-auto-shrink-ref.html new file mode 100644 index 0000000000..e622229bba --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-auto-shrink-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 0 auto | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + white-space: nowrap; + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 16em; +} +span { + background: yellow; + margin: 1em 0; + width: 5em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-auto-shrink.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-auto-shrink.html new file mode 100644 index 0000000000..c8055f59ea --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-auto-shrink.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 0 auto | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-1-0-auto-shrink-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 16em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 1 0 auto; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-auto.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-auto.html new file mode 100644 index 0000000000..108181a9d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0-auto.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 0 auto</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-1-0-auto-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 1 0 auto; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0.html new file mode 100644 index 0000000000..b11bef40db --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-0.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 0</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-1-0-0-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 1 0; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-0-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-0-ref.html new file mode 100644 index 0000000000..5ed276f5e0 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-0-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 1 0</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-0-unitless.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-0-unitless.html new file mode 100644 index 0000000000..17f6a83807 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-0-unitless.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 1 0 unitless</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-1-1-0-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 1 1 0; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-0.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-0.html new file mode 100644 index 0000000000..a8e21f44a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-0.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 1 0</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-1-1-0-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 1 1 0%; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-N-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-N-ref.html new file mode 100644 index 0000000000..de21280e46 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-N-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 1 N</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-N-shrink-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-N-shrink-ref.html new file mode 100644 index 0000000000..cee8a6a044 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-N-shrink-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 1 N | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; +} +span { + background: yellow; + margin: 1em 0; + width: 3em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-N-shrink.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-N-shrink.html new file mode 100644 index 0000000000..333193b1fa --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-N-shrink.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 1 N | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-1-1-N-shrink-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 1 1 4em; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-N.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-N.html new file mode 100644 index 0000000000..0761c42723 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-N.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 1 N</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-1-1-N-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 1 1 4em; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-Npercent-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-Npercent-ref.html new file mode 100644 index 0000000000..d0b9f6de80 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-Npercent-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 1 N%</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-Npercent-shrink-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-Npercent-shrink-ref.html new file mode 100644 index 0000000000..3597661775 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-Npercent-shrink-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 1 N% | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; +} +span { + background: yellow; + margin: 1em 0; + width: 3em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-Npercent-shrink.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-Npercent-shrink.html new file mode 100644 index 0000000000..b7fbc86327 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-Npercent-shrink.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 1 N% | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-1-1-Npercent-shrink-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 1 1 50%; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-Npercent.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-Npercent.html new file mode 100644 index 0000000000..3ca032fb62 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-Npercent.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 1 N%</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-1-1-Npercent-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 1 1 20%; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-auto-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-auto-ref.html new file mode 100644 index 0000000000..321a0a966f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-auto-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 1 auto</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-auto-shrink-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-auto-shrink-ref.html new file mode 100644 index 0000000000..f0297d8d26 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-auto-shrink-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 1 auto | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 16em; +} +span { + background: yellow; + margin: 1em 0; + width: 4em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-auto-shrink.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-auto-shrink.html new file mode 100644 index 0000000000..4c3b14d239 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-auto-shrink.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 1 auto | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-1-1-auto-shrink-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 16em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 1 1 auto; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-auto.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-auto.html new file mode 100644 index 0000000000..3a1efa8d16 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1-auto.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 1 auto</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-1-1-auto-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 1 1 auto; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1.html new file mode 100644 index 0000000000..8863c80db2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-1.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 1</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-1-1-0-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 1 1; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-0-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-0-ref.html new file mode 100644 index 0000000000..29221dd00f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-0-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 N 0</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-0-unitless.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-0-unitless.html new file mode 100644 index 0000000000..e94509a14b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-0-unitless.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 N 0 unitless</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-1-N-0-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 1 2 0; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-0.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-0.html new file mode 100644 index 0000000000..a4dbcf81c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-0.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 N 0</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-1-N-0-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 1 2 0%; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-N-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-N-ref.html new file mode 100644 index 0000000000..054f19c256 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-N-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 N N</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-N-shrink-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-N-shrink-ref.html new file mode 100644 index 0000000000..8863d08465 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-N-shrink-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 N N | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; +} +span { + background: yellow; + margin: 1em 0; + width: 3em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-N-shrink.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-N-shrink.html new file mode 100644 index 0000000000..1fe35c7a3e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-N-shrink.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 N N | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-1-N-N-shrink-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 1 2 4em; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-N.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-N.html new file mode 100644 index 0000000000..291f3b43bd --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-N.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 N N</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-1-N-N-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 1 2 4em; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-Npercent-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-Npercent-ref.html new file mode 100644 index 0000000000..a2964a8037 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-Npercent-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 N N%</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-Npercent-shrink-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-Npercent-shrink-ref.html new file mode 100644 index 0000000000..d86aa3410f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-Npercent-shrink-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 N N% | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; +} +span { + background: yellow; + margin: 1em 0; + width: 3em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-Npercent-shrink.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-Npercent-shrink.html new file mode 100644 index 0000000000..11d1f81b96 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-Npercent-shrink.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 N N% | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-1-N-Npercent-shrink-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 1 2 50%; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-Npercent.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-Npercent.html new file mode 100644 index 0000000000..49c2d7fda8 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-Npercent.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 N N%</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-1-N-Npercent-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 1 2 20%; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-auto-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-auto-ref.html new file mode 100644 index 0000000000..ed7fd1267c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-auto-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 N auto</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-auto-shrink-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-auto-shrink-ref.html new file mode 100644 index 0000000000..950a8ea26c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-auto-shrink-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 N auto | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 16em; +} +span { + background: yellow; + margin: 1em 0; + width: 4em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-auto-shrink.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-auto-shrink.html new file mode 100644 index 0000000000..bdd64e7f3e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-auto-shrink.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 N auto | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-1-N-auto-shrink-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 16em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 1 2 auto; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-auto.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-auto.html new file mode 100644 index 0000000000..4abd0f2dda --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N-auto.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 N auto</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-1-N-auto-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 1 2 auto; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N.html new file mode 100644 index 0000000000..73d64b6528 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-1-N.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: 1 N</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-1-N-0-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 1 2; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-0-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-0-ref.html new file mode 100644 index 0000000000..91f52227e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-0-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: N 0 0</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-0-unitless.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-0-unitless.html new file mode 100644 index 0000000000..bdb60617f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-0-unitless.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: N 0 0 unitless</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-N-0-0-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 4 0 0%; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-0.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-0.html new file mode 100644 index 0000000000..720388b74d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-0.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: N 0 0</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-N-0-0-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 4 0 0%; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-N-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-N-ref.html new file mode 100644 index 0000000000..0a4d94f754 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-N-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: N 0 N</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-N-shrink-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-N-shrink-ref.html new file mode 100644 index 0000000000..369fd44ff5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-N-shrink-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>flexbox | flex: N 0 N | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + white-space: nowrap; + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; +} +span { + background: yellow; + margin: 1em 0; + width: 4em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-N-shrink.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-N-shrink.html new file mode 100644 index 0000000000..5d2193a02b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-N-shrink.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: N 0 N | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-N-0-N-shrink-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 4 0 4em; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-N.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-N.html new file mode 100644 index 0000000000..58dbbaaac0 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-N.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: N 0 N</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-N-0-N-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 4 0 4em; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-Npercent-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-Npercent-ref.html new file mode 100644 index 0000000000..8d601bea83 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-Npercent-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: N 0 N%</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-Npercent-shrink-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-Npercent-shrink-ref.html new file mode 100644 index 0000000000..e6ce535e38 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-Npercent-shrink-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>flexbox | flex: N 0 N% | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + white-space: nowrap; + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; +} +span { + background: yellow; + margin: 1em 0; + width: 6em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-Npercent-shrink.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-Npercent-shrink.html new file mode 100644 index 0000000000..7ecf22ba67 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-Npercent-shrink.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: N 0 N% | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-N-0-Npercent-shrink-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 4 0 50%; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-Npercent.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-Npercent.html new file mode 100644 index 0000000000..d8d8761f6d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-Npercent.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: N 0 N%</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-N-0-Npercent-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 4 0 20%; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-auto-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-auto-ref.html new file mode 100644 index 0000000000..ad05cbf941 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-auto-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: N 0 auto</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-auto-shrink-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-auto-shrink-ref.html new file mode 100644 index 0000000000..bd8d2b6c66 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-auto-shrink-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>flexbox | flex: N 0 auto | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + white-space: nowrap; + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; +} +span { + background: yellow; + margin: 1em 0; + width: 5em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-auto-shrink.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-auto-shrink.html new file mode 100644 index 0000000000..2060a67884 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-auto-shrink.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: N 0 auto | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-N-0-auto-shrink-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 4 0 auto; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-auto.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-auto.html new file mode 100644 index 0000000000..b05f948e8d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0-auto.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: N 0 auto</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-N-0-auto-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 4 0 auto; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0.html new file mode 100644 index 0000000000..46e051bc63 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-0.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: N 0</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-N-0-0-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 4 0; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-0-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-0-ref.html new file mode 100644 index 0000000000..b5a4af6c4b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-0-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: N 1 0</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-0-unitless.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-0-unitless.html new file mode 100644 index 0000000000..5fcd2b0d54 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-0-unitless.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: N 1 0 unitless</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-N-1-0-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 4 1 0; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-0.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-0.html new file mode 100644 index 0000000000..7e7643d57a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-0.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: N 1 0</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-N-1-0-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 4 1 0%; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-N-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-N-ref.html new file mode 100644 index 0000000000..006f03d7ec --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-N-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: N 1 N</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-N-shrink-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-N-shrink-ref.html new file mode 100644 index 0000000000..9c83182d5b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-N-shrink-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: N 1 N | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; +} +span { + background: yellow; + margin: 1em 0; + width: 3em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-N-shrink.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-N-shrink.html new file mode 100644 index 0000000000..26050d96c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-N-shrink.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: N 1 N | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-N-1-N-shrink-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 4 1 4em; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-N.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-N.html new file mode 100644 index 0000000000..bcc0411306 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-N.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: N 1 N</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-N-1-N-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 4 1 4em; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-Npercent-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-Npercent-ref.html new file mode 100644 index 0000000000..b6ff55be24 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-Npercent-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: N 1 N%</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-Npercent-shrink-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-Npercent-shrink-ref.html new file mode 100644 index 0000000000..920fbd6d57 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-Npercent-shrink-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: N 1 N% | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; +} +span { + background: yellow; + margin: 1em 0; + width: 3em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-Npercent-shrink.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-Npercent-shrink.html new file mode 100644 index 0000000000..d620ef1151 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-Npercent-shrink.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: N 1 N% | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-N-1-Npercent-shrink-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 4 1 50%; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-Npercent.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-Npercent.html new file mode 100644 index 0000000000..fee9bbf95b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-Npercent.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: N 1 N%</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-N-1-Npercent-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 4 1 20%; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-auto-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-auto-ref.html new file mode 100644 index 0000000000..39f5c78b69 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-auto-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: N 1 auto</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-auto-shrink-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-auto-shrink-ref.html new file mode 100644 index 0000000000..02c43b8961 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-auto-shrink-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: N 1 auto | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 16em; +} +span { + background: yellow; + margin: 1em 0; + width: 4em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-auto-shrink.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-auto-shrink.html new file mode 100644 index 0000000000..addb21384f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-auto-shrink.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: N 1 auto | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-N-1-auto-shrink-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 16em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 4 1 auto; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-auto.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-auto.html new file mode 100644 index 0000000000..67cb3a2996 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1-auto.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: N 1 auto</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-N-1-auto-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 4 1 auto; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1.html new file mode 100644 index 0000000000..655493168e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-1.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: N 1</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-N-1-0-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 4 1; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-0-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-0-ref.html new file mode 100644 index 0000000000..5ccb170792 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-0-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: N N 0</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-0-unitless.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-0-unitless.html new file mode 100644 index 0000000000..ee655252cc --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-0-unitless.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: N N 0 unitless</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-N-N-0-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 4 2 0; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-0.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-0.html new file mode 100644 index 0000000000..b6053669eb --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-0.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: N N 0</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-N-N-0-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 4 2 0%; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-N-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-N-ref.html new file mode 100644 index 0000000000..81c9b20acb --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-N-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: N N N</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-N-shrink-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-N-shrink-ref.html new file mode 100644 index 0000000000..cbc66bdecf --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-N-shrink-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: N N N | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; +} +span { + background: yellow; + margin: 1em 0; + width: 3em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-N-shrink.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-N-shrink.html new file mode 100644 index 0000000000..f82bdd746e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-N-shrink.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: N N N | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-N-N-N-shrink-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 4 2 4em; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-N.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-N.html new file mode 100644 index 0000000000..f7f1b5acf2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-N.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: N N N</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-N-N-N-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 4 2 4em; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-Npercent-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-Npercent-ref.html new file mode 100644 index 0000000000..798ff4f673 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-Npercent-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: N N N%</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-Npercent-shrink-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-Npercent-shrink-ref.html new file mode 100644 index 0000000000..069f982817 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-Npercent-shrink-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: N N N% | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; +} +span { + background: yellow; + margin: 1em 0; + width: 3em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-Npercent-shrink.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-Npercent-shrink.html new file mode 100644 index 0000000000..a018f73544 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-Npercent-shrink.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: N N N% | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-N-N-Npercent-shrink-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 4 2 50%; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-Npercent.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-Npercent.html new file mode 100644 index 0000000000..ed49973a25 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-Npercent.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: N N N%</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-N-N-Npercent-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 4 2 20%; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-auto-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-auto-ref.html new file mode 100644 index 0000000000..8d8e94dfd9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-auto-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: N N auto</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-auto-shrink-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-auto-shrink-ref.html new file mode 100644 index 0000000000..e3c30e25ef --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-auto-shrink-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: N N auto | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 16em; +} +span { + background: yellow; + margin: 1em 0; + width: 4em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-auto-shrink.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-auto-shrink.html new file mode 100644 index 0000000000..9fec902ce5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-auto-shrink.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: N N auto | shrinking</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-N-N-auto-shrink-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 16em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 4 2 auto; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-auto.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-auto.html new file mode 100644 index 0000000000..29d50462e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N-auto.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: N N auto</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-N-N-auto-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 4 2 auto; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N.html new file mode 100644 index 0000000000..3b26bd2550 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-N-N.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: N N</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_flex-N-N-0-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 4 2; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-auto-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-auto-ref.html new file mode 100644 index 0000000000..72d2dcba74 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-auto-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>flexbox | flex: auto</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 32em; +} +span { + background: white; + margin: 1em; + width: 6em; + height: 6em; + display: inline-block; + +} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-auto.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-auto.html new file mode 100644 index 0000000000..bfef8ffa46 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-auto.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<title>flexbox | flex: auto</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-common"> +<link rel="match" href="flexbox_flex-auto-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 32em; + + display: flex; +} +span { + background: white; + margin: 1em; + width: 5em; + display: inline-block; + + flex: auto; +} +#flex span { + flex: 1 1 auto; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> + +<div id="flex"> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-basis-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-basis-ref.html new file mode 100644 index 0000000000..79687112d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-basis-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>flexbox | flex-basis: percentage</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + white-space: nowrap; + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 8em; +} +span { + background: yellow; + margin: 1em 0; + width: 8em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-basis-shrink-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-basis-shrink-ref.html new file mode 100644 index 0000000000..39d73c2514 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-basis-shrink-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex-basis: percentage, flex-shrink: +integer</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + width: 24em; + height: 8em; +} +span { + background: yellow; + margin: 1em 0; + width: 6em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-basis-shrink.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-basis-shrink.html new file mode 100644 index 0000000000..25856c77ef --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-basis-shrink.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title>flexbox | flex-basis: percentage, flex-shrink: +integer</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" + href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property"> +<link rel="match" href="flexbox_flex-basis-shrink-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 24em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 1 1 50%; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-basis.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-basis.html new file mode 100644 index 0000000000..4806917151 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-basis.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title>flexbox | flex-basis: percentage</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" + href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property"> +<link rel="match" href="flexbox_flex-basis-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 8em; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex-grow: 1; + flex-shrink: 0; + flex-basis: 100%; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-formatting-interop-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-formatting-interop-ref.html new file mode 100644 index 0000000000..f264401e7f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-formatting-interop-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title>flexbox | flex formatting context :: negative margins and + border box</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +* {margin: 0;} +.float { + background: lightblue; + width: 200px; + float: left; +} +#flex { + background: #ffcc00; + margin-left: -200px; + width: 200px; +} +div div { + border: 2px solid transparent; + margin: 0 2em 2em; +} +p { + clear: both; + margin: 2em 0; +} +#nbfc { + white-space: nowrap; + background: #ffcc00; + margin-left: -200px; + width: 200px; + table-layout: fixed; + display: table; +} +</style> + +<div class="float">float</div> +<div id="nbfc"> + <div>xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx</div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-formatting-interop.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-formatting-interop.html new file mode 100644 index 0000000000..a6ef26fa27 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-formatting-interop.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title>flexbox | flex formatting context :: negative margins and + border box</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> +<link rel="match" href="flexbox_flex-formatting-interop-ref.html"> +<style> +* {margin: 0;} +.float { + background: lightblue; + width: 200px; + float: left; +} +#flex { + background: #ffcc00; + margin-left: -200px; + width: 200px; + + display: flex; +} +div div { + border: 2px solid transparent; + margin: 0 2em 2em; + flex: none; +} +p { + clear: both; + margin: 2em 0; +} +</style> + +<div class="float">float</div> + +<div id="flex"> + <div>xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx</div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-initial-2-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-initial-2-ref.html new file mode 100644 index 0000000000..7bc8ba23ed --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-initial-2-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>flexbox | flex: initial</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: white; + margin: 1em; + width: 5em; + height: 6em; + display: inline-block; +} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-initial-2.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-initial-2.html new file mode 100644 index 0000000000..79c58207a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-initial-2.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<title>flexbox | flex: initial</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-common"> +<link rel="match" href="flexbox_flex-initial-2-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; + + display: flex; +} +span { + background: white; + margin: 1em; + width: 5em; + display: inline-block; + flex: initial; +} +#flex span { + flex: 0 1 auto; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> + +<div id="flex"> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-initial-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-initial-ref.html new file mode 100644 index 0000000000..073f68128c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-initial-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>flexbox | flex: initial</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 22em; +} +span { + background: white; + margin: 1em; + width: 3.5em; + height: 6em; + display: inline-block; +} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-initial.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-initial.html new file mode 100644 index 0000000000..b27171d8e0 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-initial.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<title>flexbox | flex: initial</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-common"> +<link rel="match" href="flexbox_flex-initial-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 22em; + + display: flex; +} +span { + background: white; + margin: 1em; + width: 5em; + display: inline-block; + flex: initial; +} +#flex span { + flex: 0 1 auto; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> + +<div id="flex"> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-natural-mixed-basis-auto-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-natural-mixed-basis-auto-ref.html new file mode 100644 index 0000000000..ecf4304ad7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-natural-mixed-basis-auto-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>flexbox | flex: larger integer, mixed basis, auto</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + font-family: ahem; + background: blue; + height: 8em; + width: 35em; +} +span { + font-family: ahem; + height: 8em; + display: inline-block; +} +span:nth-child(1) { + background: yellow; + width: 3em; +} +span:nth-child(2) { + background: pink; + width: 6em; +} +span:nth-child(3) { + background: lightblue; + width: 8em; +} +span:nth-child(4) { + background: grey; + width: 18em; +} +</style> + +<div> + <span>a</span><span>aaa</span><span>aaaaa</span><span>aaaaaaaaaaaaaaa</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-natural-mixed-basis-auto.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-natural-mixed-basis-auto.html new file mode 100644 index 0000000000..5cac508f9a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-natural-mixed-basis-auto.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title>flexbox | flex: larger integer, mixed basis, auto</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" + href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property"> +<link rel="match" href="flexbox_flex-natural-mixed-basis-auto-ref.html"> +<link rel="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + font-family: ahem; + background: blue; + height: 8em; + width: 35em; + + display: flex; +} +span { + font-family: ahem; + background: white; + + flex: 1 1 auto; +} +span:nth-child(1) { + flex: 1 1 0%; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>a</span> + <span>aaa</span> + <span>aaaaa</span> + <span>aaaaaaaaaaaaaaa</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-natural-mixed-basis-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-natural-mixed-basis-ref.html new file mode 100644 index 0000000000..e2a9dd97d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-natural-mixed-basis-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex: larger integer, mixed basis</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + height: 8em; + width: 35em; +} +span { + background: yellow; + width: 10em; + height: 8em; + display: inline-block; +} +span:nth-child(1) { + width: 5em; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-natural-mixed-basis.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-natural-mixed-basis.html new file mode 100644 index 0000000000..cbef001e2c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-natural-mixed-basis.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: larger integer, mixed basis</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" + href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property"> +<link rel="match" href="flexbox_flex-natural-mixed-basis-ref.html"> +<style> +div { + background: blue; + height: 8em; + width: 35em; + + display: flex; +} +span { + background: white; + width: 5em; + + flex: 1 1 auto; +} +span:nth-child(1) { + flex: 1 1 0%; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-natural-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-natural-ref.html new file mode 100644 index 0000000000..69340d1cf2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-natural-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title>flexbox | flex: larger integer</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 800px; +} +span { + background: white; + margin: 1em 0; + width: 25%; + height: 6em; + display: inline-block; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-natural-variable-auto-basis-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-natural-variable-auto-basis-ref.html new file mode 100644 index 0000000000..93656cb897 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-natural-variable-auto-basis-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>flexbox | flex: larger integer, auto basis</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + border: 1px solid black; + height: 8em; + width: 32em; +} +span { + width: 7em; + height: 8em; + float: left; +} +span:nth-child(2) { + width: 11em; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-natural-variable-auto-basis.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-natural-variable-auto-basis.html new file mode 100644 index 0000000000..11fc45dd7d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-natural-variable-auto-basis.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: larger integer, auto basis</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" + href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property"> +<link rel="match" href="flexbox_flex-natural-variable-auto-basis-ref.html"> +<style> +div { + border: 1px solid black; + height: 8em; + width: 32em; + + display: flex; +} +span { + width: 5em; + display: inline-block; + + flex: 1 1 auto; +} +span:nth-child(2) { + flex: 3 1 auto; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-natural-variable-zero-basis-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-natural-variable-zero-basis-ref.html new file mode 100644 index 0000000000..097d2af9f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-natural-variable-zero-basis-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>flexbox | flex: larger integer, zero basis</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + border: 1px solid black; + height: 8em; + width: 36em; +} +span { + width: 6em; + height: 8em; + float: left; +} +span:nth-child(2) { + width: 18em; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-natural-variable-zero-basis.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-natural-variable-zero-basis.html new file mode 100644 index 0000000000..6ea8f29ac9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-natural-variable-zero-basis.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | flex: larger integer, zero basis</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" + href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property"> +<link rel="match" href="flexbox_flex-natural-variable-zero-basis-ref.html"> +<style> +div { + border: 1px solid black; + height: 8em; + width: 36em; + + display: flex; +} +span { + width: 6em; + display: block; + + flex: 1 1 0%; +} +span:nth-child(2) { + flex: 3 1 0%; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-natural.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-natural.html new file mode 100644 index 0000000000..8152149824 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-natural.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<title>flexbox | flex: larger integer</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-common"> +<link rel="match" href="flexbox_flex-natural-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 800px; + + display: flex; +} +span { + background: white; + margin: 1em 0; + width: 5em; + display: inline-block; + + flex: 2; +} +#flex span { + flex: 666 1 0%; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> + +<div id="flex"> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-none-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-none-ref.html new file mode 100644 index 0000000000..3d44bf5d8c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-none-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>flexbox | flex: none</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 32em; +} +span { + background: white; + margin: 1em; + width: 5em; + height: 6em; + display: inline-block; +} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-none-wrappable-content-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-none-wrappable-content-ref.html new file mode 100644 index 0000000000..cc748e4190 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-none-wrappable-content-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>Reference for specifying flex:none on wrappable content should give content its full width</title> + +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +span { + font-family: Ahem; + color: green; +} +</style> + +<div><span>XXX XXX XXX</span></div> + +<div style="margin-top: 1em;">You should see three green rectangles above, all on the same line.</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-none-wrappable-content.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-none-wrappable-content.html new file mode 100644 index 0000000000..81fafbf309 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-none-wrappable-content.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>Specifying flex:none on wrappable content should give content its full width</title> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-common"> +<meta name="assert" content="When content has flex:none, it should be given its full width"> +<link rel="match" href="flexbox_flex-none-wrappable-content-ref.html"> + +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +span { + font-family: Ahem; + color: green; +} +</style> + +<div style="display: flex; width: 5px;"> + <div style="flex: none;"> + <span>XXX XXX XXX</span> + </div> +</div> + +<div style="margin-top: 1em;">You should see three green rectangles above, all on the same line.</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-none.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-none.html new file mode 100644 index 0000000000..2b781a276d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-none.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<title>flexbox | flex: none</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-common"> +<link rel="match" href="flexbox_flex-none-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 32em; + + display: flex; +} +span { + background: white; + margin: 1em; + width: 5em; + display: inline-block; + + flex: none; +} +#flex span { + flex: 0 0 auto; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> + +<div id="flex"> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flex-unitless-basis-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-unitless-basis-ref.html new file mode 100644 index 0000000000..a0231350fe --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flex-unitless-basis-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>flexbox | flex: 0 1 N unitless</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: white; + margin: 1em 0; + width: 5em; + height: 6em; + display: inline-block; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flow-column-reverse-wrap-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flow-column-reverse-wrap-ref.html new file mode 100644 index 0000000000..fea908f152 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flow-column-reverse-wrap-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>flexbox | flex-flow: column-reverse wrap</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + padding-top: 1em; + margin: 1em 0; + border: 1px solid black; + width: 20em; + height: 7em; +} +span { + background: white; + margin: 1em; + width: 8em; + height: 1.5em; + float: left; +} +</style> + +<div> + <span>two</span> + <span>four</span> + <span>one</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flow-column-reverse-wrap-reverse-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flow-column-reverse-wrap-reverse-ref.html new file mode 100644 index 0000000000..9f9079d956 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flow-column-reverse-wrap-reverse-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>flexbox | flex-flow: column-reverse wrap-reverse</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + padding-top: 1em; + margin: 1em 0; + border: 1px solid black; + width: 20em; + height: 7em; +} +span { + background: white; + margin: 1em; + width: 8em; + height: 1.5em; + float: left; +} +</style> + +<div> + <span>four</span> + <span>two</span> + <span>three</span> + <span>one</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flow-column-reverse-wrap-reverse.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flow-column-reverse-wrap-reverse.html new file mode 100644 index 0000000000..2b65260306 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flow-column-reverse-wrap-reverse.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title>flexbox | flex-flow: column-reverse wrap-reverse</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> +<link rel="match" href="flexbox_flow-column-reverse-wrap-reverse-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + width: 20em; + height: 8em; + + display: flex; + flex-flow: column-reverse wrap-reverse; +} +span { + background: white; + margin: 1em; + width: 8em; + height: 1.5em; + display: inline-block; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flow-column-reverse-wrap.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flow-column-reverse-wrap.html new file mode 100644 index 0000000000..014bbddc32 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flow-column-reverse-wrap.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title>flexbox | flex-flow: column-reverse wrap</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> +<link rel="match" href="flexbox_flow-column-reverse-wrap-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + width: 20em; + height: 8em; + + display: flex; + flex-flow: column-reverse wrap; +} +span { + background: white; + margin: 1em; + width: 8em; + height: 1.5em; + display: inline-block; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flow-column-wrap-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flow-column-wrap-ref.html new file mode 100644 index 0000000000..0f80e50fdf --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flow-column-wrap-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex-flow: column wrap</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + width: 20em; + height: 8em; +} +span { + background: white; + margin: 1em; + width: 8em; + display: block; + float: left; +} +</style> + +<div> + <span>one</span> + <span>three</span> + <span>two</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flow-column-wrap-reverse-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flow-column-wrap-reverse-ref.html new file mode 100644 index 0000000000..517f1955b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flow-column-wrap-reverse-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | flex-flow: column wrap-reverse</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + width: 20em; + height: 8em; +} +span { + background: white; + margin: 1em; + width: 8em; + display: block; + float: left; +} +</style> + +<div> + <span>three</span> + <span>one</span> + <span>four</span> + <span>two</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flow-column-wrap-reverse.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flow-column-wrap-reverse.html new file mode 100644 index 0000000000..602e0d8933 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flow-column-wrap-reverse.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>flexbox | flex-flow: column wrap-reverse</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> +<link rel="match" href="flexbox_flow-column-wrap-reverse-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + width: 20em; + height: 8em; + + display: flex; + flex-flow: column wrap-reverse; +} +span { + background: white; + margin: 1em; + width: 8em; + display: inline-block; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flow-column-wrap.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flow-column-wrap.html new file mode 100644 index 0000000000..c5b95c20d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flow-column-wrap.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>flexbox | flex-flow: column wrap</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> +<link rel="match" href="flexbox_flow-column-wrap-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + width: 20em; + height: 8em; + + display: flex; + flex-flow: column wrap; +} +span { + background: white; + margin: 1em; + width: 8em; + display: inline-block; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flow-row-wrap-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flow-row-wrap-ref.html new file mode 100644 index 0000000000..d1f5f51e60 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flow-row-wrap-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>flexbox | flex-flow: row wrap</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + width: 20em; +} +span { + background: white; + margin: 1em; + width: 8em; + display: block; + float: left; +} +div::after { + content: ""; + clear: both; + display: block; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flow-row-wrap-reverse-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flow-row-wrap-reverse-ref.html new file mode 100644 index 0000000000..febf56a73e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flow-row-wrap-reverse-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>flexbox | flex-flow: row wrap-reverse</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + width: 20em; +} +span { + background: white; + margin: 1em; + width: 8em; + display: block; + float: left; +} +div::after { + content: ""; + clear: both; + display: block; +} +</style> + +<div> + <span>three</span> + <span>four</span> + <span>one</span> + <span>two</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flow-row-wrap-reverse.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flow-row-wrap-reverse.html new file mode 100644 index 0000000000..28d7c343f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flow-row-wrap-reverse.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>flexbox | flex-flow: row wrap-reverse</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> +<link rel="match" href="flexbox_flow-row-wrap-reverse-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + width: 20em; + + display: flex; + flex-flow: row wrap-reverse; +} +span { + background: white; + margin: 1em; + width: 8em; + display: inline-block; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_flow-row-wrap.html b/testing/web-platform/tests/css/css-flexbox/flexbox_flow-row-wrap.html new file mode 100644 index 0000000000..a1a17abacc --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_flow-row-wrap.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>flexbox | flex-flow: row wrap</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> +<link rel="match" href="flexbox_flow-row-wrap-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + width: 20em; + + display: flex; + flex-flow: row wrap; +} +span { + background: white; + margin: 1em; + width: 8em; + display: inline-block; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_generated-flex-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_generated-flex-ref.html new file mode 100644 index 0000000000..2fb25ffb34 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_generated-flex-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>flexbox | flexcontainer via generated content</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: #3366cc; + border: 1px solid black; +} +div::after { + content: "xxx"; + background: yellow; + margin: 1em; + width: 200px; + height: 2em; + display: block; +} +</style> + +<div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_generated-flex.html b/testing/web-platform/tests/css/css-flexbox/flexbox_generated-flex.html new file mode 100644 index 0000000000..b2bb8a3ede --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_generated-flex.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | flexcontainer via generated content</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> +<link rel="match" href="flexbox_generated-flex-ref.html"> +<style> +div { + background: #3366cc; + border: 1px solid black; +} +div::after { + content: "xxx"; + background: yellow; + margin: 1em; + width: 200px; + height: 2em; + display: flex; +} +</style> + +<div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_generated-nested-flex.html b/testing/web-platform/tests/css/css-flexbox/flexbox_generated-nested-flex.html new file mode 100644 index 0000000000..2a095c16e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_generated-nested-flex.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | flexcontainer via generated content</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> +<link rel="match" href="flexbox_generated-flex-ref.html"> +<style> +div { + background: #3366cc; + border: 1px solid black; + display: flex; +} +div::after { + content: "xxx"; + background: yellow; + margin: 1em; + width: 200px; + height: 2em; + display: flex; +} +</style> + +<div></div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_generated-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_generated-ref.html new file mode 100644 index 0000000000..05691f0dbb --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_generated-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>flexbox | flexcontainer vs generated content</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: #3366cc; + height: 4em; +} +div::after, p { + content: "xxx"; + background: yellow; + margin: 1em; + width: 200px; + height: 2em; + float: left; +} +div::after { + content: "yyy"; + display: block; +} +</style> + +<div> + <p>FAIL</p> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_generated.html b/testing/web-platform/tests/css/css-flexbox/flexbox_generated.html new file mode 100644 index 0000000000..1c84d8803e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_generated.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>flexbox | flexcontainer vs generated content</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> +<link rel="match" href="flexbox_generated-ref.html"> +<style> +div { + background: #3366cc; + + display: flex; +} +div::after, p { + content: "xxx"; + background: yellow; + margin: 1em; + width: 200px; + height: 2em; +} +div::after { + content: "yyy"; + display: block; +} +</style> + +<div> + <p>FAIL</p> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_inline-float.html b/testing/web-platform/tests/css/css-flexbox/flexbox_inline-float.html new file mode 100644 index 0000000000..345b3fa7c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_inline-float.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>flexbox | floated inline</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"> +<link rel="match" href="../reference/blank.html"> +<style> +div { + background: red; + margin-top: -20em; + float: left; + display: inline-flex; +} +</style> + +<div>FAIL</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_inline-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_inline-ref.html new file mode 100644 index 0000000000..ceec7830c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_inline-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>flexbox | inline</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +body {margin: 0;} +div { + background: yellow; + display: inline-block; +} +</style> + +<div>HELLOWORLD</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_inline.html b/testing/web-platform/tests/css/css-flexbox/flexbox_inline.html new file mode 100644 index 0000000000..28d8f81c90 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_inline.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>flexbox | inline</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" + href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> +<link rel="match" href="flexbox_inline-ref.html"> +<style> +body {margin: 0;} +div { + background: yellow; + margin-top: -20em; + display: inline-flex; +} +</style> + +<div>HELLOWORLD</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_item-bottom-float-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_item-bottom-float-ref.html new file mode 100644 index 0000000000..26a4e254bd --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_item-bottom-float-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>flexbox | GCPM bottom float</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: black; + margin: 1em; + height: 6em; + width: 400px; +} +p { + background: #3366cc; + margin: 2em; + width: 2em; + height: 2em; + float: left; +} +div::after { + content: ""; + clear: both; + display: block; +} +</style> + +<div> + <p></p> + <p></p> + <p></p> + <p></p> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_item-bottom-float.html b/testing/web-platform/tests/css/css-flexbox/flexbox_item-bottom-float.html new file mode 100644 index 0000000000..d8e012c6e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_item-bottom-float.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>flexbox | GCPM bottom float</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_item-bottom-float-ref.html"> +<style> +div { + background: black; + margin: 1em; + height: 6em; + width: 400px; + + display: flex; +} +p { + background: #3366cc; + margin: 2em; + width: 2em; + height: 2em; + float: -o-bottom; +} +</style> + +<div> + <p></p> + <p></p> + <p></p> + <p></p> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_item-clear-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_item-clear-ref.html new file mode 100644 index 0000000000..1dab421939 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_item-clear-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | cleared item</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +#float { + background: #3366cc; + padding: 1em; + float: left; +} +#flex { + background: #ffcc00; + overflow: hidden; +} +div div { + margin: 2em; + height: 4em; + clear: both; +} +</style> + +<div id="float">filler</div> + +<div id="flex"> + <div>Yellow box should be to the right of the blue box, and + never below</div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_item-clear.html b/testing/web-platform/tests/css/css-flexbox/flexbox_item-clear.html new file mode 100644 index 0000000000..bd7cea697e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_item-clear.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>flexbox | cleared item</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> +<link rel="match" href="flexbox_item-clear-ref.html"> +<style> +#float { + background: #3366cc; + padding: 1em; + float: left; + +} +#flex { + background: #ffcc00; + display: flex; +} +div div { + margin: 2em; + height: 4em; + clear: both; +} +</style> + +<div id="float">filler</div> + +<div id="flex"> + <div>Yellow box should be to the right of the blue box, and + never below</div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_item-float-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_item-float-ref.html new file mode 100644 index 0000000000..ae8cb14036 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_item-float-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>flexbox | floated item</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: black; + margin: 1em; +} +p { + background: #3366cc; + margin: 2em; + width: 2em; + height: 2em; + float: left; +} +div::after { + content: ""; + clear: both; + display: block +} +</style> + +<div> + <p></p> + <p></p> + <p></p> + <p></p> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_item-float.html b/testing/web-platform/tests/css/css-flexbox/flexbox_item-float.html new file mode 100644 index 0000000000..3de8b31d8b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_item-float.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>flexbox | floated item</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" + href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> +<link rel="match" href="flexbox_item-float-ref.html"> +<style> +body>div { + background: black; + margin: 1em; + + display: flex; +} +div div { + background: #3366cc; + margin: 2em; + width: 2em; + height: 2em; + float: right; +} +</style> + +<div> + <div></div> + <div></div> + <div></div> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_item-top-float-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_item-top-float-ref.html new file mode 100644 index 0000000000..88dd493afc --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_item-top-float-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>flexbox | floated item</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: black; + margin: 1em; + width: 400px; +} +p { + background: #3366cc; + margin: 2em; + width: 2em; + height: 2em; + float: left; +} +div::after { + content: ""; + clear: both; + display: block; +} +</style> + +<div> + <p></p> + <p></p> + <p></p> + <p></p> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_item-top-float.html b/testing/web-platform/tests/css/css-flexbox/flexbox_item-top-float.html new file mode 100644 index 0000000000..15569fc37d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_item-top-float.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>flexbox | floated item</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_item-top-float-ref.html"> +<style> +div { + background: black; + margin: 1em; + width: 400px; + + display: flex; +} +p { + background: #3366cc; + margin: 2em; + width: 2em; + height: 2em; + float: -o-top-corner; +} +</style> + +<div> + <p></p> + <p></p> + <p></p> + <p></p> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_item-vertical-align-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_item-vertical-align-ref.html new file mode 100644 index 0000000000..3f3ba32e62 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_item-vertical-align-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>flexbox | vertical-align</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: yellow; + border: 1px solid black; + width: 600px; +} +p { + background: #3366cc; + margin: 2em; + width: 2em; + height: 2em; + float: left; +} +div::after { + content: ""; + clear: both; + display: block; +} +</style> + +<div> + <p></p> + <p></p> + <p></p> + <p></p> + <p></p> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_item-vertical-align.html b/testing/web-platform/tests/css/css-flexbox/flexbox_item-vertical-align.html new file mode 100644 index 0000000000..7043c950a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_item-vertical-align.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>flexbox | vertical-align</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" + href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> +<link rel="match" href="flexbox_item-vertical-align-ref.html"> +<style> +div { + background: yellow; + border: 1px solid black; + width: 600px; + + display: flex; +} +p { + background: #3366cc; + margin: 2em; + width: 2em; + height: 2em; +} +#one {vertical-align: bottom;} +#two {vertical-align: top;} +#three {vertical-align: middle;} +#four {vertical-align: super;} +#five {vertical-align: sub;} +</style> + +<div> + <p id="one"></p> + <p id="two"></p> + <p id="three"></p> + <p id="four"></p> + <p id="five"></p> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-center-overflow.html b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-center-overflow.html new file mode 100644 index 0000000000..5bedb824b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-center-overflow.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<title>flexbox | justify-content: center / overflow</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="author" href="mailto:dgrogan@chromium.org" title="David Grogan"> +<link rel="help" + href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"> +<meta name="assert" content="Items that overflow a singleline justify-content:center flexbox container are positioned correctly."> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +Blue is the flexbox. Orange are items that overflow it. + +<style> +.flexbox { + background: blue; + margin-left: 50px; + height: 150px; + width: 50px; + display: flex; + justify-content: center; + position: relative; +} +span { + background: orange; + margin: 10px; + flex: 1 0 40px; +} +</style> + +<div class=flexbox> + <span data-expected-width=40 data-offset-x=-55></span> + <span data-expected-width=40 data-offset-x=5></span> + <span data-expected-width=40 data-offset-x=65></span> +</div> + +<script> + checkLayout('span'); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-center-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-center-ref.html new file mode 100644 index 0000000000..1ca43d8464 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-center-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>flexbox | justify-content: center</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 30em; + position: relative; +} +span { + background: yellow; + margin: 1em 0; + width: 6em; + max-width: 6em; + height: 6em; + position: absolute; + left: 4em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 12em; +} +span:nth-child(3) { + background: lightblue; + left: 20em; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-center.html b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-center.html new file mode 100644 index 0000000000..e26d692040 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-center.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title>flexbox | justify-content: center</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" + href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"> +<link rel="match" href="flexbox_justifycontent-center-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 30em; + + display: flex; + justify-content: center; +} +span { + background: white; + margin: 1em; + width: 5em; + max-width: 6em; + display: inline-block; + + flex: 1 0 0%; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-end-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-end-ref.html new file mode 100644 index 0000000000..5d782c4659 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-end-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title>flexbox | justify-content: end (ref)</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 40em; + + display: flex; + flex-direction: row-reverse; + justify-content: flex-start; +} +span { + background: white; + margin: 0 1em; + width: 8em; + height: 2em; + display: inline-grid; + place-items: center; + + flex: none; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> + +<p>Test passes if order is 3, 2, 1 and alignment is to the top right</p> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-end-rtl-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-end-rtl-ref.html new file mode 100644 index 0000000000..91b9e7a0fa --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-end-rtl-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<title>flexbox | justify-content: end RTL (ref)</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 40em; + + direction: rtl; + display: flex; + flex-direction: row-reverse; + justify-content: flex-start; +} +span { + background: white; + margin: 0 1em; + width: 8em; + height: 2em; + display: inline-grid; + place-items: center; + + flex: none; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> + +<p>Test passes if order is visually 1, 2, 3 and alignment is to the top left</p> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-end-rtl.html b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-end-rtl.html new file mode 100644 index 0000000000..e30d8a7752 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-end-rtl.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<title>flexbox | justify-content: end RTL</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"> +<link rel="match" href="flexbox_justifycontent-end-rtl-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 40em; + + direction: rtl; + display: flex; + flex-direction: row-reverse; + justify-content: end; +} +span { + background: white; + margin: 0 1em; + width: 8em; + height: 2em; + display: inline-grid; + place-items: center; + + flex: none; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> + +<p>Test passes if order is visually 1, 2, 3 and alignment is to the top left</p>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-end.html b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-end.html new file mode 100644 index 0000000000..f6b7f279b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-end.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<title>flexbox | justify-content: end</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"> +<link rel="match" href="flexbox_justifycontent-end-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 40em; + + display: flex; + flex-direction: row-reverse; + justify-content: end; +} +span { + background: white; + margin: 0 1em; + width: 8em; + height: 2em; + display: inline-grid; + place-items: center; + + flex: none; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> + +<p>Test passes if order is 3, 2, 1 and alignment is to the top right</p> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-flex-end-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-flex-end-ref.html new file mode 100644 index 0000000000..e21b87143c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-flex-end-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>flexbox | justify-content: flex-end</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 30em; + position: relative; +} +span { + background: yellow; + margin: 1em 0; + width: 6em; + max-width: 6em; + height: 6em; + position: absolute; + left: 7em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 15em; +} +span:nth-child(3) { + background: lightblue; + left: 23em; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-flex-end.html b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-flex-end.html new file mode 100644 index 0000000000..ee7f711f13 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-flex-end.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title>flexbox | justify-content: flex-end</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" + href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"> +<link rel="match" href="flexbox_justifycontent-flex-end-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 30em; + + display: flex; + justify-content: flex-end; +} +span { + background: white; + margin: 1em; + width: 5em; + max-width: 6em; + display: inline-block; + + flex: 1 0 0%; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-flex-start-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-flex-start-ref.html new file mode 100644 index 0000000000..fae28bce3d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-flex-start-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>flexbox | justify-content: flex-start</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 30em; + position: relative; +} +span { + background: yellow; + margin: 1em 0; + width: 6em; + max-width: 6em; + height: 6em; + position: absolute; + left: 2em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 12em; +} +span:nth-child(3) { + background: lightblue; + left: 22em; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-flex-start.html b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-flex-start.html new file mode 100644 index 0000000000..66e85cde7e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-flex-start.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title>flexbox | justify-content: flex-start</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" + href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"> +<link rel="match" href="flexbox_justifycontent-flex-start-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 30em; + + display: flex; + justify-content: flex-start; +} +span { + background: white; + margin: 1em auto; + width: 5em; + max-width: 6em; + display: inline-block; + + flex: 1 0 0%; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-left-001-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-left-001-ref.html new file mode 100644 index 0000000000..a3b9d8c113 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-left-001-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>flexbox | justify-content: left in rows | reference</title> +<link rel="author" title="Eric Meyer" href="mailto:emeyer@igalia.com"> +<style> +div { + background: blue; + margin: 1em 0; + height: 4em; + width: 40em; +} +span { + display: inline-block; + background: white; + padding: 0 2em; + width: 4em; + height: 2em; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +#row-reverse span:nth-child(3) {background: yellow;} +#row-reverse span:nth-child(1) {background: lightblue;} +</style> + +<p>Test passes if the numbered boxes are placed in the top left corner of the first flex container and left-to-right order is 1, 2, 3, and placed in the top left corner of the second flexbox container and left-to-right order is 3, 2, 1.</p> + +<div id="row"> + <span>one</span><span>two</span><span>three</span> +</div> + +<div id="row-reverse"> + <span>three</span><span>two</span><span>one</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-left-001.html b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-left-001.html new file mode 100644 index 0000000000..6f56e4db7a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-left-001.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<title>flexbox | justify-content: left in rows</title> +<link rel="author" title="Eric Meyer" href="mailto:emeyer@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#align-justify-content"> +<link rel="match" href="flexbox_justifycontent-left-001-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + display: flex; + height: 4em; + width: 40em; + flex-direction: row; + justify-content: left; +} +div#row-reverse { + flex-direction: row-reverse; +} + +span { + background: white; + padding: 0 2em; + width: 4em; + height: 2em; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +</style> + +<p>Test passes if the numbered boxes are placed in the top left corner of the first flex container and left-to-right order is 1, 2, 3, and placed in the top left corner of the second flexbox container and left-to-right order is 3, 2, 1.</p> + +<div id="row"> + <span>one</span> + <span>two</span> + <span>three</span> +</div> + +<div id="row-reverse"> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-left-002-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-left-002-ref.html new file mode 100644 index 0000000000..0680b1cea7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-left-002-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>flexbox | justify-content: left in columns | reference</title> +<link rel="author" title="Eric Meyer" href="mailto:emeyer@igalia.com"> +<style> +div { + background: blue; + margin: 1em 0; + width: 12em; + height: 10em; +} +span { + display: block; + background: white; + padding: 0 2em; + width: 4em; + height: 2em; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +#column-reverse span:nth-child(3) {background: yellow;} +#column-reverse span:nth-child(1) {background: lightblue;} +</style> + +<p>Test passes if the numbered boxes are placed in the top left corner of the first flex container and top-to-bottom order is 1, 2, 3, and placed in the top left corner of the second flexbox container and top-to-bottom order is 3, 2, 1.</p> + +<div id="column"> + <span>one</span> + <span>two</span> + <span>three</span> +</div> + +<div id="column-reverse"> + <span>three</span> + <span>two</span> + <span>one</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-left-002.html b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-left-002.html new file mode 100644 index 0000000000..e18c43a4ac --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-left-002.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<title>flexbox | justify-content: left in columns</title> +<link rel="author" title="Eric Meyer" href="mailto:emeyer@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#align-justify-content"> +<link rel="match" href="flexbox_justifycontent-left-002-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + display: flex; + width: 12em; + height: 10em; + justify-content: left; +} +div#column { + flex-direction: column; +} +div#column-reverse { + flex-direction: column-reverse; +} + +span { + background: white; + padding: 0 2em; + width: 4em; + height: 2em; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +</style> + +<p>Test passes if the numbered boxes are placed in the top left corner of the first flex container and top-to-bottom order is 1, 2, 3, and placed in the top left corner of the second flexbox container and top-to-bottom order is 3, 2, 1.</p> + +<div id="column"> + <span>one</span> + <span>two</span> + <span>three</span> +</div> + +<div id="column-reverse"> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-right-001-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-right-001-ref.html new file mode 100644 index 0000000000..22ae202832 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-right-001-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>flexbox | justify-content: right in rows | reference</title> +<link rel="author" title="Eric Meyer" href="mailto:emeyer@igalia.com"> +<style> +div { + background: blue; + margin: 1em 0; + height: 4em; + width: 40em; +} +span { + display: inline-block; + background: white; + padding: 0 2em; + width: 4em; + height: 2em; +} +span:nth-child(1) {background: yellow; margin-left: 16em;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +#row-reverse span:nth-child(3) {background: yellow;} +#row-reverse span:nth-child(1) {background: lightblue;} +</style> + +<p>Test passes if the numbered boxes are placed in the top right corner of the first flex container and left-to-right order is 1, 2, 3, and placed in the top right corner of the second flexbox container and left-to-right order is 3, 2, 1.</p> + +<div id="row"> + <span>one</span><span>two</span><span>three</span> +</div> + +<div id="row-reverse"> + <span>three</span><span>two</span><span>one</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-right-001.html b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-right-001.html new file mode 100644 index 0000000000..9f6dbdc461 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-right-001.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<title>flexbox | justify-content: right in rows</title> +<link rel="author" title="Eric Meyer" href="mailto:emeyer@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#align-justify-content"> +<link rel="match" href="flexbox_justifycontent-right-001-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + height: 4em; + width: 40em; + display: flex; + flex-direction: row; + justify-content: right; +} +div + div { + flex-direction: row-reverse; +} +span { + background: white; + padding: 0 2em; + width: 4em; + height: 2em; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +</style> + +<p>Test passes if the numbered boxes are placed in the top right corner of the first flex container and left-to-right order is 1, 2, 3, and placed in the top right corner of the second flexbox container and left-to-right order is 3, 2, 1.</p> + +<div id="row"> + <span>one</span> + <span>two</span> + <span>three</span> +</div> + +<div id="row-reverse"> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-right-002-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-right-002-ref.html new file mode 100644 index 0000000000..63d2f702d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-right-002-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>flexbox | justify-content: right in columns | reference</title> +<link rel="author" title="Eric Meyer" href="mailto:emeyer@igalia.com"> +<style> +div { + background: blue; + margin: 1em 0; + width: 12em; + height: 10em; +} +span { + display: block; + background: white; + padding: 0 2em; + width: 4em; + height: 2em; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +#column-reverse span:nth-child(3) {background: yellow;} +#column-reverse span:nth-child(1) {background: lightblue;} +</style> + +<p>Test passes if the numbered boxes are placed in the top left corner of the first flex container and top-to-bottom order is 1, 2, 3, and placed in the top left corner of the second flexbox container and top-to-bottom order is 3, 2, 1.</p> + +<div id="column"> + <span>one</span> + <span>two</span> + <span>three</span> +</div> + +<div id="column-reverse"> + <span>three</span> + <span>two</span> + <span>one</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-right-002.html b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-right-002.html new file mode 100644 index 0000000000..2aeffe3b41 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-right-002.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<title>flexbox | justify-content: right in columns</title> +<link rel="author" title="Eric Meyer" href="mailto:emeyer@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#align-justify-content"> +<link rel="match" href="flexbox_justifycontent-right-002-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + width: 12em; + height: 10em; + display: flex; + justify-content: right; +} +div#column { + flex-direction: column; +} +div#column-reverse { + flex-direction: column-reverse; +} +span { + background: white; + padding: 0 2em; + width: 4em; + height: 2em; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +</style> + +<p>Test passes if the numbered boxes are placed in the top left corner of the first flex container and top-to-bottom order is 1, 2, 3, and placed in the top left corner of the second flexbox container and top-to-bottom order is 3, 2, 1.</p> + +<div id="column"> + <span>one</span> + <span>two</span> + <span>three</span> +</div> + +<div id="column-reverse"> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-rtl-001.html b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-rtl-001.html new file mode 100644 index 0000000000..91f879c713 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-rtl-001.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a RTL row flex container, with various "justify-content" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + position: relative; + flex-flow: row; + direction: rtl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('.container > div')"> + <div class="big"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div data-offset-x="10" data-offset-y="1"></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div data-offset-x="10" data-offset-y="1"></div></div> + <div class="container" style="justify-content: space-around"><div data-offset-x="6" data-offset-y="1"></div></div> + <div class="container" style="justify-content: space-evenly"><div data-offset-x="6" data-offset-y="1"></div></div> + <div class="container" style="justify-content: stretch"><div data-offset-x="10" data-offset-y="1"></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div data-offset-x="6" data-offset-y="1"></div></div> + <div class="container" style="justify-content: start"><div data-offset-x="10" data-offset-y="1"></div></div> + <div class="container" style="justify-content: end"><div data-offset-x="2" data-offset-y="1"></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div data-offset-x="10" data-offset-y="1"></div></div> + <div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div> + <div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="1"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-rtl-002.html b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-rtl-002.html new file mode 100644 index 0000000000..05b704a594 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-rtl-002.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a RTL column flex container, with various "justify-content" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + position: relative; + flex-flow: column; + direction: rtl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('.container > div')"> + <div class="big"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div data-offset-x="10" data-offset-y="1"></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div data-offset-x="10" data-offset-y="1"></div></div> + <div class="container" style="justify-content: space-around"><div data-offset-x="10" data-offset-y="3"></div></div> + <div class="container" style="justify-content: space-evenly"><div data-offset-x="10" data-offset-y="3"></div></div> + <div class="container" style="justify-content: stretch"><div data-offset-x="10" data-offset-y="1"></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div data-offset-x="10" data-offset-y="3"></div></div> + <div class="container" style="justify-content: start"><div data-offset-x="10" data-offset-y="1"></div></div> + <div class="container" style="justify-content: end"><div data-offset-x="10" data-offset-y="5"></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div data-offset-x="10" data-offset-y="1"></div></div> + <div class="container" style="justify-content: flex-end"><div data-offset-x="10" data-offset-y="5"></div></div> + <div class="container" style="justify-content: left"><div data-offset-x="10" data-offset-y="1"></div></div> + <div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="1"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-spacearound-negative-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-spacearound-negative-ref.html new file mode 100644 index 0000000000..619a333a3b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-spacearound-negative-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title>flexbox | justify-content: space-around / negative</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 17em; + position: relative; +} +span { + background: yellow; + margin: 1em 0; + width: 4em; + height: 6em; + position: absolute; + left: 1em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 7em; +} +span:nth-child(3) { + background: lightblue; + left: 13em; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-spacearound-negative.html b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-spacearound-negative.html new file mode 100644 index 0000000000..85dbba7536 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-spacearound-negative.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>flexbox | justify-content: space-around / negative</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"> +<link rel="match" href="flexbox_justifycontent-spacearound-negative-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 17em; + + display: flex; + justify-content: space-around; +} +span { + background: white; + margin: 1em; + width: 4em; + display: inline-block; + + flex: 0 0 auto; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-spacearound-only-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-spacearound-only-ref.html new file mode 100644 index 0000000000..80b7db6d38 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-spacearound-only-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title>flexbox | justify-content: space-around | single item</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 30em; +} +span { + background: white; + margin: 1em auto; + width: 6em; + max-width: 6em; + height: 6em; + display: block; +} +</style> + +<div> + <span>one</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-spacearound-only.html b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-spacearound-only.html new file mode 100644 index 0000000000..62bfd90f0d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-spacearound-only.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title>flexbox | justify-content: space-around | single item</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" + href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"> +<link rel="match" href="flexbox_justifycontent-spacearound-only-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 30em; + + display: flex; + justify-content: space-around; +} +span { + background: white; + margin: 1em; + width: 5em; + max-width: 6em; + display: inline-block; + + flex: 1 0 0%; +} +</style> + +<div> + <span>one</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-spacearound-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-spacearound-ref.html new file mode 100644 index 0000000000..7506afe084 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-spacearound-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>flexbox | justify-content: space-around</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 30em; + position: relative; +} +span { + background: yellow; + margin: 1em 0; + width: 6em; + max-width: 6em; + height: 6em; + position: absolute; + left: 2em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 12em; +} +span:nth-child(3) { + background: lightblue; + left: 22em; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-spacearound.html b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-spacearound.html new file mode 100644 index 0000000000..2cbcf25444 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-spacearound.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title>flexbox | justify-content: space-around</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" + href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"> +<link rel="match" href="flexbox_justifycontent-spacearound-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 30em; + + display: flex; + justify-content: space-around; +} +span { + background: white; + margin: 1em; + width: 5em; + max-width: 6em; + display: inline-block; + + flex: 1 0 0%; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-spacebetween-negative-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-spacebetween-negative-ref.html new file mode 100644 index 0000000000..59b129f575 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-spacebetween-negative-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>flexbox | justify-content: space-between / negative</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 17em; + position: relative; +} +span { + background: white; + margin: 1em 0; + width: 4em; + height: 6em; + position: absolute; + left: 1em; + display: inline-block; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) { + background: pink; + left: 7em; +} +span:nth-child(3) { + background: lightblue; + left: 13em; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-spacebetween-negative.html b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-spacebetween-negative.html new file mode 100644 index 0000000000..081c7caa3d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-spacebetween-negative.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | justify-content: space-between / negative</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" + href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"> +<link rel="match" href="flexbox_justifycontent-spacebetween-negative-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 17em; + + display: flex; + justify-content: space-between; +} +span { + background: white; + margin: 1em; + width: 4em; + display: inline-block; + + flex: 0 0 auto; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-spacebetween-only-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-spacebetween-only-ref.html new file mode 100644 index 0000000000..05b0b28d51 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-spacebetween-only-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>flexbox | justify-content: space-between | single item</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 30em; + position: relative; +} +span { + background: white; + margin: 1em 0; + width: 6em; + max-width: 6em; + height: 6em; + position: absolute; + left: 1em; + display: inline-block; +} +</style> + +<div> + <span>one</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-spacebetween-only.html b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-spacebetween-only.html new file mode 100644 index 0000000000..bb746a4956 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-spacebetween-only.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title>flexbox | justify-content: space-between | single item</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" + href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"> +<link rel="match" href="flexbox_justifycontent-spacebetween-only-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 30em; + + display: flex; + justify-content: space-between; +} +span { + background: white; + margin: 1em; + width: 5em; + max-width: 6em; + display: inline-block; + + flex: 1 0 0%; +} +</style> + +<div> + <span>one</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-spacebetween-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-spacebetween-ref.html new file mode 100644 index 0000000000..e2ea7ccc69 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-spacebetween-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title>flexbox | justify-content: space-between</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 30em; + position: relative; +} +span { + background: white; + margin: 1em 0; + width: 6em; + max-width: 6em; + height: 6em; + position: absolute; + left: 1em; + display: inline-block; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) { + background: pink; + left: 12em; +} +span:nth-child(3) { + background: lightblue; + left: 23em; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-spacebetween.html b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-spacebetween.html new file mode 100644 index 0000000000..f04d5dac57 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-spacebetween.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title>flexbox | justify-content: space-between</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" + href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"> +<link rel="match" href="flexbox_justifycontent-spacebetween-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 30em; + + display: flex; + justify-content: space-between; +} +span { + background: white; + margin: 1em; + width: 5em; + max-width: 6em; + display: inline-block; + + flex: 1 0 0%; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-start-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-start-ref.html new file mode 100644 index 0000000000..4577417d2e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-start-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title>flexbox | justify-content: start (ref)</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 40em; + + display: flex; + flex-direction: row-reverse; + justify-content: flex-end; +} +span { + background: white; + margin: 0 1em; + width: 8em; + height: 2em; + display: inline-grid; + place-items: center; + + flex: none; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> + +<p>Test passes if order is 3, 2, 1 and alignment is to the top left</p> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-start-rtl-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-start-rtl-ref.html new file mode 100644 index 0000000000..032b097d47 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-start-rtl-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<title>flexbox | justify-content: start RTL (ref)</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 40em; + + direction: rtl; + display: flex; + flex-direction: row-reverse; + justify-content: flex-end; +} +span { + background: white; + margin: 0 1em; + width: 8em; + height: 2em; + display: inline-grid; + place-items: center; + + flex: none; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> + +<p>Test passes if order is visually 1, 2, 3 and alignment is to the top right</p> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-start-rtl.html b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-start-rtl.html new file mode 100644 index 0000000000..c94328797a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-start-rtl.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<title>flexbox | justify-content: start RTL</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"> +<link rel="match" href="flexbox_justifycontent-start-rtl-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 40em; + + direction: rtl; + display: flex; + flex-direction: row-reverse; + justify-content: start; +} +span { + background: white; + margin: 0 1em; + width: 8em; + height: 2em; + display: inline-grid; + place-items: center; + + flex: none; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> + +<p>Test passes if order is visually 1, 2, 3 and alignment is to the top right</p>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-start.html b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-start.html new file mode 100644 index 0000000000..176af6d4f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_justifycontent-start.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<title>flexbox | justify-content: start</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"> +<link rel="match" href="flexbox_justifycontent-start-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 40em; + + display: flex; + flex-direction: row-reverse; + justify-content: start; +} +span { + background: white; + margin: 0 1em; + width: 8em; + height: 2em; + display: inline-grid; + place-items: center; + + flex: none; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> + +<p>Test passes if order is 3, 2, 1 and alignment is to the top left</p> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_margin-auto-overflow-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_margin-auto-overflow-ref.html new file mode 100644 index 0000000000..628cbd740e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_margin-auto-overflow-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<title>flexbox | margin: auto in overflow</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 32em; + position: relative; +} +span { + background: white; + margin: 0; + width: 30em; + height: 6em; + position: absolute; + left: 0; + top: 1em; + display: inline-block; +} +span+span { + background: yellow; + left: 30em; +} +</style> + +<div> + <span>one</span> + <span>two</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_margin-auto-overflow.html b/testing/web-platform/tests/css/css-flexbox/flexbox_margin-auto-overflow.html new file mode 100644 index 0000000000..8d7860f886 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_margin-auto-overflow.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>flexbox | margin: auto in overflow</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#auto-margins"> +<link rel="match" href="flexbox_margin-auto-overflow-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 32em; + position: relative; + + display: flex; +} +span { + background: white; + margin: 1em auto; + width: 30em; + display: inline-block; + flex: 0 0 auto; +} +span+span {background: yellow;} +</style> + +<div> + <span>one</span> + <span>two</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_margin-auto-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_margin-auto-ref.html new file mode 100644 index 0000000000..f72e829c13 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_margin-auto-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title>flexbox | margin: auto</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 32em; + position: relative; +} +span { + background: white; + width: 4em; + margin: 0; + height: 6em; + position: absolute; + left: 6em; + top: 1em; + display: inline-block; +} +span+span { + left: 22em; +} +</style> + +<div> + <span>one</span> + <span>two</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_margin-auto.html b/testing/web-platform/tests/css/css-flexbox/flexbox_margin-auto.html new file mode 100644 index 0000000000..dd86f184cd --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_margin-auto.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>flexbox | margin: auto</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#auto-margins"> +<link rel="match" href="flexbox_margin-auto-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 32em; + position: relative; + + display: flex; +} +span { + background: white; + margin: 1em auto; + width: 4em; + display: inline-block; +} +</style> + +<div> + <span>one</span> + <span>two</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_margin-collapse-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_margin-collapse-ref.html new file mode 100644 index 0000000000..13cf069f09 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_margin-collapse-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>flexbox | flexitem margin collapsing</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +body { + margin: 0; +} +div { + background: blue; + border: 1px solid black; +} +p { + margin: 1em 0; +} +p+p { + margin: 2em 0 1em; +} +</style> + +<div> + <p>filler</p> + <p>filler</p> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_margin-left-ex-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_margin-left-ex-ref.html new file mode 100644 index 0000000000..17ba61cc34 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_margin-left-ex-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>flexbox | margin-left: auto</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 32em; + position: relative; +} +span { + background: white; + margin: 1em; + height: 6em; + display: inline-block; +} +span:first-child { + margin: 0; + position: absolute; + right: 1em; + top: 1em; +} +</style> + +<div> + <span>four</span><span>one</span><span>two</span><span>three</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_margin-left-ex.html b/testing/web-platform/tests/css/css-flexbox/flexbox_margin-left-ex.html new file mode 100644 index 0000000000..ea57ef2801 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_margin-left-ex.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>flexbox | margin-left: auto</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#auto-margins"> +<link rel="match" href="flexbox_margin-left-ex-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 32em; + position: relative; + + display: flex; +} +span { + background: white; + margin: 1em; + display: inline-block; +} +span:last-child { + margin-left: auto; +} +</style> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span></div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_margin-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_margin-ref.html new file mode 100644 index 0000000000..6f2e6d6dd6 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_margin-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>flexbox | margins</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: black; + margin: 1em; + height: 4em; +} +</style> + +<div></div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_margin.html b/testing/web-platform/tests/css/css-flexbox/flexbox_margin.html new file mode 100644 index 0000000000..af40634003 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_margin.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>flexbox | margins</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" + href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> +<link rel="match" href="flexbox_margin-ref.html"> +<style> +div { + background: black; + margin: 1em; + height: 4em; + + display: flex; + justify-content: space-around; +} +</style> + +<div></div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_nested-flex.html b/testing/web-platform/tests/css/css-flexbox/flexbox_nested-flex.html new file mode 100644 index 0000000000..0cd4aeaffe --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_nested-flex.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title>flexbox | nested flexcontainer</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" + href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> +<link rel="match" href="flexbox_generated-flex-ref.html"> +<style> +div { + background: #3366cc; + border: 1px solid black; + display: flex; +} +p { + background: yellow; + margin: 1em; + width: 200px; + height: 2em; + display: flex; +} +</style> + +<div> + <p>xxx</p> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_object-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_object-ref.html new file mode 100644 index 0000000000..8f3dd28e3e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_object-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>flexbox | object fallback as a flex item</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: #ffcc00; + justify-content: space-around; + display: flex; +} +div>* { + background: #3366cc; + margin: 0; +} + +.clip { + overflow: clip; +} +</style> + +<div> + <p class="clip">this is supposed to be a flex item</p> + <p>this is supposed to be a flex item</p> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_object.html b/testing/web-platform/tests/css/css-flexbox/flexbox_object.html new file mode 100644 index 0000000000..701af7b78b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_object.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | object fallback as a flex item</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" + href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"> +<link rel="match" href="flexbox_object-ref.html"> +<style> +div { + background: #ffcc00; + justify-content: space-around; + display: flex; +} +div>* { + background: #3366cc; + margin: 0; +} + +object { + overflow: clip; +} +</style> + +<div> + <object>this is supposed to be a flex item</object> + <p>this is supposed to be a flex item</p> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_order-abspos-space-around-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_order-abspos-space-around-ref.html new file mode 100644 index 0000000000..30e8004480 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_order-abspos-space-around-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>flexbox | order; justify-content: space-around</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + border: 1px solid black; + width: 27em; + height: 8em; + position: relative; +} +span { + background: yellow; + width: 5em; + height: 8em; + position: absolute; + top: 0; + left: 2em; + display: block; +} +span+span {left: 11em;} +span+span+span {left: 20em;} +</style> + +<div> + <span>filler</span> + <span>filler</span> + <span>filler</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_order-abspos-space-around.html b/testing/web-platform/tests/css/css-flexbox/flexbox_order-abspos-space-around.html new file mode 100644 index 0000000000..9c1d5dde2d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_order-abspos-space-around.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>flexbox | order; justify-content: space-around</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#order-property"> +<link rel="match" href="flexbox_order-abspos-space-around-ref.html"> +<style> +div { + background: blue; + border: 1px solid black; + width: 27em; + height: 8em; + position: relative; + + display: flex; + justify-content: space-around; +} +span { + background: yellow; + width: 5em; + flex: 0 0 auto; +} +#test { + position: absolute; + right: 0; + order: -1; +} +</style> + +<div> + <span>filler</span> + <span id="test"></span> + <span>filler</span> + <span>filler</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_order-box-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_order-box-ref.html new file mode 100644 index 0000000000..df40fd31a1 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_order-box-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>flexbox | flex-flow: column-reverse wrap-reverse; order</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em; + border: 1px solid black; +} +div div { + background: yellow; + display: inline-block; +} +span { + background: white; + margin: 1em; + width: 8em; + height: 1.2em; + display: inline-block; +} +</style> + +<div> + <div><span>three</span><span>four</span></div><div><span>one</span><span>two</span></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_order-box.html b/testing/web-platform/tests/css/css-flexbox/flexbox_order-box.html new file mode 100644 index 0000000000..a0d283516a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_order-box.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title>flexbox | flex-flow: column-reverse wrap-reverse; order</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#order-property"> +<link rel="match" href="flexbox_order-box-ref.html"> +<style> +div { + background: blue; + margin: 1em; + border: 1px solid black; + display: flex; +} +div div { + background: yellow; +} +span { + background: white; + margin: 1em; + width: 8em; + height: 1.2em; + display: inline-block; +} +#test { + order: -1; +} +</style> + +<div> + <div> + <span>one</span> + <span>two</span> + </div> + + <div id="test"> + <span>three</span> + <span>four</span> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_order-noninteger-invalid.html b/testing/web-platform/tests/css/css-flexbox/flexbox_order-noninteger-invalid.html new file mode 100644 index 0000000000..2f409b0dac --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_order-noninteger-invalid.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<title>flexbox | flex-flow: column-reverse wrap-reverse; order</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#order-property"> +<link rel="match" href="../reference/blank.html"> +<link rel="flags" content="invalid"> +<style> +div { + width: 200px; + height: 4em; + display: flex; +} +span { + background: red; + order: 1.5; + flex: 1 0 0%; +} +span+span { + background: white; + order: 0; +} +/* irrelevant */ +* {margin: 0;} +h1 { + width: 100px; + height: 4em; + background: white; + position: absolute; + top: 0; + left: 0; +} +</style> + +<div> + <span></span> + <span></span> +</div> + +<h1></h1> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_order-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_order-ref.html new file mode 100644 index 0000000000..c1fba36904 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_order-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<title>flexbox | flex-flow: column-reverse wrap-reverse; order</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + padding: 1em 0 0; + margin: 1em 0; + border: 1px solid black; + width: 20em; + height: 7em; +} +span { + background: white; + margin: 1em; + width: 8em; + height: 1.5em; + float: left; +} +.one { + background: pink; +} +.two { + background: yellow; +} +.three { + background: black; + color: white; +} +.four { + background: fuchsia; + color: white; +} +</style> + +<div> + <span class="one">one</span> + <span class="three">three</span> + <span class="two">two</span> + <span class="four">four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_order.html b/testing/web-platform/tests/css/css-flexbox/flexbox_order.html new file mode 100644 index 0000000000..8ed5eb490b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_order.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<title>flexbox | flex-flow: column-reverse wrap-reverse; order</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#order-property"> +<link rel="match" href="flexbox_order-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + width: 20em; + height: 8em; + + display: flex; + flex-flow: column-reverse wrap-reverse; +} +span { + background: white; + margin: 1em; + width: 8em; + height: 1.5em; + display: inline-block; +} +.one { + background: pink; + order: 4; +} +.two { + background: yellow; + order: 3; +} +.three { + background: black; + color: white; + order: 2; +} +.four { + background: fuchsia; + color: white; + order: 1; +} +</style> + +<div> + <span class="one">one</span> + <span class="two">two</span> + <span class="three">three</span> + <span class="four">four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_quirks_body.html b/testing/web-platform/tests/css/css-flexbox/flexbox_quirks_body.html new file mode 100644 index 0000000000..4be3896fad --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_quirks_body.html @@ -0,0 +1,20 @@ +<!doctype quirks><!-- Intentional quirks mode --> +<title>CSS Test: Flex body in quirks mode</title> +<link rel="author" title="Aleks Totic" href="atotic@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#main-sizing" title="9.3 Main Size Determination"> +<link rel="help" href="https://quirks.spec.whatwg.org/#the-body-element-fills-the-html-element-quirk" title="The body element fills the html element quirk"> +<link rel="match" href="./reference/flexbox_quirks_body-ref.html"> +<style> +html { + margin:3px 6px 9px 12px; + padding: 0px; + background-color: green; +} +body { + display: flex; + margin: 7px 11px 14px 23px; + padding: 0px; + background-color: yellow; +} +</style> +Flex body in quirks mode should fill viewport except for margins. diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_rowspan-overflow-automatic.html b/testing/web-platform/tests/css/css-flexbox/flexbox_rowspan-overflow-automatic.html new file mode 100644 index 0000000000..3a024fc506 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_rowspan-overflow-automatic.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<title>flexbox | flexcontainers in cells with rowspan</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_rowspan-ref.html"> +<style> +table { + width: 600px; + border-spacing: 0; + overflow: hidden; +} +td { + background: blue; + padding: 0; + width: 300px; + overflow: hidden; +} +div { + background: white; + width: 300px; + height: 8em; + + display: flex; +} +p { + color: white; + margin: 1em; + width: 200px; +} +</style> + +<table> +<tr> +<td rowspan="2"> + <div> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> + </div> +</td> +<td> + <div> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> + </div> +</td> +</tr> +<tr> +<td> + <div> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> + </div> +</td> +</tr> +</table> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_rowspan-overflow.html b/testing/web-platform/tests/css/css-flexbox/flexbox_rowspan-overflow.html new file mode 100644 index 0000000000..55165a61c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_rowspan-overflow.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<title>flexbox | flexcontainers in cells with rowspan</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<link rel="match" href="flexbox_rowspan-ref.html"> +<style> +table { + width: 600px; + table-layout: fixed; + border-spacing: 0; +} +td { + background: blue; + padding: 0; + overflow: hidden; +} +div { + background: white; + width: 300px; + height: 8em; + + display: flex; +} +p { + color: white; + margin: 1em; + width: 200px; +} +</style> + +<table> +<tr> +<td rowspan="2"> + <div> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> + </div> +</td> +<td> + <div> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> + </div> +</td> +</tr> +<tr> +<td> + <div> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> + </div> +</td> +</tr> +</table> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_rowspan-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_rowspan-ref.html new file mode 100644 index 0000000000..27598a6874 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_rowspan-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>flexbox | flexcontainers in cells with rowspan</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +table { + width: 600px; + table-layout: fixed; + border-spacing: 0; +} +td { + background: blue; + padding: 0; +} +div { + background: white; + height: 8em; +} +</style> + +<table> +<tr> +<td rowspan="2"> + <div></div> +</td> +<td> + <div></div> +</td> +</tr> +<tr> +<td> + <div></div> +</td> +</tr> +</table> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_rowspan.html b/testing/web-platform/tests/css/css-flexbox/flexbox_rowspan.html new file mode 100644 index 0000000000..67a0dc6b2e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_rowspan.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<title>flexbox | flexcontainers in cells with rowspan</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> +<link rel="match" href="flexbox_rowspan-ref.html"> +<style> +table { + width: 600px; + table-layout: fixed; + border-spacing: 0; +} +td { + background: blue; + padding: 0; + overflow: hidden; +} +div { + background: white; + width: 300px; + height: 8em; + + display: flex; + flex-wrap: wrap; +} +p { + margin: 1em; + width: 200px; +} +</style> + +<table> +<tr> +<td rowspan="2"> + <div> + <p> </p> + <p> </p> + <p> </p> + <p> </p> + <p> </p> + </div> +</td> +<td> + <div> + <p> </p> + <p> </p> + <p> </p> + <p> </p> + <p> </p> + </div> +</td> +</tr> +<tr> +<td> + <div> + <p> </p> + <p> </p> + <p> </p> + <p> </p> + <p> </p> + </div> +</td> +</tr> +</table> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_rtl-direction-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_rtl-direction-ref.html new file mode 100644 index 0000000000..a8bc9ad38e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_rtl-direction-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<title>flexbox | flex-direction: column-reverse | rtl</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; +} +div::after { + content: ""; + clear: both; + display: block; +} +span { + text-align: right; + background: white; + margin: 1em 1em 0; + width: 8em; + float: right; + clear: both; +} +.test { + background: #ffcc00; +} +span~span { + margin: 2em 1em 0; +} +span:last-child { + margin-bottom: 1em; +} +</style> + +<div> + <span>filler</span> + <span>filler</span> + <span>filler</span> + <span class="test">filler</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_rtl-direction.html b/testing/web-platform/tests/css/css-flexbox/flexbox_rtl-direction.html new file mode 100644 index 0000000000..97d0ba21d3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_rtl-direction.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>flexbox | flex-direction: column-reverse | rtl</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-column-reverse"> +<link rel="match" href="flexbox_rtl-direction-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + direction: rtl; + + display: flex; + flex-direction: column-reverse; +} +span { + background: white; + margin: 1em; + width: 8em; + display: inline-block; +} +.test { + background: #ffcc00; +} +</style> + +<div> + <span class="test">filler</span> + <span>filler</span> + <span>filler</span> + <span>filler</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_rtl-flow-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_rtl-flow-ref.html new file mode 100644 index 0000000000..4d2723da7c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_rtl-flow-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>flexbox | flex-flow: column wrap | rtl</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + width: 20em; + height: 8em; +} +span { + text-align: right; + background: white; + margin: 1em; + width: 8em; + float: left; + display: block; +} +</style> + +<div> + <span>three</span> + <span>one</span> + <span>four</span> + <span>two</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_rtl-flow-reverse-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_rtl-flow-reverse-ref.html new file mode 100644 index 0000000000..13e85674bc --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_rtl-flow-reverse-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>flexbox | flex-flow: column wrap-reverse | rtl</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + width: 20em; + height: 8em; +} +span { + text-align: right; + background: white; + margin: 1em; + width: 8em; + display: block; + float: left; +} +</style> + +<div> + <span>one</span> + <span>three</span> + <span>two</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_rtl-flow-reverse.html b/testing/web-platform/tests/css/css-flexbox/flexbox_rtl-flow-reverse.html new file mode 100644 index 0000000000..f4789694be --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_rtl-flow-reverse.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>flexbox | flex-flow: column wrap-reverse | rtl</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-column"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-wrap-reverse"> +<link rel="match" href="flexbox_rtl-flow-reverse-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + width: 20em; + height: 8em; + direction: rtl; + + display: flex; + flex-flow: column wrap-reverse; +} +span { + background: white; + margin: 1em; + width: 8em; + display: inline-block; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_rtl-flow.html b/testing/web-platform/tests/css/css-flexbox/flexbox_rtl-flow.html new file mode 100644 index 0000000000..954a6b7fe5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_rtl-flow.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>flexbox | flex-flow: column wrap | rtl</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-column"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-wrap"> +<link rel="match" href="flexbox_rtl-flow-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + width: 20em; + height: 8em; + direction: rtl; + + display: flex; + flex-flow: column wrap; +} +span { + background: white; + margin: 1em; + width: 8em; + display: inline-block; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_rtl-order-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_rtl-order-ref.html new file mode 100644 index 0000000000..9f670e43ac --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_rtl-order-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<title>flexbox | flex-flow: column-reverse wrap-reverse; order | rtl</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + padding: 1em 0 0; + margin: 1em 0; + border: 1px solid black; + width: 20em; + height: 7em; +} +span { + text-align: right; + background: white; + margin: 1em; + width: 8em; + height: 1.5em; + float: left; +} +.one { + background: pink; +} +.two { + background: yellow; +} +.three { + background: black; + color: white; +} +.four { + background: fuchsia; + color: white; +} +</style> + +<div> + <span class="three">three</span> + <span class="one">one</span> + <span class="four">four</span> + <span class="two">two</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_rtl-order.html b/testing/web-platform/tests/css/css-flexbox/flexbox_rtl-order.html new file mode 100644 index 0000000000..7613240ebc --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_rtl-order.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<title>flexbox | flex-flow: column-reverse wrap-reverse; order | rtl</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-column-reverse"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-wrap-reverse"> +<link rel="match" href="flexbox_rtl-order-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + width: 20em; + height: 8em; + direction: rtl; + + display: flex; + flex-flow: column-reverse wrap-reverse; +} +span { + background: white; + margin: 1em; + width: 8em; + height: 1.5em; + display: inline-block; +} +.one { + background: pink; + order: 4; +} +.two { + background: yellow; + order: 3; +} +.three { + background: black; + color: white; + order: 2; +} +.four { + background: fuchsia; + color: white; + order: 1; +} +</style> + +<div> + <span class="one">one</span> + <span class="two">two</span> + <span class="three">three</span> + <span class="four">four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_stf-abspos.html b/testing/web-platform/tests/css/css-flexbox/flexbox_stf-abspos.html new file mode 100644 index 0000000000..b6f2691cd7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_stf-abspos.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>flexbox | flexcontainer versus stf :: abspos</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"> +<link rel="match" href="../reference/blank.html"> +<style> +#test { + background: red; + position: absolute; +} +div div { + background: white; + width: 300px; + + display: flex; + flex-wrap: wrap; +} +p { + color: white; + margin: 1em; + width: 200px; +} +</style> + +<div id="test"> + <div> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_stf-fixpos.html b/testing/web-platform/tests/css/css-flexbox/flexbox_stf-fixpos.html new file mode 100644 index 0000000000..f211201efd --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_stf-fixpos.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>flexbox | flexcontainer versus stf :: fixed</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"> +<link rel="match" href="../reference/blank.html"> +<style> +#test { + background: red; + position: fixed; +} +div div { + background: white; + width: 300px; + + display: flex; + flex-wrap: wrap; +} +p { + color: white; + margin: 1em; + width: 200px; +} +</style> + +<div id="test"> + <div> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_stf-float.html b/testing/web-platform/tests/css/css-flexbox/flexbox_stf-float.html new file mode 100644 index 0000000000..223b3aba2e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_stf-float.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>flexbox | flexcontainer versus stf :: float</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"> +<link rel="match" href="../reference/blank.html"> +<style> +#test { + background: red; + float: left; +} +div div { + background: white; + width: 300px; + + display: flex; + flex-wrap: wrap; +} +p { + color: white; + margin: 1em; + width: 200px; +} +</style> + +<div id="test"> + <div> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_stf-inline-block.html b/testing/web-platform/tests/css/css-flexbox/flexbox_stf-inline-block.html new file mode 100644 index 0000000000..ea2741165e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_stf-inline-block.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>flexbox | flexcontainer versus stf :: inline-block</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"> +<link rel="match" href="../reference/blank.html"> +<style> +#test { + background: red; + display: inline-block; +} +div div { + background: white; + width: 300px; + + display: flex; + flex-wrap: wrap; +} +p { + color: white; + margin: 1em; + width: 200px; +} +</style> + +<div id="test"> + <div> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_stf-table-caption.html b/testing/web-platform/tests/css/css-flexbox/flexbox_stf-table-caption.html new file mode 100644 index 0000000000..7da1436cd0 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_stf-table-caption.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>flexbox | flexcontainer versus stf :: table-caption</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"> +<link rel="match" href="../reference/blank.html"> +<style> +#test { + background: red; + display: table-caption; +} +div div { + background: white; + width: 300px; + + display: flex; + flex-wrap: wrap; +} +p { + color: white; + margin: 1em; + width: 200px; +} +</style> + +<div id="test"> + <div> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_stf-table-cell.html b/testing/web-platform/tests/css/css-flexbox/flexbox_stf-table-cell.html new file mode 100644 index 0000000000..c1d7b5a54b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_stf-table-cell.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>flexbox | flexcontainer versus stf :: table cell</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"> +<link rel="match" href="../reference/blank.html"> +<style> +#test { + background: red; + display: table-cell; +} +div div { + background: white; + width: 300px; + + display: flex; + flex-wrap: wrap; +} +p { + color: white; + margin: 1em; + width: 200px; +} +</style> + +<div id="test"> + <div> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_stf-table-row-group.html b/testing/web-platform/tests/css/css-flexbox/flexbox_stf-table-row-group.html new file mode 100644 index 0000000000..8cb16e9acb --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_stf-table-row-group.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>flexbox | flexcontainer versus stf :: table row group</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"> +<link rel="match" href="../reference/blank.html"> +<style> +#test { + background: red; + display: table-row-group; +} +div div { + background: white; + width: 300px; + + display: flex; + flex-wrap: wrap; +} +p { + color: white; + margin: 1em; + width: 200px; +} +</style> + +<div id="test"> + <div> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_stf-table-row.html b/testing/web-platform/tests/css/css-flexbox/flexbox_stf-table-row.html new file mode 100644 index 0000000000..f10dddc475 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_stf-table-row.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>flexbox | flexcontainer versus stf :: table row</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"> +<link rel="match" href="../reference/blank.html"> +<style> +#test { + background: red; + display: table-row; +} +div div { + background: white; + width: 300px; + + display: flex; + flex-wrap: wrap; +} +p { + color: white; + margin: 1em; + width: 200px; +} +</style> + +<div id="test"> + <div> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_stf-table-singleline-2.html b/testing/web-platform/tests/css/css-flexbox/flexbox_stf-table-singleline-2.html new file mode 100644 index 0000000000..9600a85dd1 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_stf-table-singleline-2.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title>flexbox | singleline flexcontainer versus stf :: table</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"> +<link rel="match" href="flexbox_stf-table-singleline-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#test { + background: blue; + display: table; +} +div div { + background: red; + width: 0; + + display: flex; +} +p { + font-family: Ahem; + margin: 1em 0; + width: 200px; +} +p:last-child { + margin-right: 200em; +} +</style> + +<div id="test"> + <div> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_stf-table-singleline-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_stf-table-singleline-ref.html new file mode 100644 index 0000000000..af3616a5c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_stf-table-singleline-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>flexbox | singleline flexcontainer versus stf :: table</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div, p { + font-family: Ahem; + display: inline-block; +} +p { + margin: 1em 0; +} +</style> + +<div> + <p>fillerfillerfillerfillerfiller</p> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_stf-table-singleline.html b/testing/web-platform/tests/css/css-flexbox/flexbox_stf-table-singleline.html new file mode 100644 index 0000000000..7f9491a25c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_stf-table-singleline.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>flexbox | singleline flexcontainer versus stf :: table</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"> +<link rel="match" href="flexbox_stf-table-singleline-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#test { + background: red; + display: table; +} +div div { + background: red; + width: 0; + + display: flex; +} +p { + font-family: Ahem; + margin: 1em 0; + width: 200px; +} +</style> + +<div id="test"> + <div> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_stf-table.html b/testing/web-platform/tests/css/css-flexbox/flexbox_stf-table.html new file mode 100644 index 0000000000..79de59307f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_stf-table.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>flexbox | flexcontainer versus stf :: table</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"> +<link rel="match" href="../reference/blank.html"> +<style> +#test { + background: red; + display: table; +} +div div { + background: white; + width: 300px; + + display: flex; + flex-wrap: wrap; +} +p { + color: white; + margin: 1em; + width: 200px; +} +</style> + +<div id="test"> + <div> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_table-fixed-layout.html b/testing/web-platform/tests/css/css-flexbox/flexbox_table-fixed-layout.html new file mode 100644 index 0000000000..52872e81bf --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_table-fixed-layout.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<title>flexbox | flexcontainers in tables</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"> +<link rel="match" href="../reference/blank.html"> +<style> +table { + width: 0; + table-layout: fixed; + border-spacing: 0; +} +td { + background: #3366cc; + padding: 0; + overflow: hidden; +} +div { + background: white; + width: 300px; + + display: flex; + flex-wrap: wrap; +} +p { + xcolor: white; + background: yellow; + margin: 1em; + width: 200px; +} +</style> + +<table> +<tr> +<td> + <div> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> + </div> +</td> +<td> + <div> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> + </div> +</td> +</tr> +</table> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_visibility-collapse-line-wrapping-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_visibility-collapse-line-wrapping-ref.html new file mode 100644 index 0000000000..d85e8cda16 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_visibility-collapse-line-wrapping-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title>flexbox | visibility: collapse and line wrapping</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +body { + margin: 0; + width: 602px; +} +div { + background: #3366cc; + border: 1px solid black; +} +div::after { + content: ""; + clear: both; + display: block; +} +p { + background: #ffcc00; + margin: 1em 0; + width: 300px; + float: left; +} +</style> + +<div> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_visibility-collapse-line-wrapping.html b/testing/web-platform/tests/css/css-flexbox/flexbox_visibility-collapse-line-wrapping.html new file mode 100644 index 0000000000..340335fab2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_visibility-collapse-line-wrapping.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title>flexbox | visibility: collapse and line wrapping</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" + href="http://www.w3.org/TR/css-flexbox-1/#visibility-collapse"> +<link rel="match" href="flexbox_visibility-collapse-line-wrapping-ref.html"> +<style> +body { + margin: 0; + width: 602px; +} +div { + background: #3366cc; + border: 1px solid black; + display: flex; + flex-wrap: wrap; +} +p { + background: #ffcc00; + margin: 1em 0; + width: 300px; +} +.test { + background: red; + visibility: collapse; +} +</style> + +<div> + <p>filler</p> + <p>filler</p> + <p class="test">FAIL</p> + <p class="test">FAIL</p> + <p>filler</p> + <p>filler</p> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_visibility-collapse-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_visibility-collapse-ref.html new file mode 100644 index 0000000000..4300e78d84 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_visibility-collapse-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>flexbox | visibility: collapse</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +body { + margin: 0; +} +div { + background: #3366cc; + border: 1px solid black; +} +div::after { + content: ""; + clear: both; + display: block; +} +p { + background: #ffcc00; + margin: 2em; + float: left; +} +</style> + +<div> + <p>filler</p> + <p>filler</p> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_visibility-collapse.html b/testing/web-platform/tests/css/css-flexbox/flexbox_visibility-collapse.html new file mode 100644 index 0000000000..6b2705fd94 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_visibility-collapse.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>flexbox | visibility: collapse</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" + href="http://www.w3.org/TR/css-flexbox-1/#visibility-collapse"> +<link rel="match" href="flexbox_visibility-collapse-ref.html"> +<style> +body { + margin: 0; +} +div { + background: #3366cc; + border: 1px solid black; + display: flex; +} +p { + background: #ffcc00; + margin: 2em; +} +#test { + background: red; + visibility: collapse; +} +</style> + +<div> + <p>filler</p> + <p id="test">FAIL</p> + <p>filler</p> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_width-change-and-relayout-children.html b/testing/web-platform/tests/css/css-flexbox/flexbox_width-change-and-relayout-children.html new file mode 100644 index 0000000000..06342679b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_width-change-and-relayout-children.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Flexbox: Flex children width when the parent width is changed</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property"> +<link rel="bookmark" href="https://bugs.webkit.org/show_bug.cgi?id=108231"> +<meta name="assert" content="Flexbox should relayout flex children when width changes."> +<link href="support/flexbox.css" rel="stylesheet"> +<style> +.flexitem { + width: 100%; + height: 3em; + min-height: 3em; +} +.child { + background-color: salmon; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script> +function change() { + var container = document.getElementById('container'); + container.offsetWidth; + container.style.width = "200px"; + checkLayout("#container"); +} +</script> +</head> +<body onload="change()"> +<div id=log></div> +<div id="container" style="width: 100px" data-expected-width="200"> + <div class="flexbox column" data-expected-width="200"> + <div class="flexitem" data-expected-width="200"> + <div class="child" data-expected-width="200">This div should be 200px wide.</div> + </div> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_width-overflow.html b/testing/web-platform/tests/css/css-flexbox/flexbox_width-overflow.html new file mode 100644 index 0000000000..b19d92e83b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_width-overflow.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | overflow</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" + href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"> +<link rel="match" href="../reference/blank.html"> +<style> +div { + background: red; + height: 4em; + width: 0; + overflow: hidden; + + display: flex; + justify-content: space-around; +} +p {width: 200px;} +</style> + +<div> + <p>one two three four</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> + <p>filler</p> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_width-wrapping-column.html b/testing/web-platform/tests/css/css-flexbox/flexbox_width-wrapping-column.html new file mode 100644 index 0000000000..2b55559b02 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_width-wrapping-column.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<title>CSS Flexbox: the width calculation of flexbox with flex-direction: column and flex-wrap: wrap</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-wrap-property"> +<link rel="bookmark" href="https://crbug.com/607262"> +<link rel="bookmark" href="https://crbug.com/607856"> +<meta name="assert" content="This test ensures that the width of a flexbox with 'flex-direction: column' and 'flex-wrap: wrap' is updated when the wrapping column dynamically changes."> +<link href="support/flexbox.css" rel="stylesheet"> +<style> +.flexbox { + width: 600px; + height: 160px; + outline: 2px solid black; +} +.item { + height: 20px; + background-color: green; + margin: 5px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script> +function change() { + var flex = document.getElementById("test"); + flex.offsetWidth; + flex.style.height = "60px"; + checkLayout('.flexbox'); +} +</script> +<body onload="change()"> +<div id=log></div> + +<p>The green boxes should all be within the black box</p> + +<div class="flexbox column wrap" id="test"> + <div class="item" data-expected-width="290"></div> + <div class="item" data-expected-width="290"></div> + <div class="item" data-expected-width="290"></div> + <div class="item" data-expected-width="290"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_wrap-long-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_wrap-long-ref.html new file mode 100644 index 0000000000..ec57c68585 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_wrap-long-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>flexbox | flex-wrap: wrap</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + width: 20em; +} +span { + background: white; + margin: 1em; + width: 8em; + display: block; + float: left; +} +span:first-child { + width: 18em; +} +div::after { + content: ""; + clear: both; + display: block; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_wrap-long.html b/testing/web-platform/tests/css/css-flexbox/flexbox_wrap-long.html new file mode 100644 index 0000000000..a097cd66be --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_wrap-long.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>flexbox | flex-wrap: wrap / long items</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" + href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> +<link rel="match" href="flexbox_wrap-long-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + width: 20em; + + display: flex; + flex-wrap: wrap; +} +span { + background: white; + margin: 1em; + width: 8em; + display: inline-block; +} +span:first-child { + width: 24em; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_wrap-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_wrap-ref.html new file mode 100644 index 0000000000..a20768ae47 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_wrap-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>flexbox | flex-wrap: wrap</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + width: 20em; +} +span { + background: white; + margin: 1em; + width: 8em; + display: block; + float: left; +} +div::after { + content: ""; + clear: both; + display: block; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_wrap-reverse-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox_wrap-reverse-ref.html new file mode 100644 index 0000000000..2237272614 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_wrap-reverse-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>flexbox | flex-wrap: wrap</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + width: 20em; +} +span { + background: white; + margin: 1em; + width: 8em; + display: block; + float: left; +} +div::after { + content: ""; + clear: both; + display: block; +} +</style> + +<div> + <span>three</span> + <span>four</span> + <span>one</span> + <span>two</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_wrap-reverse.html b/testing/web-platform/tests/css/css-flexbox/flexbox_wrap-reverse.html new file mode 100644 index 0000000000..fb2c9f1a99 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_wrap-reverse.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>flexbox | flex-wrap: wrap</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" + href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> +<link rel="match" href="flexbox_wrap-reverse-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + width: 20em; + + display: flex; + flex-wrap: wrap-reverse; +} +span { + background: white; + margin: 1em; + width: 8em; + display: inline-block; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_wrap.html b/testing/web-platform/tests/css/css-flexbox/flexbox_wrap.html new file mode 100644 index 0000000000..7927df7c0a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_wrap.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>flexbox | flex-wrap: wrap</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" + href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> +<link rel="match" href="flexbox_wrap-ref.html"> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + width: 20em; + + display: flex; + flex-wrap: wrap; +} +span { + background: white; + margin: 1em; + width: 8em; + display: inline-block; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox_writing_mode_vertical_lays_out_contents_from_top_to_bottom.html b/testing/web-platform/tests/css/css-flexbox/flexbox_writing_mode_vertical_lays_out_contents_from_top_to_bottom.html new file mode 100644 index 0000000000..ab87de963c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox_writing_mode_vertical_lays_out_contents_from_top_to_bottom.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="UTF-8"> + <title>CSS Flexbox Test: Align content flex-start with writing mode vertical-rl.</title> + <link rel="author" title="Ryuichi Nonaka" href="mailto:ryuichi1com@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flow-order"> + <link rel="match" href="reference/flexbox_writing_mode_vertical_lays_out_contents_from_top_to_bottom-ref.html"> + <meta name="assert" content="In vertical Japanese, for example, a row flexbox lays out its contents from top to bottom."> + <style type="text/css"> + .container { + display: flex; + + flex-wrap: wrap; + align-content: flex-start; + + writing-mode: vertical-rl; + + width: 200px; + height: 200px; + } + .item { + width: 100px; + height: 100px; + } + + .item.one + { + background: red; + } + + .item.two + { + background: yellow; + } + + .item.three + { + background: green; + } + + .item.four + { + background: blue; + } + </style> +</head> +<body> + <p>The test passes if you see green and red top, blue and yellow bottom.</p> + <!-- PAGE CONTENT --> + <div id="test"> + <div class="container"> + <div class="item one"></div> + <div class="item two"></div> + <div class="item three"></div> + <div class="item four"></div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexible-box-float.html b/testing/web-platform/tests/css/css-flexbox/flexible-box-float.html new file mode 100644 index 0000000000..11f34fb746 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexible-box-float.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> +<head> + <title>flexible box flex item float effect</title> + <link rel="author" title="zhouli" href="mailto:liz@oupeng.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers" /> + <link rel="match" href="reference/flex-box-float-ref.html"> + <meta name="assert" content="float has no effect on flex items" /> + <style> + #myDiv { + display: flex; + flex-flow: row wrap; + align-content: space-between; + position: relative; + } + #myDiv p{ + width: 300px; + height: 30px; + margin: 0; + } + #first-p{ + background-color: green; + float: right; + } + #second-p{ + background-color: blue; + } + #myDiv #fail-flag{ + width: 600px; + background-color: red; + position: absolute; + left: 0; + top: 0; + z-index: -1; + } + </style> +</head> +<body> + <p>'float' have no effect on a flex item.</p> + <p>The test passes if there is a green square, a blue square and no red square.</p> +<div id="myDiv"> + <p id="first-p"> </p><p id="second-p"> </p><p id="fail-flag"> </p> +</div> +<script> +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-flexbox/flexible-order.html b/testing/web-platform/tests/css/css-flexbox/flexible-order.html new file mode 100644 index 0000000000..6f8d5f691a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexible-order.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<html> +<head><title>CSS Test: Change the value of 'order' property</title> + +<meta name="assert" content="The order of three should be blue-red-black" /> + +<link rel="match" href="reference/flexible-order-ref.html"> +<link rel="author" title="KeynesQu" href="mailto:keynesqu@sohu.com" /> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#order-property" /> + +<style> + +.box { + margin:0 auto; + background:#CCC; + border-radius:5px; + width:600px; + display:flex; + flex-flow:row; +} + +.box div { + text-align:center; +} + +.box .red { + order:-2; + flex:0 1 auto; + width:200px; + background:#F00; +} +.box .blue { + order:-4; + flex:0 1 auto; + width:200px; + background:#00F; +} +.box .black { + order:-1; + flex:0 1 auto; + width:200px; + background:#000; + color:#FFF; +} + + + + +</style> + +</head> + +<body> + + +<!-- FLEX CONTAINER --> +<div class="box"> + <div class="red">A</div> + <div class="blue">B</div> + <div class="black">C</div> +</div> + + + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexitem-no-margin-collapsing.html b/testing/web-platform/tests/css/css-flexbox/flexitem-no-margin-collapsing.html new file mode 100644 index 0000000000..fb50075cbd --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexitem-no-margin-collapsing.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Flexbox: flex items don't collapse margins</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#item-margins"> +<link href="support/flexbox.css" rel="stylesheet"> +<meta name="assert" content="This test ensures that flex items don't collapse margins +with their children."> +<style> +.flexbox { + background-color: lightgrey; +} +.flexbox p { + height: 100px; + width: 100px; + margin: 10px; + background-color: blue; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('.flexbox')"> +<div id=log></div> + +<div class="flexbox" style="position: relative"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="120" data-expected-height="120"> + <p data-offset-x="10" data-offset-y="10" data-expected-width="100" data-expected-height="100"></p> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/flexitem-stretch-image.html b/testing/web-platform/tests/css/css-flexbox/flexitem-stretch-image.html new file mode 100644 index 0000000000..ff3163f6f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexitem-stretch-image.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<title>CSS Flexbox: image stretch</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto"> +<link href="support/flexbox.css" rel="stylesheet"> +<meta name="assert" content="This test ensures that flexbox stretches a given image +to fit the size of flexitem according to flex values."> +<style> +.flexbox { + width: 600px; + display: flex; + background-color: #aaa; + position: relative; + min-height: 10px; +} +.flexbox > * { + margin: 0; + border: 0; + padding: 0; + min-width: 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('.flexbox')"> +<div id=log></div> + +<div class="flexbox"> + <img data-expected-display="block" data-expected-width="345" data-expected-height="345" style="flex: 1 0 auto;" src="support/100x100-blue.png"> + <img data-expected-display="block" data-expected-width="255" data-expected-height="345" style="flex: 1 0 auto;" src="support/10x10-green.png"> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/flexitem-stretch-range.html b/testing/web-platform/tests/css/css-flexbox/flexitem-stretch-range.html new file mode 100644 index 0000000000..43ecc81d52 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexitem-stretch-range.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> +<title>CSS Flexbox: range stretch</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto"> +<link rel="match" href="reference/flexitem-stretch-range-ref.html"> +<link href="support/flexbox.css" rel="stylesheet"> +<meta name="assert" content="This test ensures that the thumb should be centered vertically +when stretching a range input."> +<body> +<p>When stretching a range input, the thumb should be centered vertically.</p> +<div class="flexbox" style="height: 200px;"> + <input type="range" style="flex: 1; margin: 0;"> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/frame-flex-item-crash.html b/testing/web-platform/tests/css/css-flexbox/frame-flex-item-crash.html new file mode 100644 index 0000000000..c677744ff2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/frame-flex-item-crash.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<style> +frame { padding: 100px; } +</style> +<body style="display: flex"> +<script> +document.body.appendChild(document.createElement("frame")); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/frameset-crash.html b/testing/web-platform/tests/css/css-flexbox/frameset-crash.html new file mode 100644 index 0000000000..4052717d54 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/frameset-crash.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="dgrogan@chromium.org"> +<link rel="help" href="https://crbug.com/1173843"> +<meta name="assert" content="No crash when a flexbox lays out a frameset with a border in the main axis direction."> +<style> +frameset { + border-right: 50px solid red; +} +</style> + +<div id='flex' style="display: flex"></div> + +<script> + // I couldn't get the parser to accept a framset inside a div, so this uses + // JS instead. + flex.appendChild(document.createElement('frameset')); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-001-lr-ref.html b/testing/web-platform/tests/css/css-flexbox/gap-001-lr-ref.html new file mode 100644 index 0000000000..25c0c5cb35 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-001-lr-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - horizontal with LR vertical writing mode</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<style> + body { + writing-mode: vertical-lr; + } + + section { + background-color: green; + block-size: 100px; + display: flex; + } + section > div{ + background-color: grey; + flex: 1 1 auto; + } + section > div:not(:first-child) { + margin-inline-start: 20px; + } +</style> +<body> + <p>Test passes if there is <strong>a green line between boxes</strong>.</p> + <section> + <div></div> + <div></div> + <div></div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-001-lr.html b/testing/web-platform/tests/css/css-flexbox/gap-001-lr.html new file mode 100644 index 0000000000..cb4ea49d76 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-001-lr.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - horizontal with vertical LR writing mode</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<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-001-lr-ref.html"> +<meta name="assert" content="The 'gap' property enables putting space exclusively between items"> +<style> + body { + writing-mode: vertical-lr; + } + + section { + background-color: green; + block-size: 100px; + display: flex; + gap: 20px; + } + section > div{ + background-color: grey; + flex: 1 1 auto; + } +</style> +<body> + <p>Test passes if there is <strong>a green line between boxes</strong>.</p> + <section> + <div></div> + <div></div> + <div></div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-001-ltr-ref.html b/testing/web-platform/tests/css/css-flexbox/gap-001-ltr-ref.html new file mode 100644 index 0000000000..ab44b4d23a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-001-ltr-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - horizontal</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<style> + section { + background-color: green; + block-size: 100px; + display: flex; + } + section > div{ + background-color: grey; + flex: 1 1 auto; + } + section > div:not(:first-child) { + margin-inline-start: 20px; + } +</style> +<body> + <p>Test passes if there is <strong>a green vertical line between boxes</strong>.</p> + <section> + <div></div> + <div></div> + <div></div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-001-ltr.html b/testing/web-platform/tests/css/css-flexbox/gap-001-ltr.html new file mode 100644 index 0000000000..ddc5c2f22a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-001-ltr.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - horizontal</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<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-001-ltr-ref.html"> +<meta name="assert" content="The 'gap' property enables putting space exclusively between items"> +<style> + section { + background-color: green; + block-size: 100px; + display: flex; + gap: 20px; + } + section > div{ + background-color: grey; + flex: 1 1 auto; + } +</style> +<body> + <p>Test passes if there is <strong>a green vertical line between boxes</strong>.</p> + <section> + <div></div> + <div></div> + <div></div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-001-rl-ref.html b/testing/web-platform/tests/css/css-flexbox/gap-001-rl-ref.html new file mode 100644 index 0000000000..5aac91817f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-001-rl-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - horizontal with vertical RL writing mode</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<style> + body { + writing-mode: vertical-rl; + } + + section { + background-color: green; + block-size: 100px; + display: flex; + } + section > div{ + background-color: grey; + flex: 1 1 auto; + } + section > div:not(:first-child) { + margin-inline-start: 20px; + } +</style> +<body> + <p>Test passes if there is <strong>a green horizontal line between boxes</strong>.</p> + <section> + <div></div> + <div></div> + <div></div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-001-rl.html b/testing/web-platform/tests/css/css-flexbox/gap-001-rl.html new file mode 100644 index 0000000000..fd8c9d74b1 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-001-rl.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - horizontal with vertical RL writing mode</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<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-001-rl-ref.html"> +<meta name="assert" content="The 'gap' property enables putting space exclusively between items"> +<style> + body { + writing-mode: vertical-rl; + } + + section { + background-color: green; + block-size: 100px; + display: flex; + gap: 20px; + } + section > div{ + background-color: grey; + flex: 1 1 auto; + } +</style> +<body> + <p>Test passes if there is <strong>a green horizontal line between boxes</strong>.</p> + <section> + <div></div> + <div></div> + <div></div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-001-rtl-ref.html b/testing/web-platform/tests/css/css-flexbox/gap-001-rtl-ref.html new file mode 100644 index 0000000000..bb0cf3c0eb --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-001-rtl-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - horizontal with RTL writing mode</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<style> + body { + direction: rtl; + } + + section { + background-color: green; + block-size: 100px; + display: flex; + } + section > div{ + background-color: grey; + flex: 1 1 auto; + } + section > div:not(:first-child) { + margin-inline-start: 20px; + } +</style> +<body> + <p>Test passes if there is <strong>a green vertical line between boxes</strong>.</p> + <section> + <div></div> + <div></div> + <div></div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-001-rtl.html b/testing/web-platform/tests/css/css-flexbox/gap-001-rtl.html new file mode 100644 index 0000000000..53e0979ba0 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-001-rtl.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - horizontal with RTL writing mode</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<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-001-rtl-ref.html"> +<meta name="assert" content="The 'gap' property enables putting space exclusively between items"> +<style> + body { + direction: rtl; + } + + section { + background-color: green; + block-size: 100px; + display: flex; + gap: 20px; + } + section > div{ + background-color: grey; + flex: 1 1 auto; + } +</style> +<body> + <p>Test passes if there is <strong>a green vertical line between boxes</strong>.</p> + <section> + <div></div> + <div></div> + <div></div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-002-lr-ref.html b/testing/web-platform/tests/css/css-flexbox/gap-002-lr-ref.html new file mode 100644 index 0000000000..8d761c6dfb --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-002-lr-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - vertical with LR vertical writing mode</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<style> + body { + writing-mode: vertical-lr; + } + + section { + background-color: green; + block-size: 200px; + display: flex; + flex-direction: column; + } + section > div{ + background-color: gray; + flex: 1 1 auto; + } + section > div:not(:first-child) { + margin-block-start: 20px; + } +</style> +<body> + <p>Test passes if there is <strong>a green vertical line between boxes</strong>.</p> + <section> + <div></div> + <div></div> + <div></div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-002-lr.html b/testing/web-platform/tests/css/css-flexbox/gap-002-lr.html new file mode 100644 index 0000000000..d6bc3b8edb --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-002-lr.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - vertical with vertical LR writing mode</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<link rel="help" title="The 'gap' property" href="https://www.w3.org/TR/css-align-3/#gaps"> +<link rel="match" href="gap-002-lr-ref.html"> +<meta name="assert" content="The 'gap' property enables putting space exclusively between items"> +<style> + body { + writing-mode: vertical-lr; + } + + section { + background-color: green; + block-size: 200px; + display: flex; + flex-direction: column; + gap: 20px; + } + section > div{ + background-color: grey; + flex: 1 1 auto; + } +</style> +<body> + <p>Test passes if there is <strong>a green vertical line between boxes</strong>.</p> + <section> + <div></div> + <div></div> + <div></div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-002-ltr-ref.html b/testing/web-platform/tests/css/css-flexbox/gap-002-ltr-ref.html new file mode 100644 index 0000000000..70a2c7400b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-002-ltr-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - vertical</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<style> + section { + background-color: green; + block-size: 200px; + display: flex; + flex-direction: column; + } + section > div{ + background-color: grey; + flex: 1 1 auto; + } + section > div:not(:first-child) { + margin-block-start: 20px; + } +</style> +<body> + <p>Test passes if there is <strong>a green horizontal line between boxes</strong>.</p> + <section> + <div></div> + <div></div> + <div></div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-002-ltr.html b/testing/web-platform/tests/css/css-flexbox/gap-002-ltr.html new file mode 100644 index 0000000000..ac40f57c6b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-002-ltr.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - vertical</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<link rel="help" title="The 'gap' property" href="https://www.w3.org/TR/css-align-3/#gaps"> +<link rel="match" href="gap-002-ltr-ref.html"> +<meta name="assert" content="The 'gap' property enables putting space exclusively between items"> +<style> + section { + background-color: green; + block-size: 200px; + display: flex; + flex-direction: column; + gap: 20px; + } + section > div{ + background-color: grey; + flex: 1 1 auto; + } +</style> +<body> + <p>Test passes if there is <strong>a green horizontal line between boxes</strong>.</p> + <section> + <div></div> + <div></div> + <div></div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-002-rl-ref.html b/testing/web-platform/tests/css/css-flexbox/gap-002-rl-ref.html new file mode 100644 index 0000000000..9310e9ae48 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-002-rl-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - vertical with RL vertical writing mode</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<style> + body { + writing-mode: vertical-rl; + } + + section { + background-color: green; + block-size: 200px; + display: flex; + flex-direction: column; + } + section > div{ + background-color: grey; + flex: 1 1 auto; + } + section > div:not(:first-child) { + margin-block-start: 20px; + } +</style> +<body> + <p>Test passes if there is <strong>a green vertical line between boxes</strong>.</p> + <section> + <div></div> + <div></div> + <div></div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-002-rl.html b/testing/web-platform/tests/css/css-flexbox/gap-002-rl.html new file mode 100644 index 0000000000..436c4dd5c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-002-rl.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - vertical with vertical RL writing mode</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<link rel="help" title="The 'gap' property" href="https://www.w3.org/TR/css-align-3/#gaps"> +<link rel="match" href="gap-002-rl-ref.html"> +<meta name="assert" content="The 'gap' property enables putting space exclusively between items"> +<style> + body { + writing-mode: vertical-rl; + } + + section { + background-color: green; + block-size: 200px; + display: flex; + flex-direction: column; + gap: 20px; + } + section > div{ + background-color: grey; + flex: 1 1 auto; + } +</style> +<body> + <p>Test passes if there is <strong>a green vertical line between boxes</strong>.</p> + <section> + <div></div> + <div></div> + <div></div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-002-rtl-ref.html b/testing/web-platform/tests/css/css-flexbox/gap-002-rtl-ref.html new file mode 100644 index 0000000000..1bf5d79fea --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-002-rtl-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - RTL vertical</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<style> + body { + direction: rtl; + } + + section { + background-color: green; + block-size: 200px; + display: flex; + flex-direction: column; + } + section > div{ + background-color: grey; + flex: 1 1 auto; + } + section > div:not(:first-child) { + margin-block-start: 20px; + } +</style> +<body> + <p>Test passes if there is <strong>a green horizontal line between boxes</strong>.</p> + <section> + <div></div> + <div></div> + <div></div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-002-rtl.html b/testing/web-platform/tests/css/css-flexbox/gap-002-rtl.html new file mode 100644 index 0000000000..63d3775ec3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-002-rtl.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - RTL vertical</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<link rel="help" title="The 'gap' property" href="https://www.w3.org/TR/css-align-3/#gaps"> +<link rel="match" href="gap-002-rtl-ref.html"> +<meta name="assert" content="The 'gap' property enables putting space exclusively between items"> +<style> + body { + direction: rtl; + } + + section { + background-color: green; + block-size: 200px; + display: flex; + flex-direction: column; + gap: 20px; + } + section > div{ + background-color: grey; + flex: 1 1 auto; + } +</style> +<body> + <p>Test passes if there is <strong>a green horizontal line between boxes</strong>.</p> + <section> + <div></div> + <div></div> + <div></div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-003-lr-ref.html b/testing/web-platform/tests/css/css-flexbox/gap-003-lr-ref.html new file mode 100644 index 0000000000..c218fd5d4b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-003-lr-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - lr rows and columns</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<style> + body { + writing-mode: vertical-lr; + } + section { + background-color: green; + block-size: 100px; + display: flex; + flex-wrap: wrap; + flex-direction: column; + } + section > div{ + background-color: grey; + } + section > div { + width: calc(50% - 10px); + } + section > div:nth-child(1), + section > div:nth-child(3) { + margin-block-end: 20px; + } + section > div:nth-child(3), + section > div:nth-child(4) { + margin-inline-start: 20px; + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div></div> + <div></div> + <div></div> + <div></div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-003-lr.html b/testing/web-platform/tests/css/css-flexbox/gap-003-lr.html new file mode 100644 index 0000000000..b90efe9530 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-003-lr.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - lr rows and columns</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<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-003-lr-ref.html"> +<meta name="assert" content="The 'gap' property enables putting space exclusively between items"> +<style> + body { + writing-mode: vertical-lr; + } + + section { + background-color: green; + block-size: 100px; + display: flex; + gap: 20px; + flex-wrap: wrap; + flex-direction: column; + } + section > div{ + background-color: grey; + width: calc(50% - 10px); + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div></div> + <div></div> + <div></div> + <div></div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-003-ltr-ref.html b/testing/web-platform/tests/css/css-flexbox/gap-003-ltr-ref.html new file mode 100644 index 0000000000..43065a9674 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-003-ltr-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - rows and columns</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<style> + section { + background-color: green; + block-size: 100px; + display: flex; + flex-wrap: wrap; + } + section > div{ + background-color: grey; + width: calc(50% - 10px); + } + section > div:nth-child(1), + section > div:nth-child(3) { + margin-inline-end: 20px; + } + section > div:nth-child(3), + section > div:nth-child(4) { + margin-block-start: 20px; + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div></div> + <div></div> + <div></div> + <div></div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-003-ltr.html b/testing/web-platform/tests/css/css-flexbox/gap-003-ltr.html new file mode 100644 index 0000000000..c5507d2494 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-003-ltr.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - rows and columns</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<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-003-ltr-ref.html"> +<meta name="assert" content="The 'gap' property enables putting space exclusively between items"> +<style> + section { + background-color: green; + block-size: 100px; + display: flex; + gap: 20px; + flex-wrap: wrap; + } + section > div{ + background-color: grey; + width: calc(50% - 10px); + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div></div> + <div></div> + <div></div> + <div></div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-003-rl-ref.html b/testing/web-platform/tests/css/css-flexbox/gap-003-rl-ref.html new file mode 100644 index 0000000000..fcd6fde3f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-003-rl-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - rl rows and columns</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<style> + body { + writing-mode: vertical-rl; + } + section { + background-color: green; + block-size: 100px; + display: flex; + flex-wrap: wrap; + flex-direction: column; + } + section > div{ + background-color: grey; + } + section > div { + width: calc(50% - 10px); + } + section > div:nth-child(1), + section > div:nth-child(3) { + margin-block-end: 20px; + } + section > div:nth-child(3), + section > div:nth-child(4) { + margin-inline-start: 20px; + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div></div> + <div></div> + <div></div> + <div></div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-003-rl.html b/testing/web-platform/tests/css/css-flexbox/gap-003-rl.html new file mode 100644 index 0000000000..234427a5ad --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-003-rl.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - rl rows and columns</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<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-003-rl-ref.html"> +<meta name="assert" content="The 'gap' property enables putting space exclusively between items"> +<style> + body { + writing-mode: vertical-rl; + } + + section { + background-color: green; + block-size: 100px; + display: flex; + gap: 20px; + flex-wrap: wrap; + flex-direction: column; + } + section > div{ + background-color: grey; + width: calc(50% - 10px); + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div></div> + <div></div> + <div></div> + <div></div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-003-rtl-ref.html b/testing/web-platform/tests/css/css-flexbox/gap-003-rtl-ref.html new file mode 100644 index 0000000000..a361e88bed --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-003-rtl-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - RTL rows and columns</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<style> + body { + direction: rtl; + } + section { + background-color: green; + block-size: 100px; + display: flex; + flex-wrap: wrap; + } + section > div{ + background-color: grey; + } + section > div { + width: calc(50% - 10px); + } + section > div:nth-child(1), + section > div:nth-child(3) { + margin-inline-end: 20px; + } + section > div:nth-child(3), + section > div:nth-child(4) { + margin-block-start: 20px; + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div></div> + <div></div> + <div></div> + <div></div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-003-rtl.html b/testing/web-platform/tests/css/css-flexbox/gap-003-rtl.html new file mode 100644 index 0000000000..9064e72ca3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-003-rtl.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - RTL rows and columns</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<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-003-rtl-ref.html"> +<meta name="assert" content="The 'gap' property enables putting space exclusively between items"> +<style> + body { + direction: rtl; + } + + section { + background-color: green; + block-size: 100px; + display: flex; + gap: 20px; + flex-wrap: wrap; + } + section > div{ + background-color: grey; + width: calc(50% - 10px); + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div></div> + <div></div> + <div></div> + <div></div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-004-lr-ref.html b/testing/web-platform/tests/css/css-flexbox/gap-004-lr-ref.html new file mode 100644 index 0000000000..7ec42b4c22 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-004-lr-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - vertical LR intrinsic horizontal</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<style> + body { + writing-mode: vertical-lr; + } + + section { + background-color: green; + block-size: 100px; + display: inline-flex; + } + section > div{ + background-color: grey; + color: white; + } + section > div:not(:last-of-type) { + margin-inline-end: 20px; + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div>Black Panther</div> + <div>Wonder Woman</div> + <div>Storm</div> + <div>Flash</div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-004-lr.html b/testing/web-platform/tests/css/css-flexbox/gap-004-lr.html new file mode 100644 index 0000000000..04bb570741 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-004-lr.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - vertical LR intrinsic horizontal</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<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-004-lr-ref.html"> +<meta name="assert" content="The 'gap' property enables putting space exclusively between items"> +<style> + body { + writing-mode: vertical-lr; + } + + section { + background-color: green; + block-size: 100px; + display: inline-flex; + gap: 20px; + } + section > div{ + background-color: grey; + color: white; + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div>Black Panther</div> + <div>Wonder Woman</div> + <div>Storm</div> + <div>Flash</div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-004-ltr-ref.html b/testing/web-platform/tests/css/css-flexbox/gap-004-ltr-ref.html new file mode 100644 index 0000000000..b591196025 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-004-ltr-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - intrinsic horizontal</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<style> + section { + background-color: green; + block-size: 100px; + display: inline-flex; + } + section > div{ + background-color: grey; + color: white; + } + section > div:not(:last-of-type) { + margin-inline-end: 20px; + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div>Black Panther</div> + <div>Wonder Woman</div> + <div>Storm</div> + <div>Flash</div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-004-ltr.html b/testing/web-platform/tests/css/css-flexbox/gap-004-ltr.html new file mode 100644 index 0000000000..741ec40b84 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-004-ltr.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - intrinsic horizontal</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<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-004-ltr-ref.html"> +<meta name="assert" content="The 'gap' property enables putting space exclusively between items"> +<style> + section { + background-color: green; + block-size: 100px; + display: inline-flex; + gap: 20px; + } + section > div{ + background-color: grey; + color: white; + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div>Black Panther</div> + <div>Wonder Woman</div> + <div>Storm</div> + <div>Flash</div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-004-rl-ref.html b/testing/web-platform/tests/css/css-flexbox/gap-004-rl-ref.html new file mode 100644 index 0000000000..64d21f89c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-004-rl-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - vertical RL intrinsic horizontal</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<style> + body { + writing-mode: vertical-rl; + } + + section { + background-color: green; + block-size: 100px; + display: inline-flex; + } + section > div{ + background-color: grey; + color: white; + } + section > div:not(:last-of-type) { + margin-inline-end: 20px; + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div>Black Panther</div> + <div>Wonder Woman</div> + <div>Storm</div> + <div>Flash</div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-004-rl.html b/testing/web-platform/tests/css/css-flexbox/gap-004-rl.html new file mode 100644 index 0000000000..6054a5bfe5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-004-rl.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - vertical RL intrinsic horizontal</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<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-004-rl-ref.html"> +<meta name="assert" content="The 'gap' property enables putting space exclusively between items"> +<style> + body { + writing-mode: vertical-rl; + } + + section { + background-color: green; + block-size: 100px; + display: inline-flex; + gap: 20px; + } + section > div{ + background-color: grey; + color: white; + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div>Black Panther</div> + <div>Wonder Woman</div> + <div>Storm</div> + <div>Flash</div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-004-rtl-ref.html b/testing/web-platform/tests/css/css-flexbox/gap-004-rtl-ref.html new file mode 100644 index 0000000000..eadf6c31b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-004-rtl-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - RTL intrinsic horizontal</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<style> + body { + direction: rtl; + } + section { + background-color: green; + block-size: 100px; + display: inline-flex; + } + section > div{ + background-color: grey; + color: white; + } + section > div:not(:last-of-type) { + margin-inline-end: 20px; + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div>Black Panther</div> + <div>Wonder Woman</div> + <div>Storm</div> + <div>Flash</div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-004-rtl.html b/testing/web-platform/tests/css/css-flexbox/gap-004-rtl.html new file mode 100644 index 0000000000..181fa58efc --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-004-rtl.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - RTL intrinsic horizontal</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<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-004-rtl-ref.html"> +<meta name="assert" content="The 'gap' property enables putting space exclusively between items"> +<style> + body { + direction: rtl; + } + section { + background-color: green; + block-size: 100px; + display: inline-flex; + gap: 20px; + } + section > div{ + background-color: grey; + color: white; + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div>Black Panther</div> + <div>Wonder Woman</div> + <div>Storm</div> + <div>Flash</div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-005-lr-ref.html b/testing/web-platform/tests/css/css-flexbox/gap-005-lr-ref.html new file mode 100644 index 0000000000..01bced268d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-005-lr-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - vertical LR intrinsic vertical</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<style> + body { + writing-mode: vertical-lr; + } + + section { + background-color: green; + display: inline-flex; + flex-direction: column; + } + section > div{ + background-color: grey; + color: white; + } + section > div:not(:last-of-type) { + margin-block-end: 20px; + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div>Black Panther</div> + <div>Wonder Woman</div> + <div>Storm</div> + <div>Flash</div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-005-lr.html b/testing/web-platform/tests/css/css-flexbox/gap-005-lr.html new file mode 100644 index 0000000000..d765094a26 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-005-lr.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - vertical LR intrinsic vertical</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<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-005-lr-ref.html"> +<meta name="assert" content="The 'gap' property enables putting space exclusively between items"> +<style> + body { + writing-mode: vertical-lr; + } + + section { + background-color: green; + display: inline-flex; + flex-direction: column; + gap: 20px; + } + section > div{ + background-color: grey; + color: white; + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div>Black Panther</div> + <div>Wonder Woman</div> + <div>Storm</div> + <div>Flash</div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-005-ltr-ref.html b/testing/web-platform/tests/css/css-flexbox/gap-005-ltr-ref.html new file mode 100644 index 0000000000..8230c5ab36 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-005-ltr-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - intrinsic vertical</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<style> + section { + background-color: green; + display: inline-flex; + flex-direction: column; + } + section > div{ + background-color: grey; + color: white; + } + section > div:not(:last-of-type) { + margin-block-end: 20px; + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div>Black Panther</div> + <div>Wonder Woman</div> + <div>Storm</div> + <div>Flash</div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-005-ltr.html b/testing/web-platform/tests/css/css-flexbox/gap-005-ltr.html new file mode 100644 index 0000000000..ead370c4c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-005-ltr.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - intrinsic vertical</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<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-005-ltr-ref.html"> +<meta name="assert" content="The 'gap' property enables putting space exclusively between items"> +<style> + section { + background-color: green; + display: inline-flex; + flex-direction: column; + gap: 20px; + } + section > div{ + background-color: grey; + color: white; + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div>Black Panther</div> + <div>Wonder Woman</div> + <div>Storm</div> + <div>Flash</div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-005-rl-ref.html b/testing/web-platform/tests/css/css-flexbox/gap-005-rl-ref.html new file mode 100644 index 0000000000..af97274da6 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-005-rl-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - vertical rl intrinsic vertical</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<style> + body { + writing-mode: vertical-rl; + } + + section { + background-color: green; + display: inline-flex; + flex-direction: column; + } + section > div{ + background-color: grey; + color: white; + } + section > div:not(:last-of-type) { + margin-block-end: 20px; + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div>Black Panther</div> + <div>Wonder Woman</div> + <div>Storm</div> + <div>Flash</div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-005-rl.html b/testing/web-platform/tests/css/css-flexbox/gap-005-rl.html new file mode 100644 index 0000000000..225c04c970 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-005-rl.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - vertical rl intrinsic vertical</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<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-005-rl-ref.html"> +<meta name="assert" content="The 'gap' property enables putting space exclusively between items"> +<style> + body { + writing-mode: vertical-rl; + } + + section { + background-color: green; + display: inline-flex; + flex-direction: column; + gap: 20px; + } + section > div{ + background-color: grey; + color: white; + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div>Black Panther</div> + <div>Wonder Woman</div> + <div>Storm</div> + <div>Flash</div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-005-rtl-ref.html b/testing/web-platform/tests/css/css-flexbox/gap-005-rtl-ref.html new file mode 100644 index 0000000000..32437637f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-005-rtl-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - RTL intrinsic vertical</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<style> + body { + direction: rtl; + } + + section { + background-color: green; + display: inline-flex; + flex-direction: column; + } + section > div{ + background-color: grey; + color: white; + } + section > div:not(:last-of-type) { + margin-block-end: 20px; + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div>Black Panther</div> + <div>Wonder Woman</div> + <div>Storm</div> + <div>Flash</div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-005-rtl.html b/testing/web-platform/tests/css/css-flexbox/gap-005-rtl.html new file mode 100644 index 0000000000..99d715a282 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-005-rtl.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - intrinsic vertical</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<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-005-rtl-ref.html"> +<meta name="assert" content="The 'gap' property enables putting space exclusively between items"> +<style> + body { + direction: rtl; + } + + section { + background-color: green; + display: inline-flex; + flex-direction: column; + gap: 20px; + } + section > div{ + background-color: grey; + color: white; + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div>Black Panther</div> + <div>Wonder Woman</div> + <div>Storm</div> + <div>Flash</div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-006-lr-ref.html b/testing/web-platform/tests/css/css-flexbox/gap-006-lr-ref.html new file mode 100644 index 0000000000..0de73376ee --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-006-lr-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - wrap lr horizontal</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<style> + body { + writing-mode: vertical-lr; + } + + section { + background-color: green; + block-size: 100px; + inline-size: 200px; + display: inline-flex; + flex-wrap: wrap; + } + section > div{ + background-color: grey; + color: white; + block-size: 20px; + } + #bp { + inline-size: 120px; + } + #ww { + inline-size: 130px; + } + #s, #f { + inline-size: 40px; + } + #bp, #ww { + margin-inline-end: 20px; + margin-block-end: 20px; + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div id=bp>Black Panther</div> + <div id=ww>Wonder Woman</div> + <div id=s>Storm</div> + <div id=f>Flash</div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-006-lr.html b/testing/web-platform/tests/css/css-flexbox/gap-006-lr.html new file mode 100644 index 0000000000..7c5ed6e69e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-006-lr.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - wrap lr horizontal</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<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-006-lr-ref.html"> +<meta name="assert" content="The 'gap' property enables putting space exclusively between items"> +<style> + body { + writing-mode: vertical-lr; + } + + section { + background-color: green; + block-size: 100px; + inline-size: 200px; + display: inline-flex; + flex-wrap: wrap; + gap: 20px; + } + section > div{ + background-color: grey; + color: white; + block-size: 20px; + } + #bp { + inline-size: 120px; + } + #ww { + inline-size: 130px; + } + #s, #f { + inline-size: 40px; + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div id=bp>Black Panther</div> + <div id=ww>Wonder Woman</div> + <div id=s>Storm</div> + <div id=f>Flash</div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-006-ltr-ref.html b/testing/web-platform/tests/css/css-flexbox/gap-006-ltr-ref.html new file mode 100644 index 0000000000..65d9eaf32f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-006-ltr-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - wrap horizontal</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<style> + section { + background-color: green; + block-size: 100px; + inline-size: 200px; + display: inline-flex; + flex-wrap: wrap; + } + section > div{ + background-color: grey; + color: white; + block-size: 20px; + } + #bp { + inline-size: 120px; + } + #ww { + inline-size: 130px; + } + #s, #f { + inline-size: 40px; + } + #bp, #ww { + margin-inline-end: 20px; + margin-block-end: 20px; + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div id=bp>Black Panther</div> + <div id=ww>Wonder Woman</div> + <div id=s>Storm</div> + <div id=f>Flash</div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-006-ltr.html b/testing/web-platform/tests/css/css-flexbox/gap-006-ltr.html new file mode 100644 index 0000000000..d2fd6321db --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-006-ltr.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - wrap horizontal</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<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-006-ltr-ref.html"> +<meta name="assert" content="The 'gap' property enables putting space exclusively between items"> +<style> + section { + background-color: green; + block-size: 100px; + inline-size: 200px; + display: inline-flex; + flex-wrap: wrap; + gap: 20px; + } + section > div{ + background-color: grey; + color: white; + block-size: 20px; + } + #bp { + inline-size: 120px; + } + #ww { + inline-size: 130px; + } + #s, #f { + inline-size: 40px; + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div id=bp>Black Panther</div> + <div id=ww>Wonder Woman</div> + <div id=s>Storm</div> + <div id=f>Flash</div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-006-rl-ref.html b/testing/web-platform/tests/css/css-flexbox/gap-006-rl-ref.html new file mode 100644 index 0000000000..9b64f122f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-006-rl-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - wrap rl horizontal</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<style> + body { + writing-mode: vertical-rl; + } + + section { + background-color: green; + block-size: 100px; + inline-size: 200px; + display: inline-flex; + flex-wrap: wrap; + } + section > div{ + background-color: grey; + color: white; + block-size: 20px; + } + #bp { + inline-size: 120px; + } + #ww { + inline-size: 130px; + } + #s, #f { + inline-size: 40px; + } + #bp, #ww { + margin-inline-end: 20px; + margin-block-end: 20px; + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div id=bp>Black Panther</div> + <div id=ww>Wonder Woman</div> + <div id=s>Storm</div> + <div id=f>Flash</div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-006-rl.html b/testing/web-platform/tests/css/css-flexbox/gap-006-rl.html new file mode 100644 index 0000000000..01fef78c9c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-006-rl.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - wrap rl horizontal</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<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-006-rl-ref.html"> +<meta name="assert" content="The 'gap' property enables putting space exclusively between items"> +<style> + body { + writing-mode: vertical-rl; + } + + section { + background-color: green; + block-size: 100px; + inline-size: 200px; + display: inline-flex; + flex-wrap: wrap; + gap: 20px; + } + section > div{ + background-color: grey; + color: white; + block-size: 20px; + } + #bp { + inline-size: 120px; + } + #ww { + inline-size: 130px; + } + #s, #f { + inline-size: 40px; + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div id=bp>Black Panther</div> + <div id=ww>Wonder Woman</div> + <div id=s>Storm</div> + <div id=f>Flash</div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-006-rtl-ref.html b/testing/web-platform/tests/css/css-flexbox/gap-006-rtl-ref.html new file mode 100644 index 0000000000..3f64a75269 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-006-rtl-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - wrap rtl horizontal</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<style> + body { + direction: rtl; + } + + section { + background-color: green; + block-size: 100px; + inline-size: 200px; + display: inline-flex; + flex-wrap: wrap; + } + section > div{ + background-color: grey; + color: white; + block-size: 20px; + } + #bp { + inline-size: 120px; + } + #ww { + inline-size: 130px; + } + #s, #f { + inline-size: 40px; + } + #bp, #ww { + margin-inline-end: 20px; + margin-block-end: 20px; + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div id=bp>Black Panther</div> + <div id=ww>Wonder Woman</div> + <div id=s>Storm</div> + <div id=f>Flash</div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-006-rtl.html b/testing/web-platform/tests/css/css-flexbox/gap-006-rtl.html new file mode 100644 index 0000000000..0bfa078599 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-006-rtl.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - wrap rtl horizontal</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<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-006-rtl-ref.html"> +<meta name="assert" content="The 'gap' property enables putting space exclusively between items"> +<style> + body { + direction: rtl; + } + + section { + background-color: green; + block-size: 100px; + inline-size: 200px; + display: inline-flex; + flex-wrap: wrap; + gap: 20px; + } + section > div{ + background-color: grey; + color: white; + block-size: 20px; + } + #bp { + inline-size: 120px; + } + #ww { + inline-size: 130px; + } + #s, #f { + inline-size: 40px; + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div id=bp>Black Panther</div> + <div id=ww>Wonder Woman</div> + <div id=s>Storm</div> + <div id=f>Flash</div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-007-lr-ref.html b/testing/web-platform/tests/css/css-flexbox/gap-007-lr-ref.html new file mode 100644 index 0000000000..a3b461fa12 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-007-lr-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - lr wrap vertical</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<style> + body { + writing-mode: vertical-lr; + } + + section { + background-color: green; + block-size: 100px; + inline-size: 200px; + display: inline-flex; + flex-direction: column; + flex-wrap: wrap; + } + section > div{ + background-color: grey; + color: white; + } + section > div:nth-child(2) { + margin-block: 20px; + } + section > div:not(:last-of-type) { + margin-inline-end: 20px; + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div>Black Panther</div> + <div>Wonder Woman</div> + <div>Storm</div> + <div>Flash</div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-007-lr.html b/testing/web-platform/tests/css/css-flexbox/gap-007-lr.html new file mode 100644 index 0000000000..9d0a371781 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-007-lr.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - lr wrap vertical</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<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-007-lr-ref.html"> +<meta name="assert" content="The 'gap' property enables putting space exclusively between items"> +<style> + body { + writing-mode: vertical-lr; + } + + section { + background-color: green; + block-size: 100px; + inline-size: 200px; + display: inline-flex; + flex-direction: column; + flex-wrap: wrap; + gap: 20px; + } + section > div{ + background-color: grey; + color: white; + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div>Black Panther</div> + <div>Wonder Woman</div> + <div>Storm</div> + <div>Flash</div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-007-ltr-ref.html b/testing/web-platform/tests/css/css-flexbox/gap-007-ltr-ref.html new file mode 100644 index 0000000000..13741eb9bd --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-007-ltr-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - wrap vertical</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<style> + section { + background-color: green; + block-size: 100px; + inline-size: 200px; + display: inline-flex; + flex-direction: column; + flex-wrap: wrap; + } + section > div{ + background-color: grey; + color: white; + } + section > div:nth-child(2) { + margin-block: 20px; + } + section > div:not(:last-of-type) { + margin-inline-end: 20px; + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div>Black Panther</div> + <div>Wonder Woman</div> + <div>Storm</div> + <div>Flash</div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-007-ltr.html b/testing/web-platform/tests/css/css-flexbox/gap-007-ltr.html new file mode 100644 index 0000000000..6b24fc44ee --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-007-ltr.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - wrap vertical</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<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-007-ltr-ref.html"> +<meta name="assert" content="The 'gap' property enables putting space exclusively between items"> +<style> + section { + background-color: green; + block-size: 100px; + inline-size: 200px; + display: inline-flex; + flex-direction: column; + flex-wrap: wrap; + gap: 20px; + } + section > div{ + background-color: grey; + color: white; + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div>Black Panther</div> + <div>Wonder Woman</div> + <div>Storm</div> + <div>Flash</div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-007-rl-ref.html b/testing/web-platform/tests/css/css-flexbox/gap-007-rl-ref.html new file mode 100644 index 0000000000..1ca3b5cea9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-007-rl-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - rl wrap vertical</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<style> + body { + writing-mode: vertical-rl; + } + + section { + background-color: green; + block-size: 100px; + inline-size: 200px; + display: inline-flex; + flex-direction: column; + flex-wrap: wrap; + } + section > div{ + background-color: grey; + color: white; + } + section > div:nth-child(2) { + margin-block: 20px; + } + section > div:not(:last-of-type) { + margin-inline-end: 20px; + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div>Black Panther</div> + <div>Wonder Woman</div> + <div>Storm</div> + <div>Flash</div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-007-rl.html b/testing/web-platform/tests/css/css-flexbox/gap-007-rl.html new file mode 100644 index 0000000000..1461416abe --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-007-rl.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - rl wrap vertical</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<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-007-rl-ref.html"> +<meta name="assert" content="The 'gap' property enables putting space exclusively between items"> +<style> + body { + writing-mode: vertical-rl; + } + + section { + background-color: green; + block-size: 100px; + inline-size: 200px; + display: inline-flex; + flex-direction: column; + flex-wrap: wrap; + gap: 20px; + } + section > div{ + background-color: grey; + color: white; + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div>Black Panther</div> + <div>Wonder Woman</div> + <div>Storm</div> + <div>Flash</div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-007-rtl-ref.html b/testing/web-platform/tests/css/css-flexbox/gap-007-rtl-ref.html new file mode 100644 index 0000000000..9e329cc0a4 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-007-rtl-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - rtl wrap vertical</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<style> + body { + direction: rtl; + } + + section { + background-color: green; + block-size: 100px; + inline-size: 200px; + display: inline-flex; + flex-direction: column; + flex-wrap: wrap; + } + section > div{ + background-color: grey; + color: white; + } + section > div:nth-child(2) { + margin-block: 20px; + } + section > div:not(:last-of-type) { + margin-inline-end: 20px; + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div>Black Panther</div> + <div>Wonder Woman</div> + <div>Storm</div> + <div>Flash</div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-007-rtl.html b/testing/web-platform/tests/css/css-flexbox/gap-007-rtl.html new file mode 100644 index 0000000000..cff3440a76 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-007-rtl.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - rtl wrap vertical</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<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-007-rtl-ref.html"> +<meta name="assert" content="The 'gap' property enables putting space exclusively between items"> +<style> + body { + direction: rtl; + } + + section { + background-color: green; + block-size: 100px; + inline-size: 200px; + display: inline-flex; + flex-direction: column; + flex-wrap: wrap; + gap: 20px; + } + section > div{ + background-color: grey; + color: white; + } +</style> +<body> + <p>Test passes if there are <strong> green lines between boxes</strong>.</p> + <section> + <div>Black Panther</div> + <div>Wonder Woman</div> + <div>Storm</div> + <div>Flash</div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-008-ltr-ref.html b/testing/web-platform/tests/css/css-flexbox/gap-008-ltr-ref.html new file mode 100644 index 0000000000..40031a4f3a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-008-ltr-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - row and column gap</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<style> + section { + background-color: green; + block-size: 100px; + display: flex; + flex-wrap: wrap; + } + section > div{ + background-color: grey; + width: calc(50% - 10px); + } + section > div:nth-child(1), + section > div:nth-child(3) { + margin-inline-end: 20px; + } + section > div:nth-child(3), + section > div:nth-child(4) { + margin-block-start: 40px; + } +</style> +<body> + <p>Test passes if there are <strong>40px horizontal green lines and 20px vertical green lines between boxes</strong>.</p> + <section> + <div></div> + <div></div> + <div></div> + <div></div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-008-ltr.html b/testing/web-platform/tests/css/css-flexbox/gap-008-ltr.html new file mode 100644 index 0000000000..88a83cb426 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-008-ltr.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - row and column gap</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<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"> +<meta name="assert" content="The 'gap' property enables putting space exclusively between items"> +<style> + section { + background-color: green; + block-size: 100px; + display: flex; + gap: 40px 20px; + flex-wrap: wrap; + } + section > div{ + background-color: grey; + width: calc(50% - 10px); + } +</style> +<body> + <p>Test passes if there are <strong> 40px horizontal green lines and 20px vertical green lines between boxes</strong>.</p> + <section> + <div></div> + <div></div> + <div></div> + <div></div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-009-ltr-ref.html b/testing/web-platform/tests/css/css-flexbox/gap-009-ltr-ref.html new file mode 100644 index 0000000000..10e4398554 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-009-ltr-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - mixed units</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<style> + section { + background-color: green; + block-size: 100px; + display: flex; + flex-wrap: wrap; + } + section > div{ + background-color: grey; + } + section > div { + width: calc(50% - .5rem); + } + section > div:nth-child(1), + section > div:nth-child(3) { + margin-inline-end: 1rem; + } + section > div:nth-child(3), + section > div:nth-child(4) { + margin-block-start: 50px; /* half block size */ + } +</style> +<body> + <p>Test passes if there are <strong> 50% horizontal green line and 1rem vertical green line between boxes</strong>.</p> + <section> + <div></div> + <div></div> + <div></div> + <div></div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-009-ltr.html b/testing/web-platform/tests/css/css-flexbox/gap-009-ltr.html new file mode 100644 index 0000000000..86355f0a45 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-009-ltr.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - mixed units</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<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-009-ltr-ref.html"> +<meta name="assert" content="The 'gap' property enables putting space exclusively between items"> +<style> + section { + background-color: green; + block-size: 100px; + display: flex; + gap: 50% 1rem; + flex-wrap: wrap; + } + section > div{ + background-color: grey; + width: calc(50% - .5rem); + } +</style> +<body> + <p>Test passes if there are <strong> 50% horizontal green line and 1rem vertical green line between boxes</strong>.</p> + <section> + <div></div> + <div></div> + <div></div> + <div></div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-010-ltr-ref.html b/testing/web-platform/tests/css/css-flexbox/gap-010-ltr-ref.html new file mode 100644 index 0000000000..8c390de08d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-010-ltr-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - calc gap</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<style> + section { + background-color: green; + block-size: 100px; + display: flex; + flex-wrap: wrap; + } + section > div { + background-color: grey; + flex: 1 1 auto; + } + section > div:not(:first-child) { + margin-inline-start: calc(10% - 1rem / 2); + } +</style> +<body> + <p>Test passes if there are <strong>vertical green lines between boxes</strong>.</p> + <section> + <div></div> + <div></div> + <div></div> + <div></div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-010-ltr.html b/testing/web-platform/tests/css/css-flexbox/gap-010-ltr.html new file mode 100644 index 0000000000..6b3465838d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-010-ltr.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: gap - calc gap</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<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-010-ltr-ref.html"> +<meta name="assert" content="The 'gap' property enables putting space exclusively between items"> +<style> + section { + background-color: green; + block-size: 100px; + display: flex; + gap: calc(10% - 1rem / 2); + flex-wrap: wrap; + } + section > div{ + background-color: grey; + flex: 1 1 auto; + } +</style> +<body> + <p>Test passes if there are <strong>vertical green lines between boxes</strong>.</p> + <section> + <div></div> + <div></div> + <div></div> + <div></div> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-011.html b/testing/web-platform/tests/css/css-flexbox/gap-011.html new file mode 100644 index 0000000000..d1d579e30b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-011.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<title>Flex gaps</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-line-break"> +<link rel="help" href="https://drafts.csswg.org/css-align/#gaps"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Gaps are respected when gathering items into lines for row flexboxes." /> + +<style> +.item { + width: 100px; + height: 50px; + flex: 0 0 auto; + background: green; +} +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id=reference-overlapped-red></div> + +<div style="display: flex; width: 200px; column-gap: 50px; flex-flow: row wrap"> + <div class=item></div> + <div class=item></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-012.html b/testing/web-platform/tests/css/css-flexbox/gap-012.html new file mode 100644 index 0000000000..19b39b9a78 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-012.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<title>Flex gaps</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-line-break"> +<link rel="help" href="https://drafts.csswg.org/css-align/#gaps"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Gaps are respected when gathering items into lines for column flexboxes." /> + +<style> +.item { + width: 50px; + height: 100px; + flex: 0 0 auto; + background: green; +} +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id=reference-overlapped-red></div> + +<div style="display: flex; height: 200px; width: 100px; row-gap: 50px; flex-flow: column wrap;"> + <div class=item></div> + <div class=item></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-013.html b/testing/web-platform/tests/css/css-flexbox/gap-013.html new file mode 100644 index 0000000000..30e4c43e71 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-013.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Flex gaps</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#resolve-flexible-lengths"> +<link rel="help" href="https://drafts.csswg.org/css-align/#gaps"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Main axis gap makes grow turn to shrink." /> + +<style> +.item { + width: 30px; + flex: 1 1 auto; + background: red; +} +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: flex; height: 100px; width: 100px; column-gap: 100px; background: green;"> + <div class=item></div> + <div class=item></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-014.html b/testing/web-platform/tests/css/css-flexbox/gap-014.html new file mode 100644 index 0000000000..c600478c73 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-014.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title>Flex gaps</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#main-alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align/#gaps"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="There are gaps between 0-main-size items" /> + +<style> +.item { + height: 10px; + flex: 0 0 auto; +} +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id=reference-overlapped-red></div> + +<div style="display: flex; width: 100px; row-gap: 40px; background: green; flex-direction: column;"> + <div class=item></div> + <div class=item style="height: 0px"></div> + <div class=item></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-015.html b/testing/web-platform/tests/css/css-flexbox/gap-015.html new file mode 100644 index 0000000000..e54598e200 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-015.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title>Flex gaps</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> +<link rel="help" href="https://drafts.csswg.org/css-align/#gaps"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Intrinsic min size includes gaps" /> + +<style> +.item { + flex: 0 0 auto; + line-height: 0px; +} + +.inline-block { + display: inline-block; + width: 10px; +} + +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id=reference-overlapped-red></div> + +<div style="display: flex; column-gap: 80px; background: green; height: 100px; width: min-content"> + <div class=item> <!-- min: 10 max: 20 --> + <div class=inline-block></div><div class=inline-block></div> + </div> + <div class=item style="width: 10px"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-016.html b/testing/web-platform/tests/css/css-flexbox/gap-016.html new file mode 100644 index 0000000000..a544177256 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-016.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title>Flex gaps</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> +<link rel="help" href="https://drafts.csswg.org/css-align/#gaps"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Intrinsic max size includes gaps" /> + +<style> +.item { + flex: 0 0 auto; + line-height: 0px; +} + +.inline-block { + display: inline-block; + width: 10px; +} + +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id=reference-overlapped-red></div> + +<div style="display: flex; column-gap: 70px; background: green; height: 100px; width: max-content"> + <div class=item> <!-- min: 10 max: 20 --> + <div class=inline-block></div><div class=inline-block></div> + </div> + <div class=item style="width: 10px"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-017.html b/testing/web-platform/tests/css/css-flexbox/gap-017.html new file mode 100644 index 0000000000..446d16dfa6 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-017.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<title>Flex gaps</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#main-alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align/#gaps"> +<meta name="assert" content="Button elements with display: flex honor gaps." /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<style> +.button { + display: flex; + flex-direction: column; + border: 0; + padding: 0; + background: green; + width: 100px; + row-gap: 20px; +} + +.item { + height: 40px; +} + +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} +</style> + +<div id=reference-overlapped-red></div> + +<button class=button data-expected-height=100> + <div class=item></div> + <div class=item></div> +</button> + +<script> +checkLayout('.button'); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-018.html b/testing/web-platform/tests/css/css-flexbox/gap-018.html new file mode 100644 index 0000000000..4065f4ece8 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-018.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<title>Flex gaps</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#main-alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align/#gaps"> +<meta name="assert" content="Button elements with display: flex but no items don't subtract column gap from intrinsic max size." /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<style> +.button { + display: flex; + border: 0; + padding: 0; + + padding-left: 100px; + column-gap: 100px; + width: max-width; + height: 100px; + background: green; +} + +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} +</style> + +<div id=reference-overlapped-red></div> + +<button class=button data-expected-width=100></button> + +<script> +checkLayout('.button'); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-019.html b/testing/web-platform/tests/css/css-flexbox/gap-019.html new file mode 100644 index 0000000000..d55f86e5d2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-019.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>Flex gaps</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> +<link rel="help" href="https://drafts.csswg.org/css-align/#gaps"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" + content="Intrinsic max size of multiline row flex containers includes gaps" /> + +<style> + .item { + flex: 0 0 10px; + } + + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> + +<div id=reference-overlapped-red></div> + +<div + style="display: flex; column-gap: 80px; background: green; height: 100px; width: max-content; flex-wrap: wrap;"> + <div class=item></div> + <div class=item></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-020.html b/testing/web-platform/tests/css/css-flexbox/gap-020.html new file mode 100644 index 0000000000..2f0c02dfc1 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-020.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Flex gaps</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> +<link rel="help" href="https://drafts.csswg.org/css-align/#gaps"> +<link rel="help" href="https://crbug.com/1459336"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" + content="Intrinsic max size of item-less but not childless row container doesn't underflow" /> + +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> + +<div id=reference-overlapped-red></div> + +<div + style="display: flex; column-gap: 10px; width: max-content; min-width: 100px; height: 100px; background: green;"> + <div style="position: absolute;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/gap-021.html b/testing/web-platform/tests/css/css-flexbox/gap-021.html new file mode 100644 index 0000000000..5f37e94136 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/gap-021.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Flex gaps</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> +<link rel="help" href="https://drafts.csswg.org/css-align/#gaps"> +<link rel="help" href="https://crbug.com/1459336"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" + content="Intrinsic max size of item-less but not childless column wrap container doesn't underflow" /> + +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> + +<div id=reference-overlapped-red></div> + +<div + style="display: flex; flex-flow: column wrap; column-gap: 10px; width: max-content; min-width: 100px; height: 100px; background: green;"> + <div style="position: absolute;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-center.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-center.html new file mode 100644 index 0000000000..cd7ed7ae2d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-center.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | align-content: center</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + align-content: center; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("align-content"), + "center"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-flex-end.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-flex-end.html new file mode 100644 index 0000000000..cce72e1399 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-flex-end.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | align-content: flex-end</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + align-content: flex-end; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("align-content"), + "flex-end"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-flex-start.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-flex-start.html new file mode 100644 index 0000000000..759b8c8c75 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-flex-start.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | align-content: flex-start</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + align-content: flex-start; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("align-content"), + "flex-start"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-space-around.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-space-around.html new file mode 100644 index 0000000000..029c0e0a8d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-space-around.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | align-content: space-around</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + align-content: space-around; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("align-content"), + "space-around"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-space-between.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-space-between.html new file mode 100644 index 0000000000..81061d9b5b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-space-between.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | align-content: space-between</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + align-content: space-between; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("align-content"), + "space-between"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-baseline.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-baseline.html new file mode 100644 index 0000000000..ac0b48fb01 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-baseline.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | align-items: baseline</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + align-items: baseline; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("align-items"), + "baseline"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-center.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-center.html new file mode 100644 index 0000000000..e7cc1ee784 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-center.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | align-items: center</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + align-items: center; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("align-items"), + "center"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-flex-end.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-flex-end.html new file mode 100644 index 0000000000..480f0e3dd6 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-flex-end.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | align-items: flex-end</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + align-items: flex-end; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("align-items"), + "flex-end"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-flex-start.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-flex-start.html new file mode 100644 index 0000000000..6c3b9e6c81 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-flex-start.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | align-items: flex-start</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + align-items: flex-start; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("align-items"), + "flex-start"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-invalid.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-invalid.html new file mode 100644 index 0000000000..8c121dbacb --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-invalid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | align-items: invalid</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + align-items: filler; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("align-items"), + "normal"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-stretch.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-stretch.html new file mode 100644 index 0000000000..3d6f1e3193 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-stretch.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | align-items: stretch</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + align-items: stretch; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("align-items"), + "stretch"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-baseline.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-baseline.html new file mode 100644 index 0000000000..49c21d294e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-baseline.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | align-self: baseline</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + align-self: baseline; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("align-self"), + "baseline"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-center.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-center.html new file mode 100644 index 0000000000..b86007d3f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-center.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | align-self: center</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + align-self: center; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("align-self"), + "center"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-flex-end.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-flex-end.html new file mode 100644 index 0000000000..ca729e3b1d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-flex-end.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | align-self: flex-end</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + align-self: flex-end; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("align-self"), + "flex-end"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-flex-start.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-flex-start.html new file mode 100644 index 0000000000..dd84c6da19 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-flex-start.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | align-self: flex-start</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + align-self: flex-start; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("align-self"), + "flex-start"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-invalid.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-invalid.html new file mode 100644 index 0000000000..c33726ea4b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-invalid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | align-self: invalid</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + align-self: filler; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("align-self"), + "auto"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-stretch.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-stretch.html new file mode 100644 index 0000000000..6604ec289a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-stretch.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | align-self: stretch</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + align-self: stretch; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("align-self"), + "stretch"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_display-inline.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_display-inline.html new file mode 100644 index 0000000000..d1a777cd64 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_display-inline.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | display: inline-flex</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + display: inline-flex; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("display"), + "inline-flex"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_display.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_display.html new file mode 100644 index 0000000000..08e9ad60ba --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_display.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | display: flex</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + display: flex; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("display"), + "flex"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0.html new file mode 100644 index 0000000000..7d3d3c721e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex-basis: 0</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex-basis: 0; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-basis"), + "0px"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0percent.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0percent.html new file mode 100644 index 0000000000..6abbc50a22 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0percent.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex-basis: 0%</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex-basis: 0%; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-basis"), + "0%"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-auto.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-auto.html new file mode 100644 index 0000000000..75ae0f6d52 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-auto.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex-basis: auto</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex-basis: auto; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-basis"), + "auto"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-percent.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-percent.html new file mode 100644 index 0000000000..e45bf24806 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-percent.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex-basis: percent</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +html { + display: flex; + width: 100px; +} +body { + color: red; + margin: 0; + flex-basis: 100%; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-basis"), + "100%"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-column-reverse.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-column-reverse.html new file mode 100644 index 0000000000..7737ba67c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-column-reverse.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex-direction: column-reverse</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex-direction: column-reverse; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"), + "column-reverse"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-column.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-column.html new file mode 100644 index 0000000000..2ba9f818be --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-column.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex-direction: column</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex-direction: column; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"), + "column"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-invalid.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-invalid.html new file mode 100644 index 0000000000..e52ebc9882 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-invalid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex-direction: row</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex-direction: filler; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"), + "row"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-row-reverse.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-row-reverse.html new file mode 100644 index 0000000000..e915c2bab2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-row-reverse.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex-direction: row-reverse</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex-direction: row-reverse; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"), + "row-reverse"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-row.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-row.html new file mode 100644 index 0000000000..59b932f83b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-row.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex-direction: row</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex-direction: row; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"), + "row"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-nowrap.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-nowrap.html new file mode 100644 index 0000000000..98ba73c324 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-nowrap.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex-flow: column nowrap</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-column"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-nowrap"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex-flow: column nowrap; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"), + "column"); + assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"), + "nowrap"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse-nowrap.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse-nowrap.html new file mode 100644 index 0000000000..7a51301706 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse-nowrap.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex-flow: column-reverse nowrap</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-column-reverse"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-nowrap"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex-flow: column-reverse nowrap; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"), + "column-reverse"); + assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"), + "nowrap"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse-wrap.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse-wrap.html new file mode 100644 index 0000000000..d5972d9e22 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse-wrap.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex-flow: column-reverse wrap</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-column-reverse"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-wrap"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex-flow: column-reverse wrap; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"), + "column-reverse"); + assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"), + "wrap"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse.html new file mode 100644 index 0000000000..7c4fcf6abe --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex-flow: column-reverse</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-column-reverse"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex-flow: column-reverse; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"), + "column-reverse"); + assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"), + "nowrap"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-wrap-reverse.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-wrap-reverse.html new file mode 100644 index 0000000000..59b57f867d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-wrap-reverse.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex-flow: column wrap-reverse</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-column"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-wrap-reverse"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex-flow: column wrap-reverse; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"), + "column"); + assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"), + "wrap-reverse"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-wrap.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-wrap.html new file mode 100644 index 0000000000..dd5fb89cb6 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-wrap.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex-flow: column wrap</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-column"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-wrap"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex-flow: column wrap; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"), + "column"); + assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"), + "wrap"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column.html new file mode 100644 index 0000000000..35f2c0e7bb --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex-flow: column</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-column"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex-flow: column; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"), + "column"); + assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"), + "nowrap"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-nowrap.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-nowrap.html new file mode 100644 index 0000000000..7520543f80 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-nowrap.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex-flow: nowrap</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-nowrap"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex-flow: nowrap; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"), + "row"); + assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"), + "nowrap"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-nowrap.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-nowrap.html new file mode 100644 index 0000000000..db763c465c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-nowrap.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex-flow: row nowrap</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-row"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-nowrap"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex-flow: row nowrap; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"), + "row"); + assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"), + "nowrap"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-nowrap.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-nowrap.html new file mode 100644 index 0000000000..48be7f8916 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-nowrap.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex-flow: row-reverse nowrap</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-row-reverse"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-nowrap"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex-flow: row-reverse nowrap; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"), + "row-reverse"); + assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"), + "nowrap"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-wrap-reverse.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-wrap-reverse.html new file mode 100644 index 0000000000..9f4d3927d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-wrap-reverse.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex-flow: row-reverse wrap-reverse</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-row-reverse"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-wrap-reverse"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex-flow: row-reverse wrap-reverse; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"), + "row-reverse"); + assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"), + "wrap-reverse"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-wrap.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-wrap.html new file mode 100644 index 0000000000..f59f8bf8b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-wrap.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex-flow: row-reverse wrap</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-row-reverse"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-wrap"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex-flow: row-reverse wrap; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"), + "row-reverse"); + assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"), + "wrap"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse.html new file mode 100644 index 0000000000..893da8ce11 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex-flow: row-reverse</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-row-reverse"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex-flow: row-reverse; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"), + "row-reverse"); + assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"), + "nowrap"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-wrap-reverse.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-wrap-reverse.html new file mode 100644 index 0000000000..d6a169b445 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-wrap-reverse.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex-flow: row wrap-reverse</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-row"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-wrap-reverse"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex-flow: row wrap-reverse; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"), + "row"); + assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"), + "wrap-reverse"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-wrap.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-wrap.html new file mode 100644 index 0000000000..42e85f120a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-wrap.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex-flow: row wrap</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-row"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-wrap"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex-flow: row wrap; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"), + "row"); + assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"), + "wrap"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row.html new file mode 100644 index 0000000000..ddf1284f51 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex-flow: row</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-row"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex-flow: row; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"), + "row"); + assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"), + "nowrap"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-wrap.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-wrap.html new file mode 100644 index 0000000000..a1eb4dff7a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-wrap.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex-flow: wrap</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-wrap"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex-flow: wrap; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"), + "row"); + assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"), + "wrap"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-0.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-0.html new file mode 100644 index 0000000000..da23475c8a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-0.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex-grow: 0</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-grow-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex-grow: 0; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-grow"), + "0"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-invalid.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-invalid.html new file mode 100644 index 0000000000..ae1a411caf --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-invalid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex-grow: negative</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-grow-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex-grow: -1; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-grow"), + "0"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-number.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-number.html new file mode 100644 index 0000000000..db59e61455 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-number.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex-grow: number</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-grow-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex-grow: 666; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-grow"), + "666"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-0-auto.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-0-auto.html new file mode 100644 index 0000000000..d72926bd63 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-0-auto.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex: 0 auto</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex: initial; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-grow"), + "0"); + assert_equals(getComputedStyle(body).getPropertyValue("flex-shrink"), + "1"); + assert_equals(getComputedStyle(body).getPropertyValue("flex-basis"), + "auto"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-auto.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-auto.html new file mode 100644 index 0000000000..d8cdc34d65 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-auto.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex: auto</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex: auto; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-grow"), + "1"); + assert_equals(getComputedStyle(body).getPropertyValue("flex-shrink"), + "1"); + assert_equals(getComputedStyle(body).getPropertyValue("flex-basis"), + "auto"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-initial.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-initial.html new file mode 100644 index 0000000000..d996bdeb2b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-initial.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex: initial</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex: initial; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-grow"), + "0"); + assert_equals(getComputedStyle(body).getPropertyValue("flex-shrink"), + "1"); + assert_equals(getComputedStyle(body).getPropertyValue("flex-basis"), + "auto"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-invalid.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-invalid.html new file mode 100644 index 0000000000..3e700cf388 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-invalid.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex: invalid</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex: 0 1 1; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-grow"), + "0"); + assert_equals(getComputedStyle(body).getPropertyValue("flex-shrink"), + "1"); + assert_equals(getComputedStyle(body).getPropertyValue("flex-basis"), + "auto"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-none.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-none.html new file mode 100644 index 0000000000..6312a386ff --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-none.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex: auto</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex: none; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-grow"), + "0"); + assert_equals(getComputedStyle(body).getPropertyValue("flex-shrink"), + "0"); + assert_equals(getComputedStyle(body).getPropertyValue("flex-basis"), + "auto"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-number.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-number.html new file mode 100644 index 0000000000..a35622277b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-number.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex: number</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex: 666; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-grow"), + "666"); + assert_equals(getComputedStyle(body).getPropertyValue("flex-shrink"), + "1"); + assert_equals(getComputedStyle(body).getPropertyValue("flex-basis"), + "0%"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand.html new file mode 100644 index 0000000000..dcfcf35d79 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex: invalid</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex: 666 666 666px; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-grow"), + "666"); + assert_equals(getComputedStyle(body).getPropertyValue("flex-shrink"), + "666"); + assert_equals(getComputedStyle(body).getPropertyValue("flex-basis"), + "666px"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-0.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-0.html new file mode 100644 index 0000000000..6d65b0ea50 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-0.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex-shrink: 0</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-shrink-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex-shrink: 0; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-shrink"), + "0"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-invalid.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-invalid.html new file mode 100644 index 0000000000..e7844235f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-invalid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex-shrink: negative</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-shrink-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex-shrink: -1; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-shrink"), + "1"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-number.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-number.html new file mode 100644 index 0000000000..be3e917b42 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-number.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex-shrink: number</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-shrink-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex-shrink: 666; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-shrink"), + "666"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-invalid.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-invalid.html new file mode 100644 index 0000000000..9e904f5ad9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-invalid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex-wrap: wrap</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex-wrap: filler; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"), + "nowrap"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-nowrap.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-nowrap.html new file mode 100644 index 0000000000..283826b98e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-nowrap.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex-wrap: nowrap</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex-wrap: nowrap; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"), + "nowrap"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-wrap-reverse.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-wrap-reverse.html new file mode 100644 index 0000000000..600541e91e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-wrap-reverse.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex-wrap: wrap-reverse</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex-wrap: wrap-reverse; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"), + "wrap-reverse"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-wrap.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-wrap.html new file mode 100644 index 0000000000..82407357c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-wrap.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | flex-wrap: wrap</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + flex-wrap: wrap; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"), + "wrap"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-center.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-center.html new file mode 100644 index 0000000000..4cafe5da92 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-center.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | justify-content: center</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + justify-content: center; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("justify-content"), + "center"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-flex-end.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-flex-end.html new file mode 100644 index 0000000000..0af4aea08f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-flex-end.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | justify-content: flex-end</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + justify-content: flex-end; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("justify-content"), + "flex-end"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-flex-start.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-flex-start.html new file mode 100644 index 0000000000..c04a7d32e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-flex-start.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | justify-content: flex-start</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + justify-content: flex-start; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("justify-content"), + "flex-start"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-space-around.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-space-around.html new file mode 100644 index 0000000000..8d18b28e31 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-space-around.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | justify-content: space-around</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + justify-content: space-around; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("justify-content"), + "space-around"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-space-between.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-space-between.html new file mode 100644 index 0000000000..238fa6af8d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-space-between.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | justify-content: space-between</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + justify-content: space-between; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("justify-content"), + "space-between"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-auto-size.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-auto-size.html new file mode 100644 index 0000000000..ccfeb35cb6 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-auto-size.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<title>CSS Flexible Box Test: computed style for auto minimum size</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + .flex { display: flex } + .none { display: none } + .min-wh { + min-width: auto; + min-height: auto; + } + .contents { display: contents } +</style> +<div class="flex"> + <div class="min-wh"></div> +</div> +<div class="none"> + <div class="flex"> + <div class="min-wh"></div> + </div> +</div> +<div class="flex"> + <div class="contents"> + <div class="min-wh"></div> + </div> +</div> +<div class="flex"> + <div class="min-wh none"></div> +</div> +<script> + const tests = [ + { description: "Computed min-width/min-height of specified auto for flex item.", computed: "auto" }, + { description: "Computed min-width/min-height of specified auto inside display:none which would otherwise have been a flex item.", computed: "0px" }, + { description: "Computed min-width/min-height of specified auto for flex item inside display:contents.", computed: "auto" }, + { description: "Computed min-width/min-height of specified auto with display:none which would otherwise have been a flex item.", computed: "0px" } + ]; + + const testElements = document.querySelectorAll(".min-wh"); + let testNo = 0; + for (let testElement of testElements) { + test(() => { + assert_equals(getComputedStyle(testElement).minWidth, tests[testNo].computed); + assert_equals(getComputedStyle(testElement).minHeight, tests[testNo].computed); + }, tests[testNo].description); + testNo++; + } +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-height-auto.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-height-auto.html new file mode 100644 index 0000000000..6291e01e38 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-height-auto.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>flexbox | computed style | min-height: auto</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +html { + display: flex; + flex-direction: column; +} +body { + color: red; + min-height: auto; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("min-height"), + "auto"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-width-auto.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-width-auto.html new file mode 100644 index 0000000000..6ddc114d68 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-width-auto.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>flexbox | computed style | min-width: auto</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +html { + display: flex; +} +body { + color: red; + min-width: auto; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("min-width"), + "auto"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-inherit.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-inherit.html new file mode 100644 index 0000000000..dab1c1c6f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-inherit.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>flexbox | computed style | order: -1</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#order-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +html { + order: 666; +} +body { + color: red; + order: inherit; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("order"), + "666"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-integer.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-integer.html new file mode 100644 index 0000000000..cd097b1949 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-integer.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | order: integer</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#order-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + order: 5; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("order"), + "5"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-invalid.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-invalid.html new file mode 100644 index 0000000000..17c19ee469 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-invalid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | order: noninteger</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#order-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + order: 1.5; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("order"), + "0"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-negative.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-negative.html new file mode 100644 index 0000000000..c2fdab6cc0 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-negative.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | order: -1</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#order-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + order: -1; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("order"), + "-1"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order.html b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order.html new file mode 100644 index 0000000000..9f94febe77 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>flexbox | computed style | order: 0</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#order-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="flags" content="dom"> +<style> +body { + color: red; + order: 0; +} +</style> +<div id="log"></div> +<script> +test(function() { + var body = document.body; + + assert_equals(getComputedStyle(body).getPropertyValue("order"), + "0"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/grandchild-span-height.html b/testing/web-platform/tests/css/css-flexbox/grandchild-span-height.html new file mode 100644 index 0000000000..c087edb68d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/grandchild-span-height.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta name="flags" content="asis" /> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1601626"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> + +<div id=reference-overlapped-red></div> + +<!-- Firefox 111 gives the green square too much height. 111px on my system. --> + +<div style="display: flex;"> + <div style="background-color: green; line-height: 10px;"> + <span style="margin-left: 1px"> + <div style="display:inline-block; width: 99px; height: 100px"></div> + <!-- the html comments are necessary to trigger the bug --> + <!-- --> + </span> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/grid-flex-item-001.html b/testing/web-platform/tests/css/css-flexbox/grid-flex-item-001.html new file mode 100644 index 0000000000..67ee0fb001 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/grid-flex-item-001.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/1074593"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="A grid flex-item should have a definite grid." /> +<p>Test passes if there is a filled green square.</p> +<div style="display: flex; width: 200px; height: 100px;"> + <div style="display: grid; grid: 1fr 1fr / auto; flex: 1; writing-mode: vertical-lr;"> + <div style="background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/grid-flex-item-002.html b/testing/web-platform/tests/css/css-flexbox/grid-flex-item-002.html new file mode 100644 index 0000000000..4139699205 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/grid-flex-item-002.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/1074593"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="A grid flex-item should have a definite grid." /> +<p>Test passes if there is a filled green square.</p> +<div style="display: flex; width: 100px; height: 200px;"> + <div style="display: grid; grid: 1fr 1fr / auto; flex: 1;"> + <div style="background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/grid-flex-item-003.html b/testing/web-platform/tests/css/css-flexbox/grid-flex-item-003.html new file mode 100644 index 0000000000..1996370f03 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/grid-flex-item-003.html @@ -0,0 +1,11 @@ +<!doctype html> +<link rel="help" href="https://crbug.com/1077524"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Grid item in 0-height grid flex-item doesn't get the flexbox's height." /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="background: green; display: flex; flex-direction: column; width: 100px; height: 100px;"> + <div style="background: blue; display: grid; grid-template-rows: auto;"> + <div style="background: red;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/grid-flex-item-004.html b/testing/web-platform/tests/css/css-flexbox/grid-flex-item-004.html new file mode 100644 index 0000000000..885fb8c195 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/grid-flex-item-004.html @@ -0,0 +1,11 @@ +<!doctype html> +<link rel="help" href="https://crbug.com/1077524"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Grid item in 0-height ortho grid flex-item doesn't get the flexbox's height." /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="background: green; display: flex; flex-direction: column; width: 100px; height: 100px;"> + <div style="background: blue; display: grid; grid-template-rows: auto; writing-mode: vertical-lr;"> + <div style="background: red;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/grid-flex-item-005.html b/testing/web-platform/tests/css/css-flexbox/grid-flex-item-005.html new file mode 100644 index 0000000000..95c57d1429 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/grid-flex-item-005.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/1108928"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div id="target"> + <div style="display: flex; flex-direction: column"> + <div style="display: grid; height: 0; flex: 1; grid-template-rows: minmax(100px, 200%);"> + <div style="background: green;"></div> + </div> + </div> +</div> +<script> +document.body.offsetTop; +document.getElementById('target').style.width = '100px'; +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/grid-flex-item-006.html b/testing/web-platform/tests/css/css-flexbox/grid-flex-item-006.html new file mode 100644 index 0000000000..b5d49c4824 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/grid-flex-item-006.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://crbug.com/1102183"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Part E"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="used flex base size includes percent padding on grid items."> + +<style> +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id=reference-overlapped-red></div> + +<div style="display: flex; width: 100px;"> + <div style="display: grid; padding-right: 100%; height: 100px; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/grid-flex-item-007.html b/testing/web-platform/tests/css/css-flexbox/grid-flex-item-007.html new file mode 100644 index 0000000000..bdea17d069 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/grid-flex-item-007.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" + href="https://drafts.csswg.org/css-flexbox-1/#valdef-flex-direction-column"> +<link rel="help" href="https://webkit.org/b/226522"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" + content="Column flexboxes with indefinite heights don't mess up positioning of descendant grid items."> + +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> +<div id=reference-overlapped-red></div> + +<body style="height: 400px;"> + <div style="display: flex; flex-direction: column;"> + <div style="display: grid; align-items: center; height: 100%;"> + <div style="width:100px; height: 100px; background: green;"></div> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/height-percentage-with-dynamic-container-size.html b/testing/web-platform/tests/css/css-flexbox/height-percentage-with-dynamic-container-size.html new file mode 100644 index 0000000000..9e13d8b17c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/height-percentage-with-dynamic-container-size.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: Flex container with height percentage and dynamic container size</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1"> +<meta name="assert" content="Checks that if a flex container has a definite height percentage, but then the height of the container is dynamically changed to be intrinsic, the resolved value of the percentage is correctly updated."> +<style> +.container { + width: 100px; + background: cyan; + height: 200px; +} +.changed .container { + height: auto; +} +.flex { + display: flex; +} +.content { + height: 100px; + width: 100px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<div id="log"></div> + +<pre>height: 0%</pre> + +<div class="container" data-expected-height="100"> + <div class="flex" style="height: 0%" data-expected-height="100"> + <div data-expected-height="100"> + <div class="content"></div> + </div> + </div> +</div> + +<pre>height: 100%</pre> + +<div class="container" data-expected-height="100"> + <div class="flex" style="height: 100%" data-expected-height="100"> + <div data-expected-height="100"> + <div class="content"></div> + </div> + </div> +</div> + +<pre>height: 200%</pre> + +<div class="container" data-expected-height="100"> + <div class="flex" style="height: 200%" data-expected-height="100"> + <div data-expected-height="100"> + <div class="content"></div> + </div> + </div> +</div> + +<script> +// Force layout +document.body.offsetLeft; + +// Change 'height' to 'auto'. +document.body.classList.add("changed"); + +// Check final layout +checkLayout('.container'); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/hittest-anonymous-box.html b/testing/web-platform/tests/css/css-flexbox/hittest-anonymous-box.html new file mode 100644 index 0000000000..06de327499 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/hittest-anonymous-box.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/1097654" /> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +#target { + font: 20px/1 Ahem; + display: flex; + flex-direction: column; + border: 2px solid black; + width: 100px; + height: 100px; +} +</style> +<div id=target>X</div> +<script> +test(function(t) { + const target = document.getElementById('target'); + assert_equals(target, document.elementFromPoint(30, 10)); +}, 'Hit-testing within an anonymous flex-item should return the flexbox as the hittest result.'); +</script> + diff --git a/testing/web-platform/tests/css/css-flexbox/hittest-before-pseudo.html b/testing/web-platform/tests/css/css-flexbox/hittest-before-pseudo.html new file mode 100644 index 0000000000..afba77e06d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/hittest-before-pseudo.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/1081789" /> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +#target::before { + font: 50px/1 Ahem; + display: inline-flex; + content: "X"; + border: 2px solid black; + color: green; +} +</style> +<div id=target></div> +<script> +test(function(t) { + const target = document.getElementById('target'); + assert_equals(target, document.elementFromPoint(30, 30)); +}, 'Hit-testing text within a pseudo-element flex-item should return the flexbox as the hittest result.'); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/hittest-overlapping-margin.html b/testing/web-platform/tests/css/css-flexbox/hittest-overlapping-margin.html new file mode 100644 index 0000000000..5c3601d96a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/hittest-overlapping-margin.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<link rel="author" title="Andrew Comminos" href="mailto:acomminos@fb.com" /> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#painting" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +#container { + width: 600px; + display: flex; +} + +#left { + width: 300px; + overflow: hidden; + white-space: nowrap; + background: rgba(200, 200, 200, 0.8); +} + +#right { + width: 300px; + background-color: rgba(0, 128, 0, 0.8); + margin-left: -100px; +} +</style> +<div id="container"> + <a id="left" href="#">foofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoo</a> + <div id="right"></div> +</div> +<div id="log"></div> +<script> + test(function(t) + { + const container = document.querySelector('#container'); + // Target the intersection of the two child elements. + // The occluded link should not be clickable. + const x = container.offsetLeft + 250; + const y = container.offsetTop + 5; + + var element = document.elementFromPoint(x, y); + assert_equals(element.nodeName, 'DIV'); + assert_equals(element.id, 'right'); + }, "Flexboxes should perform hit testing in reverse paint order for overlapping elements: negative margin case (crbug.com/844505)"); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/hittest-overlapping-order.html b/testing/web-platform/tests/css/css-flexbox/hittest-overlapping-order.html new file mode 100644 index 0000000000..f52a37c181 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/hittest-overlapping-order.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<link rel="author" title="Andrew Comminos" href="mailto:acomminos@fb.com" /> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#painting" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +#container { + width: 600px; + display: flex; +} + +#left { + width: 300px; + overflow: hidden; + white-space: nowrap; + background: rgba(200, 200, 200, 0.8); + order: 0; +} + +#right { + width: 300px; + background-color: rgba(0, 128, 0, 0.8); + margin-left: -100px; + order: 1; +} +</style> +<div id="container"> + <div id="right"></div> + <a id="left" href="#">foofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoo</a> +</div> +<div id="log"></div> +<script> + test(function(t) + { + const container = document.querySelector('#container'); + // Target the intersection of the two child elements. + // The occluded link should not be clickable. + const x = container.offsetLeft + 250; + const y = container.offsetTop + 5; + + var element = document.elementFromPoint(x, y); + assert_equals(element.nodeName, 'DIV'); + assert_equals(element.id, 'right'); + }, "Flexboxes should perform hit testing in reverse paint order for overlapping elements: flex order case (crbug.com/844505)"); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/hittest-overlapping-relative.html b/testing/web-platform/tests/css/css-flexbox/hittest-overlapping-relative.html new file mode 100644 index 0000000000..985ac1aed5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/hittest-overlapping-relative.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<link rel="author" title="Andrew Comminos" href="mailto:acomminos@fb.com" /> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#painting" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +#container { + width: 600px; + display: flex; +} + +#left { + position: relative; + width: 300px; + margin-right: -100px; + background-color: rgba(0, 128, 0, 0.8); +} + +#right { + width: 300px; + overflow: hidden; + white-space: nowrap; + background: rgba(200, 200, 200, 0.8); +} + +</style> +<div id="container"> + <div id="left"></div> + <a id="right" href="#">foofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoo</a> +</div> +<div id="log"></div> +<script> + test(function(t) + { + const container = document.querySelector('#container'); + // Target the intersection of the two child elements. + // The occluded link should not be clickable. + const x = container.offsetLeft + 250; + const y = container.offsetTop + 5; + + var element = document.elementFromPoint(x, y); + assert_equals(element.nodeName, 'DIV'); + assert_equals(element.id, 'left'); + }, "Flexboxes should perform hit testing in reverse paint order for overlapping elements: relative case (crbug.com/844505)"); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-001.html b/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-001.html new file mode 100644 index 0000000000..6972d9cd9c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-001.html @@ -0,0 +1,128 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title> + CSS Test: Testing how explicit main-size & cross-size constraints + influence sizing on non-stretched flex item w/ intrinsic ratio. + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size"> + <style> + .flexbox { + display: flex; + flex-direction: row; + border: 1px solid black; + margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ + width: 40px; + height: 40px; + + justify-content: flex-start; + align-items: flex-start; + + float: left; /* For testing in "rows" */ + } + br { clear: both; } + + .flexbox > * { + /* Disable "min-width:auto"/"min-height:auto" to focus purely on + later channels of influence. */ + min-width: 0; + min-height: 0; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> + </head> + <body onload="checkLayout('.flexbox > img')"> + <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> + + <!-- Row 1: no special sizing: --> + <div class="flexbox"> + <img src="support/solidblue.png" data-expected-width="16" data-expected-height="16"> + </div> + <br> + + <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px" data-expected-width="30" data-expected-height="30"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 30px" data-expected-width="30" data-expected-height="30"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="flex: 0 0 30px" data-expected-width="30" data-expected-height="30"> + </div> + <br> + + <!-- Row 3: min main-size OR min cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="34" data-expected-height="34"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="34" data-expected-height="34"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + min-height: 34px" data-expected-width="34" data-expected-height="34"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px; + min-height: 30px" data-expected-width="34" data-expected-height="34"> + </div> + <br> + + <!-- Row 4: max main-size OR max cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px" data-expected-width="10" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-height: 10px" data-expected-width="10" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + max-height: 6px" data-expected-width="6" data-expected-height="6"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 6px; + max-height: 10px" data-expected-width="6" data-expected-height="6"> + </div> + <br> + + <!-- Row 5: min main-size vs. max cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + max-height: 10px" data-expected-width="30" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + min-height: 30px" data-expected-width="10" data-expected-height="30"> + </div> + <br> + + <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + height: 10px" data-expected-width="30" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + max-height: 10px" data-expected-width="30" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + height: 30px" data-expected-width="10" data-expected-height="30"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + min-height: 30px" data-expected-width="10" data-expected-height="30"> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-001v.html b/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-001v.html new file mode 100644 index 0000000000..91231dc4f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-001v.html @@ -0,0 +1,131 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title> + CSS Test: Testing how explicit main-size & cross-size constraints + influence sizing on non-stretched flex item w/ intrinsic ratio + (with a vertical writing-mode on the flex items). + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size"> + <style> + .flexbox { + display: flex; + flex-direction: row; + border: 1px solid black; + margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ + width: 40px; + height: 40px; + + justify-content: flex-start; + align-items: flex-start; + + float: left; /* For testing in "rows" */ + } + br { clear: both; } + + .flexbox > * { + writing-mode: vertical-lr; + + /* Disable "min-width:auto"/"min-height:auto" to focus purely on + later channels of influence. */ + min-width: 0; + min-height: 0; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> + </head> + <body onload="checkLayout('.flexbox > img')"> + <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> + + <!-- Row 1: no special sizing: --> + <div class="flexbox"> + <img src="support/solidblue.png" data-expected-width="16" data-expected-height="16"> + </div> + <br> + + <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px" data-expected-width="30" data-expected-height="30"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 30px" data-expected-width="30" data-expected-height="30"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="flex: 0 0 30px" data-expected-width="30" data-expected-height="30"> + </div> + <br> + + <!-- Row 3: min main-size OR min cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="34" data-expected-height="34"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="34" data-expected-height="34"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + min-height: 34px" data-expected-width="34" data-expected-height="34"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px; + min-height: 30px" data-expected-width="34" data-expected-height="34"> + </div> + <br> + + <!-- Row 4: max main-size OR max cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px" data-expected-width="10" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-height: 10px" data-expected-width="10" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + max-height: 6px" data-expected-width="6" data-expected-height="6"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 6px; + max-height: 10px" data-expected-width="6" data-expected-height="6"> + </div> + <br> + + <!-- Row 5: min main-size vs. max cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + max-height: 10px" data-expected-width="30" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + min-height: 30px" data-expected-width="10" data-expected-height="30"> + </div> + <br> + + <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + height: 10px" data-expected-width="30" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + max-height: 10px" data-expected-width="30" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + height: 30px" data-expected-width="10" data-expected-height="30"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + min-height: 30px" data-expected-width="10" data-expected-height="30"> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-002.html b/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-002.html new file mode 100644 index 0000000000..4ae30b8afe --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-002.html @@ -0,0 +1,128 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title> + CSS Test: Testing how explicit main-size & cross-size constraints + influence sizing on non-stretched flex item w/ intrinsic ratio. + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size"> + <style> + .flexbox { + display: flex; + flex-direction: column; + border: 1px solid black; + margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ + width: 40px; + height: 40px; + + justify-content: flex-start; + align-items: flex-start; + + float: left; /* For testing in "rows" */ + } + br { clear: both; } + + .flexbox > * { + /* Disable "min-width:auto"/"min-height:auto" to focus purely on + later channels of influence. */ + min-width: 0; + min-height: 0; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> + </head> + <body onload="checkLayout('.flexbox > img')"> + <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> + + <!-- Row 1: no special sizing: --> + <div class="flexbox"> + <img src="support/solidblue.png" data-expected-width="16" data-expected-height="16"> + </div> + <br> + + <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px" data-expected-width="30" data-expected-height="30"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 30px" data-expected-width="30" data-expected-height="30"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="flex: 0 0 30px" data-expected-width="30" data-expected-height="30"> + </div> + <br> + + <!-- Row 3: min main-size OR min cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="34" data-expected-height="34"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="34" data-expected-height="34"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + min-height: 34px" data-expected-width="34" data-expected-height="34"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px; + min-height: 30px" data-expected-width="34" data-expected-height="34"> + </div> + <br> + + <!-- Row 4: max main-size OR max cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px" data-expected-width="10" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-height: 10px" data-expected-width="10" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + max-height: 6px" data-expected-width="6" data-expected-height="6"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 6px; + max-height: 10px" data-expected-width="6" data-expected-height="6"> + </div> + <br> + + <!-- Row 5: min main-size vs. max cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + max-height: 10px" data-expected-width="30" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + min-height: 30px" data-expected-width="10" data-expected-height="30"> + </div> + <br> + + <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + height: 10px" data-expected-width="30" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + max-height: 10px" data-expected-width="30" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + height: 30px" data-expected-width="10" data-expected-height="30"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + min-height: 30px" data-expected-width="10" data-expected-height="30"> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-002v.html b/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-002v.html new file mode 100644 index 0000000000..6d0c0cafa7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-002v.html @@ -0,0 +1,131 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title> + CSS Test: Testing how explicit main-size & cross-size constraints + influence sizing on non-stretched flex item w/ intrinsic ratio + (with a vertical writing-mode on the flex items). + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size"> + <style> + .flexbox { + display: flex; + flex-direction: column; + border: 1px solid black; + margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ + width: 40px; + height: 40px; + + justify-content: flex-start; + align-items: flex-start; + + float: left; /* For testing in "rows" */ + } + br { clear: both; } + + .flexbox > * { + writing-mode: vertical-lr; + + /* Disable "min-width:auto"/"min-height:auto" to focus purely on + later channels of influence. */ + min-width: 0; + min-height: 0; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> + </head> + <body onload="checkLayout('.flexbox > img')"> + <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> + + <!-- Row 1: no special sizing: --> + <div class="flexbox"> + <img src="support/solidblue.png" data-expected-width="16" data-expected-height="16"> + </div> + <br> + + <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px" data-expected-width="30" data-expected-height="30"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 30px" data-expected-width="30" data-expected-height="30"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="flex: 0 0 30px" data-expected-width="30" data-expected-height="30"> + </div> + <br> + + <!-- Row 3: min main-size OR min cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="34" data-expected-height="34"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="34" data-expected-height="34"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + min-height: 34px" data-expected-width="34" data-expected-height="34"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px; + min-height: 30px" data-expected-width="34" data-expected-height="34"> + </div> + <br> + + <!-- Row 4: max main-size OR max cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px" data-expected-width="10" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-height: 10px" data-expected-width="10" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + max-height: 6px" data-expected-width="6" data-expected-height="6"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 6px; + max-height: 10px" data-expected-width="6" data-expected-height="6"> + </div> + <br> + + <!-- Row 5: min main-size vs. max cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + max-height: 10px" data-expected-width="30" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + min-height: 30px" data-expected-width="10" data-expected-height="30"> + </div> + <br> + + <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + height: 10px" data-expected-width="30" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + max-height: 10px" data-expected-width="30" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + height: 30px" data-expected-width="10" data-expected-height="30"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + min-height: 30px" data-expected-width="10" data-expected-height="30"> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-003.html b/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-003.html new file mode 100644 index 0000000000..21a63069ed --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-003.html @@ -0,0 +1,128 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title> + CSS Test: Testing how explicit main-size & cross-size constraints + influence sizing on stretched flex item w/ intrinsic ratio. + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size"> + <style> + .flexbox { + display: flex; + flex-direction: row; + border: 1px solid black; + margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ + width: 40px; + height: 40px; + + justify-content: flex-start; + align-items: stretch; + + float: left; /* For testing in "rows" */ + } + br { clear: both; } + + .flexbox > * { + /* Disable "min-width:auto"/"min-height:auto" to focus purely on + later channels of influence. */ + min-width: 0; + min-height: 0; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> + </head> + <body onload="checkLayout('.flexbox > img')"> + <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> + + <!-- Row 1: no special sizing: --> + <div class="flexbox"> + <img src="support/solidblue.png" data-expected-width="40" data-expected-height="40"> + </div> + <br> + + <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px" data-expected-width="30" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 30px" data-expected-width="30" data-expected-height="30"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="flex: 0 0 30px" data-expected-width="30" data-expected-height="40"> + </div> + <br> + + <!-- Row 3: min main-size OR min cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="40" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="40" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + min-height: 34px" data-expected-width="40" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px; + min-height: 30px" data-expected-width="40" data-expected-height="40"> + </div> + <br> + + <!-- Row 4: max main-size OR max cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px" data-expected-width="10" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-height: 10px" data-expected-width="10" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + max-height: 6px" data-expected-width="6" data-expected-height="6"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 6px; + max-height: 10px" data-expected-width="6" data-expected-height="10"> + </div> + <br> + + <!-- Row 5: min main-size vs. max cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + max-height: 10px" data-expected-width="30" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + min-height: 30px" data-expected-width="10" data-expected-height="40"> + </div> + <br> + + <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + height: 10px" data-expected-width="30" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + max-height: 10px" data-expected-width="30" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + height: 30px" data-expected-width="10" data-expected-height="30"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + min-height: 30px" data-expected-width="10" data-expected-height="40"> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-003v.html b/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-003v.html new file mode 100644 index 0000000000..4b957e586a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-003v.html @@ -0,0 +1,131 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title> + CSS Test: Testing how explicit main-size & cross-size constraints + influence sizing on stretched flex item w/ intrinsic ratio + (with a vertical writing-mode on the flex items). + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size"> + <style> + .flexbox { + display: flex; + flex-direction: row; + border: 1px solid black; + margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ + width: 40px; + height: 40px; + + justify-content: flex-start; + align-items: stretch; + + float: left; /* For testing in "rows" */ + } + br { clear: both; } + + .flexbox > * { + writing-mode: vertical-rl; + + /* Disable "min-width:auto"/"min-height:auto" to focus purely on + later channels of influence. */ + min-width: 0; + min-height: 0; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> + </head> + <body onload="checkLayout('.flexbox > img')"> + <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> + + <!-- Row 1: no special sizing: --> + <div class="flexbox"> + <img src="support/solidblue.png" data-expected-width="40" data-expected-height="40"> + </div> + <br> + + <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px" data-expected-width="30" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 30px" data-expected-width="30" data-expected-height="30"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="flex: 0 0 30px" data-expected-width="30" data-expected-height="40"> + </div> + <br> + + <!-- Row 3: min main-size OR min cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="40" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="40" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + min-height: 34px" data-expected-width="40" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px; + min-height: 30px" data-expected-width="40" data-expected-height="40"> + </div> + <br> + + <!-- Row 4: max main-size OR max cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px" data-expected-width="10" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-height: 10px" data-expected-width="10" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + max-height: 6px" data-expected-width="6" data-expected-height="6"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 6px; + max-height: 10px" data-expected-width="6" data-expected-height="10"> + </div> + <br> + + <!-- Row 5: min main-size vs. max cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + max-height: 10px" data-expected-width="30" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + min-height: 30px" data-expected-width="10" data-expected-height="40"> + </div> + <br> + + <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + height: 10px" data-expected-width="30" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + max-height: 10px" data-expected-width="30" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + height: 30px" data-expected-width="10" data-expected-height="30"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + min-height: 30px" data-expected-width="10" data-expected-height="40"> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-004.html b/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-004.html new file mode 100644 index 0000000000..36cb048e2e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-004.html @@ -0,0 +1,128 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title> + CSS Test: Testing how explicit main-size & cross-size constraints + influence sizing on stretched flex item w/ intrinsic ratio. + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size"> + <style> + .flexbox { + display: flex; + flex-direction: column; + border: 1px solid black; + margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ + width: 40px; + height: 40px; + + justify-content: flex-start; + align-items: stretch; + + float: left; /* For testing in "rows" */ + } + br { clear: both; } + + .flexbox > * { + /* Disable "min-width:auto"/"min-height:auto" to focus purely on + later channels of influence. */ + min-width: 0; + min-height: 0; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> + </head> + <body onload="checkLayout('.flexbox > img')"> + <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> + + <!-- Row 1: no special sizing: --> + <div class="flexbox"> + <img src="support/solidblue.png" data-expected-width="40" data-expected-height="40"> + </div> + <br> + + <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px" data-expected-width="30" data-expected-height="30"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 30px" data-expected-width="40" data-expected-height="30"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="flex: 0 0 30px" data-expected-width="40" data-expected-height="30"> + </div> + <br> + + <!-- Row 3: min main-size OR min cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="40" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="40" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + min-height: 34px" data-expected-width="40" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px; + min-height: 30px" data-expected-width="40" data-expected-height="40"> + </div> + <br> + + <!-- Row 4: max main-size OR max cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px" data-expected-width="10" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-height: 10px" data-expected-width="40" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + max-height: 6px" data-expected-width="10" data-expected-height="6"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 6px; + max-height: 10px" data-expected-width="6" data-expected-height="6"> + </div> + <br> + + <!-- Row 5: min main-size vs. max cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + max-height: 10px" data-expected-width="40" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + min-height: 30px" data-expected-width="10" data-expected-height="30"> + </div> + <br> + + <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + height: 10px" data-expected-width="40" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + max-height: 10px" data-expected-width="30" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + height: 30px" data-expected-width="10" data-expected-height="30"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + min-height: 30px" data-expected-width="10" data-expected-height="30"> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-004v.html b/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-004v.html new file mode 100644 index 0000000000..16cadce4b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-004v.html @@ -0,0 +1,131 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title> + CSS Test: Testing how explicit main-size & cross-size constraints + influence sizing on stretched flex item w/ intrinsic ratio + (with a vertical writing-mode on the flex items). + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size"> + <style> + .flexbox { + display: flex; + flex-direction: column; + border: 1px solid black; + margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ + width: 40px; + height: 40px; + + justify-content: flex-start; + align-items: stretch; + + float: left; /* For testing in "rows" */ + } + br { clear: both; } + + .flexbox > * { + writing-mode: vertical-rl; + + /* Disable "min-width:auto"/"min-height:auto" to focus purely on + later channels of influence. */ + min-width: 0; + min-height: 0; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> + </head> + <body onload="checkLayout('.flexbox > img')"> + <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> + + <!-- Row 1: no special sizing: --> + <div class="flexbox"> + <img src="support/solidblue.png" data-expected-width="40" data-expected-height="40"> + </div> + <br> + + <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px" data-expected-width="30" data-expected-height="30"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 30px" data-expected-width="40" data-expected-height="30"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="flex: 0 0 30px" data-expected-width="40" data-expected-height="30"> + </div> + <br> + + <!-- Row 3: min main-size OR min cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="40" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="40" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + min-height: 34px" data-expected-width="40" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px; + min-height: 30px" data-expected-width="40" data-expected-height="40"> + </div> + <br> + + <!-- Row 4: max main-size OR max cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px" data-expected-width="10" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-height: 10px" data-expected-width="40" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + max-height: 6px" data-expected-width="10" data-expected-height="6"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 6px; + max-height: 10px" data-expected-width="6" data-expected-height="6"> + </div> + <br> + + <!-- Row 5: min main-size vs. max cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + max-height: 10px" data-expected-width="40" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + min-height: 30px" data-expected-width="10" data-expected-height="30"> + </div> + <br> + + <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + height: 10px" data-expected-width="40" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + max-height: 10px" data-expected-width="30" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + height: 30px" data-expected-width="10" data-expected-height="30"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + min-height: 30px" data-expected-width="10" data-expected-height="30"> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-005.html b/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-005.html new file mode 100644 index 0000000000..c425095668 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-005.html @@ -0,0 +1,130 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title> + CSS Test: Testing how explicit main-size & cross-size constraints + influence sizing on non-stretched flexible flex item w/ intrinsic ratio. + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size"> + <style> + .flexbox { + display: flex; + flex-direction: row; + border: 1px solid black; + margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ + width: 40px; + height: 40px; + + justify-content: flex-start; + align-items: flex-start; + + float: left; /* For testing in "rows" */ + } + br { clear: both; } + + .flexbox > * { + flex: 1; + + /* Disable "min-width:auto"/"min-height:auto" to focus purely on + later channels of influence. */ + min-width: 0; + min-height: 0; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> + </head> + <body onload="checkLayout('.flexbox > img')"> + <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> + + <!-- Row 1: no special sizing: --> + <div class="flexbox"> + <img src="support/solidblue.png" data-expected-width="40" data-expected-height="40"> + </div> + <br> + + <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px" data-expected-width="40" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 30px" data-expected-width="40" data-expected-height="30"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="flex: 1 1 30px" data-expected-width="40" data-expected-height="40"> + </div> + <br> + + <!-- Row 3: min main-size OR min cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="40" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="40" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + min-height: 34px" data-expected-width="40" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px; + min-height: 30px" data-expected-width="40" data-expected-height="40"> + </div> + <br> + + <!-- Row 4: max main-size OR max cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px" data-expected-width="10" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-height: 10px" data-expected-width="40" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + max-height: 6px" data-expected-width="10" data-expected-height="6"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 6px; + max-height: 10px" data-expected-width="6" data-expected-height="6"> + </div> + <br> + + <!-- Row 5: min main-size vs. max cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + max-height: 10px" data-expected-width="40" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + min-height: 30px" data-expected-width="10" data-expected-height="30"> + </div> + <br> + + <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + height: 10px" data-expected-width="40" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + max-height: 10px" data-expected-width="40" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + height: 30px" data-expected-width="10" data-expected-height="30"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + min-height: 30px" data-expected-width="40" data-expected-height="40"> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-005v.html b/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-005v.html new file mode 100644 index 0000000000..4acb8e259a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-005v.html @@ -0,0 +1,132 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title> + CSS Test: Testing how explicit main-size & cross-size constraints + influence sizing on non-stretched flexible flex item w/ intrinsic ratio + (with a vertical writing-mode on the flex items). + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size"> + <style> + .flexbox { + display: flex; + flex-direction: row; + border: 1px solid black; + margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ + width: 40px; + height: 40px; + + justify-content: flex-start; + align-items: flex-start; + + float: left; /* For testing in "rows" */ + } + br { clear: both; } + + .flexbox > * { + flex: 1; + writing-mode: vertical-lr; + + /* Disable "min-width:auto"/"min-height:auto" to focus purely on + later channels of influence. */ + min-width: 0; + min-height: 0; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> + </head> + <body onload="checkLayout('.flexbox > img')"> + <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> + + <!-- Row 1: no special sizing: --> + <div class="flexbox"> + <img src="support/solidblue.png" data-expected-width="40" data-expected-height="40"> + </div> + <br> + + <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px" data-expected-width="40" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 30px" data-expected-width="40" data-expected-height="30"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="flex: 1 1 30px" data-expected-width="40" data-expected-height="40"> + </div> + <br> + + <!-- Row 3: min main-size OR min cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="40" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="40" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + min-height: 34px" data-expected-width="40" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px; + min-height: 30px" data-expected-width="40" data-expected-height="40"> + </div> + <br> + + <!-- Row 4: max main-size OR max cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px" data-expected-width="10" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-height: 10px" data-expected-width="40" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + max-height: 6px" data-expected-width="10" data-expected-height="6"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 6px; + max-height: 10px" data-expected-width="6" data-expected-height="6"> + </div> + <br> + + <!-- Row 5: min main-size vs. max cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + max-height: 10px" data-expected-width="40" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + min-height: 30px" data-expected-width="10" data-expected-height="30"> + </div> + <br> + + <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + height: 10px" data-expected-width="40" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + max-height: 10px" data-expected-width="40" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + height: 30px" data-expected-width="10" data-expected-height="30"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + min-height: 30px" data-expected-width="40" data-expected-height="40"> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-006.html b/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-006.html new file mode 100644 index 0000000000..e97305e707 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-006.html @@ -0,0 +1,130 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title> + CSS Test: Testing how explicit main-size & cross-size constraints + influence sizing on non-stretched flexible flex item w/ intrinsic ratio. + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size"> + <style> + .flexbox { + display: flex; + flex-direction: column; + border: 1px solid black; + margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ + width: 40px; + height: 40px; + + justify-content: flex-start; + align-items: flex-start; + + float: left; /* For testing in "rows" */ + } + br { clear: both; } + + .flexbox > * { + flex: 1; + + /* Disable "min-width:auto"/"min-height:auto" to focus purely on + later channels of influence. */ + min-width: 0; + min-height: 0; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> + </head> + <body onload="checkLayout('.flexbox > img')"> + <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> + + <!-- Row 1: no special sizing: --> + <div class="flexbox"> + <img src="support/solidblue.png" data-expected-width="40" data-expected-height="40"> + </div> + <br> + + <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px" data-expected-width="30" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 30px" data-expected-width="40" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="flex: 1 1 30px" data-expected-width="40" data-expected-height="40"> + </div> + <br> + + <!-- Row 3: min main-size OR min cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="40" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="40" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + min-height: 34px" data-expected-width="40" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px; + min-height: 30px" data-expected-width="40" data-expected-height="40"> + </div> + <br> + + <!-- Row 4: max main-size OR max cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px" data-expected-width="10" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-height: 10px" data-expected-width="10" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + max-height: 6px" data-expected-width="6" data-expected-height="6"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 6px; + max-height: 10px" data-expected-width="6" data-expected-height="10"> + </div> + <br> + + <!-- Row 5: min main-size vs. max cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + max-height: 10px" data-expected-width="30" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + min-height: 30px" data-expected-width="10" data-expected-height="40"> + </div> + <br> + + <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + height: 10px" data-expected-width="40" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + max-height: 10px" data-expected-width="30" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + height: 30px" data-expected-width="10" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + min-height: 30px" data-expected-width="10" data-expected-height="40"> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-006v.html b/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-006v.html new file mode 100644 index 0000000000..4f42288737 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-006v.html @@ -0,0 +1,132 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title> + CSS Test: Testing how explicit main-size & cross-size constraints + influence sizing on non-stretched flexible flex item w/ intrinsic ratio + (with a vertical writing-mode on the flex items). + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size"> + <style> + .flexbox { + display: flex; + flex-direction: column; + border: 1px solid black; + margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ + width: 40px; + height: 40px; + + justify-content: flex-start; + align-items: flex-start; + + float: left; /* For testing in "rows" */ + } + br { clear: both; } + + .flexbox > * { + flex: 1; + writing-mode: vertical-lr; + + /* Disable "min-width:auto"/"min-height:auto" to focus purely on + later channels of influence. */ + min-width: 0; + min-height: 0; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> + </head> + <body onload="checkLayout('.flexbox > img')"> + <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> + + <!-- Row 1: no special sizing: --> + <div class="flexbox"> + <img src="support/solidblue.png" data-expected-width="40" data-expected-height="40"> + </div> + <br> + + <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px" data-expected-width="30" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 30px" data-expected-width="40" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="flex: 1 1 30px" data-expected-width="40" data-expected-height="40"> + </div> + <br> + + <!-- Row 3: min main-size OR min cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="40" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="40" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + min-height: 34px" data-expected-width="40" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px; + min-height: 30px" data-expected-width="40" data-expected-height="40"> + </div> + <br> + + <!-- Row 4: max main-size OR max cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px" data-expected-width="10" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-height: 10px" data-expected-width="10" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + max-height: 6px" data-expected-width="6" data-expected-height="6"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 6px; + max-height: 10px" data-expected-width="6" data-expected-height="10"> + </div> + <br> + + <!-- Row 5: min main-size vs. max cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + max-height: 10px" data-expected-width="30" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + min-height: 30px" data-expected-width="10" data-expected-height="40"> + </div> + <br> + + <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + height: 10px" data-expected-width="40" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + max-height: 10px" data-expected-width="30" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + height: 30px" data-expected-width="10" data-expected-height="40"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + min-height: 30px" data-expected-width="10" data-expected-height="40"> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-007.html b/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-007.html new file mode 100644 index 0000000000..16728b8c7e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-007.html @@ -0,0 +1,135 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title> + CSS Test: Testing how explicit main-size & cross-size constraints + influence sizing on non-stretched flex item w/ intrinsic ratio, + some padding, and box-sizing:border-box. + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size"> + <style> + .flexbox { + display: flex; + flex-direction: row; + border: 1px solid black; + margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ + width: 40px; + height: 40px; + + justify-content: flex-start; + align-items: flex-start; + + float: left; /* For testing in "rows" */ + } + img { + padding: 1px 2px 3px 4px; + box-sizing: border-box; + background: pink; + } + + br { clear: both; } + + .flexbox > * { + /* Disable "min-width:auto"/"min-height:auto" to focus purely on + later channels of influence. */ + min-width: 0; + min-height: 0; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> + </head> + <body onload="checkLayout('.flexbox > img')"> + <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> + + <!-- Row 1: no special sizing: --> + <div class="flexbox"> + <img src="support/solidblue.png" data-expected-width="22" data-expected-height="20"> + </div> + <br> + + <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px" data-expected-width="30" data-expected-height="28"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 30px" data-expected-width="32" data-expected-height="30"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="flex: 0 0 30px" data-expected-width="30" data-expected-height="28"> + </div> + <br> + + <!-- Row 3: min main-size OR min cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="34" data-expected-height="32"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="36" data-expected-height="34"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + min-height: 34px" data-expected-width="36" data-expected-height="34"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px; + min-height: 30px" data-expected-width="34" data-expected-height="32"> + </div> + <br> + + <!-- Row 4: max main-size OR max cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 16px" data-expected-width="16" data-expected-height="14"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-height: 16px" data-expected-width="18" data-expected-height="16"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 20px; + max-height: 14px" data-expected-width="16" data-expected-height="14"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 14px; + max-height: 20px" data-expected-width="14" data-expected-height="12"> + </div> + <br> + + <!-- Row 5: min main-size vs. max cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + max-height: 10px" data-expected-width="30" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + min-height: 30px" data-expected-width="10" data-expected-height="30"> + </div> + <br> + + <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + height: 10px" data-expected-width="30" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + max-height: 10px" data-expected-width="30" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + height: 30px" data-expected-width="10" data-expected-height="30"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + min-height: 30px" data-expected-width="10" data-expected-height="30"> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-007v.html b/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-007v.html new file mode 100644 index 0000000000..c9fbcc3e98 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/image-as-flexitem-size-007v.html @@ -0,0 +1,137 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title> + CSS Test: Testing how explicit main-size & cross-size constraints + influence sizing on non-stretched flex item w/ intrinsic ratio, + some padding, box-sizing:border-box, and a vertical writing-mode. + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size"> + <style> + .flexbox { + display: flex; + flex-direction: row; + border: 1px solid black; + margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ + width: 40px; + height: 40px; + + justify-content: flex-start; + align-items: flex-start; + + float: left; /* For testing in "rows" */ + } + img { + padding: 1px 2px 3px 4px; + box-sizing: border-box; + background: pink; + } + + br { clear: both; } + + .flexbox > * { + writing-mode: vertical-lr; + + /* Disable "min-width:auto"/"min-height:auto" to focus purely on + later channels of influence. */ + min-width: 0; + min-height: 0; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> + </head> + <body onload="checkLayout('.flexbox > img')"> + <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> + + <!-- Row 1: no special sizing: --> + <div class="flexbox"> + <img src="support/solidblue.png" data-expected-width="22" data-expected-height="20"> + </div> + <br> + + <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px" data-expected-width="30" data-expected-height="28"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 30px" data-expected-width="32" data-expected-height="30"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="flex: 0 0 30px" data-expected-width="30" data-expected-height="28"> + </div> + <br> + + <!-- Row 3: min main-size OR min cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="34" data-expected-height="32"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="36" data-expected-height="34"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + min-height: 34px" data-expected-width="36" data-expected-height="34"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px; + min-height: 30px" data-expected-width="34" data-expected-height="32"> + </div> + <br> + + <!-- Row 4: max main-size OR max cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 16px" data-expected-width="16" data-expected-height="14"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-height: 16px" data-expected-width="18" data-expected-height="16"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 20px; + max-height: 14px" data-expected-width="16" data-expected-height="14"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 14px; + max-height: 20px" data-expected-width="14" data-expected-height="12"> + </div> + <br> + + <!-- Row 5: min main-size vs. max cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + max-height: 10px" data-expected-width="30" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + min-height: 30px" data-expected-width="10" data-expected-height="30"> + </div> + <br> + + <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + height: 10px" data-expected-width="30" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + max-height: 10px" data-expected-width="30" data-expected-height="10"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + height: 30px" data-expected-width="10" data-expected-height="30"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + min-height: 30px" data-expected-width="10" data-expected-height="30"> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/image-items-flake-001.html b/testing/web-platform/tests/css/css-flexbox/image-items-flake-001.html new file mode 100644 index 0000000000..90319f1ad8 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/image-items-flake-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#content-size-suggestion"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Chrome had a bug https://crbug.com/1042329 where min-height:auto was not updated after an image load when the image has a specified height and width."> + +<style> +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="reference-overlapped-red"></div> + +<div style="display: flex; flex-direction: column; height: 5px"> + <img style="width: 100px; height: 100px;" src="support/200x200-green.png"> + <script> + document.body.offsetTop; + // This test relies on the harness screenshotting after the image has loaded. + </script> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/image-nested-within-definite-column-flexbox.html b/testing/web-platform/tests/css/css-flexbox/image-nested-within-definite-column-flexbox.html new file mode 100644 index 0000000000..7bfeb4de65 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/image-nested-within-definite-column-flexbox.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1233330"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="background: green; height: 100px; width: min-content; display:flex; flex-direction:column;"> + <div style="height:100%;"> + <img style="min-height: 100%;" src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1px' height='1px'></svg>" /> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/inheritance.html b/testing/web-platform/tests/css/css-flexbox/inheritance.html new file mode 100644 index 0000000000..aad2567773 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/inheritance.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Inheritance of CSS Flexible Box Layout properties</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#property-index"> +<link rel="help" href="https://drafts.csswg.org/css-align/#property-index"> +<meta name="assert" content="Properties do not inherit, according to the spec."> +<meta name="assert" content="Properties have initial values according to the spec."> +<meta name="assert" content="align-content, align-items, justify-content have initial value 'normal' as specified in CSS Box Alignment."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/inheritance-testcommon.js"></script> +<style> + #container, #target { + display: flex; + } +</style> +</head> +<body> +<div id="container"> + <div id="target"></div> +</div> +<script> +assert_not_inherited('align-content', 'normal', 'center'); // initial value was "stretch" in flexbox-1 +assert_not_inherited('align-items', 'normal', 'center'); // initial value was "stretch" in flexbox-1 +assert_not_inherited('align-self', 'auto', 'stretch'); +assert_not_inherited('flex-basis', 'auto', '10px'); +assert_not_inherited('flex-direction', 'row', 'column'); +assert_not_inherited('flex-grow', '0', '2'); +assert_not_inherited('flex-shrink', '1', '3'); +assert_not_inherited('flex-wrap', 'nowrap', 'wrap-reverse'); +assert_not_inherited('justify-content', 'normal', 'center'); // initial value was "flex-start" in flexbox-1 +assert_not_inherited('order', '0', '2'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/inline-flex-editing-crash.html b/testing/web-platform/tests/css/css-flexbox/inline-flex-editing-crash.html new file mode 100644 index 0000000000..01917e3726 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/inline-flex-editing-crash.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>CSS Flexbox: inline-flex layout with editing operations</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers"> +<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=77772"> +<link rel="help" href="https://crbug.com/118662"> +<meta name="assert" content="This test ensures that inline-flex layout does not crash with editing operations."> +<style>#el0::first-letter, #el0:first-child { height: 100px; }</style> +<div id='container' contentEditable> + <a> + <img> + <div id="el0" style="display: inline-flex"> + <pre>AAAAA</pre> + </div> + </a> +</div> +<script> +window.getSelection().selectAllChildren(document.getElementById('container')); +document.execCommand('FormatBlock', false, '<h5>'); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/inline-flex-editing-with-updating-text-crash.html b/testing/web-platform/tests/css/css-flexbox/inline-flex-editing-with-updating-text-crash.html new file mode 100644 index 0000000000..bdf7df85d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/inline-flex-editing-with-updating-text-crash.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>CSS Flexbox: inline-flex layout with updating text and editing operations</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers"> +<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=77772"> +<link rel="help" href="https://crbug.com/118662"> +<meta name="assert" content="This test ensures that inline-flex layout does not crash with updating text and editing operations."> +<style>#el0::first-letter, #el0:first-child { height: 10px; }</style> +<div id='container' contentEditable> + <a> + <img> + <div id="el0" style="display: inline-flex"> + <pre></pre> + </div> + </a> +</div> +<script> +document.querySelector('pre').textContent = 'AA\u0605'; +window.getSelection().selectAllChildren(document.getElementById('container')); +document.execCommand('FormatBlock', false, '<h1>'); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/inline-flex-frameset-main-axis-crash.html b/testing/web-platform/tests/css/css-flexbox/inline-flex-frameset-main-axis-crash.html new file mode 100644 index 0000000000..434897cc7a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/inline-flex-frameset-main-axis-crash.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html style="display: inline-flex;"> +<title>CSS Flexbox: the main axis calculation with frameset</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#main-axis"> +<link rel="help" href="https://crbug.com/335121"> +<meta name="assert" content="This test ensures that frameset does not crash on computing the main axis."> +<frameset></frameset> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/inline-flex-min-content-height.html b/testing/web-platform/tests/css/css-flexbox/inline-flex-min-content-height.html new file mode 100644 index 0000000000..b84b9afc0b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/inline-flex-min-content-height.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Layout Test: Atomic inline Flexible Box with height: min-content</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing/#valdef-width-min-content"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name=assert content="This test checks that height: min-content computes to 'auto' for atomic inline level flexible box."> +<style> + #flexbox { + background-color: green; + display: inline-flex; + height: min-content; + } +</style> +<p>Test passes if there is a filled green square.</p> +<div id="flexbox"> + <div id="item"> + <div style="width:100px; height:100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/inline-flex.html b/testing/web-platform/tests/css/css-flexbox/inline-flex.html new file mode 100644 index 0000000000..1f21ae35a8 --- /dev/null +++ b/testing/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/testing/web-platform/tests/css/css-flexbox/inline-flexbox-absurd-block-size-crash.html b/testing/web-platform/tests/css/css-flexbox/inline-flexbox-absurd-block-size-crash.html new file mode 100644 index 0000000000..57b119a65b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/inline-flexbox-absurd-block-size-crash.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1826635"> +<style> +* { + flex-flow: wrap-reverse; + display: inline-flex; + visibility: collapse; + border-style: inset; +} +</style> +<div style="padding-bottom: 3959291058%"></div> diff --git a/testing/web-platform/tests/css/css-flexbox/inline-flexbox-vertical-rl-image-flexitem-crash-print.html b/testing/web-platform/tests/css/css-flexbox/inline-flexbox-vertical-rl-image-flexitem-crash-print.html new file mode 100644 index 0000000000..0de07b1870 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/inline-flexbox-vertical-rl-image-flexitem-crash-print.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1805522"> +<!-- This is a printing crashtest, but wpt doesn't support it. + We work around it by ensuring the test renders something non-blank. --> +<link rel="mismatch" href="/common/blank.html"> +<style> +#a { + height: 0.473em; + writing-mode: vertical-rl; + display: -webkit-inline-box; +} +#b { + overflow-x: scroll; + height: fit-content; + content: url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7) +} +</style> +<dl id="a"> +<dd id="b"> diff --git a/testing/web-platform/tests/css/css-flexbox/inline-flexbox-wrap-vertically-width-calculation.html b/testing/web-platform/tests/css/css-flexbox/inline-flexbox-wrap-vertically-width-calculation.html new file mode 100644 index 0000000000..e9010cf96c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/inline-flexbox-wrap-vertically-width-calculation.html @@ -0,0 +1,151 @@ +<!DOCTYPE html> +<html> +<title>CSS Flexbox: Inline flexbox width calculation with flex-direction: column and flex-wrap</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-wrap-property"> +<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#Computing_widths_and_margins"> +<link href="support/flexbox.css" rel="stylesheet"> +<meta name="assert" content="This test checks that width is correctly computed for flexbox with flex-direction: column and flex-wrap."> +<style> +.inline-flexbox { + background-color: #aaa; + position: relative; +} + +.writing-mode-vertical { + writing-mode: vertical-rl; +} +.inline-flexbox > * { + flex: none; +} +.inline-flexbox :nth-child(1) { + background-color: lightblue; +} +.inline-flexbox :nth-child(2) { + background-color: lightgreen; +} +.inline-flexbox :nth-child(3) { + background-color: pink; +} +.inline-flexbox :nth-child(4) { + background-color: yellow; +} +</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 column align-content-flex-start wrap" data-expected-width="110" data-expected-height="60"> + <div style="width: 100px; height: 20px" data-offset-x="0" data-offset-y="0"></div> + <div style="width: 50px; height: 10px" data-offset-x="0" data-offset-y="20"></div> + <div style="width: 70px; height: 10px" data-offset-x="0" data-offset-y="30"></div> + <div style="width: 110px; height: 20px" data-offset-x="0" data-offset-y="40"></div> +</div> + +<div class="inline-flexbox column align-content-flex-start wrap" style="height: 35px" data-expected-width="80" data-expected-height="35"> + <div style="width: 10px; height: 20px" data-offset-x="0" data-offset-y="0"></div> + <div style="width: 50px; height: 10px" data-offset-x="0" data-offset-y="20"></div> + <div style="width: 80px; height: 10px" data-offset-x="50" data-offset-y="0"></div> + <div style="width: 40px; height: 20px" data-offset-x="50" data-offset-y="10"></div> +</div> + +<div class="inline-flexbox column align-content-flex-start wrap writing-mode-vertical" data-expected-width="280" data-expected-height="70"> + <div style="width: 50px; height: 20px" data-offset-x="230" data-offset-y="0"></div> + <div style="width: 100px; height: 70px" data-offset-x="130" data-offset-y="0"></div> + <div style="width: 30px; height: 50px" data-offset-x="100" data-offset-y="0"></div> + <div style="width: 100px; height: 30px" data-offset-x="0" data-offset-y="0"></div> +</div> + +<div class="inline-flexbox column align-content-flex-start wrap writing-mode-vertical" style="width: 200px" data-expected-width="200" data-expected-height="70"> + <div style="width: 50px; height: 20px" data-offset-x="150" data-offset-y="0"></div> + <div style="width: 100px; height: 70px" data-offset-x="50" data-offset-y="0"></div> + <div style="width: 30px; height: 50px" data-offset-x="20" data-offset-y="0"></div> + <div style="width: 100px; height: 30px" data-offset-x="100" data-offset-y="70"></div> +</div> + +<div class="inline-flexbox column align-content-flex-start wrap-reverse" data-expected-width="110" data-expected-height="60"> + <div style="width: 100px; height: 20px" data-offset-x="10" data-offset-y="0"></div> + <div style="width: 50px; height: 10px" data-offset-x="60" data-offset-y="20"></div> + <div style="width: 70px; height: 10px" data-offset-x="40" data-offset-y="30"></div> + <div style="width: 110px; height: 20px" data-offset-x="0" data-offset-y="40"></div> +</div> + +<div class="inline-flexbox column align-content-flex-start wrap-reverse" style="height: 35px" data-expected-width="80" data-expected-height="35"> + <div style="width: 10px; height: 20px" data-offset-x="70" data-offset-y="0"></div> + <div style="width: 50px; height: 10px" data-offset-x="30" data-offset-y="20"></div> + <div style="width: 80px; height: 10px" data-offset-x="-50" data-offset-y="0"></div> + <div style="width: 40px; height: 20px" data-offset-x="-10" data-offset-y="10"></div> +</div> + +<div class="inline-flexbox column align-content-flex-start wrap-reverse writing-mode-vertical" data-expected-width="280" data-expected-height="70"> + <div style="width: 50px; height: 20px" data-offset-x="230" data-offset-y="50"></div> + <div style="width: 100px; height: 50px" data-offset-x="130" data-offset-y="20"></div> + <div style="width: 30px; height: 30px" data-offset-x="100" data-offset-y="40"></div> + <div style="width: 100px; height: 70px" data-offset-x="0" data-offset-y="0"></div> +</div> + +<div class="inline-flexbox column align-content-flex-start wrap-reverse writing-mode-vertical" style="width: 200px" data-expected-width="200" data-expected-height="70"> + <div style="width: 50px; height: 20px" data-offset-x="150" data-offset-y="50"></div> + <div style="width: 100px; height: 50px" data-offset-x="50" data-offset-y="20"></div> + <div style="width: 30px; height: 70px" data-offset-x="20" data-offset-y="0"></div> + <div style="width: 100px; height: 30px" data-offset-x="100" data-offset-y="-30"></div> +</div> + +<div class="inline-flexbox column-reverse align-content-flex-start wrap" data-expected-width="110" data-expected-height="60"> + <div style="width: 100px; height: 20px" data-offset-x="0" data-offset-y="40"></div> + <div style="width: 50px; height: 10px" data-offset-x="0" data-offset-y="30"></div> + <div style="width: 70px; height: 10px" data-offset-x="0" data-offset-y="20"></div> + <div style="width: 110px; height: 20px" data-offset-x="0" data-offset-y="0"></div> +</div> + +<div class="inline-flexbox column-reverse align-content-flex-start wrap" style="height: 35px" data-expected-width="80" data-expected-height="35"> + <div style="width: 10px; height: 20px" data-offset-x="0" data-offset-y="15"></div> + <div style="width: 50px; height: 10px" data-offset-x="0" data-offset-y="5"></div> + <div style="width: 80px; height: 10px" data-offset-x="50" data-offset-y="25"></div> + <div style="width: 40px; height: 20px" data-offset-x="50" data-offset-y="5"></div> +</div> + +<div class="inline-flexbox column-reverse align-content-flex-start wrap writing-mode-vertical" data-expected-width="280" data-expected-height="70"> + <div style="width: 50px; height: 20px" data-offset-x="0" data-offset-y="0"></div> + <div style="width: 100px; height: 50px" data-offset-x="50" data-offset-y="0"></div> + <div style="width: 30px; height: 70px" data-offset-x="150" data-offset-y="0"></div> + <div style="width: 100px; height: 30px" data-offset-x="180" data-offset-y="0"></div> +</div> + +<div class="inline-flexbox column-reverse align-content-flex-start wrap writing-mode-vertical" style="width: 200px" data-expected-width="200" data-expected-height="70"> + <div style="width: 50px; height: 20px" data-offset-x="0" data-offset-y="0"></div> + <div style="width: 100px; height: 70px" data-offset-x="50" data-offset-y="0"></div> + <div style="width: 30px; height: 50px" data-offset-x="150" data-offset-y="0"></div> + <div style="width: 100px; height: 30px" data-offset-x="0" data-offset-y="70"></div> +</div> + +<div class="inline-flexbox column-reverse align-content-flex-start wrap-reverse" data-expected-width="110" data-expected-height="60"> + <div style="width: 100px; height: 20px" data-offset-x="10" data-offset-y="40"></div> + <div style="width: 50px; height: 10px" data-offset-x="60" data-offset-y="30"></div> + <div style="width: 70px; height: 10px" data-offset-x="40" data-offset-y="20"></div> + <div style="width: 110px; height: 20px" data-offset-x="0" data-offset-y="0"></div> +</div> + +<div class="inline-flexbox column-reverse align-content-flex-start wrap-reverse" style="height: 35px" data-expected-width="80" data-expected-height="35"> + <div style="width: 10px; height: 20px" data-offset-x="70" data-offset-y="15"></div> + <div style="width: 50px; height: 10px" data-offset-x="30" data-offset-y="5"></div> + <div style="width: 80px; height: 10px" data-offset-x="-50" data-offset-y="25"></div> + <div style="width: 40px; height: 20px" data-offset-x="-10" data-offset-y="5"></div> +</div> + +<div class="inline-flexbox column-reverse align-content-flex-start wrap-reverse writing-mode-vertical" data-expected-width="280" data-expected-height="70"> + <div style="width: 50px; height: 70px" data-offset-x="0" data-offset-y="0"></div> + <div style="width: 100px; height: 20px" data-offset-x="50" data-offset-y="50"></div> + <div style="width: 30px; height: 50px" data-offset-x="150" data-offset-y="20"></div> + <div style="width: 100px; height: 30px" data-offset-x="180" data-offset-y="40"></div> +</div> + +<div class="inline-flexbox column-reverse align-content-flex-start wrap-reverse writing-mode-vertical" style="width: 200px" data-expected-width="200" data-expected-height="70"> + <div style="width: 50px; height: 20px" data-offset-x="0" data-offset-y="50"></div> + <div style="width: 100px; height: 50px" data-offset-x="50" data-offset-y="20"></div> + <div style="width: 30px; height: 30px" data-offset-x="150" data-offset-y="40"></div> + <div style="width: 100px; height: 70px" data-offset-x="0" data-offset-y="-50"></div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_break-after-column-item.html b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_break-after-column-item.html new file mode 100644 index 0000000000..f015d29f7c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_break-after-column-item.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | break-after, column, item</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#pagination"> +<meta name="flags" content="interact paged"> +<style> +* {widows: 1; orphans: 1;} +div { + border: 1px solid white; + width: 20em; + + display: flex; + flex-direction: column; +} +p { + margin: 0; + height: 2em; + + flex: 1; +} +@media projection, print { + p:first-child { + break-after: always; + } +} +</style> + +<h4>Enter fullscreen or print preview. You should not see the word fail + on the first page after doing that.</h4> + +<div> + <p></p> + <p>fail</p> + <p>fail</p> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_break-after-column-lastitem.html b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_break-after-column-lastitem.html new file mode 100644 index 0000000000..55514a05b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_break-after-column-lastitem.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>flexbox | break-after, column, item</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#pagination"> +<meta name="flags" content="interact paged"> +<style> +* {widows: 1; orphans: 1;} +div { + background: red; + border: 1px solid white; + width: 20em; + + display: flex; + flex-direction: column; +} +p { + background: white; + margin: 0; + height: 2em; + + flex: 1; +} +@media projection, print { + p { + break-after: always; + } +} +</style> + +<h4>There should not be any red anytime. Enter fullscreen or print + preview. You should not see the word fail on the first page + after doing that.</h4> + +<div> + <p></p> +</div> +<h1>fail</h1> diff --git a/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_break-after-container.html b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_break-after-container.html new file mode 100644 index 0000000000..69698bf670 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_break-after-container.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title>flexbox | break-after, singleline, container</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#pagination"> +<meta name="flags" content="interact paged"> +<style> +* {widows: 1; orphans: 1;} +div { + background: red; + border: 1px solid white; + width: 20em; + + display: flex; +} +p { + background: white; + margin: 0; + height: 2em; + + flex: 1; +} +@media projection, print { + div { + break-after: always; + } +} +</style> + +<h4>There should not be any red anytime. Enter fullscreen or print + preview. You should not see the word fail on the first page + after doing that.</h4> + +<div> + <p></p> +</div> +<h1>fail</h1> diff --git a/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_break-after-item.html b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_break-after-item.html new file mode 100644 index 0000000000..659967853e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_break-after-item.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title>flexbox | break-after, singleline, item</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#pagination"> +<meta name="flags" content="interact paged"> +<style> +* {widows: 1; orphans: 1;} +div { + background: red; + border: 1px solid white; + width: 20em; + + display: flex; +} +p { + background: white; + margin: 0; + height: 2em; + + flex: 1; +} +@media projection, print { + p { + break-after: always; + } +} +</style> + +<h4>There should not be any red on the first page either onload, in + print preview, or fullscreen. Enter fullscreen or print preview. + You should not see the word fail after that.</h4> + +<div> + <p></p> +</div> +<h1>fail</h1> diff --git a/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_break-after-line-order.html b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_break-after-line-order.html new file mode 100644 index 0000000000..3f2da0775f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_break-after-line-order.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<title>flexbox | order, break-after, multiline</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#pagination"> +<meta name="flags" content="interact paged"> +<style> +* {widows: 1; orphans: 1;} +div { + background: red; + border: 1px solid black; + width: 20em; + + display: flex; + flex-wrap: wrap; +} +p { + background: white; + margin: 0; + width: 100%; + height: 2em; + + flex: 1 0 auto; +} +p+p {background: red;} +@media projection, print { + p:first-child { + break-after: always; + background: red; + order: 0; + } + p+p { + background: yellow; + order: -1; + } +} +</style> + +<h4>Enter fullscreen or print preview. There should be no red.</h4> + +<div> + <p></p> + <p></p> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_break-after-line.html b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_break-after-line.html new file mode 100644 index 0000000000..74b7033603 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_break-after-line.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>flexbox | break-after, line</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#pagination"> +<meta name="flags" content="interact paged"> +<style> +* {widows: 1; orphans: 1;} +div { + width: 20em; + + display: flex; + flex-wrap: wrap; +} +p { + background: white; + margin: 0; + width: 100%; + height: 2em; + + flex: 1 0 auto; +} +p+p {background: red;} +@media projection, print { + p:first-child { + break-after: always; + background: yellow; + } +} +</style> + +<h4>Enter fullscreen or print preview. There should be no red on the + first page.</h4> + +<div> + <p></p> + <p></p> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_break-after-multiline.html b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_break-after-multiline.html new file mode 100644 index 0000000000..6cd0357528 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_break-after-multiline.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | break-after, multiline</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#pagination"> +<meta name="flags" content="interact paged"> +<style> +* {widows: 1; orphans: 1;} +div { + border: 1px solid white; + width: 20em; + + display: flex; + flex-wrap: wrap; +} +p { + background: yellow; + margin: 0; + height: 2em; + + flex: 1 0 10em; +} +@media projection, print { + #test {break-after: always;} + #test~p {background: red;} +} +</style> + +<h4>There should not be any red in fullscreen or print preview</h4> + +<div> + <p></p> + <p id="test"></p> + <p></p> + <p></p> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_break-before-column-firstitem.html b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_break-before-column-firstitem.html new file mode 100644 index 0000000000..58d897e44a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_break-before-column-firstitem.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title>flexbox | break-before, column, item</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#pagination"> +<meta name="flags" content="interact paged"> +<style> +* {widows: 1; orphans: 1;} +div { + background: red; + border: 1px solid white; + width: 20em; + + display: flex; + flex-direction: column; +} +p { + background: white; + margin: 0; + height: 2em; + + flex: 1; +} +@media projection, print { + p { + break-before: always; + } +} +</style> + +<h4>There should not be any red anytime. Enter fullscreen or print + preview. You should not see the word fail on the first page + after doing that.</h4> + +<div> + <p>fail</p> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_break-before-column-item.html b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_break-before-column-item.html new file mode 100644 index 0000000000..dac2b12bef --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_break-before-column-item.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title>flexbox | break-before, column, item</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#pagination"> +<meta name="flags" content="interact paged"> +<style> +* {widows: 1; orphans: 1;} +div { + border: 1px solid white; + width: 20em; + + display: flex; + flex-direction: column; +} +p { + background: white; + margin: 0; + height: 2em; + + flex: 1; +} +@media projection, print { + p:last-child { + break-before: always; + } +} +</style> + +<h4>Enter fullscreen or print preview. You should not see the word fail + on the first page after doing that.</h4> + +<div> + <p></p> + <p></p> + <p>fail</p> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_break-before-container.html b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_break-before-container.html new file mode 100644 index 0000000000..235ae30d24 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_break-before-container.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | break-before, singleline, container</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#pagination"> +<meta name="flags" content="interact paged"> +<style> +* {widows: 1; orphans: 1;} +div { + background: red; + border: 1px solid white; + width: 20em; + + display: flex; +} +p { + background: white; + margin: 0; + height: 2em; + + flex: 1; +} +@media projection, print { + div { + break-before: always; + } +} +</style> + +<h4>There should not be any red anytime. Enter fullscreen or print + preview. You should not see the word fail on the first page + after doing that.</h4> + +<div> + <p>fail</p> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_break-before-item.html b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_break-before-item.html new file mode 100644 index 0000000000..5f2e8969b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_break-before-item.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>flexbox | break-before, singleline, item</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#pagination"> +<meta name="flags" content="interact paged"> +<style> +* {widows: 1; orphans: 1;} +div { + background: red; + border: 1px solid white; + width: 20em; + + display: flex; +} +p { + background: white; + margin: 0; + height: 2em; + + flex: 1; +} +@media projection, print { + p { + break-before: always; + } +} +</style> + +<h4>There should not be any red anytime. Enter fullscreen or print + preview. You should not see the word fail after that.</h4> + +<div> + <p>fail</p> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_break-before-multiline.html b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_break-before-multiline.html new file mode 100644 index 0000000000..a19b0e048e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_break-before-multiline.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>flexbox | break-before, multiline</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#pagination"> +<meta name="flags" content="interact paged"> +<style> +* {widows: 1; orphans: 1;} +div { + border: 1px solid white; + width: 20em; + + display: flex; + flex-wrap: wrap; +} +p { + background: yellow; + margin: 0; + height: 2em; + + flex: 1 0 10em; +} +@media projection, print { + #test {break-before: always;} + #test, #test+p {background: red;} +} +</style> + +<h4>There should not be any red in fullscreen or print preview</h4> + +<div> + <p></p> + <p></p> + <p id="test"></p> + <p></p> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_break-natural.html b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_break-natural.html new file mode 100644 index 0000000000..4f69d1582a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_break-natural.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>flexbox | natural breaks</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#pagination"> +<meta name="flags" content="interact paged"> +<style> +* { + widows: 1; + orphans: 1; + margin: 0; + height: 100%; +} +body { + display: flex; + flex-direction: column; +} +div { + height: 75%; + flex: 0 0 auto; +} +@media print { + div { + break-inside: avoid; + } + div+div { + border-top: 1em solid red; + } +} +</style> + +<div>Enter print preview. You should not see red or the word fail on the + first page.</div> + +<div>FAIL</div> diff --git a/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_flex-basis-transitions.html b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_flex-basis-transitions.html new file mode 100644 index 0000000000..387147aae9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_flex-basis-transitions.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<title>flexbox | transitioned flex-basis</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property"> +<meta name="flags" content="interact"> +<style> +div { + width: 20em; + height: 8em; + + display: flex; +} +span { + background: yellow; + width: 8em; + flex: 1 1 0%; +} +#test, p+div { + background: #3366cc; +} +div:hover #test { + transition: flex-basis 4s; + flex-basis: 100%; +} +p~div { + margin-right: 1em; + float: left; + display: block; +} +p~div span { + width: auto; + height: 8em; + float: left; +} +p~div~div span { + width: 5em; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span id="test">four</span> +</div> + +<p>Verify that the box above looks exactly like the second of the boxes +below. Then hover the box above and leave the mouse there for 4 seconds. +After the specified time, the box above should look exactly like the +first of the boxes below.</p> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + four +</div> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span id="test">four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_flex-grow-transitions.html b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_flex-grow-transitions.html new file mode 100644 index 0000000000..d78088d47e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_flex-grow-transitions.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<title>flexbox | transitioned flex-grow</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-grow-property"> +<meta name="flags" content="interact"> +<style> +div { + width: 20em; + height: 8em; + + display: flex; +} +span { + background: yellow; + width: 8em; + flex: 1 0 0%; +} +#test, .ref { + background: #3366cc; +} +div:hover #test { + transition: flex-grow 4s; + flex-grow: 2; +} +p~div { + margin-right: 1em; + float: left; + display: block; +} +p~div span { + width: 5em; + height: 8em; + float: left; +} +p~div~div span { + width: 4em; +} +p~div~div span.ref { + width: 8em; +} +</style> + +<div> + <span>one</span> + <span id="test">two</span> + <span>three</span> + <span>four</span> +</div> + +<p>Verify that the box above looks exactly like the first of the boxes +below. Then hover the box above and leave the mouse there for 4 seconds. +After the specified time, the box above should look exactly like the +second of the boxes below.</p> + +<div> + <span>one</span> + <span class="ref">two</span> + <span>three</span> + <span>four</span> +</div> + +<div> + <span>one</span> + <span class="ref">two</span> + <span>three</span> + <span>four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_flex-shrink-transitions-invalid.html b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_flex-shrink-transitions-invalid.html new file mode 100644 index 0000000000..855bd19038 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_flex-shrink-transitions-invalid.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<title>flexbox | invalid flex-shrink transition</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-shrink-property"> +<meta name="flags" content="interact"> +<style> +div { + width: 20em; + height: 8em; + + display: flex; +} +span { + background: yellow; + width: 8em; + flex: 0 1 auto; +} +#test, .ref { + background: #3366cc; +} +div:hover #test { + transition: flex-shrink 4s; + flex-shrink: 0; +} +p~div { + margin-right: 1em; + float: left; + display: block; +} +p~div span { + width: 5em; + height: 8em; + float: left; +} +p~div~div span { + width: 4em; +} +p~div~div span.ref { + width: 8em; +} +</style> + +<div> + <span>x</span> + <span id="test"></span> + <span>x</span> + <span>x</span> +</div> + +<p>Verify that the box above looks exactly like the first of the boxes +below. Then hover the box above. On hover, <em>instantaneously</em>, the +box above should look like the second of the boxes below. Any delay +constitutes a fail.</p> + +<div> + <span>x</span> + <span class="ref"></span> + <span>x</span> + <span>x</span> +</div> + +<div> + <span>x</span> + <span class="ref"></span> + <span>x</span> + <span>x</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_flex-shrink-transitions.html b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_flex-shrink-transitions.html new file mode 100644 index 0000000000..ba94e7717e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_flex-shrink-transitions.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<title>flexbox | transitioned flex-shrink</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-shrink-property"> +<meta name="flags" content="interact"> +<style> +div { + width: 12em; + height: 8em; + + display: flex; +} +span { + background: yellow; + width: 8em; + flex: 0 1 auto; +} +#test, #ref { + background: #3366cc; +} +div:hover #test { + transition: flex-shrink 4s; + flex-shrink: 2; +} +p~div { + margin-right: 1em; + float: left; + display: block; +} +p~div span { + width: 3em; + height: 8em; + float: left; +} +p~div~div span { + width: 4em; +} +</style> + +<div> + <span>x</span> + <span id="test"></span> + <span>x</span> + <span>x</span> +</div> + +<p>Verify that the box above looks exactly like the first of the boxes +below. Then hover the box above and leave the mouse there for 4 +seconds. After the specified time, the blue color should disappear, and +the box above should look like the second of the boxes below.</p> + +<div> + <span>x</span> + <span id="ref"></span> + <span>x</span> + <span>x</span> +</div> + +<div> + <span>x</span> + <span>x</span> + <span>x</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_flex-transitions.html b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_flex-transitions.html new file mode 100644 index 0000000000..265976dea3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_flex-transitions.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<title>flexbox | transitioned flex</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<meta name="flags" content="interact"> +<style> +div { + width: 20em; + height: 8em; + + display: flex; +} +span { + background: yellow; + width: 8em; + flex: 1 1 0%; +} +#test, .ref, p+div { + background: #3366cc; +} +div:hover #test { + transition: flex 4s; + flex: 0 1 100%; +} +p~div { + margin-right: 1em; + float: left; + display: block; +} +p~div span { + width: auto; + height: 8em; + float: left; +} +p~div~div span { + width: 5em; +} +</style> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span id="test">four</span> +</div> + +<p>Verify that the box above looks exactly like the second of the boxes +below. Then hover the box above and leave the mouse there for 1+ +seconds. The box above should <em>instantaneously</em> look exactly +like the first of the boxes below.</p> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + four +</div> + +<div> + <span>one</span> + <span>two</span> + <span>three</span> + <span id="test">four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_order-transitions-2.html b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_order-transitions-2.html new file mode 100644 index 0000000000..192eb4aad5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_order-transitions-2.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<title>flexbox | transitioned order</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<meta name="flags" content="interact"> +<style> +div { + display: flex; +} +span { + background: yellow; + width: 1em; + height: 2em; +} +.test { + background: #3366cc; + order: 0; +} +div:hover .test { + transition: order 10s; + order: -1; +} +p~div { + margin: 1em; + float: left; + display: block; +} +p~div span { + float: left; +} +</style> + +<div> + <span>x</span> + <span>x</span> + <span>x</span> + <span>x</span> + <span>x</span> + <span>x</span> + <span>x</span> + <span>x</span> + <span class="test">x</span> + <span>x</span> +</div> + +<p>Verify that the box above looks exactly like the first of the boxes +below. Then hover the box above and leave the mouse there for 1+ +seconds. After the specified time, the box above should look exactly +like the second of the boxes below.</p> + +<div> + <span>x</span> + <span>x</span> + <span>x</span> + <span>x</span> + <span>x</span> + <span>x</span> + <span>x</span> + <span>x</span> + <span class="test">x</span> + <span>x</span> +</div> + +<div> + <span class="test">x</span> + <span>x</span> + <span>x</span> + <span>x</span> + <span>x</span> + <span>x</span> + <span>x</span> + <span>x</span> + <span>x</span> + <span>x</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_order-transitions.html b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_order-transitions.html new file mode 100644 index 0000000000..684233223b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/interactive/flexbox_interactive_order-transitions.html @@ -0,0 +1,83 @@ +<!DOCTYPE html> +<title>flexbox | flex-flow and transitioned order</title> +<link rel="author" href="http://opera.com" title="Opera Software"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> +<meta name="flags" content="interact"> +<style> +div { + background: blue; + padding: 0; + margin: 1em 0; + border: 1px solid black; + width: 20em; + height: 8em; + + display: flex; + flex-flow: column-reverse wrap-reverse; +} +span { + background: white; + margin: 1em; + width: 8em; + height: 1.5em; + display: inline-block; +} +.one { + background: pink; + order: -1; +} +div:hover .one { + transition: order 4s; + order: 4; +} +.two { + background: yellow; + order: 3; +} +.three { + background: black; + color: white; + order: 2; +} +.four { + background: fuchsia; + color: white; + order: 1; +} +p~div { + padding: 1em 0 0; + margin-right: 1em; + height: 7em; + float: left; + display: block; +} +p~div span { + float: left; +} +</style> + +<div> + <span class="one">one</span> + <span class="two">two</span> + <span class="three">three</span> + <span class="four">four</span> +</div> + +<p>Verify that the box above looks exactly like the first of the boxes +below. Then hover the blue area above and leave the mouse there for 4 +seconds. After the specified time, the box above should look exactly +like the second of the boxes below.</p> + +<div> + <span class="two">two</span> + <span class="four">four</span> + <span class="three">three</span> + <span class="one">one</span> +</div> + +<div> + <span class="one">one</span> + <span class="three">three</span> + <span class="two">two</span> + <span class="four">four</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/intrinsic-size/auto-min-size-001.html b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/auto-min-size-001.html new file mode 100644 index 0000000000..a026091aa7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/auto-min-size-001.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> +<link rel="help" href="https://crbug.com/1462398"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" + content="Don't apply flex automatic minimum sizing to the css-sizing-3 intrinsic sizing calculations. This shows up with % max-width replaced elements. Their intrinsic min-width is 0 according to css-sizing-3 but automatic minimum sizing is usually positive." /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> + +<div style="display: flex; width:100px;"> + <div style="display: flex; flex: 1 1 auto;"> + <img style="max-width: 100%; background: green;" + src="data:image/svg+xml,%3Csvg viewBox='0 0 1 1' width='500' height='500' xmlns='http://www.w3.org/2000/svg' %3E%3C/svg%3E"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-001.html b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-001.html new file mode 100644 index 0000000000..45da512389 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-001.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" + content="column-wrap container's max-content width is big enough that items don't overflow when the container has fixed height and items have fixed width and height. Old algorithm gave max-content width of 50px." /> + +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + .item { + /* Remove min-height so we don't have to think about it. */ + min-height: 0px; + width: 50px; + flex: 0 0 100px + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> + +<div id=reference-overlapped-red></div> + +<div + style="display: flex; flex-flow: column wrap; height: 100px; width: max-content; background: green;" + class=flex> + <div class="item"></div> + <div class="item"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-002.html b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-002.html new file mode 100644 index 0000000000..0e61cf7846 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-002.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" + content="column-wrap container's max-content width is big enough that items don't overflow when the container has indefinite height but fixed max-height and items have fixed width and height. Old algorithm gave max-content width of 50px." /> + +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + .item { + /* Remove min-height so we don't have to think about it. */ + min-height: 0px; + width: 50px; + flex: 0 0 100px + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> + +<div id=reference-overlapped-red></div> + +<div + style="display: flex; flex-flow: column wrap; max-height: 100px; width: max-content; background: green;" + class=flex> + <div class="item"></div> + <div class="item"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-003.html b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-003.html new file mode 100644 index 0000000000..518bf9f658 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-003.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" + content="Cross-axis borders are accounted for when determining inline content sizes of column-wrap flexboxes." /> + +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + .item { + /* Remove min-height so we don't have to think about it. */ + min-height: 0px; + width: 40px; + flex: 0 0 100px; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> + +<div id=reference-overlapped-red></div> + +<div + style="display: flex; flex-flow: column wrap; max-height: 100px; width: max-content; background: green; padding-left: 5px; border-left: 9px solid green; border-right: 6px solid green;"> + <div class="item"></div> + <div class="item"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-004.html b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-004.html new file mode 100644 index 0000000000..00cfa52069 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-004.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<meta name="assert" + content="Item with width:100% doesn't contribute to max-content size but does get 100px width after final layout. The item also overflows the container." /> + +<style> + .item { + /* Remove min-height so we don't have to think about it. */ + min-height: 0px; + flex: 0 0 100px; + outline: 1px solid; + } +</style> + +<div + style="display: flex; flex-flow: column wrap; width: max-content; height: 100px; background: green; position: relative;" + data-expected-width="100"> + <div class="item" style="width: 100px;"></div> + <div class="item" style="width: 100%;" data-expected-width="100" + data-offset-x="100"></div> +</div> + +<script> + checkLayout('body > div'); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-005.html b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-005.html new file mode 100644 index 0000000000..a753619c62 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-005.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<meta name="assert" + content="The item still has sufficient available size at the time fit-content is resolved. (A bug in the code could cause the right-most item to have a width of 75px.)"> + +<style> + .item { + /* Remove min-height so we don't have to think about it. */ + min-height: 0px; + flex: 0 0 100px; + outline: 1px solid; + } + + .grandchild { + width: 75px; + float: left; + } +</style> + +<div + style="display: flex; flex-flow: column wrap; width: max-content; height: 100px; background: green; position: relative;" + data-expected-width="250"> + <div class="item" style="width: 100px;"></div> + <div class="item" style="width: fit-content;" data-expected-width="150" + data-offset-x="100"> + <!-- This item has min-content=75 and max-content=150. --> + <div class="grandchild"></div> + <div class="grandchild"></div> + </div> +</div> + +<script> + checkLayout('body > div'); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-006.html b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-006.html new file mode 100644 index 0000000000..52560057c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-006.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" + content="flex item order is accounted for when determining inline content sizes of column-wrap flexboxes."> + +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + .item { + /* Remove min-height so we don't have to think about it. */ + min-height: 0px; + width: 50px; + flex: 0 0 auto; + } + +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> + +<div id=reference-overlapped-red></div> + +<!-- An implementation that ignored order could make the max-content size of this flexbox 150px. --> +<div + style="display: flex; flex-flow: column wrap; width: max-content; height: 100px; background: green;"> + <div class="item" style="height: 90px; order: 0;"></div> + <div class="item" style="height: 100px; order: 2;"></div> + <div class="item" style="height: 10px; order: 1;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-007.html b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-007.html new file mode 100644 index 0000000000..7f50f50456 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-007.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" + content="column wrap max-content width calculation works for wrap-reverse containers" /> + +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + .item { + /* Remove min-height so we don't have to think about it. */ + min-height: 0px; + flex: 0 0 100px; + } + +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> + +<div id=reference-overlapped-red></div> + +<div + style="display: flex; flex-flow: column wrap-reverse; height: 100px; width: max-content; background: green;"> + <div class="item" style="width: 30px;"></div> + <div class="item" style="width: 70px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-008.html b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-008.html new file mode 100644 index 0000000000..5edde9495d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-008.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" + content="column wrap max-content width calculation works for align-content:space-around containers" /> + +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + .item { + /* Remove min-height so we don't have to think about it. */ + min-height: 0px; + flex: 0 0 100px; + } + +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> + +<div id=reference-overlapped-red></div> + +<div + style="display: flex; flex-flow: column wrap; height: 100px; width: max-content; align-content: space-around; background: green;"> + <div class="item" style="width: 30px;"></div> + <div class="item" style="width: 70px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-009.html b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-009.html new file mode 100644 index 0000000000..62514dbcff --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-009.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" + content="column wrap container's intrinsic width changes when its height changes." /> + +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + span { + width: 50px; + height: 100px; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +<div id=reference-overlapped-red></div> + +<div style="display: flex; height: 200px;" id="target"> + <div + style="display: flex; flex-flow: column wrap; width: max-content; background: green;"> + <span></span> + <span></span> + </div> +</div> + +<script> + target.offsetLeft; + // With original height of 200px, both items fit in one flex line. + // With height 100px, there are two lines and the items are side-by-side. + target.style.height = "100px"; +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-010.html b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-010.html new file mode 100644 index 0000000000..2458443f06 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-010.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<meta name="assert" + content="Item with unresolvable width:100% contributes to max-content size via its content contributions." /> + +<style> + .grandchild { + float: left; + width: 50px; + } + +</style> + +<div + style="display: flex; flex-flow: column wrap; width: max-content; height: 100px; background: green;" + data-expected-width="100"> + <div style="width: 100%; height: 50px; min-height: 0px;" + data-expected-width="100"> + <div class="grandchild"></div> + <div class="grandchild"></div> + </div> +</div> + + +<script> + checkLayout('body > div'); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-011.html b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-011.html new file mode 100644 index 0000000000..9970d43d0c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-011.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> + +<meta name="assert" + content="column-wrap container's min-content width is non-zero. Old algorithm agrees. I broke this case during development but no other tests failed." /> + +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + .item { + /* Remove min-height so we don't have to think about it. */ + min-height: 0px; + width: 100px; + flex: 0 0 auto; + } + +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> + +<div id=reference-overlapped-red></div> + +<div + style="display: flex; flex-flow: column wrap; height: 100px; width: min-content; background: green;"> + <div class="item"></div> + <div class="item"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-012.html b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-012.html new file mode 100644 index 0000000000..a46ceea2ec --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-012.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> + +<meta name="assert" + content="During the container's intrinsic sizing pass, the item has the correct available size when it is laid out during flex basis calculation." /> + +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + .grandchild { + float: left; + width: 50px; + height: 50px; + } + +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> +<div id=reference-overlapped-red></div> + +<div + style="display: flex; flex-flow: column wrap; width: max-content; height: 100px; background: green;"> + <div style="width: 100%; flex: 0 0 auto; min-height: 0px;"> + <div class="grandchild"></div> + <div class="grandchild"></div> + </div> + <!-- This item will end up in the next flex line if the first item's available width is < 100. If the first item's available width is insufficient, its flex base size would be 100px, leaving no room for the second 50px item. The extra flex line would mean the max-content width of the container would be 140px. --> + <div style="width: 90px; height: 50px; flex: 0 0 auto; min-height: 0px;"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-013.html b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-013.html new file mode 100644 index 0000000000..d8eab3f133 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-013.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> + +<meta name="assert" + content="The second item contributes 25px width, from its max-content size, not 75px, even though the available size for the second item is 75px." /> + +<style> + .item { + flex: 0 0 100px; + min-height: 0px; + } + +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>. + +<div + style="display: flex; flex-flow: column wrap; width: max-content; height: 100px; background: green;"> + <div class="item"> + <div style="width: 75px;"></div> + </div> + <div class="item"> + <div style="width: 25px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-014.html b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-014.html new file mode 100644 index 0000000000..5861d829b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-014.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> + +<meta name="assert" + content="The second item contributes 25px width due to max-width, not 75px, even though the available size for the second item is 75px." /> + +<style> + .item { + flex: 0 0 100px; + min-height: 0px; + } + +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>. + +<div + style="display: flex; flex-flow: column wrap; width: max-content; height: 100px; background: green;"> + <div class="item"> + <div style="width: 75px;"></div> + </div> + <div class="item" style="max-width: 25px;"> + <div style="width: 50px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-015.html b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-015.html new file mode 100644 index 0000000000..23b762f36a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-015.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> + +<meta name="assert" + content="During the container's intrinsic sizing pass, the item has the correct available size when it is laid out during flex basis calculation, in the presence of reordered items." /> + +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + .grandchild { + float: left; + width: 50px; + height: 50px; + } + +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> +<div id=reference-overlapped-red></div> + +<div + style="display: flex; flex-flow: column wrap; width: max-content; height: 100px; background: green;"> + <div style="width: 100%; flex: 0 0 auto; min-height: 0px; order: 2"> + <div class="grandchild"></div> + <div class="grandchild"></div> + </div> + <div + style="width: 90px; height: 50px; flex: 0 0 auto; min-height: 0px; order: 1"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-016.html b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-016.html new file mode 100644 index 0000000000..a013bbd356 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-016.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> + +<meta name="assert" + content="During the container's intrinsic sizing pass, the item has the correct available size when it is laid out during flex basis calculation, in the presence of column-reverse." /> + +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + .grandchild { + float: left; + width: 50px; + height: 50px; + } + +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> +<div id=reference-overlapped-red></div> + +<div + style="display: flex; flex-flow: column-reverse wrap; width: max-content; height: 100px; background: green;"> + <div style="width: 100%; flex: 0 0 auto; min-height: 0px;"> + <div class="grandchild"></div> + <div class="grandchild"></div> + </div> + <div style="width: 90px; height: 50px; flex: 0 0 auto; min-height: 0px;"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-017.html b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-017.html new file mode 100644 index 0000000000..c7a64643bf --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-017.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> + +<meta name="assert" + content="aspect-ratio item gets correct flex base during intrinsic sizing." /> + +<style> + .grandchild { + float: left; + width: 50px; + height: 50px; + } + +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> + +<div + style="display: flex; flex-flow: column wrap; width: max-content; height: 100px; background: green;" + data-expected-width="100"> + <!-- flex base size should be 100 because that's max-content width * aspect-ratio. --> + <div style="width: 100%; aspect-ratio: 1/1; min-height: 0px;"> + <div class="grandchild"></div> + <div class="grandchild"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-018.html b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-018.html new file mode 100644 index 0000000000..755237fd0b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-018.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" + title="Case E"> +<meta name="assert" + content="aspect-ratio item gets correct flex base during intrinsic sizing, where a too-large flex base will cause the container to be too large." /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<style> + .grandchild { + float: left; + width: 30px; + height: 200px; + } + +</style> + +<p>Main point of this test is that the container width is 100px, not 140px.</p> + +<div + style="display: flex; flex-flow: column wrap; width: max-content; height: 100px; outline: 1px solid; position: relative;" + data-expected-width="100"> + <div + style="width: 100px; flex: 0 0 30px; min-height: 0px; background: lightblue;"> + </div> + <!-- flex base size during layout for intrinsic sizing should be 60 because that's fit-content width * aspect-ratio, in case E. If flex base size is too big, then the second item will end up on the second line, causing the container to be 140px wide. + flex base size during real layout will be 50px because then the 50% will be resolvable and this will fall into case B. --> + <div + style="width: 50%; aspect-ratio: 1/1; min-height: 0px; flex: 0 0 auto; background: orange;" + data-expected-height="50"> + <div class="grandchild"></div> + <div class="grandchild"></div> + </div> + <div style="width: 40px; flex: 0 0 10px; min-height: 0px; background: grey;" + data-offset-x="0"> + </div> +</div> + +<script> + checkLayout('body > div'); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-019.html b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-019.html new file mode 100644 index 0000000000..9da4d77cd1 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-019.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" + title="Case E"> +<meta name="assert" + content="aspect-ratio item gets correct flex base during intrinsic sizing, where a too-small flex base will cause the container to be too small." /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<style> + .grandchild { + float: left; + width: 10px; + height: 200px; + } + +</style> + +<p>Main point of this test is that the container width is 100px, not 80px.</p> + +<div + style="display: flex; flex-flow: column wrap; width: max-content; height: 100px; outline: 1px solid; position: relative;" + data-expected-width="100"> + <!-- flex base size during layout for intrinsic sizing should be 100 because that's fit-content width (20px) * aspect-ratio, in case E. If flex base size is too small, then the second item will end up on the first line, causing the container to be only 80px wide. + flex base size during real layout will be 50px because then the 10% will be resolvable and this will fall into case B. --> + <div + style="width: 10%; aspect-ratio: 1/5; min-height: 0px; flex: 0 0 auto; background: orange;" + data-expected-height="50" data-offset-x="0"> + <div class="grandchild"></div> + <div class="grandchild" data-offset-y="200"></div> + </div> + <div style="width: 80px; flex: 0 0 1px; min-height: 0px; background: grey;" + data-offset-x="0"> + </div> +</div> + +<script> + checkLayout('body > div'); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-001.html b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-001.html new file mode 100644 index 0000000000..d6f92804ac --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-001.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" + content="the flex container's min-content size is big enough to contain the item's max-content size when the item is inflexible and has flex-basis auto. The old algorithm gives the container a min-content of 50px." /> + +<style> + .inline-block { + float: left; + width: 100px; + } + + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id=reference-overlapped-red></div> + +<div style="width: 0px;"> + <div style="display: flex; background: green; height: 100px; float: left;"> + <!-- min: 50 max: 100 --> + <div style="flex: 0 0 auto;"> + <div class=inline-block></div> + <div class=inline-block></div> + </div> + </div> diff --git a/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-002.html b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-002.html new file mode 100644 index 0000000000..1756ee0037 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-002.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" + content="the flex container's max-content size is big enough to contain the item's flex-basis when the item can't shrink. The old algorithm gives the container a min-content of zero." /> + +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id=reference-overlapped-red></div> + +<div style="display: flex; background: green; height: 100px; float: left;"> + <div style="flex: 1 0 100px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-003.html b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-003.html new file mode 100644 index 0000000000..dda650fa66 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-003.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" + content="the flex container's min-content size is big enough to contain the item's flex-basis when the item can't shrink. The old algorithm gives the container a min-content of zero." /> + +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id=reference-overlapped-red></div> + +<div style="width: 0px;"> + <div style="display: flex; background: green; height: 100px; float: left;"> + <div style="flex: 1 0 100px;"></div> + </div> diff --git a/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-004.html b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-004.html new file mode 100644 index 0000000000..692457a093 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-004.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" + content="the flex container's min-content size is the item's flex base size when the item can't grow, even when the item's intrinsic size > flex base size. The old algorithm gives the container a min-content of 200px." /> + +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id=reference-overlapped-red></div> + +<div style="width: 0px;"> + <div style="display: flex; background: green; height: 100px; float: left;"> + <div style="flex: 0 1 100px; min-width: 0px;"> + <div style="width: 200px;"></div> + </div> + </div> diff --git a/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-005.html b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-005.html new file mode 100644 index 0000000000..580f9897de --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-005.html @@ -0,0 +1,201 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<meta name="assert" + content="min-content width is calculated correctly in a variety of scenarios with multiple flex items" /> + +<style> + .zero-width { + width: 0px; + height: 100px; + margin-bottom: 20px; + } + + .floating-flexbox { + display: flex; + outline: 5px solid blue; + height: 100px; + float: left; + } + + .floating-flexbox>div:nth-child(1) { + background: yellow; + } + + .floating-flexbox>div:nth-child(2) { + background: orange; + } + + .floating-flexbox>div:nth-child(3) { + background: lightblue; + } + + .floating-flexbox>div>div { + width: 100px; + } +</style> + +<body onload="checkLayout('.floating-flexbox')"> + <div id="log"></div> + + <div class="zero-width"> + <div class="floating-flexbox" data-expected-width="200"> + <!-- min contribution: 100 --> + <!-- desired fraction: -0.5 --> + <!-- chosen fraction <=0 and desired fraction <=0 and item can shrink, so it contributes its min-content contribution --> + <div style="flex: 1 1 200px; width:50px; min-width:0px;"> + <div></div> + </div> + <!-- chosen fraction <=0 and desired fraction <=0 and item can shrink, so it contributes its min-content contribution --> + <div style="flex: 1 1 400px; width:50px;"> + <div></div> + </div> + </div> + </div> + + <div class="zero-width"> + <div class="floating-flexbox" data-expected-width="200"> + <!-- min contribution: 100 --> + <!-- min contribution - flex basis: -100 --> + <!-- desired fraction: -0.5 --> + <!-- chosen fraction <=0 and desired fraction <=0 and item can shrink, so it contributes its min-content contribution --> + <div style="flex: 1 1 200px; width:50px;"> + <div></div> + </div> + <!-- min contribution: 100 --> + <!-- min contribution - flex basis: -300 --> + <!-- desired fraction: -300/(2*400) = -0.375 --> + <!-- chosen fraction <=0 and desired fraction <=0 and item can shrink, so it contributes its min-content contribution --> + <div style="flex: 1 2 400px; width:50px;"> + <div></div> + </div> + </div> + </div> + + <!-- This is same as above except for min-width auto is no longer in + effect. EdgeHTML renders it differently than the above. --> + <div class="zero-width"> + <div class="floating-flexbox" data-expected-width="200"> + <div style="flex: 1 1 200px; width:50px; min-width: 0px;"> + <div></div> + </div> + <div style="flex: 1 2 400px; width:50px; min-width: 0px;"> + <div></div> + </div> + </div> + </div> + + <div class="zero-width"> + <!-- first item contributes 200px. second item contributes 100px --> + <div class="floating-flexbox" data-expected-width="300"> + <!-- min contribution: 100 --> + <!-- desired fraction: -inf --> + <!-- chosen fraction <= 0 and item can't shrink, so contribute flex basis --> + <div style="flex: 1 0 200px; width:50px;"> + <div></div> + </div> + <!-- min contribution: 100 --> + <!-- desired fraction: -0.75 --> + <!-- chosen fraction <= 0 and item CAN shrink, so contribute min contribution --> + <div style="flex: 1 1 400px; width:50px;"> + <div></div> + </div> + </div> + </div> + + <div class="zero-width"> + <div class="floating-flexbox" data-expected-width="200"> + <!-- min contribution: 200 --> + <!-- min contribution - flex basis: 150 --> + <!-- desired fraction: 0 (because flex grow factor is 0) --> + <!-- chosen fraction <= 0 so contribute flex basis 50px --> + <!-- except flex basis is outside of used min/max, so contribute clamped flex basis = 100px --> + <div style="flex: 0 0 50px; width: 200px;"> + <div></div> + </div> + <!-- identical to above --> + <div style="flex: 0 0 50px; width: 200px;"> + <div></div> + </div> + </div> + </div> + + <div class="zero-width"> + <!-- 200 + 400 = 600 --> + <div class="floating-flexbox" data-expected-width="600"> + <!-- min contribution: 200 --> + <!-- desired fraction: 150px --> + <!-- 50 + 1*150 = 200 --> + <div style="flex: 1 0 50px; width: 200px;"> + <div></div> + </div> + <!-- min contribution: 200 --> + <!-- desired fraction: 100px --> + <!-- 100 + 2*150 = 400 --> + <div style="flex: 2 0 100px; width: 200px;"> + <div></div> + </div> + </div> + </div> + + <div class="zero-width"> + <!-- chosen fraction: 50px --> + <div class="floating-flexbox" data-expected-width="400"> + <!-- min contribution: 100 --> + <!-- desired fraction: -0.5 --> + <!-- final contribution = flex base size + product = 200px + 50px*0 = 200px --> + <div style="flex: 0 1 200px; width: 50px;"> + <div></div> + </div> + <!-- min contribution: 200 --> + <!-- desired fraction: (200px - 100px) / 2 = 50px --> + <!-- final contribution = flex base size + product = 100px + 50px*2 = 200px --> + <div style="flex: 2 0 100px; width: 200px;"> + <div></div> + </div> + </div> + </div> +<div class="zero-width"> + <!-- chosen fraction: 0 --> + <div class="floating-flexbox" data-expected-width="600"> + <!-- min contribution: 250 --> + <!-- wants to grow, but can't --> + <!-- desired fraction: 0 --> + <!-- final contribution: 100 --> + <div style="flex: 0 1 100px; width: 250px;"></div> + <!-- min contribution: 100 --> + <!-- wants to shrink, but can't --> + <!-- desired fraction: -inf --> + <!-- final contribution: 200 --> + <div style="flex: 1 0 200px; width: 100px;"></div> + <!-- min contribution: --> + <!-- doesn't have to change ---> + <!-- desired fraction: 0 --> + <!-- final contribution: 300 --> + <div style="flex: 1 1 300px; width: 300px;"></div> + </div> +</div> + +<div class="zero-width"> + <!-- chosen fraction: 0 --> + <div class="floating-flexbox" data-expected-width="700"> + <!-- min contribution: 100 --> + <!-- wants to shrink, but can't --> + <!-- desired fraction: -inf --> + <!-- final contribution: 200 --> + <!-- In legacy and V2, this item gets 0 width. --> + <div style="flex: 0 10 300px; width: 200px;"></div> + <!-- min contribution: --> + <!-- doesn't have to change ---> + <!-- desired fraction: 0 --> + <!-- final contribution: 300 --> + <!-- In legacy and V2, this item gets all the width. --> + <div style="flex: 0 1 1000px; width: 500px;"> + </div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-006.html b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-006.html new file mode 100644 index 0000000000..c7b6171cf4 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-006.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" + content="Include borders in min-width when auto min-width wins over an inflexible flex-basis." /> + +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> + +<div id=reference-overlapped-red></div> + +<div + style="display: flex; flex-direction: row; width: max-content; background: green; height: 100px;"> + <div style="flex: 0 0 0px; border: 10px solid transparent;"> + <div style="width:80px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-007.html b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-007.html new file mode 100644 index 0000000000..b2f4f0ab19 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-007.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" + content="Include borders in max-width when max-width wins over an inflexible flex-basis." /> + +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> + +<div id=reference-overlapped-red></div> + +<div + style="display: flex; flex-direction: row; width: max-content; background: green; height: 100px;"> + <div + style="flex: 0 0 200px; border: 10px solid transparent; box-sizing: border-box; max-width: 100px;"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-008.html b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-008.html new file mode 100644 index 0000000000..b34306b483 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-008.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<meta name="assert" + content="min-content width is calculated correctly in a variety of scenarios with two flex items. These cases were used as examples when deriving the intrinsic size algorithm. " /> + +<style> + .min-width-flexbox { + display: flex; + outline: 5px solid blue; + height: 100px; + width: min-content; + margin-bottom: 20px; + } + + .min-width-flexbox>div:nth-child(1) { + background: yellow; + } + + .min-width-flexbox>div:nth-child(2) { + background: orange; + } + + .min-width-flexbox>div>div { + width: 100px; + } + +</style> + +<body onload="checkLayout('.min-width-flexbox')"> + <div id=log></div> +</body> + +<script> + // These are from the table in https://github.com/w3c/csswg-drafts/issues/7189#issuecomment-1172771501 + var test_cases = [ + [0, 0, 200, 100, 300], + [0, .1, 200, 101, 310], + [.1, .1, 203, 103, 330], + [.4, .4, 248, 148, 420], + [.5, .5, 275, 175, 450], + [.75, .75, 368.75, 268.75, 637.5], + [1, 1, 500, 400, 900], + [0, 2, 200, 200, 400], + [.1, 2, 205, 200, 405], + [.2, 2, 212, 220, 432], + [2, 2, 500, 400, 900], + ]; + test_cases.forEach(test_case => { + var flexbox = document.createElement('div'); + flexbox.className = "min-width-flexbox"; + flexbox.setAttribute("data-expected-width", test_case[4]); + + var child1 = document.createElement('div'); + child1.style.flex = "0 1 200px"; + child1.style.width = "500px"; + child1.style.flexGrow = test_case[0]; + child1.setAttribute("data-expected-width", test_case[2]); + child1.appendChild(document.createElement('div')); + + var child2 = document.createElement('div'); + child2.style.flex = "0 0 100px"; + child2.style.width = "200px"; + child2.style.flexGrow = test_case[1]; + child2.setAttribute("data-expected-width", test_case[3]); + child2.appendChild(document.createElement('div')); + + flexbox.appendChild(child1); + flexbox.appendChild(child2); + document.body.appendChild(flexbox); + }); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-compat-001.html b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-compat-001.html new file mode 100644 index 0000000000..1fb248acb8 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-compat-001.html @@ -0,0 +1,132 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> +<link rel="help" href="https://crbug.com/1445937"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<meta name="assert" + content="Changing flex intrinsic sizing algorithm doesn't break any of these cases." /> + +<style> + section.bugreport { + outline: 1px solid grey; + margin-bottom: 25px; + padding: 3px; + } + + #wrapping-broke .flex { + display: flex; + width: min-content; + outline: 2px solid; + margin-bottom: 10px; + } + + #wrapping-broke span.orange100 { + float: left; + height: 25px; + width: 100px; + background: orange; + } + + #bug1454306 .fourUpList { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: 1fr; + width: 800px; + background: yellow; + } + + #bug1454306 .thumbnail-list--item { + display: flex; + width: 100%; + outline: 1px solid; + } + + #bug1454306 .thumbnail-list--item-photo { + height: 50px; + width: 50px; + } + + #bug1454306 .thumbnail-list--item-header { + flex: 1 0 calc(70% - 10.5px) + } +</style> + +<section id="wrapping-broke" class="bugreport"> + <p>https://crbug.com/1445937 We need to see a 100x100 orange square, not a + 400x25 orange rectangle.</p> + <div class="flex" data-expected-width="100"> + <!-- one item with very negative desired flex fraction --> + <div> + <span class="orange100"></span> + <span class="orange100"></span> + <span class="orange100"></span> + <span class="orange100"></span> + </div> + <!-- second item with desired flex fraction 0 --> + <div></div> + </div> +</section> + +<section id="bug1454306" class="bugreport"> + <p>https://crbug.com/1454306 The boxes each must be 1/4 the size of the yellow + containing block. No overflow.</p> + + <!-- This compat case needs the item in the example below to contribute its + min-content to container's min-content. In one of our earlier + implementations, the item contributed its flex-basis (aka max-content). + + <item style="flex: 1 0 calc(70% - 10.5px)"> + max-content larger than flex basis + </item> + --> + + <div class=fourUpList> + + <div class=thumbnail-list--item data-expected-width="200"> + <div class=thumbnail-list--item-header>Some News Headline</div> + <div class=thumbnail-list--item-photo></div> + </div> + + <div class=thumbnail-list--item data-expected-width="200"> + <div class=thumbnail-list--item-header>Some Other News Headline 2</div> + <div class=thumbnail-list--item-photo></div> + </div> + + <div class=thumbnail-list--item data-expected-width="200"> + <div class=thumbnail-list--item-header>Even another Headline 3</div> + <div class=thumbnail-list--item-photo></div> + </div> + + <div class=thumbnail-list--item data-expected-width="200"> + <div class=thumbnail-list--item-header> + Peets Coffee announces plans to move Oakland + </div> + <div class=thumbnail-list--item-photo></div> + </div> + + </div> +</section> + +<section id="gmail-tables" class="bugreport"> + <p>https://bugs.chromium.org/p/chromium/issues/detail?id=1457103 We need a + 100x100 green square here.</p> + <!-- This case requires that the %-width fixed table has a large flex basis, which means the table's intrinsic max width has to be large.--> + <div style="width: 100px;"> + <div style="display: table;"> + <div style="display: table-cell"> + <div class=flex style="display: flex; height: 100px; background: green;" + data-expected-width="100"> + <table style="width: 100%; table-layout: fixed;"></table> + </div> + </div> + </div> + </div> +</section> + +<script> + checkLayout('#wrapping-broke .flex'); + checkLayout('#bug1454306'); + checkLayout('#gmail-tables .flex'); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-use-cases-001.html b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-use-cases-001.html new file mode 100644 index 0000000000..1e39fddfed --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-use-cases-001.html @@ -0,0 +1,315 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<meta name="assert" + content="Requested use cases from our issue tracker that were duplicated or included in the bug report for the new algorithm. These are intentionally not very reduced from their original form with liberal pass conditions." /> + +<style> + section.bugreport { + outline: 1px solid grey; + margin-bottom: 25px; + padding: 3px; + } + + #bug423112 .container { + border: 1px solid lightgrey; + margin: 20px; + padding: 8px; + display: flex; + flex-flow: column; + } + + #bug423112 .h-box { + display: flex; + flex-flow: row; + flex: none; + justify-content: flex-start; + align-items: stretch; + } + + #bug423112 .auto { + flex: 0 0 auto; + } + + #bug423112 .none { + flex: none; + } + + #bug423112 .gap1-fails { + flex: 0 0 5px; + } + + #bug423112 .gap2-fails { + flex: 0 0 30px; + } + + #bug423112 .word { + display: inline-block; + height: 10px; + width: 35px; + background: orange; + } + + #bug464210 .FlexOuterContainer { + border: 3px solid black; + display: flex; + margin: 1em; + } + + #bug464210 .FlexInnerContainer { + border: 3px solid red; + display: flex; + flex: 0 0 auto; + } + + #bug464210 .FlexItem { + background: rgba(0, 0, 0, .2); + flex: 0 0 100px; + } + + #bug533627c3 .outer { + display: flex; + padding: 10px; + } + + #bug533627c3 .middle, + #bug533627c3 .middle2 { + display: flex; + flex-shrink: 0; + background: red; + padding: 10px; + } + + #bug533627c3 .inner { + flex-basis: 258px; + flex-shrink: 0; + display: flex; + flex-grow: 0; + background: green; + } + + #bug533627c3 .inner2 { + width: 258px; + flex-shrink: 0; + display: flex; + flex-grow: 0; + background: green; + } + + #bug441768 div { + display: flex; + } + + #bug1144312 .grid-y { + flex-direction: column; + flex-wrap: wrap; + } + + #bug1144312 .grid-x { + flex-direction: row + } + + #bug1144312 .grid-x>* { + flex-basis: 0 + } + + #bug1144312 [class*=grid] { + display: flex; + gap: 1px + } + + #bug1144312 .grid-y { + background: lightblue + } + + #bug1144312 .grid-y:not(:first-child) { + margin-top: 1.5rem + } + + #bug1144312 [class*=grid]>* { + flex-grow: 1; + border: 3px solid blue; + padding: 1px; + } + + #bug1144312 .nowrap div { + border-color: purple + } + + #bug1144312 .nowrap { + background: Thistle; + flex-wrap: nowrap; + } + + #bug1144312 div { + font: 12px/1 Ahem; + } + +</style> + +<section id="bug423112" class="bugreport"> + <p>https://bugs.chromium.org/p/chromium/issues/detail?id=423112</p> + <div class="container"> + <div class="h-box"> + <div class="h-box"> + <input type="checkbox" class="none"> + <div class="gap2-fails"></div> + <span class="none" id="left-item"> + first checkbox example + </span> + </div> + <div class="h-box"> + <input type="checkbox" class="none" id="right-item"> + <div class="gap2-fails"></div> + <span class="auto"> + second checkbox example + </span> + </div> + </div> + </div> +</section> + +<section id="bug464210" class="bugreport"> + <p>https://bugs.chromium.org/p/chromium/issues/detail?id=464210</p> + <div class="FlexOuterContainer"> + <div class="FlexInnerContainer"> + <div class="FlexItem">MMMMM</div> + <div id="right-item" class="FlexItem">MMMMM</div> + </div> + </div> +</section> + +<section id="bug533627c3" class="bugreport"> + <p>https://bugs.chromium.org/p/chromium/issues/detail?id=533627#c3</p> + <div class="outer"> + <div class="middle"> + <div class="inner"> + hello + </div> + </div> + </div> + <div class="outer"> + <div class="middle2"> + <div class="inner2"> + hello + </div> + </div> + </div> +</section> + +<section id="bug441768" class="bugreport"> + <p>https://bugs.chromium.org/p/chromium/issues/detail?id=441768 author wants + below blue block to have 0 width</p> + <div> + <!-- shipping: .middle has flex-basis=200px (from its max-content), and + used min-width=200px (from min-content) --> + <!-- author wants .middle flex-basis = 0, so author wants .middle + max-content = 0 --> + <!-- that means author also needs min-content = 0 --> + <!-- so width:200 item needs to contribute flex-basis to both min and max + --> + <div style="height: 100px; background: blue; align-self: flex-start;" + class="middle"> + <div style="width: 200px; flex: 0;"></div> + </div> + </div> +</section> + +<section id="bug1144312" class="bugreport"> + <p>https://bugs.chromium.org/p/chromium/issues/detail?id=1144312</p> + <!-- This case needs max-content to use flex fractions. --> + <div class="grid-y" id="top"> + <!-- broke: grid-x intrinsic sizes are ("95", "154") --> + <!-- works: grid-x intrinsic sizes are ("165", "283") --> + <!-- broke: grid-x main inner size = 146--> + <!-- works: grid-x main inner size = 275--> + <!-- to determine its vertical flex basis, grid-x lays out with width set to max content*. Then, both of its items have flex basis 0 and same grow factor, so they get flexed to each have approximately half of first item's max-width. This makes "phantom whitespace" wrap, which makes it too tall. + * this doesn't happen in the nowrap case, which stretches grid-x's width. --> + <div class="grid-x"> + <!-- while laying out grid-x to get its flex-basis: + when laying out the two items for cross sizes: + broke: 1st gets 78px fixed inline size, returns height 48px + works: 1st gets 137px fixed inline size, returns height 28px + broke: 2nd gets 67px fixed inline size, returns height 8px + works: 2nd gets 137px fixed inline size, returns height 8px + --> + <div>phantom whitespace</div> + <div></div> + </div> + </div> + + <div class="grid-y" id="middle"> + <div> + <div class="grid-x"> + <div>also phantom whitespace</div> + <div></div> + </div> + </div> + </div> + + <div class="grid-y nowrap" id="bottom"> + <div class="grid-x"> + <div>no more phantom whitespace</div> + <div></div> + </div> + </div> +</section> + +<section id="bug1154243" class="bugreport"> + <p>https://bugs.chromium.org/p/chromium/issues/detail?id=1154243</p> + <div + style="display: flex; width: min-content; border: 2px solid blue; font: 12px/1 Ahem;" + id="container"> + <!-- shipping: min-content width of container is sum of min-contents (2x + the width of the word "content") + author needs: each `flex: 0 0 auto` item contributes flex-basis to + container min-content because they can't shrink from their flex bases + --> + <div style="flex-shrink: 0">Test content</div> + <div style="background: yellow; flex-shrink: 0" id="right">Test content + </div> + </div> +</section> + +<script> + test(_ => { + let left = bug423112.querySelector("#left-item"); + let right = bug423112.querySelector("#right-item"); + assert_less_than_equal(left.getBoundingClientRect().right, right.getBoundingClientRect().left); + }, "left < right"); + + test(_ => { + const container = bug464210.querySelector(".FlexInnerContainer"); + const right = bug464210.querySelector("#right-item"); + assert_less_than_equal(right.getBoundingClientRect().right, container.getBoundingClientRect().right); + }, "no overflow"); + + test(_ => { + const middle = bug533627c3.querySelector(".middle"); + const middle2 = bug533627c3.querySelector(".middle2"); + assert_equals(middle.offsetWidth, middle2.offsetWidth); + }, "same widths"); + + test(_ => { + const middle = bug441768.querySelector(".middle"); + assert_equals(middle.offsetWidth, 0); + }, "zero width"); + + test(_ => { + const top = bug1144312.querySelector("#top"); + const middle = bug1144312.querySelector("#middle"); + const bottom = bug1144312.querySelector("#bottom"); + assert_equals(top.offsetHeight, bottom.offsetHeight); + assert_equals(middle.offsetHeight, bottom.offsetHeight); + }, "same heights"); + + test(_ => { + const container = bug1154243.querySelector("#container"); + const right = bug1154243.querySelector("#right"); + assert_less_than_equal(right.getBoundingClientRect().right, container.getBoundingClientRect().right) + }, "no overflow 2"); + +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-wrap-001.html b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-wrap-001.html new file mode 100644 index 0000000000..474005174d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-wrap-001.html @@ -0,0 +1,117 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<meta name="assert" + content="min-content width is calculated correctly for row-wrap flex containers in a variety of scenarios with two flex items" /> + +<style> + .zero-width { + width: 0px; + height: 100px; + margin-bottom: 20px; + } + + .floating-flexbox { + display: flex; + flex-wrap: wrap; + outline: 5px solid blue; + height: 100px; + float: left; + } + + .floating-flexbox>div:nth-child(1) { + background: yellow; + } + + .floating-flexbox>div:nth-child(2) { + background: orange; + } + + .floating-flexbox>div>div { + width: 100px; + } + +</style> + +<body onload="checkLayout('.floating-flexbox')"> + <div class="zero-width"> + <div class="floating-flexbox" data-expected-width="100"> + <!-- contribution: 100 --> + <div style="flex: 1 1 200px; width:50px;"> + <div></div> + </div> + <!-- contribution: 50 --> + <div style="flex: 1 1 400px; width:50px;"> + </div> + </div> + </div> + + <div class="zero-width"> + <div class="floating-flexbox" data-expected-width="100"> + <!-- contribution: 100px + starts as max(specified=200, min-content=100) = 200 + clamped down to 50 because doesn't grow + clamped up to 100 because auto min size is 100 + --> + <div style="flex: 0 0 50px; width: 200px;"> + <div></div> + </div> + <!-- contribution: 50px + starts as max(specified=50, min-content=100) = 100 + clamped down to 50 because doesn't grow + auto min size is 50, so has no effect + --> + <div style="flex: 0 0 50px; width: 50px;"> + <div></div> + </div> + </div> + </div> + + <div class="zero-width"> + <div class="floating-flexbox" data-expected-width="200"> + <!-- contribution: 200px + starts as max(specified=200, min-content=100) = 200 + auto min size is 100, so has no effect + --> + <div style="flex: 1 0 50px; width: 200px;"> + <div></div> + </div> + <!-- contribution: 150px + starts as max(specified=50, min-content=100) = 100 + clamped up to 150 because doesn't shrink + auto min size is 50, so has no effect + --> + <div style="flex: 2 0 150px; width: 50px;"> + <div></div> + </div> + </div> + </div> + + <!-- Same as above case except last item has margins. --> + <div class="zero-width"> + <div class="floating-flexbox" data-expected-width="450"> + <div style="flex: 1 0 50px; width: 200px;"> + <div></div> + </div> + <div style="flex: 2 0 150px; width: 50px; margin-left: 300px;"> + <div></div> + </div> + </div> + </div> + + <!-- Same as above except we now test that gaps are ignored. --> + <div class="zero-width"> + <div class="floating-flexbox" data-expected-width="450" + style="row-gap: 24px; column-gap: 17px;"> + <div style="flex: 1 0 50px; width: 200px;"> + <div></div> + </div> + <div style="flex: 2 0 150px; width: 50px; margin-left: 300px;"> + <div></div> + </div> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-wrap-002.tentative.html b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-wrap-002.tentative.html new file mode 100644 index 0000000000..7ed61fa8bf --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-wrap-002.tentative.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" + content="containers with min-content > max-content increase max-content to match min-content" /> + +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> + +<div id=reference-overlapped-red></div> + +<!-- Safari 16.4 and Chrome 116 make this container 100px wide. Firefox 114 makes it 90px. --> +<div style="display: flex; flex-wrap: wrap; width: max-content; height: 100px; + background: green;"> + <div style="width: 100px;"></div> + <div style="width: 0px; margin-left: -10px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/intrinsic-width-orthogonal-writing-mode.html b/testing/web-platform/tests/css/css-flexbox/intrinsic-width-orthogonal-writing-mode.html new file mode 100644 index 0000000000..79ce88a64c --- /dev/null +++ b/testing/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/testing/web-platform/tests/css/css-flexbox/item-with-max-height-and-scrollbar.html b/testing/web-platform/tests/css/css-flexbox/item-with-max-height-and-scrollbar.html new file mode 100644 index 0000000000..167417a256 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/item-with-max-height-and-scrollbar.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>css-flexbox: Tests that we correctly size a flex item with a scrollbar and max-height</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#resolve-flexible-lengths"> +<link rel="match" href="reference/item-with-max-height-and-scrollbar-ref.html"> + +<div style="display: flex; width: 100px; flex-direction: column;"> + <div style="overflow: scroll; max-height: 100%; min-height: 0; background: green;"> + <div style="height: 100px; width: 100px;"> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/item-with-table-with-infinite-max-intrinsic-width.html b/testing/web-platform/tests/css/css-flexbox/item-with-table-with-infinite-max-intrinsic-width.html new file mode 100644 index 0000000000..f475db5bcf --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/item-with-table-with-infinite-max-intrinsic-width.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>Flex item with table with infinite max intrinsic inline size</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#algo-main-item" title="3. Determine the flex base size and hypothetical main size of each item:"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="display:flex; width:100px; height:100px; align-items:flex-start; background:green;"> + <div style="flex-grow:1; flex-shrink:0;"> + <table style="height:50px; background:green;" cellpadding="0" cellspacing="0"> + <tr> + <td style="width:100%; background:green;"> </td> + <td style="background:green;"> </td> + </tr> + </table> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/justify-content-001.htm b/testing/web-platform/tests/css/css-flexbox/justify-content-001.htm new file mode 100644 index 0000000000..75ba056bf3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/justify-content-001.htm @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: A flex container with 'justify-content' property set to 'center'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property" /> + <link rel="match" href="reference/justify-content-001-ref.html"> + <meta name="flags" content="image"> + <meta name="assert" content="This test checks that the flex container with 'justify-content: center' centers flex items in the main axis of each line." /> + <meta name="fuzzy" content="maxDifference=1; totalPixels=0-5841" /> + <style type="text/css"> + #flexbox + { + background: linear-gradient(to right, blue 0, blue 75px, red 75px, red 225px, orange 225px, orange 300px); + display: flex; + justify-content: center; + height: 100px; + width: 300px; + } + div div + { + background-color: orange; + width: 76px; + } + .blue + { + background-color: blue; + } + </style> + </head> + <body> + <p>Test passes if there is a single blue rectangle on the left, a single orange rectangle directly to its right, and there is no red visible on the page.</p> + <div id="flexbox"> + <div class="blue"></div> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/justify-content-002.htm b/testing/web-platform/tests/css/css-flexbox/justify-content-002.htm new file mode 100644 index 0000000000..e3c671a53f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/justify-content-002.htm @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: A flex container with the 'justify-content' property set to 'flex-start'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property" /> + <link rel="match" href="reference/justify-content-001-ref.html"> + <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-6578" /> + <meta name="flags" content="image"> + <meta name="assert" content="This test checks that the flex container with 'justify-content: flex-start' packs flex items toward the start of the main axis of each line." /> + <style type="text/css"> + #flexbox + { + background: linear-gradient(to right, red 0, red 150px, orange 150px, orange 300px); + display: flex; + justify-content: center; + justify-content: flex-start; + height: 100px; + width: 300px; + } + div div + { + background-color: blue; + width: 75px; + } + </style> + </head> + <body> + <p>Test passes if there is a single blue rectangle on the left, a single orange rectangle directly to its right, and there is no red visible on the page.</p> + <div id="flexbox"> + <div></div> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/justify-content-003.htm b/testing/web-platform/tests/css/css-flexbox/justify-content-003.htm new file mode 100644 index 0000000000..985ec6b469 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/justify-content-003.htm @@ -0,0 +1,33 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: A flex container with the 'justify-content' property set to 'flex-end'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property" /> + <link rel="match" href="reference/justify-content-001-ref.html"> + <meta name="flags" content="image"> + <meta name="assert" content="This test checks that the flex container with 'justify-content: flex-end' packs flex items toward the end of the main axis of each line." /> + <style type="text/css"> + #flexbox + { + background: linear-gradient(to right, blue 0, blue 150px, red 150px, red 300px); + display: flex; + justify-content: flex-end; + height: 100px; + width: 300px; + } + div div + { + background-color: orange; + width: 75px; + } + </style> + </head> + <body> + <p>Test passes if there is a single blue rectangle on the left, a single orange rectangle directly to its right, and there is no red visible on the page.</p> + <div id="flexbox"> + <div></div> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/justify-content-004.htm b/testing/web-platform/tests/css/css-flexbox/justify-content-004.htm new file mode 100644 index 0000000000..88dcfe8c02 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/justify-content-004.htm @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: A flex container with the 'justify-content' property set to 'space-between'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property" /> + <link rel="match" href="reference/justify-content-001-ref.html"> + <meta name="flags" content="image"> + <meta name="assert" content="This test checks that the flex container with 'justify-content: space-between' evenly distributes flex items in the main axis of each line." /> + <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-5838" /> + <style type="text/css"> + #flexbox + { + background: linear-gradient(to right, red 0, red 75px, blue 75px, blue 150px, orange 150px, orange 225px, red 225px, red 300px); + display: flex; + justify-content: space-between; + height: 100px; + width: 300px; + } + div div + { + background-color: orange; + width: 76px; + } + #blue + { + background-color: blue; + } + </style> + </head> + <body> + <p>Test passes if there is a single blue rectangle on the left, a single orange rectangle directly to its right, and there is no red visible on the page.</p> + <div id="flexbox"> + <div id="blue"></div> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/justify-content-005.htm b/testing/web-platform/tests/css/css-flexbox/justify-content-005.htm new file mode 100644 index 0000000000..7203d7f1d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/justify-content-005.htm @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: A flex container with the 'justify-content' property set to 'space-around'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property" /> + <link rel="match" href="reference/justify-content-001-ref.html"> + <meta name="flags" content="image"> + <meta name="assert" content="This test checks that the flex container with 'justify-content: space-around' evenly distributes flex items in the main axis of each line, with half-size spaces on either end." /> + <meta name="fuzzy" content="maxDifference=1; totalPixels=0-5832" /> + <style type="text/css"> + #flexbox + { + background: linear-gradient(to right, blue 0, blue 38px, red 38px, red 112px, blue 112px, blue 150px, orange 150px, orange 188px, red 188px, red 262px, orange 262px, orange 300px); + display: flex; + justify-content: space-around; + height: 100px; + width: 300px; + } + div div + { + background-color: orange; + width: 76px; + } + #blue + { + background-color: blue; + } + </style> + </head> + <body> + <p>Test passes if there is a single blue rectangle on the left, a single orange rectangle directly to its right, and there is no red visible on the page.</p> + <div id="flexbox"> + <div id="blue"></div> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/justify-content-006.html b/testing/web-platform/tests/css/css-flexbox/justify-content-006.html new file mode 100644 index 0000000000..354763c90c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/justify-content-006.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#justify-content-property"> +<meta name="assert" content="Flex item in nested column flexbox is justified properly."> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<style> +.outer { + display: flex; + flex-direction: column; + width: 100px; + border: 2px solid black; + position: relative; +} +.middle { + flex: 0 0 50px; + min-height: 50px; + display: flex; + flex-direction: column; + justify-content: flex-end; +} +</style> + +Test passes if orange square is in bottom left corner of rectangle. + +<div class="outer"> + <div class="middle"> + <div style="width: 30px; height: 30px; background: orange" data-offset-y=20></div> + </div> +</div> + +<script> +checkLayout('.middle > div'); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/justify-content-007.html b/testing/web-platform/tests/css/css-flexbox/justify-content-007.html new file mode 100644 index 0000000000..2ce9177a76 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/justify-content-007.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" + href="https://drafts.csswg.org/css-flexbox/#justify-content-property"> +<link rel="help" href="https://crbug.com/1228023"> +<meta name="assert" + content="Wrapped item obeys justify-content:center when the item wraps because the container has max-height."> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<style> + .flexitem { + width: 100px; + } + +</style> + +Pass condition: orange square is vertically centered in the black box.<br> +Chrome 112 and Safari 16.4 fail. Firefox 111 passes. +<div + style="display: flex; flex-flow: column wrap; max-height: 200px; justify-content: center; align-content: start; border: 2px solid; position: relative;"> + <div class=flexitem style="background: blue; height: 200px;"></div> + <div class=flexitem style="background: orange; height: 100px;" + data-offset-y=50></div> +</div> + +<script> + checkLayout('.flexitem + .flexitem'); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/justify-content_center.html b/testing/web-platform/tests/css/css-flexbox/justify-content_center.html new file mode 100644 index 0000000000..906de2e999 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/justify-content_center.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Flexible Box Test: justify-content_center</title> + <link rel="author" title="Intel" href="http://www.intel.com" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property" /> + <meta name="assert" content="Check if the web engine can identify the justify-content value center." /> + <style> + #test01, #test02, #test03{ + text-align:center; + font-size: 20px; + width: 30px; + } + #test01{ + background: #7FFF00; + } + #test02{ + background: #00FFFF; + } + #test03{ + background: #4169E1; + } + #test{ + background: #ff0000; + height: 200px; + width: 200px; + display: flex; + justify-content: center; + } + </style> + </head> + <body> + <p>Test passes if:<br> + 1. the rectangle 1, 2, 3 show up in a row in a red rectangle and no gap between them.<br> + 2. the rectangle 1, 2, 3 appear in middle of red rectangle.<br> + 3. equal amounts of empty space between the left edge of the red rectangle and ractangle 1 and between the right edge of the red rectangle and rectangle 3.<br> + 4. the height of the 1, 2, 3 is the same as the height of the red rectangle.</p> + <div id=test><div id=test01>1</div><div id=test02>2</div><div id=test03>3</div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/justify-content_flex-end.html b/testing/web-platform/tests/css/css-flexbox/justify-content_flex-end.html new file mode 100644 index 0000000000..d09e35bff0 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/justify-content_flex-end.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Flexible Box Test: justify-content_flex-end</title> + <link rel="author" title="Intel" href="http://www.intel.com" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property" /> + <meta name="assert" content="Check if the web engine can indentify the justify-content value flex-end." /> + <style> + #test01, #test02, #test03{ + text-align:center; + font-size: 20px; + width: 30px; + } + #test01{ + background: #7FFF00; + } + #test02{ + background: #00FFFF; + } + #test03{ + background: #4169E1; + } + #test{ + background: #ff0000; + height: 200px; + width: 200px; + display: flex; + justify-content: flex-end; + } + </style> + </head> + <body> + <p>Test passes if:<br> + 1. the rectangle 1, 2, 3 show up in a row in a red rectangle and no gap between them.<br> + 2. the rectangle 1, 2, 3 appear in right of red rectangle.<br> + 3. 3. the height of the 1, 2, 3 is the same as the height of the red rectangle.</p> + <div id=test><div id=test01>1</div><div id=test02>2</div><div id=test03>3</div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/justify-content_flex-start.html b/testing/web-platform/tests/css/css-flexbox/justify-content_flex-start.html new file mode 100644 index 0000000000..d1bb24707f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/justify-content_flex-start.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Flexible Box Test: justify-content_flex-start</title> + <link rel="author" title="Intel" href="http://www.intel.com" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property" /> + <meta name="assert" content="Check if the web engine can indentify the justify-content value flex-start." /> + <style> + #test01, #test02, #test03{ + text-align:center; + font-size: 20px; + width: 30px; + } + #test01{ + background: #7FFF00; + } + #test02{ + background: #00FFFF; + } + #test03{ + background: #4169E1; + } + #test{ + background: #ff0000; + height: 200px; + width: 200px; + display: flex; + justify-content: flex-start; + } + </style> + </head> + <body> + <p>Test passes if:<br> + 1. the rectangle 1, 2, 3 show up in a row in a red rectangle and no gap between them.<br> + 2. the rectangle 1, 2, 3 appear in left of red rectangle.<br> + 3. the height of the 1, 2, 3 is the same as the height of the red rectangle.</p> + <div id=test><div id=test01>1</div><div id=test02>2</div><div id=test03>3</div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/justify-content_space-around.html b/testing/web-platform/tests/css/css-flexbox/justify-content_space-around.html new file mode 100644 index 0000000000..a8505f6f67 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/justify-content_space-around.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Flexible Box Test: justify-content_space-around</title> + <link rel="author" title="Intel" href="http://www.intel.com" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property" /> + <meta name="assert" content="Check if the web engine can indentify the justy-content value space-around." /> + <style> + #test01, #test02, #test03{ + text-align:center; + font-size: 20px; + width: 30px; + } + #test01{ + background: #7FFF00; + } + #test02{ + background: #00FFFF; + } + #test03{ + background: #4169E1; + } + #test{ + background: #ff0000; + height: 200px; + width: 200px; + display: flex; + justify-content: space-around; + } + </style> + </head> + <body> + <p>Test passes if:<br> + 1. the rectangle 1, 2, 3 show up in a row in a red rectangle.<br> + 2. the rectangle 1, 2, 3 are distributed such that the empty space between any two adjacent rectangle is the same, and the empty space of the row before the first and after the last rectangle are half the size of the other empty spaces.<br> + 3. the height of the 1, 2, 3 is the same as the height of the red rectangle.</p> + <div id=test><div id=test01>1</div><div id=test02>2</div><div id=test03>3</div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/justify-content_space-between-001.html b/testing/web-platform/tests/css/css-flexbox/justify-content_space-between-001.html new file mode 100644 index 0000000000..862841239c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/justify-content_space-between-001.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Flexible Box Test: justify-content_space-between</title> + <link rel="author" title="Intel" href="http://www.intel.com" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property" /> + <meta name="assert" content="Check if the web engine can indentify the justify-content value space-between." /> + <style> + #test01, #test02, #test03{ + text-align:center; + font-size: 20px; + width: 30px; + } + #test01{ + background: #7FFF00; + } + #test02{ + background: #00FFFF; + } + #test03{ + background: #4169E1; + } + #test{ + background: #ff0000; + height: 200px; + width: 200px; + display: flex; + justify-content: space-between; + } + </style> + </head> + <body> + <p>Test passes if:<br> + 1. the rectangle 1, 2, 3 show up in a row in a red rectangle.<br> + 2. No gap between the left edge of red rectangle and the left of rectangle 1, no gap between the right edge of red rectangle and the right of rectangle 3 too, and rectangle 2 is distributed so that the empty space between rectangle 1 and rectangle 3 is the same.<br> + 3. the height of the 1, 2, 3 is the same as the height of the red rectangle.</p> + <div id=test><div id=test01>1</div><div id=test02>2</div><div id=test03>3</div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/justify-content_space-between-002.html b/testing/web-platform/tests/css/css-flexbox/justify-content_space-between-002.html new file mode 100644 index 0000000000..fde1a73124 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/justify-content_space-between-002.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>CSS Flexbox: justify-content: space-between on the last item of a column</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#justify-content-property"> +<link rel="bookmark" href="https://crbug.com/690024"> +<meta name="assert" content="This test checks when processing the last item on a column we should not add justify-content space to the row height."> +<style> +.flexbox { + display: flex; + flex-direction: column; + justify-content: space-between; + min-height: 500px; +} +</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 class="flexbox" data-expected-height="500"> + <div>First item</div> + <div>Second item</div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/layout-algorithm_algo-cross-line-001.html b/testing/web-platform/tests/css/css-flexbox/layout-algorithm_algo-cross-line-001.html new file mode 100644 index 0000000000..7fcc96f3c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/layout-algorithm_algo-cross-line-001.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Grid Layout Test: cross size determination with overflow:scroll</title> + <link rel="author" title="Tomek Wytrebowicz" href="mailto:tomalecpub+github@gmail.com"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#algo-cross-line" title="9.4. Cross Size Determination" /> + <link rel="match" href="reference/layout-algorithm_algo-cross-line-001-ref.html" /> + <meta name="assert" content="This test checks that correct height is applied if overflow: scroll is set" /> + <style type="text/css"> + .flex { + width: 200px; + display: flex; + background: red; + } + + .flex>* { + background: green; + height: 200px; + flex: 1; + overflow: scroll; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square with scrollbars and <strong>no red</strong>.</p> + + <div class="flex"> + <div></div> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/layout-algorithm_algo-cross-line-002.html b/testing/web-platform/tests/css/css-flexbox/layout-algorithm_algo-cross-line-002.html new file mode 100644 index 0000000000..1d860b4400 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/layout-algorithm_algo-cross-line-002.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Grid Layout Test: cross size determination with overflow:scroll</title> + <link rel="author" title="Tomek Wytrebowicz" href="mailto:tomalecpub+github@gmail.com"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#algo-cross-line" title="9.4. Cross Size Determination" /> + <link rel="match" href="reference/layout-algorithm_algo-cross-line-002-ref.html" /> + <meta name="assert" content="This test checks that correct width is applied if overflow: scroll is set" /> + <style type="text/css"> + .flex { + width: 200px; + height: 200px; + display: flex; + background: red; + flex-direction: column; + } + + .flex>* { + background: green; + width: 200px; + height: 100px; + overflow: scroll; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square with scrollbars and <strong>no red</strong>.</p> + + <div class="flex"> + <div></div><div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/layout-with-inline-svg-001.html b/testing/web-platform/tests/css/css-flexbox/layout-with-inline-svg-001.html new file mode 100644 index 0000000000..c647767a6b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/layout-with-inline-svg-001.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> +<title>CSS Flexbox: layout of child SVG elements.</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property"> +<link rel="help" href="https://drafts.csswg.org/css-position/#position-property"> +<link rel="help" href="https://crbug.com/633212"/> +<meta name="assert" content="This test ensures that a flexbox and its flex items are properly laid out when containing an empty SVG element in an abspos container."/> + +<style> +html, body { + margin: 0; +} + +#flexbox { + display: flex; + flex-direction: column; +} + +#flexitem { + outline: 1px solid black; + width: 100%; + height: 166px; + position: relative; + background: green; +} + +#abspos { + position: absolute; +} + +#container { + background: red; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<body> + +<div id="container"> + <div id="flexbox"> + <div id="flexitem"> + <div id="abspos"> + <svg></svg> + </div> + </div> + </div> +</div> + +<script> +test(function() { + assert_equals(document.getElementById('flexbox').offsetWidth, + document.getElementById('flexitem').offsetWidth); +}, "sizes"); +</script> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/max-width-violation.html b/testing/web-platform/tests/css/css-flexbox/max-width-violation.html new file mode 100644 index 0000000000..ea2779d81c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/max-width-violation.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<title>CSS Flexbox: max-width of inflexible items</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#resolve-flexible-lengths"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flexibility"> +<link rel="bookmark" href="https://crbug.com/617956"> +<meta name="assert" content="Inflexible items (flex factor 0 or flex basis violating the min/max size constraint) take max-width into account."> +<style> +.columns { + display: flex; + width: 800px; +} + +.columns > div { + background: #aaa; +} + +.column1 { + width: 800px; + overflow: auto; + max-width: 150px; +} + +.column2 { + flex: 0.8 0 0; +} + +.red { + position: absolute; + width: 510px; + background: red !important; + height: 10px; + z-index: -1; +} + +.abspos { + position: absolute; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.columns')"> +<div id=log></div> + +<p>You should see no red</p> +<div class="columns"> + <div class="red"></div> + <div class="column1" data-expected-width="150"> + Column 1 + </div> + <div class="column2" data-expected-width="520"> + Column 2 + </div> +</div> + +<p>This second part is just to ensure we don't assert</p> +<div class="columns"> + <div class="column1 abspos" data-expected-width="150"> + Column 1 + </div> + <div class="column2" data-expected-width="640"> + Column 2 + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/multiline-column-max-height.html b/testing/web-platform/tests/css/css-flexbox/multiline-column-max-height.html new file mode 100644 index 0000000000..5a165233f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/multiline-column-max-height.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title>CSS Flexbox: wrapping column flexbox with max-height don't overflow.</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-flow-property"> +<link rel="match" href="reference/multiline-column-max-height-ref.html"> +<meta name="assert" content="This test ensures that the flex line length is limited to max-height in a wrapping column flexbox."/> +<style> +.flex { + display: flex; + flex-flow: column wrap; + max-height: 200px; + background: blue; + color: blue; +} + +.item { + flex: 0 0 auto; + line-height: 20px; +} +</style> +There should only be a blue box below, and the word "FAIL" should not be seen. +<div class="flex"> + <span class="item">FAIL</span> + <span class="item">FAIL</span> + <span class="item">FAIL</span> + <span class="item">FAIL</span> + <span class="item">FAIL</span> + <span class="item">FAIL</span> + <span class="item">FAIL</span> + <span class="item">FAIL</span> + <span class="item">FAIL</span> + <span class="item">FAIL</span> + <span class="item">FAIL</span> + <span class="item">FAIL</span> + <span class="item">FAIL</span> + <span class="item">FAIL</span> + <span class="item">FAIL</span> + <span class="item">FAIL</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/multiline-min-max.html b/testing/web-platform/tests/css/css-flexbox/multiline-min-max.html new file mode 100644 index 0000000000..8a8bb0a539 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/multiline-min-max.html @@ -0,0 +1,151 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Flexbox: multiline flexbox and line breaks.</title> +<link rel="stylesheet" href="support/flexbox.css" > +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item"> +<meta name="assert" content="This test ensures that multiline flexbox uses min/max constraints when finding line breaks."/> +<style> +.flexbox { + width: 600px; + background-color: grey; + border: 5px solid black; + height: 20px; + position: relative; +} +.flexbox > div { + height: 10px; +} +.children-border-box > div { + box-sizing: border-box; +} + +.flexbox :nth-child(1) { + background-color: blue; +} +.flexbox :nth-child(2) { + background-color: yellow; +} +.flexbox :nth-child(3) { + background-color: salmon; +} +.flexbox :nth-child(4) { + background-color: lime; +} +.flexbox :nth-child(5) { + background-color: red; +} +.flexbox :nth-child(6) { + background-color: orange; +} +.flexbox :nth-child(7) { + background-color: purple; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('.flexbox')"> +<div id=log></div> + +<div class="flexbox wrap"> + <div class="flex-one" style="min-width: 400px" data-expected-width="400" data-offset-x="0" data-offset-y="0"></div> + <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="400" data-offset-y="0"></div> + <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="500" data-offset-y="0"></div> + <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="0" data-offset-y="10"></div> +</div> + +<div class="flexbox wrap"> + <div class="flex-one" style="min-width: 400px; padding-left: 10px;" data-expected-width="500" data-offset-x="0" data-offset-y="0"></div> + <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="500" data-offset-y="0"></div> + <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="0" data-offset-y="10"></div> + <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="100" data-offset-y="10"></div> +</div> + +<div class="flexbox wrap"> + <div class="flex-one" style="min-width: 400px; border-left: 10px solid red;" data-expected-width="500" data-offset-x="0" data-offset-y="0"></div> + <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="500" data-offset-y="0"></div> + <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="0" data-offset-y="10"></div> + <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="100" data-offset-y="10"></div> +</div> + +<div class="flexbox wrap"> + <div class="flex-one" style="min-width: 400px; margin-left: 10px;" data-expected-width="490" data-offset-x="10" data-offset-y="0"></div> + <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="500" data-offset-y="0"></div> + <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="0" data-offset-y="10"></div> + <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="100" data-offset-y="10"></div> +</div> + +<div class="flexbox wrap"> + <div style="flex: 1 1 600px; flex: 1 1 600px; max-width: 300px;" data-expected-width="300" data-offset-x="0" data-offset-y="0"></div> + <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100" data-offset-x="300" data-offset-y="0"></div> + <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100" data-offset-x="400" data-offset-y="0"></div> + <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100" data-offset-x="500" data-offset-y="0"></div> +</div> + +<div class="flexbox wrap"> + <div style="flex: 1 1 600px; flex: 1 1 600px; max-width: 300px; padding-left: 10px;" data-expected-width="310" data-offset-x="0" data-offset-y="0"></div> + <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145" data-offset-x="310" data-offset-y="0"></div> + <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145" data-offset-x="455" data-offset-y="0"></div> + <div class="flex-one-one-auto" style="width: 100px" data-expected-width="600" data-offset-x="0" data-offset-y="10"></div> +</div> + +<div class="flexbox wrap"> + <div style="flex: 1 1 600px; flex: 1 1 600px; max-width: 300px; border-left: 10px solid red;" data-expected-width="310" data-offset-x="0" data-offset-y="0"></div> + <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145" data-offset-x="310" data-offset-y="0"></div> + <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145" data-offset-x="455" data-offset-y="0"></div> + <div class="flex-one-one-auto" style="width: 100px" data-expected-width="600" data-offset-x="0" data-offset-y="10"></div> +</div> + +<div class="flexbox wrap"> + <div style="flex: 1 1 600px; flex: 1 1 600px; max-width: 300px; margin-left: 10px;" data-expected-width="300" data-offset-x="10" data-offset-y="0"></div> + <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145" data-offset-x="310" data-offset-y="0"></div> + <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145" data-offset-x="455" data-offset-y="0"></div> + <div class="flex-one-one-auto" style="width: 100px" data-expected-width="600" data-offset-x="0" data-offset-y="10"></div> +</div> + +<div class="flexbox wrap children-border-box"> + <div class="flex-one" style="min-width: 400px; padding-left: 10px;" data-expected-width="400" data-offset-x="0" data-offset-y="0"></div> + <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="400" data-offset-y="0"></div> + <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="500" data-offset-y="0"></div> + <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="0" data-offset-y="10"></div> +</div> + +<div class="flexbox wrap children-border-box"> + <div class="flex-one" style="min-width: 400px; border-left: 10px solid red;" data-expected-width="400" data-offset-x="0" data-offset-y="0"></div> + <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="400" data-offset-y="0"></div> + <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="500" data-offset-y="0"></div> + <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="0" data-offset-y="10"></div> +</div> + +<div class="flexbox wrap children-border-box"> + <div class="flex-one" style="min-width: 400px; margin-left: 10px;" data-expected-width="490" data-offset-x="10" data-offset-y="0"></div> + <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="500" data-offset-y="0"></div> + <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="0" data-offset-y="10"></div> + <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="100" data-offset-y="10"></div> +</div> + +<div class="flexbox wrap children-border-box"> + <div style="flex: 1 1 600px; flex: 1 1 600px; max-width: 300px; padding-left: 10px;" data-expected-width="300" data-offset-x="0" data-offset-y="0"></div> + <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100" data-offset-x="300" data-offset-y="0"></div> + <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100" data-offset-x="400" data-offset-y="0"></div> + <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100" data-offset-x="500" data-offset-y="0"></div> +</div> + +<div class="flexbox wrap children-border-box"> + <div style="flex: 1 1 600px; flex: 1 1 600px; max-width: 300px; border-left: 10px solid red;" data-expected-width="300" data-offset-x="0" data-offset-y="0"></div> + <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100" data-offset-x="300" data-offset-y="0"></div> + <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100" data-offset-x="400" data-offset-y="0"></div> + <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100" data-offset-x="500" data-offset-y="0"></div> +</div> + +<div class="flexbox wrap children-border-box"> + <div style="flex: 1 1 600px; flex: 1 1 600px; max-width: 300px; margin-left: 10px;" data-expected-width="300" data-offset-x="10" data-offset-y="0"></div> + <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145" data-offset-x="310" data-offset-y="0"></div> + <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145" data-offset-x="455" data-offset-y="0"></div> + <div class="flex-one-one-auto" style="width: 100px" data-expected-width="600" data-offset-x="0" data-offset-y="10"></div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/multiline-min-preferred-width.html b/testing/web-platform/tests/css/css-flexbox/multiline-min-preferred-width.html new file mode 100644 index 0000000000..b5974aa673 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/multiline-min-preferred-width.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Flexbox: nested multiline (wrapping) flex boxes.</title> +<link rel="stylesheet" href="support/flexbox.css" > +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> +<meta name="assert" content="This test ensures that nested multiline flex boxes with 'flex-wrap: wrap' and the min preferred width set are laid out properly."/> +<style> +.item { + padding: 7px; + background-color: green; + border: 4px solid olive; + width: min-content; +} + +.square { + background-color: lime; + width: 20px; + height: 20px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +</head> +<body onload="checkLayout('.container')"> +<div id=log></div> + +<div class="container flexbox wrap" data-expected-height=42> + <div class="item flexbox wrap" data-expected-width=42 data-expected-height=42> + <div class="square" data-expected-width=20 data-expected-height=20></div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/multiline-reverse-wrap-baseline.html b/testing/web-platform/tests/css/css-flexbox/multiline-reverse-wrap-baseline.html new file mode 100644 index 0000000000..310ad28232 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/multiline-reverse-wrap-baseline.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> +<title>CSS Flexbox: multiline reverse wrap baseline.</title> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> +<link rel="match" href="reference/multiline-reverse-wrap-baseline-ref.html"> +<meta name="assert" content="This test ensures that 'flex-wrap: wrap-reverse' flips the cross axis directions and items with baseline alignment are aligned to cross axis start."/> +<style> +.flexbox { + width: 200px; + display: flex; + background-color: #aaa; + position: relative; + flex-wrap: wrap-reverse; + align-items: baseline; + margin-bottom: 10px; +} +.flexbox > div { + border: 0; +} + +.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> +<body> + +<div class="flexbox"> + <div style="flex: 1 0 100px;">first<br>first<br>first</div> + <div style="flex: 1 0 100px;">second</div> + <div style="flex: 1 0 100px; margin-top: 5px">third</div> + <div style="flex: 1 0 100px;">fourth<br>fourth</div> +</div> + +<div class="flexbox"> + <div style="flex: 1 0 100px;">first<br>first<br>first</div> + <div style="flex: 1 0 100px;">second</div> + <div style="flex: 1 0 100px;">third</div> + <div style="flex: 1 0 100px; margin-bottom: 5px">fourth<br>fourth</div> +</div> + +<div class="flexbox" style="width: 300px;"> + <div style="flex: 1 0 100px; align-self: flex-start; height: 100px">first</div> + <div style="flex: 1 0 100px;">second</div> + <div style="flex: 1 0 100px;">third<br>third</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/multiline-shrink-to-fit.html b/testing/web-platform/tests/css/css-flexbox/multiline-shrink-to-fit.html new file mode 100644 index 0000000000..e2a65a501f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/multiline-shrink-to-fit.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<html> +<title>CSS Flexbox: multiline column flexboxes and shrink-to-fit.</title> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#intrinsic-sizes"> +<link rel="match" href="reference/multiline-shrink-to-fit-ref.html"> +<meta name="assert" content="This test ensures that multiline column flexboxes shrink-to-fit works properly."/> +<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> +<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 class="flexbox" style="height: 30px"> + <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 class="flexbox" style="height: 35px"> + <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> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/negative-available-size-crash.html b/testing/web-platform/tests/css/css-flexbox/negative-available-size-crash.html new file mode 100644 index 0000000000..837fdaeba9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/negative-available-size-crash.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1274476"> +<div style="display: flex;"> + <div style="display: flex; height: 0; overflow-x: scroll;">a diff --git a/testing/web-platform/tests/css/css-flexbox/negative-flex-margins-crash.html b/testing/web-platform/tests/css/css-flexbox/negative-flex-margins-crash.html new file mode 100644 index 0000000000..8bcc566c0f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/negative-flex-margins-crash.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Flexbox: Crash caused by negative width in flex box</title> +<link rel="author" title="Christian Biesinger" href="mailto:cbiesinger@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#box-model"> +<link rel="issue" href="https://crbug.com/490423"> +<meta name="assert" content="Check that crash doesn't happen in flex box with negative margin."> + +<style> +div { + display: flex; +} + +.inner { + margin-left: -4em; +} +</style> +<div> + <div> + <div class="inner">PASS if we don't assert</div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/negative-flex-rounding-crash.html b/testing/web-platform/tests/css/css-flexbox/negative-flex-rounding-crash.html new file mode 100644 index 0000000000..ad69cc059e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/negative-flex-rounding-crash.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<title>CSS Flexbox: Crash caused by rounding error in flex-shrink</title> +<link rel="author" title="Tony Chang" href="mailto:tony@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#resolve-flexible-lengths"> +<link rel="issue" href="https://bugs.webkit.org/show_bug.cgi?id=97606"> +<meta name="assert" content="Check that crash doesn't happen in flex-shrink due to floating point precision errors."> + +<style> +.math { + display: inline-flex; +} +.math > * { + padding-bottom: 0.35em; +} +.mfrac { + display: inline-flex; + flex-direction: column; +} +.mfrac > :first-child { + margin-block-end: 0.2em; +} +.mfrac > :last-child { + margin-block-start: 0.2em; +} +.x { + line-height: 9px; +} +.y { + line-height: 12px; +} +</style> +<div class=math> + <div class=mfrac> + <div class=mfrac> + <div class=x>x</div> + <div class=y>y</div> + </div> + <div class=mfrac> + <div class=mfrac> + <div class=x>x</div> + <div class=y>y</div> + </div> + <div class=x>z</div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/negative-item-margins-002-crash.html b/testing/web-platform/tests/css/css-flexbox/negative-item-margins-002-crash.html new file mode 100644 index 0000000000..97b450df9a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/negative-item-margins-002-crash.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>Negative item margins</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#resolve-flexible-lengths" /> + +<p>Test passes if it doesn't crash.</p> + +<div style="display: flex; flex-flow: column;"> + <div style="margin: -10px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/negative-item-margins-crash.html b/testing/web-platform/tests/css/css-flexbox/negative-item-margins-crash.html new file mode 100644 index 0000000000..d5f9365b5e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/negative-item-margins-crash.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>min-width: auto, negative margins</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" /> +<link rel="issue" href="https://crbug.com/1075908" /> + +<p>Test passes if it doesn't crash.</p> + +<div style="display: flex"> + <div style="flex-basis: 0; margin: -10px;"> + <div style="width: 100px"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/negative-margins-001.html b/testing/web-platform/tests/css/css-flexbox/negative-margins-001.html new file mode 100644 index 0000000000..cd14ce0d4e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/negative-margins-001.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexible Box Test: Negative margins</title> +<link rel="author" title="Google Inc." href="https://www.google.com/"> +<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#item-margins"> +<link rel="match" href="reference/negative-margins-001-ref.html"> +<meta name="assert" content="Tests that for intrinsic size computations, +an item may take up less than zero space when it has negative margins."> +<style> + .container { + width: 40px; + background-color: red; + line-height: 0px; + border: 3px black solid; + } + + .flex { + display: inline-flex; + background-color: green; + } + + .item { + width: 20px; + height: 10px; + background-color: green; + } + + .first { + width: 40px; + } + + .neg-marg { + margin-left: -40px; + } +</style> +<body> + <p>You should see a green rectangle with a black border, 40px wide. You should see no red.</p> + + <div class="container"> + <div class="flex"> + <div class="item first"></div> + <div class="item neg-marg"></div> + <div class="item"></div> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/negative-overflow-002.html b/testing/web-platform/tests/css/css-flexbox/negative-overflow-002.html new file mode 100644 index 0000000000..171095d2b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/negative-overflow-002.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1114306"> +<style> +.container { + width: 100px; height: 100px; + overflow: scroll; + border: solid 3px; + display: inline-flex; + padding: 10px; + gap: 10px; + align-items: start; + margin: 10px; + vertical-align: bottom; +} + +.item { + min-width: 110px; min-height: 110px; + background: cyan; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.container')"> +<script> +const writingModes = ['horizontal-tb', 'vertical-rl', 'vertical-lr']; +const directions = ['ltr', 'rtl']; +const flexDirections = ['row', 'row-reverse', 'column', 'column-reverse']; +const flexWraps = ['nowrap', 'wrap', 'wrap-reverse']; + +for (let writingMode of writingModes) { + for (let direction of directions) { + for (let flexDirection of flexDirections) { + for (let flexWrap of flexWraps) { + let container = document.createElement('div'); + container.className = 'container'; + container.style.writingMode = writingMode; + container.style.direction = direction; + container.style.flexDirection = flexDirection; + container.style.flexWrap = flexWrap; + + for (let i = 0; i < 3; i++) { + let item = document.createElement('div'); + item.className = 'item'; + item.textContent = (i+1); + container.appendChild(item); + } + + let bias = writingMode == 'horizontal-tb'; + if (flexWrap != 'nowrap') { + bias = !bias; + } + if (flexDirection == 'row' || flexDirection == 'row-reverse') { + bias = !bias; + } + container.setAttribute('data-expected-scroll-width', bias ? 130 : 370); + container.setAttribute('data-expected-scroll-height', bias ? 370 : 130); + + document.body.appendChild(container); + } + } + } +} +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/negative-overflow.html b/testing/web-platform/tests/css/css-flexbox/negative-overflow.html new file mode 100644 index 0000000000..52fa9b97b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/negative-overflow.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Flexbox: align-items: center/flex-end and bottom padding.</title> +<link rel="stylesheet" href="support/flexbox.css" > +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#align-items-property"> +<meta name="assert" content="This test ensures that flexbox containers with 'align-items: center|flex-end' and 'overflow: auto/scroll' have no extra bottom padding."/> +<style> +.flexbox { + overflow: auto; + height: 50px; + width: 50px; + background-color: red; + position: relative; +} + +.vertical-padding { + padding-top: 5px; + padding-bottom: 10px; + background-color: lime; +} + +.vertical-border { + border-top: 2px solid black; + border-bottom: 8px solid lightblue; +} + +.flexbox > div { + width: 100%; + height: 100px; + background-color: green; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script> +window.onload = function() { + checkLayout('.flexbox'); + + // Make failures more obvious by showing the red background that should have been clipped. + Array.prototype.forEach.call(document.querySelectorAll(".flexbox"), function(element) { + element.scrollTop = 1000; + }); +}; +</script> +</head> +<body> +<div id=log></div> + +<div class="flexbox align-items-flex-end" data-expected-scroll-height="50"> + <div></div> +</div> + +<div class="flexbox align-items-flex-end" data-expected-scroll-height="150"> + <div></div> + <div style="position: absolute; left: 0; top: 50px;"></div> +</div> + +<div class="flexbox align-items-center" data-expected-scroll-height="75"> + <div></div> +</div> + +<div class="flexbox" data-expected-scroll-height="100"> + <div></div> +</div> + +<div class="flexbox wrap-reverse" data-expected-scroll-height="200"> + <div></div> + <div></div> +</div> + +<div class="flexbox align-items-flex-end vertical-padding" data-expected-scroll-height="65"> + <div></div> +</div> + +<div class="flexbox align-items-flex-end vertical-padding vertical-border" data-expected-scroll-height="65"> + <div></div> +</div> + +<div class="flexbox align-items-center vertical-padding" data-expected-scroll-height="90"> + <div></div> +</div> + +<div class="flexbox vertical-padding" data-expected-scroll-height="115"> + <div></div> +</div> + +<div class="flexbox vertical-padding vertical-border" data-expected-scroll-height="115"> + <div></div> +</div> + +<div class="flexbox wrap-reverse vertical-padding" data-expected-scroll-height="215"> + <div></div> + <div></div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/nested-flex-image-loading-invalidates-intrinsic-sizes.html b/testing/web-platform/tests/css/css-flexbox/nested-flex-image-loading-invalidates-intrinsic-sizes.html new file mode 100644 index 0000000000..246740960c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/nested-flex-image-loading-invalidates-intrinsic-sizes.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/"> +<meta name="assert" content="Loaded image correctly invalidates intrinsic widths of its ancestor chain so that it can be recomputed in flex layout"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> +<style> +.flexbox { + display: flex; +} +.green-border { + border: 20px solid green; +} +.img { + max-width: 100%; + max-height: 100%; +} +</style> +</head> +<body> + <p>Test passes if there is a filled green square.</p> + <div class="flexbox"> + <div> + <div class="flexbox green-border"> + <img src="/css/support/60x60-green.png" class="img"> + </div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/nested-orthogonal-flexbox-relayout.html b/testing/web-platform/tests/css/css-flexbox/nested-orthogonal-flexbox-relayout.html new file mode 100644 index 0000000000..ef158c6a48 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/nested-orthogonal-flexbox-relayout.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<title>CSS Flexbox: nested orthogonal children on relayout.</title> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> +<link rel="match" href="reference/nested-orthogonal-flexbox-relayout-ref.html"> +<meta name="assert" content="This test ensures nested orthogonal flex items get properly relaid out when flexbox changes dimensions."/> +<style> +#column { + display: flex; + flex-direction: column; + border: 5px solid yellow; +} + +#row { + display: flex; + flex-direction: row; + border: 5px solid blue; +} + +.item { + border: 5px solid green; +} +</style> +<body> +<div id="column"> + <div id="row"> + <div class="item">This text should not overflow its box</div> + </div> +</div> +<script> +var columnBox = document.getElementById("column"); +columnBox.offsetHeight; +columnBox.style.width = "200px"; +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/order-001.htm b/testing/web-platform/tests/css/css-flexbox/order-001.htm new file mode 100644 index 0000000000..98b937c02d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/order-001.htm @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: The 'order' property on flex items set to a value of '-1'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#order-property" /> + <meta name="assert" content="This test checks that a flex container will lay out its content in the order specified by the ordinal groups." /> + <style type="text/css"> + #flexbox + { + background-color: red; + display: flex; + width: 300px; + } + div div + { + height: 100px; + width: 150px; + } + #flexItem1 + { + background-color: orange; + } + #flexItem2 + { + background-color: blue; + order: -1; + } + </style> + </head> + <body> + <p>Test passes if there is a single blue rectangle on the left, a single orange rectangle directly to its right, and there is no red visible on the page.</p> + <div id="flexbox"> + <div id="flexItem1"></div> + <div id="flexItem2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-flexbox/order-painting.html b/testing/web-platform/tests/css/css-flexbox/order-painting.html new file mode 100644 index 0000000000..68e0fd6aac --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/order-painting.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<title>CSS Flexbox: painting order.</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#order-property"> +<link rel="match" href="reference/order-painting-ref.html"> +<meta name="assert" content="This test ensures that the 'order' style properly changes the paint order of flex items."/> +<body> +<p>This test passes if there is no red showing.</p> + +<div style="display: flex; width: 100px;"> + <div style="order: 2; background-color: green; width: 100px; height: 100px; margin-left: -50px;"></div> + <div style="order: 1; background-color: red; width: 50px; height: 100px;"></div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/order/order-abs-children-painting-order-different-container.html b/testing/web-platform/tests/css/css-flexbox/order/order-abs-children-painting-order-different-container.html new file mode 100644 index 0000000000..202581dd1d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/order/order-abs-children-painting-order-different-container.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<title>CSS Test: flex order affects painting order of absolutely positioned boxes inside flex</title> +<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-order"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1489495"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="This test check that relative positioned boxes that are grandchildren of two flexboxes don't sort paint order relative to each other."> +<style> + #test { + display: flex; + height: 100px; + width: 100px; + } + + #test2 { + display: flex; + height: 100px; + width: 100px; + } + + #order-1 { + order: 1; + } + + #order-2 { + order: 2; + } + + .inner { + position: relative; + width: 100px; + height: 100px; + } + + #order-1 .inner { + background-color: green; + } + + #order-2 .inner { + background-color: red; + } +</style> +<p>Test passes if there is a filled green square.</p> +<div id="test"> + <div id="order-2"> + <div class="inner"></div> + </div> +</div> +<div id="test2" style="margin-top: -100px"> + <div id="order-1"> + <div class="inner"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/order/order-abs-children-painting-order.html b/testing/web-platform/tests/css/css-flexbox/order/order-abs-children-painting-order.html new file mode 100644 index 0000000000..248f380e5a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/order/order-abs-children-painting-order.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<title>CSS Test: flex order affects painting order of absolutely positioned boxes inside flex</title> +<link rel="author" title="Dennis Schubert" href="mailto:dschubert@mozilla.com"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-order"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=606208"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="This test check that absolutely positioned boxes inside flex items have their painting orders affected by 'order'."> +<style> + #test { + display: flex; + position: relative; + height: 100px; + width: 100px; + } + + #order-1 { + order: 1; + } + + #order-2 { + order: 2; + } + + .inner { + position: absolute; + bottom: 0; + left: 0; + right: 0; + top: 0; + } + + #order-1 .inner { + background-color: red; + } + + #order-2 .inner { + background-color: green; + } +</style> +<p>Test passes if there is a filled green square.</p> +<div id="test"> + <div id="order-2"> + <div class="inner"></div> + </div> + <div id="order-1"> + <div class="inner"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/order/order-with-column-reverse-ref.html b/testing/web-platform/tests/css/css-flexbox/order/order-with-column-reverse-ref.html new file mode 100644 index 0000000000..c8b9be7c4e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/order/order-with-column-reverse-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test Reference: flex container layout lowest order with column-reverse direction</title> + <link rel="author" title="tmtysk" href="mailto:tmtysk@gmail.com"> + <link rel="reviewer" title="Tab Atkins" href="mailto:jackalmage@gmail.com"> + <style> + p { + margin: 0; + } + </style> + </head> + <body> + <p>Test passes if the paragraph below reads 'First,Second,Third' from top.</p> + <div id="test"> + <p id="first">First,</p> + <p id="second">Second,</p> + <p id="third">Third</p> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/order/order-with-column-reverse.html b/testing/web-platform/tests/css/css-flexbox/order/order-with-column-reverse.html new file mode 100644 index 0000000000..5083d68436 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/order/order-with-column-reverse.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: flex container layout lowest order with column-reverse direction</title> + <link rel="author" title="tmtysk" href="mailto:tmtysk@gmail.com"> + <link rel="reviewer" title="Tab Atkins" href="mailto:jackalmage@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#order-property"> + <link rel="match" href="order-with-column-reverse-ref.html"> + <meta name="assert" content="This test check that a flex container layouts out its content starting with the lowest numbered ordinal group and going up with column-reverse direction."> + <style> + #test { + display: flex; + flex-direction: column-reverse; + } + + #first { + order: 3; + } + + #second { + order: 2; + } + + #third { + order: 1; + } + p { + margin: 0; + } + </style> + </head> + <body> + <p>Test passes if the paragraph below reads 'First,Second,Third' from top.</p> + <div id="test"> + <p id="second">Second,</p> + <p id="first">First,</p> + <p id="third">Third</p> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/order/order-with-row-reverse-ref.html b/testing/web-platform/tests/css/css-flexbox/order/order-with-row-reverse-ref.html new file mode 100644 index 0000000000..c45b612dfe --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/order/order-with-row-reverse-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test Reference: flex container layout lowest order with row-reverse direction</title> + <link rel="author" title="tmtysk" href="mailto:tmtysk@gmail.com"> + <link rel="reviewer" title="Tab Atkins, Jr." href="mailto:jackalmage@gmail.com"> + <style> + #leftmost { + float: right; + } + + #middle { + float: right; + } + + #rightmost { + float: right; + } + </style> + </head> + <body> + <p>Test passes if the paragraph below reads 'First,Second,Third' from leftmost.</p> + <div id="test"> + <p id="rightmost">Third</p> + <p id="middle">Second,</p> + <p id="leftmost">First,</p> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/order/order-with-row-reverse.html b/testing/web-platform/tests/css/css-flexbox/order/order-with-row-reverse.html new file mode 100644 index 0000000000..c36d4831b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/order/order-with-row-reverse.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: flex container layout lowest order with row-reverse direction</title> + <link rel="author" title="tmtysk" href="mailto:tmtysk@gmail.com"> + <link rel="reviewer" title="Tab Atkins, Jr." href="mailto:jackalmage@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#order-property"> + <link rel="match" href="order-with-row-reverse-ref.html"> + <meta name="assert" content="This test check that a flex container layouts out its content starting with the lowest numbered ordinal group and going up with row-reverse direction."> + <style> + #test { + display: flex; + flex-direction: row-reverse; + } + + #leftmost { + order: 1; + } + + #middle { + order: 0; + } + + #rightmost { + order: -1; + } + </style> + </head> + <body> + <p>Test passes if the paragraph below reads 'First,Second,Third' from leftmost.</p> + <div id="test"> + <p id="leftmost">First,</p> + <p id="middle">Second,</p> + <p id="rightmost">Third</p> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/order_value.html b/testing/web-platform/tests/css/css-flexbox/order_value.html new file mode 100644 index 0000000000..c45aa0f3bc --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/order_value.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Flexible Box Test: order_check</title> + <link rel="author" title="Intel" href="http://www.intel.com" /> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#order-property" /> + <link rel="stylesheet" href="support/test-style.css"> + <meta name="assert" content="Check if the web engine can indentify order property." /> + <style> + #test{ + height: 200px; + width: 200px; + display: flex; + } + div#test02{ + order: -1; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + <body> + <div id=log></div> + <div id=test><div id=test01>1</div><div id=test02>2</div><div id=test03>3</div></div> + <script type="text/javascript"> + var t = async_test(); + t.step(function () { + assert_equals(document.getElementById("test01").offsetTop, document.getElementById("test02").offsetTop, "Rectangle 1 and 2 have the same offsetTop value"); + assert_equals((document.getElementById("test02").offsetLeft >= document.getElementById("test01").offsetLeft), false, "Rectangle 2 have a smaller offsetLeft value than 1."); + }); + t.done(); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/ortho-table-item-001.html b/testing/web-platform/tests/css/css-flexbox/ortho-table-item-001.html new file mode 100644 index 0000000000..dca42e559f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/ortho-table-item-001.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>ortho table is flex item</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#used-min-width-of-table"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#ref-for-hypothetical-main-size"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="Table's specially-defined used min width is honored when the table is an ortho flex item."> + +<p>Test passes if there is a filled green square.</p> +<div style="display: flex; width: 0px;"> + <div style="display: table; writing-mode: vertical-rl; min-width: 0px; width: 100px; height: 100px; background: green;"> + <div style="display: table-cell"> + <div style="width: 100px"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/orthogonal-flex-item-crash.html b/testing/web-platform/tests/css/css-flexbox/orthogonal-flex-item-crash.html new file mode 100644 index 0000000000..056d658883 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/orthogonal-flex-item-crash.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/1081086" /> +<meta name="assert" content="This test ensures that orthogonal flex and flex-items does not crash." /> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<body style="width: 100px; height: 100px; font: 12px/1 Ahem;"> + <div style="display: flex; writing-mode: vertical-rl;"> + text text + <div style="min-height: 0; writing-mode: horizontal-tb;"> + <span id="target"></span> + text + </div> + </div> +</body> +<script> +document.body.offsetTop; +const target = document.getElementById('target'); +target.parentElement.appendChild(target); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/orthogonal-writing-modes-and-intrinsic-sizing.html b/testing/web-platform/tests/css/css-flexbox/orthogonal-writing-modes-and-intrinsic-sizing.html new file mode 100644 index 0000000000..032cd47df5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/orthogonal-writing-modes-and-intrinsic-sizing.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<title>CSS Flexbox: main size on orthogonal flex item.</title> +<link rel="stylesheet" href="support/flexbox.css" > +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-base-size"> +<link rel="issue" href="https://codereview.chromium.org/1052363002"> +<meta name="assert" content="This test ensure the correct main sizes are used when flex item is orthogonal to the flex container."/> +<style> +.flexbox { + background-color: gray; +} + +.vertical { + writing-mode: vertical-lr; + width: min-content; + background-color: blue; +} +</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" data-expected-height="20"> + <div class="vertical" data-expected-width="50" data-expected-height="20"> + <div style="width: 50px; height: 20px; background-color: blue;" data-expected-width="50" data-expected-height="20"></div> + </div> +</div> + +<div class="flexbox column" data-expected-height="20"> + <div class="vertical" data-expected-width="50" data-expected-height="20"> + <div style="width: 50px; height: 20px; background-color: blue;" data-expected-width="50" data-expected-height="20"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/overflow-area-001.html b/testing/web-platform/tests/css/css-flexbox/overflow-area-001.html new file mode 100644 index 0000000000..10685c6e84 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/overflow-area-001.html @@ -0,0 +1,119 @@ +<!DOCTYPE html> +<title>CSS Flexbox: scrollable overflow area (LTR)</title> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/"> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#scrollable"> +<link rel="match" href="reference/overflow-area-001-ref.html"> +<style> + +.set { + clear: both; + margin: 1em; +} + +.test, .ref { + display: flex; + overflow: scroll; + border: solid blue; + background: aqua; + margin: 1em 0.5em; + float: left; +} +div { + flex: none; +} + +.test { + padding: 10px; + width: 60px; + height: 60px; +} +.test > div { + margin: 20px; + border: 5px solid transparent; + padding: 5px; + width: 10px; + height: 10px; + background: teal; +} + +.ref { + width: 80px; + height: 80px; + border-color: orange; +} +.ref > div { + border: 30px solid aqua; + width: 30px; + height: 30px; + background: teal; +} +</style> + +<p>Test passes if all blue boxes in each row are identical to its first orange one, +including the size and position of the scrollbar. + +<div class="set"> + <div class="ref"> + <div></div> + </div> + <div class="test" style="flex-flow: row"> + <div></div> + </div> + <div class="test" style="flex-flow: row wrap"> + <div></div> + </div> + <div class="test" style="flex-flow: column"> + <div></div> + </div> + <div class="test" style="flex-flow: column wrap"> + <div></div> + </div> +</div> + +<div class="set"> + <div class="ref" style="flex-flow: row-reverse"> + <div></div> + </div> + <div class="test" style="flex-flow: row-reverse"> + <div></div> + </div> + <div class="test" style="flex-flow: row-reverse wrap"> + <div></div> + </div> +</div> + +<div class="set"> + <div class="ref" style="flex-flow: column-reverse"> + <div></div> + </div> + <div class="test" style="flex-flow: column-reverse"> + <div></div> + </div> + <div class="test" style="flex-flow: column-reverse wrap"> + <div></div> + </div> +</div> + +<div class="set"> + <div class="ref" style="flex-flow: row wrap-reverse"> + <div></div> + </div> + <div class="test" style="flex-flow: row wrap-reverse"> + <div></div> + </div> + <div class="test" style="flex-flow: column-reverse wrap"> + <div></div> + </div> +</div> + +<div class="set"> + <div class="ref" style="flex-flow: row-reverse wrap-reverse"> + <div></div> + </div> + <div class="test" style="flex-flow: row-reverse wrap-reverse"> + <div></div> + </div> + <div class="test" style="flex-flow: column-reverse wrap-reverse"> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/overflow-area-002.html b/testing/web-platform/tests/css/css-flexbox/overflow-area-002.html new file mode 100644 index 0000000000..1287270f1e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/overflow-area-002.html @@ -0,0 +1,120 @@ +<!DOCTYPE html> +<title>CSS Flexbox: scrollable overflow area (RTL)</title> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/"> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#scrollable"> +<link rel="match" href="reference/overflow-area-002-ref.html"> +<style> + +.set { + clear: both; + margin: 1em; + direction: rtl; +} + +.test, .ref { + display: flex; + overflow: scroll; + border: solid blue; + background: aqua; + margin: 1em 0.5em; + float: left; +} +div { + flex: none; +} + +.test { + padding: 10px; + width: 60px; + height: 60px; +} +.test > div { + margin: 20px; + border: 5px solid transparent; + padding: 5px; + width: 10px; + height: 10px; + background: teal; +} + +.ref { + width: 80px; + height: 80px; + border-color: orange; +} +.ref > div { + border: 30px solid aqua; + width: 30px; + height: 30px; + background: teal; +} +</style> + +<p>Test passes if all blue boxes in each row are identical to its first orange one, +including the size and position of the scrollbar. + +<div class="set"> + <div class="ref"> + <div></div> + </div> + <div class="test" style="flex-flow: row"> + <div></div> + </div> + <div class="test" style="flex-flow: row wrap"> + <div></div> + </div> + <div class="test" style="flex-flow: column"> + <div></div> + </div> + <div class="test" style="flex-flow: column wrap"> + <div></div> + </div> +</div> + +<div class="set"> + <div class="ref" style="flex-flow: row-reverse"> + <div></div> + </div> + <div class="test" style="flex-flow: row-reverse"> + <div></div> + </div> + <div class="test" style="flex-flow: row-reverse wrap"> + <div></div> + </div> +</div> + +<div class="set"> + <div class="ref" style="flex-flow: column-reverse"> + <div></div> + </div> + <div class="test" style="flex-flow: column-reverse"> + <div></div> + </div> + <div class="test" style="flex-flow: column-reverse wrap"> + <div></div> + </div> +</div> + +<div class="set"> + <div class="ref" style="flex-flow: row wrap-reverse"> + <div></div> + </div> + <div class="test" style="flex-flow: row wrap-reverse"> + <div></div> + </div> + <div class="test" style="flex-flow: column-reverse wrap"> + <div></div> + </div> +</div> + +<div class="set"> + <div class="ref" style="flex-flow: row-reverse wrap-reverse"> + <div></div> + </div> + <div class="test" style="flex-flow: row-reverse wrap-reverse"> + <div></div> + </div> + <div class="test" style="flex-flow: column-reverse wrap-reverse"> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/overflow-area-003.html b/testing/web-platform/tests/css/css-flexbox/overflow-area-003.html new file mode 100644 index 0000000000..ff86dea30f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/overflow-area-003.html @@ -0,0 +1,122 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Flexible Box Layout Test: Test flex container's overflow rect</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1712496"> + <link rel="match" href="reference/overflow-area-003-ref.html"> + <meta name="assert" content="This test verifies that a flex container's padding rect should not not affect its overflow rect at all."> + + <style> + .set { + clear: both; + margin: 1em; + } + + .test { + display: flex; + overflow: auto; + padding: 10px; + width: 60px; + height: 60px; + background: teal; + margin: 1em 0.5em; + float: left; + } + + .item { + width: 10px; + height: 10px; + } + + .absolute { + position: absolute; + } + + .center { + justify-content: center; + align-items: center + } + + .relative { + position: relative; + } + + .relative > .item { + flex-shrink: 0; + width: 60px; + height: 60px; + } + + .top-left { + left: -10px; + top: -10px; + } + + .bottom-right { + bottom: -10px; + right: -10px; + } + </style> + + <p>Test passes if all the teal boxes have no scrollbars.</p> + + <!-- This set tests empty flex containers. --> + <div class="set"> + <div class="test" style="flex-direction: row;"></div> + <div class="test" style="flex-direction: column;"></div> + <div class="test" style="flex-direction: row-reverse;"></div> + <div class="test" style="flex-direction: column-reverse;"></div> + </div> + + <!-- This set tests flex containers having only a abs-pos child, but no flex items. --> + <div class="set"> + <div class="test" style="flex-direction: row;"> + <div class="absolute item"></div> + </div> + <div class="test" style="flex-direction: column;"> + <div class="absolute item"></div> + </div> + <div class="test" style="flex-direction: row-reverse;"> + <div class="absolute item"></div> + </div> + <div class="test" style="flex-direction: column-reverse;"> + <div class="absolute item"></div> + </div> + </div> + + <!-- This set tests flex containers having a small centered flex item. --> + <div class="set"> + <div class="test center" style="flex-direction: row;"> + <div class="item"></div> + </div> + <div class="test center" style="flex-direction: column;"> + <div class="item"></div> + </div> + <div class="test center" style="flex-direction: row-reverse;"> + <div class="item"></div> + </div> + <div class="test center" style="flex-direction: column-reverse;"> + <div class="item"></div> + </div> + </div> + + <!-- This set tests flex containers having a relative positioned flex item. --> + <div class="set"> + <div class="test relative" style="flex-direction: row;"> + <div class="item relative bottom-right"></div> + </div> + <div class="test relative" style="flex-direction: column;"> + <div class="item relative bottom-right"></div> + </div> + <div class="test relative" style="flex-direction: row-reverse;"> + <div class="item relative top-left"></div> + </div> + <div class="test relative" style="flex-direction: column-reverse;"> + <div class="item relative top-left"></div> + </div> + </div> + +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/overflow-auto-001.html b/testing/web-platform/tests/css/css-flexbox/overflow-auto-001.html new file mode 100644 index 0000000000..08c1bdbafa --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/overflow-auto-001.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> + +<title>Tests that we consider main axis sizes to be definite in column flexboxes +when the height is an explicit definite height, even if the container does +not have a definite main axis size.</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + +<style> +/* Make it possible for red to appear in webkit/blink browsers. But the test + * still works in other browsers, you'll just get a grey scrollbar that + * shouldn't be there. + */ +::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb, ::-webkit-scrollbar { + width: 10px; + background: red; +} + +#flex { + display: flex; +} + +#item { + height: 300px; + overflow: auto; + scrollbar-color: red; +} + +#child { + height: 600px; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="width: 100px; height: 100px; background: green;"></div> + +<div id="flex"> + <div id="item"> + <div id="child"> + Text + </div> + </div> +</div> + +<script> +var item = document.getElementById('item'); +item.offsetHeight; +item.style.width = 0; +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/overflow-auto-002.html b/testing/web-platform/tests/css/css-flexbox/overflow-auto-002.html new file mode 100644 index 0000000000..2bb04a2604 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/overflow-auto-002.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<html> +<title>CSS Flexbox: correct width for non-overflowing content with flex-direction: column</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#overflow-properties"> +<link rel="help" href="https://crbug.com/580586"> +<meta name="assert" content="This test checks that no unnecessary extra horizontal space is considered for vertical scrollbars for non-overflowing content using flex-direction: column." /> + +<style> +body { + height: 200vh; +} + +section { + height: 400px; + display: flex; + flex-direction: column; +} + +.side-menu { + border: 1px solid black; + width: 200px; + display: flex; + flex-direction: column; +} + +.box-body { + height: 1000px; + flex: 1 1 0%; + display: flex; + min-height: 0px; +} + +.list { + list-style: none; + padding: 0; + overflow: auto; + flex: 1 1 0; +} + +li { + height: 20px; + background-color: red; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('section')"> + +<div id=log></div> + +<section> + <div class="box-body"> + <div class="side-menu"> + <ul class="list"> + <li data-expected-width="200"> + </li> + </ul> + </div> + <div style="height: 1000px;"></div> + </div> +</section> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/overflow-auto-003.html b/testing/web-platform/tests/css/css-flexbox/overflow-auto-003.html new file mode 100644 index 0000000000..29063b79d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/overflow-auto-003.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html> +<title>CSS Flexbox: margin: auto and overflow: auto with nested flexboxes.</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#auto-margins"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#overflow-properties"> +<link rel="help" href="https://drafts.csswg.org/css-box-3/#margins"> +<link rel="help" href="https://crbug.com/605682"> +<meta name="assert" content="This test checks that 'margin: auto' set on the outer box gets properly handled when the inner box uses 'overflow: auto', in a layout with two nested flexboxes." /> + +<style> +html, body { + margin: 0; + padding: 0; +} + +.flexbox { + display: flex; + background: papayawhip; + width: 800px; +} + +.flexbox > div { + width: 300px; + height: 300px; + margin: 0 auto; + background: olive; +} + +.flexbox > div > div { + overflow-y: auto; + height: 50px; + visibility: hidden; +} + +.elm { + height: 10px; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body> + +<div id=log></div> +<p>Below there should be a olive square <em>centered</em> inside a papayawhip box.</p> +<div class="flexbox"> + <div data-offset-x="250"> + <div> + <div id="elm"></div> + </div> + </div> +</div> + +<script> +document.body.offsetTop; +document.getElementById("elm").style.height = "800px"; +checkLayout('.flexbox'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/overflow-auto-004.html b/testing/web-platform/tests/css/css-flexbox/overflow-auto-004.html new file mode 100644 index 0000000000..fd96e8b67e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/overflow-auto-004.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<title>CSS Flexbox: no unnecessary scrollbars with overflow: auto.</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#overflow-properties"> +<link rel="help" href="https://crbug.com/646288"/> +<meta name="assert" content="This test ensures that no vertical scrollbar is rendered with 'overflow: auto' and 'flex-direction: column' when only horizontal scrolling is needed."/> + +<style> +* { + min-width: 0; + min-height: 0; +} + +body { + width: 800px; +} + +#list-wrapper { + display: flex; + flex-direction: column; +} + +#player-list-wrapper { + flex-grow: 1; + overflow: auto; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('#list-wrapper')"> + +<p>No vertical scrollbar should be rendered for this content.</p> + +<div id="list-wrapper" data-expected-width="800"> + <div id="player-list-wrapper" data-expected-width="800"> + <div data-expected-width="800">http://www.ispeech.org/p/generic/getaudio?text=http%3A%2F%2Fwww.ispeech.org%2Ftext.to.speech%3Flink%3Dhttp%253A%252F%252Fwww.ispeech.org%252Ftext.to.speech%253Fvoice%253Dusenglishfemale%2526action%253Dconvert%2526speed%253D0%2526text%253DType%252520some%252520text%252520and%252520click%252520play%2C&voice=usenglishfemale&speed=0&action=convert</div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/overflow-auto-005.html b/testing/web-platform/tests/css/css-flexbox/overflow-auto-005.html new file mode 100644 index 0000000000..65b6d73e9a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/overflow-auto-005.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<html> +<title>CSS Flexbox: overflow:auto support.</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow"> +<link rel="help" href="https://www.w3.org/TR/css-overflow-4/#classic-scrollbars"> +<link rel="match" href="reference/overflow-auto-005-ref.html"> +<meta name="fuzzy" content="0-3;0-3"> +<meta name="assert" content="This test ensures that flexbox with 'overflow: auto' is supported, including in combination with different writing-mode and flex-direction values."/> +<style> +.test-row { + display: flex; + margin-bottom: 5px; +} +.test-row > div { + flex: none; +} + +.container { + margin-right: 5px; + border: 5px solid lightgreen; + width: 100px; +} + +.horizontal-tb { + writing-mode: horizontal-tb; +} + +.vertical-rl { + writing-mode: vertical-rl; +} + +.vertical-lr { + writing-mode: vertical-lr; +} + +.row { + flex-direction: row; +} + +.row-reverse { + flex-direction: row-reverse; +} + +.column { + flex-direction: column; +} + +.column-reverse { + flex-direction: column-reverse; +} + +.flexbox { + border: 0 solid pink; + display: flex; + height: 100px; + width: 100px; + overflow: auto; +} + +.flexbox > div { + width: 200px; + height: 200px; + background: radial-gradient(at right 60%, red, yellow, green); + flex: none; +} + +</style> +<body> + <p>Scrollbars should work in all the flexboxes.</p> +</body> +<script> +var writingModes = ['horizontal-tb', 'vertical-rl', 'vertical-lr']; +var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse']; +var testContents = ''; +writingModes.forEach(function(writingMode) { + testContents += "<div class='test-row'>"; + flexDirections.forEach(function(flexDirection) { + var containerClass = 'container ' + writingMode; + var flexboxClass = 'flexbox ' + flexDirection; + testContents += + "<div class='" + containerClass + "'>" + + "<div class='" + flexboxClass + "'>" + + "<div></div>" + + "</div>" + + "</div>"; + }); + testContents += "</div>"; +}); + +document.body.innerHTML += testContents; + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/overflow-auto-006.html b/testing/web-platform/tests/css/css-flexbox/overflow-auto-006.html new file mode 100644 index 0000000000..be0f8f19ab --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/overflow-auto-006.html @@ -0,0 +1,112 @@ +<!DOCTYPE html> +<html> +<title>CSS Flexbox: Height with overflow: auto.</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"> +<meta name="assert" content="This test ensures that flexbox with 'flex-direction: row|row-reverse' and a flex item child with 'overflow: auto' has the proper height."/> +<style> +.flexbox { + border: 5px solid green; + position: relative; + width: 50px; +} + +.inline-flexbox { + border: 5px solid green; + position: relative; + height: 50px; +} + +.overflow { + border: 1px solid red; + overflow: auto; + min-width: 0; + min-height: 0; +} + +.vertical { + writing-mode: vertical-rl; +} +</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, .inline-flexbox')"> +<div id=log></div> +<div class="flexbox to-be-checked" check-height check-accounts-scrollbar> + <div class="overflow"><div style="width: 100px; height: 20px"></div></div> +</div> + +<div class="flexbox row-reverse to-be-checked" check-height check-accounts-scrollbar> + <div class="overflow"><div style="width: 100px; height: 20px"></div></div> +</div> + +<div class="flexbox to-be-checked" check-height check-accounts-scrollbar> + <div class="overflow align-self-baseline"><div style="width: 100px; height: 20px"></div></div> +</div> + +<div class="flexbox row-reverse to-be-checked" check-height check-accounts-scrollbar> + <div class="overflow align-self-baseline"><div style="width: 100px; height: 20px"></div></div> +</div> + +<div class="flexbox vertical to-be-checked" check-height> + <div class="overflow align-self-baseline"><div style="width: 100px; height: 20px"></div></div> +</div> + +<div class="flexbox row-reverse vertical to-be-checked" check-height> + <div class="overflow align-self-baseline"><div style="width: 100px; height: 20px"></div></div> +</div> + +<div class="inline-flexbox column vertical to-be-checked" check-width check-accounts-scrollbar> + <div class="overflow"><div style="width: 20px; height: 100px"></div></div> +</div> + +<div class="inline-flexbox column-reverse vertical to-be-checked" check-width check-accounts-scrollbar> + <div class="overflow"><div style="width: 20px; height: 100px"></div></div> +</div> + +<div class="inline-flexbox column vertical to-be-checked" check-width> + <div class="overflow align-self-baseline"><div style="width: 20px; height: 100px"></div></div> +</div> + +<div class="inline-flexbox column-reverse vertical to-be-checked" check-width> + <div class="overflow align-self-baseline"><div style="width: 20px; height: 100px"></div></div> +</div> + +<!-- This div is only for measuring scrollbar size --> +<div id="measure" style="height: 100px; width: 100px; display: inline-block; overflow: auto;"> + <div style="min-height: 300px;"></div> +</div> + +<script> + var measure = document.getElementById('measure'); + var scrollbarSize = measure.offsetWidth - measure.clientWidth; + + var nodes = document.getElementsByClassName("to-be-checked"); + for (var i = 0; i < nodes.length; i++) { + var node = nodes[i]; + + // Here, the things contributing height are: + // + // (a) each innermost div contributes an explicit height: 20px value. + // (b) the .overflow div contributes 2px of border (1px top + bottom), + // plus the height of its scrollbar from overflow:auto. + // (c) the .flexbox div contributes 10px of border (5px top + bottom). + // + // So, the total height is 20px + 2px + 10px + scrollbarHeight, + // which simplifies to 32px + scrollbarHeight. + // + // Analogously, the same logic applies for nodes where width is tested. + var size = 32; + if (node.hasAttribute("check-height")) { + var height = node.hasAttribute("check-accounts-scrollbar") ? scrollbarSize : 0; + node.setAttribute("data-expected-height", size + height); + } else { + var width = node.hasAttribute("check-accounts-scrollbar") ? scrollbarSize : 0; + node.setAttribute("data-expected-width", size + width); + } + } +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/overflow-auto-007.html b/testing/web-platform/tests/css/css-flexbox/overflow-auto-007.html new file mode 100644 index 0000000000..1bb6230c3d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/overflow-auto-007.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> +<title>CSS Flexbox: vertical space after changes with overflow: auto and flex-direction: column.</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#overflow-properties"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property"> +<link rel="help" href="https://crbug.com/590683"> +<link rel="help" href="https://crbug.com/594465"> +<link rel="match" href="reference/overflow-auto-007-ref.html"> +<meta name="assert" content="This test checks that vertical space allocated to the content of a flexbox with 'overflow: auto' and 'flex-direction: column' is properly computed when its contents change." /> + +<style> +body { + width: 400px; + height: 300px; +} + +.flexbox { + display: flex; +} + +.column { + flex-direction: column; +} + +.flex11a { + flex: 1 1 auto; +} + +.root { + height: 100px; + overflow-y: auto; +} +</style> + +<body onload="runTest()"> + +<p>This test should not have a horizontal scrollbar</p> + +<div class="flexbox column"> + <div class="flexbox"> + <div class="flex11a"> + <div class="root"> + <div id="history"></div> + </div> + </div> + </div> +</div> + +<script> +function runTest() { + var historyEl = document.getElementById('history'); + historyEl.offsetWidth; + historyEl.innerText = '\n\n\n\n\n\n\n\n'; +}; +</script> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/overflow-auto-008.html b/testing/web-platform/tests/css/css-flexbox/overflow-auto-008.html new file mode 100644 index 0000000000..03f843a462 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/overflow-auto-008.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> +<title>CSS Flexbox: adding scrollbars with overflow: auto and flex-direction: column.</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#overflow-properties"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property"> +<link rel="help" href="https://crbug.com/512229"> +<meta name="assert" content="This test checks that, when a block inside a flexbox with flex-direction: column adds horizontal scrollbars due to overflow, the parent flexbox is still able to render its contents without overflowing."/> + +<style> +.vflex { + display: flex; + flex-direction: column; + max-width: 200px; + margin: 10px 0 10px 0; +} + +.hbox { + overflow-x: auto; + white-space: nowrap; +} + +.rect { + min-height: 100px; + min-width: 100px; + background-color: green; + display: inline-block; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<body> + +<div class="vflex"> + <div class="hbox"> + <div class="rect"></div> + <div class="rect"></div> + </div> +</div> + +<script> +var hbox = document.querySelector('.hbox'); +test(function() { + assert_equals(hbox.parentNode.clientHeight, hbox.parentNode.scrollHeight); + assert_equals(hbox.clientHeight, hbox.scrollHeight); +}, 'hbox dimensions'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/overflow-top-left-ref.html b/testing/web-platform/tests/css/css-flexbox/overflow-top-left-ref.html new file mode 100644 index 0000000000..8e58953a33 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/overflow-top-left-ref.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<style> +.row-wrapper, .column-wrapper { + margin: 4px 0; + overflow: auto; + direction: rtl; + border: 2px solid black; +} + +.column-wrapper { + width: 300px; +} + +.row-wrapper { + height: 300px; + writing-mode: vertical-rl; +} + +.column-wrapper > div { + /* This border represents the expected rendering of the testcase's + "margin:4px". This border should occupy the same space as that margin + would, and it should create the same amount of scrollable overflow. (We + can't just use "margin:4px" here, because this reference case uses block + layout, and margins have different behavior with respect to collapsing and + scrollable-overflow impact in block vs. flexbox layout.) */ + border: 4px solid white; + height: 30px; + background: #CCC; +} + +.h-overflow { + width: 500px; +} + +.row-wrapper > div { + /* As noted above, this is a mockup for the "margin:4px" in the testcase. */ + border: 4px solid white; + width: 30px; + background: #CCC; +} + +.v-overflow { + height: 500px; +} + +</style> + +<div class=column-wrapper> + <div>one</div> + <div class=h-overflow>two</div> +</div> + +<div class=row-wrapper> + <div>one</div> + <div class=v-overflow>two</div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/overflow-top-left.html b/testing/web-platform/tests/css/css-flexbox/overflow-top-left.html new file mode 100644 index 0000000000..682199815e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/overflow-top-left.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<head> +<title>cross-axis top and left overflow</title> +<link rel="author" title="Google, Inc." href="http://www.google.com/"> +<link rel="match" href="overflow-top-left-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#cross-sizing"> +</head> + +<style> +.row-wrapper, .column-wrapper { + margin: 4px 0; + overflow: auto; + display: flex; + direction: rtl; + border: 2px solid black; +} + +.column-wrapper { + width: 300px; + display: flex; + flex-direction: column; +} + +.row-wrapper { + height: 300px; + flex-direction: column; + writing-mode: vertical-rl; +} + +.column-wrapper > div { + margin: 4px; + height: 30px; + background: #CCC; +} + +.h-overflow { + width: 500px; +} + +.row-wrapper > div { + margin: 4px; + width: 30px; + background: #CCC; +} + +.v-overflow { + height: 500px; +} +</style> + +<div class=column-wrapper> + <div>one</div> + <div class=h-overflow>two</div> +</div> + +<div class=row-wrapper> + <div>one</div> + <div class=v-overflow>two</div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/padding-overflow-crash.html b/testing/web-platform/tests/css/css-flexbox/padding-overflow-crash.html new file mode 100644 index 0000000000..163be06a91 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/padding-overflow-crash.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#layout-algorithm"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="Item's size includes padding even when there is overflow:hidden. Chrome crashed on this."> +<p>Test passes if there is a filled green square.</p> + +<div style="display: flex"> + <div style="padding: 50px; background: green; overflow: hidden;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/parsing/flex-basis-computed.html b/testing/web-platform/tests/css/css-flexbox/parsing/flex-basis-computed.html new file mode 100644 index 0000000000..a5a9dc82c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/parsing/flex-basis-computed.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Flexible Box Layout: getComputedStyle().flexBasis</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-basis"> +<meta name="assert" content="flex-basis computed value is as specified, with length made absolute."> +<meta name="assert" content="flex-basis computed value is non-negative."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("flex-basis", "1px"); +test_computed_value("flex-basis", "400%"); +test_computed_value("flex-basis", "auto"); +test_computed_value("flex-basis", "content"); +test_computed_value("flex-basis", "fit-content"); +test_computed_value("flex-basis", "min-content"); +test_computed_value("flex-basis", "max-content"); + +test_computed_value("flex-basis", "calc(10px + 0.5em)", "30px"); +test_computed_value("flex-basis", "calc(10px - 0.5em)", "0px"); +test_computed_value("flex-basis", "calc(10%)", "10%"); +// https://github.com/w3c/csswg-drafts/issues/3482 +test_computed_value("flex-basis", "calc(0% + 10px)", "calc(0% + 10px)"); +test_computed_value("flex-basis", "calc(10% + 0px)", "10%"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/parsing/flex-basis-invalid.html b/testing/web-platform/tests/css/css-flexbox/parsing/flex-basis-invalid.html new file mode 100644 index 0000000000..502a21c016 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/parsing/flex-basis-invalid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Flexible Box Layout Module Level 1: parsing flex-basis with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-basis"> +<meta name="assert" content="flex-basis supports only the grammar 'content | <‘width’>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("flex-basis", "none"); +test_invalid_value("flex-basis", "auto content"); +test_invalid_value("flex-basis", "-1px"); +test_invalid_value("flex-basis", "-2%"); +test_invalid_value("flex-basis", "3px 4%"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/parsing/flex-basis-valid.html b/testing/web-platform/tests/css/css-flexbox/parsing/flex-basis-valid.html new file mode 100644 index 0000000000..b49351915c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/parsing/flex-basis-valid.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Flexible Box Layout Module Level 1: parsing flex-basis with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-basis"> +<meta name="assert" content="flex-basis supports the full grammar 'content | <‘width’>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("flex-basis", "1px"); +test_valid_value("flex-basis", "calc(2em + 3ex)"); +test_valid_value("flex-basis", "400%"); +test_valid_value("flex-basis", "auto"); +test_valid_value("flex-basis", "fit-content"); +test_valid_value("flex-basis", "min-content"); +test_valid_value("flex-basis", "max-content"); +test_valid_value("flex-basis", "content"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/parsing/flex-computed.html b/testing/web-platform/tests/css/css-flexbox/parsing/flex-computed.html new file mode 100644 index 0000000000..ea1f4f6fa4 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/parsing/flex-computed.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Flexible Box Layout: getComputedStyle().flex</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex"> +<meta name="assert" content="flex computed value is specified keywords and/or computed <length-percentage>."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("flex", "none", "0 0 auto"); +test_computed_value("flex", "1", "1 1 0%"); +test_computed_value("flex", "2 3", "2 3 0%"); +test_computed_value("flex", "4 5 6px"); +test_computed_value("flex", "7% 8", "8 1 7%"); +test_computed_value("flex", "8 auto", "8 1 auto"); +test_computed_value("flex", "calc(10px + 0.5em)", "1 1 30px"); +test_computed_value("flex", "calc(10px - 0.5em)", "1 1 0px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/parsing/flex-direction-computed.html b/testing/web-platform/tests/css/css-flexbox/parsing/flex-direction-computed.html new file mode 100644 index 0000000000..0d6b0bb6f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/parsing/flex-direction-computed.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Flexible Box Layout: getComputedStyle().flexDirection</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-direction"> +<meta name="assert" content="flex-direction computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("flex-direction", "row"); +test_computed_value("flex-direction", "row-reverse"); +test_computed_value("flex-direction", "column"); +test_computed_value("flex-direction", "column-reverse"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/parsing/flex-direction-invalid.html b/testing/web-platform/tests/css/css-flexbox/parsing/flex-direction-invalid.html new file mode 100644 index 0000000000..81fa8beb7e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/parsing/flex-direction-invalid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Flexible Box Layout Module Level 1: parsing flex-direction with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-direction"> +<meta name="assert" content="flex-direction supports only the grammar 'row | row-reverse | column | column-reverse'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("flex-direction", "auto"); +test_invalid_value("flex-direction", "column row-reverse"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/parsing/flex-direction-valid.html b/testing/web-platform/tests/css/css-flexbox/parsing/flex-direction-valid.html new file mode 100644 index 0000000000..75e108478c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/parsing/flex-direction-valid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Flexible Box Layout Module Level 1: parsing flex-direction with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-direction"> +<meta name="assert" content="flex-direction supports the full grammar 'row | row-reverse | column | column-reverse'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("flex-direction", "row"); +test_valid_value("flex-direction", "row-reverse"); +test_valid_value("flex-direction", "column"); +test_valid_value("flex-direction", "column-reverse"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/parsing/flex-flow-computed.html b/testing/web-platform/tests/css/css-flexbox/parsing/flex-flow-computed.html new file mode 100644 index 0000000000..2dda28ab44 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/parsing/flex-flow-computed.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Animations: getComputedStyle().flexFlow</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-flow"> +<meta name="assert" content="flex-flow computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("flex-flow", "column wrap-reverse"); +test_computed_value("flex-flow", "row-reverse wrap"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/parsing/flex-flow-invalid.html b/testing/web-platform/tests/css/css-flexbox/parsing/flex-flow-invalid.html new file mode 100644 index 0000000000..e82c284632 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/parsing/flex-flow-invalid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Flexible Box Layout Module Level 1: parsing flex-flow with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-flow"> +<meta name="assert" content="flex-flow supports only the grammar '<flex-direction> || <flex-wrap>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("flex-flow", "nowrap row nowrap"); +test_invalid_value("flex-flow", "column wrap column"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/parsing/flex-flow-shorthand.html b/testing/web-platform/tests/css/css-flexbox/parsing/flex-flow-shorthand.html new file mode 100644 index 0000000000..6ae19bdc04 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/parsing/flex-flow-shorthand.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Flexible Box Layout Module Level 1: flex-flow sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-flow"> +<meta name="assert" content="flex-flow supports the full grammar '<flex-direction> || <flex-wrap>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +test_shorthand_value('flex-flow', 'nowrap column', { + 'flex-direction': 'column', + 'flex-wrap': 'nowrap' +}); + +test_shorthand_value('flex-flow', 'wrap row-reverse', { + 'flex-direction': 'row-reverse', + 'flex-wrap': 'wrap' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/parsing/flex-flow-valid.html b/testing/web-platform/tests/css/css-flexbox/parsing/flex-flow-valid.html new file mode 100644 index 0000000000..e4a84fdf7f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/parsing/flex-flow-valid.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Flexible Box Layout Module Level 1: parsing flex-flow with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-flow"> +<meta name="assert" content="flex-flow supports the full grammar '<flex-direction> || <flex-wrap>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("flex-flow", "column nowrap", "column"); +test_valid_value("flex-flow", "nowrap column", "column"); +test_valid_value("flex-flow", "wrap row-reverse", "row-reverse wrap"); +test_valid_value("flex-flow", "nowrap", "row"); +test_valid_value("flex-flow", "row nowrap", "row"); +test_valid_value("flex-flow", "wrap", "wrap"); +test_valid_value("flex-flow", "row wrap", "wrap"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/parsing/flex-grow-computed.html b/testing/web-platform/tests/css/css-flexbox/parsing/flex-grow-computed.html new file mode 100644 index 0000000000..7e8c4c429e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/parsing/flex-grow-computed.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Flexible Box Layout: getComputedStyle().flexGrow</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-grow"> +<meta name="assert" content="flex-grow computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("flex-grow", "1"); +test_computed_value("flex-grow", "2.34e+06", ["2.34e+06", "2340000"]); +test_computed_value("flex-grow", "6.78e+08", ["6.78e+08", "678000000"]); +test_computed_value("flex-grow", "0"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/parsing/flex-grow-invalid.html b/testing/web-platform/tests/css/css-flexbox/parsing/flex-grow-invalid.html new file mode 100644 index 0000000000..7af51e77a8 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/parsing/flex-grow-invalid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Flexible Box Layout Module Level 1: parsing flex-grow with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-grow"> +<meta name="assert" content="flex-grow supports only the grammar '<number>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("flex-grow", "2e3.4"); +test_invalid_value("flex-grow", "-+5"); +test_invalid_value("flex-grow", "6 7"); + +test_invalid_value("flex-grow", "1."); // Accepted by Edge. +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/parsing/flex-grow-valid.html b/testing/web-platform/tests/css/css-flexbox/parsing/flex-grow-valid.html new file mode 100644 index 0000000000..9abc79cb79 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/parsing/flex-grow-valid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Flexible Box Layout Module Level 1: parsing flex-grow with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-grow"> +<meta name="assert" content="flex-grow supports the full grammar '<number>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("flex-grow", "1"); +test_valid_value("flex-grow", "23.4e5", ["2.34e+06", "2.34e+006", "2340000"]); +test_valid_value("flex-grow", "+.678E9", ["6.78e+08", "6.78e+008", "678000000"]); +test_valid_value("flex-grow", ".0", "0"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/parsing/flex-invalid.html b/testing/web-platform/tests/css/css-flexbox/parsing/flex-invalid.html new file mode 100644 index 0000000000..ae010d7b4b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/parsing/flex-invalid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Flexible Box Layout Module Level 1: parsing flex with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex"> +<meta name="assert" content="flex supports only the grammar 'none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("flex", "none 1"); +test_invalid_value("flex", "2 3 4"); +test_invalid_value("flex", "5px 7%"); +test_invalid_value("flex", "9 none"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/parsing/flex-shorthand.html b/testing/web-platform/tests/css/css-flexbox/parsing/flex-shorthand.html new file mode 100644 index 0000000000..1d74df8083 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/parsing/flex-shorthand.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Flexible Box Layout Module Level 1: flex sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex"> +<meta name="assert" content="flex supports the full grammar 'none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +test_shorthand_value('flex', 'none', { + 'flex-grow': '0', + 'flex-shrink': '0', + 'flex-basis': 'auto' +}); + +test_shorthand_value('flex', '1', { + 'flex-grow': '1', + 'flex-shrink': '1', + 'flex-basis': '0%' +}); + +test_shorthand_value('flex', '2 3', { + 'flex-grow': '2', + 'flex-shrink': '3', + 'flex-basis': '0%' +}); + +test_shorthand_value('flex', '4 5 6px', { + 'flex-grow': '4', + 'flex-shrink': '5', + 'flex-basis': '6px' +}); + +test_shorthand_value('flex', '7% 8', { + 'flex-grow': '8', + 'flex-shrink': '1', + 'flex-basis': '7%' +}); + +test_shorthand_value('flex', '8 auto', { + 'flex-grow': '8', + 'flex-shrink': '1', + 'flex-basis': 'auto' +}); + +test_shorthand_value('flex', 'content', { + 'flex-grow': '1', + 'flex-shrink': '1', + 'flex-basis': 'content' +}); + +test_shorthand_value('flex', '0 fit-content', { + 'flex-grow': '0', + 'flex-shrink': '1', + 'flex-basis': 'fit-content' +}); + +test_shorthand_value('flex', '1 0 max-content', { + 'flex-grow': '1', + 'flex-shrink': '0', + 'flex-basis': 'max-content' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/parsing/flex-shrink-computed.html b/testing/web-platform/tests/css/css-flexbox/parsing/flex-shrink-computed.html new file mode 100644 index 0000000000..b2f21c07e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/parsing/flex-shrink-computed.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Flexible Box Layout: getComputedStyle().flexShrink</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-shrink"> +<meta name="assert" content="flex-shrink computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("flex-shrink", "1"); +test_computed_value("flex-shrink", "2.34e+06", ["2.34e+06", "2340000"]); +test_computed_value("flex-shrink", "6.78e+08", ["6.78e+08", "678000000"]); +test_computed_value("flex-shrink", "0"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/parsing/flex-shrink-invalid.html b/testing/web-platform/tests/css/css-flexbox/parsing/flex-shrink-invalid.html new file mode 100644 index 0000000000..9fa53de051 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/parsing/flex-shrink-invalid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Flexible Box Layout Module Level 1: parsing flex-shrink with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-shrink"> +<meta name="assert" content="flex-shrink supports only the grammar '<number>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("flex-shrink", "2e3.4"); +test_invalid_value("flex-shrink", "-+5"); +test_invalid_value("flex-shrink", "6 7"); + +test_invalid_value("flex-shrink", "1."); // Accepted by Edge. +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/parsing/flex-shrink-valid.html b/testing/web-platform/tests/css/css-flexbox/parsing/flex-shrink-valid.html new file mode 100644 index 0000000000..1376e8a43c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/parsing/flex-shrink-valid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Flexible Box Layout Module Level 1: parsing flex-shrink with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-shrink"> +<meta name="assert" content="flex-shrink supports the full grammar '<number>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("flex-shrink", "1"); +test_valid_value("flex-shrink", "23.4e5", ["2.34e+06", "2.34e+006", "2340000"]); +test_valid_value("flex-shrink", "+.678E9", ["6.78e+08", "6.78e+008", "678000000"]); +test_valid_value("flex-shrink", ".0", "0"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/parsing/flex-valid.html b/testing/web-platform/tests/css/css-flexbox/parsing/flex-valid.html new file mode 100644 index 0000000000..f3eaf118da --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/parsing/flex-valid.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Flexible Box Layout Module Level 1: parsing flex with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex"> +<meta name="assert" content="flex supports the full grammar 'none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("flex", "none", "0 0 auto"); +test_valid_value("flex", "1", "1 1 0%"); +test_valid_value("flex", "2 3", "2 3 0%"); +test_valid_value("flex", "4 5 6px"); +test_valid_value("flex", "7% 8", "8 1 7%"); +test_valid_value("flex", "8 auto", "8 1 auto"); + +// The following is not yet supported by browsers: +// test_valid_value("flex", "content"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/parsing/flex-wrap-computed.html b/testing/web-platform/tests/css/css-flexbox/parsing/flex-wrap-computed.html new file mode 100644 index 0000000000..e471bdd787 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/parsing/flex-wrap-computed.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Flexible Box Layout: getComputedStyle().flexWrap</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-wrap"> +<meta name="assert" content="flex-wrap computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("flex-wrap", "nowrap"); +test_computed_value("flex-wrap", "wrap"); +test_computed_value("flex-wrap", "wrap-reverse"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/parsing/flex-wrap-invalid.html b/testing/web-platform/tests/css/css-flexbox/parsing/flex-wrap-invalid.html new file mode 100644 index 0000000000..45b0029402 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/parsing/flex-wrap-invalid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Flexible Box Layout Module Level 1: parsing flex-wrap with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-wrap"> +<meta name="assert" content="flex-wrap supports only the grammar 'nowrap | wrap | wrap-reverse'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("flex-wrap", "auto"); +test_invalid_value("flex-wrap", "nowrap wrap"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/parsing/flex-wrap-valid.html b/testing/web-platform/tests/css/css-flexbox/parsing/flex-wrap-valid.html new file mode 100644 index 0000000000..a3a56cc2da --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/parsing/flex-wrap-valid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Flexible Box Layout Module Level 1: parsing flex-wrap with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-wrap"> +<meta name="assert" content="flex-wrap supports the full grammar 'nowrap | wrap | wrap-reverse'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("flex-wrap", "nowrap"); +test_valid_value("flex-wrap", "wrap"); +test_valid_value("flex-wrap", "wrap-reverse"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/parsing/order-computed.html b/testing/web-platform/tests/css/css-flexbox/parsing/order-computed.html new file mode 100644 index 0000000000..9571996199 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/parsing/order-computed.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Flexible Box Layout Module Level 1: getComputedStyle().order</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-order"> +<meta name="assert" content="order computed value is the specified integer."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("order", "0"); +test_computed_value("order", "123"); +test_computed_value("order", "-45"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/parsing/order-invalid.html b/testing/web-platform/tests/css/css-flexbox/parsing/order-invalid.html new file mode 100644 index 0000000000..7a60396b68 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/parsing/order-invalid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Flexible Box Layout Module Level 1: parsing order with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-order"> +<meta name="assert" content="order supports only the grammar '<integer>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("order", "auto"); +test_invalid_value("order", "123.45"); +test_invalid_value("order", "123 45"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/parsing/order-valid.html b/testing/web-platform/tests/css/css-flexbox/parsing/order-valid.html new file mode 100644 index 0000000000..fa101d7ee8 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/parsing/order-valid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Flexible Box Layout Module Level 1: parsing order with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-order"> +<meta name="assert" content="order supports the full grammar '<integer>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("order", "0"); +test_valid_value("order", "123"); +test_valid_value("order", "-45"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-descendant-of-anonymous-flex-item.html b/testing/web-platform/tests/css/css-flexbox/percentage-descendant-of-anonymous-flex-item.html new file mode 100644 index 0000000000..592b5212ea --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-descendant-of-anonymous-flex-item.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: percentage heights in descendants of anonymous flex items</title> +<link href="resources/flexbox.css" rel="stylesheet"> +<link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com"> +<link rel="match" href="reference/percentage-descendant-of-anonymous-flex-item-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-items"> +<style> +.flexbox { + width: 200px; + height: 200px; +} +</style> +<!-- + Both Blink and WebKit implement buttons as flexboxes, which in this case, wrap the child in an anonymous box. + Anonymous boxes are skipped when computing percentage heights but we need to ensure that their children with + percentage heights are properly sized. +--> +<p>The test PASS if you see a 200x100 green rectangle inside a button.</p> +<div class="flexbox column"> + <div style="height: 50%;"> + <button style="width: 200px; height: 100%;"> + <div style="width: 200px; height: 100%; background-color: green;"></div> + </button> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-heights-000.html b/testing/web-platform/tests/css/css-flexbox/percentage-heights-000.html new file mode 100644 index 0000000000..cf50103144 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-heights-000.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<html> +<title>CSS Flexbox: Basic percentage heights</title> +<link rel="author" title="Google" href="https://www.google.com/" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#main-sizing" /> +<meta name="flags" content="dom" /> +<meta name="assert" content="This test checks that percentage heights on a flex item correctly resolve against the container." /> +<style> +.flexbox { + display: flex; + background-color: #aaa; + position: relative; +} +.flexbox :nth-child(1) { + background-color: blue; +} +.flexbox :nth-child(2) { + background-color: green; +} +.flexbox :nth-child(3) { + background-color: red; +} + +.flexbox > div { + width: 40%; + height: 40%; +} +.column { + flex-flow: column wrap; + width: 100px; + height: 100px; + align-content: flex-start; +} +</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 column"> + <div data-expected-height="40" data-offset-x="0" data-offset-y="0"></div> + <div data-expected-height="40" data-offset-x="0" data-offset-y="40"></div> + <div data-expected-height="40" data-offset-x="40" data-offset-y="0"></div> +</div> + +<div class="flexbox column"> + <div data-expected-height="40" data-offset-x="0" data-offset-y="0" style="margin-bottom: 10%"></div> + <div data-expected-height="40" data-offset-x="40" data-offset-y="0" style="margin-bottom: 20%"></div> + <div data-expected-height="40" data-offset-x="40" data-offset-y="60"></div> +</div> + +<div class="flexbox column"> + <div data-expected-height="20" data-offset-x="0" data-offset-y="0" style="flex: 1; min-height: 0; max-height: 20%"></div> + <div data-expected-height="40" data-offset-x="0" data-offset-y="20"></div> + <div data-expected-height="40" data-offset-x="0" data-offset-y="60"></div> +</div> + +<div class="flexbox column" style="writing-mode: vertical-rl"> + <div data-expected-width="40" data-offset-x="60" data-offset-y="0"></div> + <div data-expected-width="40" data-offset-x="20" data-offset-y="0"></div> + <div data-expected-width="40" data-offset-x="60" data-offset-y="40"></div> +</div> + +<div class="flexbox column" style="writing-mode: vertical-rl"> + <div data-expected-width="40" data-offset-x="60" data-offset-y="0" style="margin-bottom: 10%"></div> + <div data-expected-width="40" data-offset-x="20" data-offset-y="0" style="margin-bottom: 20%"></div> + <div data-expected-width="40" data-offset-x="60" data-offset-y="60"></div> +</div> + +<div class="flexbox column" style="writing-mode: vertical-rl"> + <div data-expected-width="20" data-offset-x="80" data-offset-y="0" style="flex: 1; min-width: 0; max-width: 20%"></div> + <div data-expected-width="40" data-offset-x="40" data-offset-y="0"></div> + <div data-expected-width="40" data-offset-x="0" data-offset-y="0"></div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-heights-001.html b/testing/web-platform/tests/css/css-flexbox/percentage-heights-001.html new file mode 100644 index 0000000000..8a9c0c5e7c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-heights-001.html @@ -0,0 +1,151 @@ +<!DOCTYPE html> + +<title>CSS Flexbox: Definite cross sizes</title> + +<link rel="stylesheet" href="support/flexbox.css"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#definite-sizes"> +<link rel="author" title="Google Inc." href="https://www.google.com/"> +<meta name="flags" content="dom" /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<style> +.rect { + width: 50px; + height: 50px; + background-color: blue; +} + +.flexbox { + width: 50px; + outline: 3px solid black; +} + + +.flexbox > * { + min-height: 0; + min-width: 0; +} + +.flexbox > div > div { + overflow: hidden; +} +</style> + +<body onload="checkLayout('.flexbox')" style="height: 800px;"> +<div id=log></div> + + +<p>This test verifies that we consider flex items' cross sizes to be definite +if the align value is stretch (the default)</p> + +<p>Tests that we get a definite size in the simple case:</p> +<div class="flexbox" data-expected-height="50"> + <div data-expected-height="50"> + <div style="height: 50%" data-expected-height="25"> + <div class="rect" data-expected-height="50"></div> + </div> + </div> +</div> + +<p>Tests that we get a definite size in a wrapping flexbox:</p> +<div class="flexbox wrap" data-expected-height="50"> + <div data-expected-height="50"> + <div style="height: 50%" data-expected-height="25"> + <div class="rect" data-expected-height="50"></div> + </div> + </div> +</div> + +<p>Tests that we get an indefinite size when not stretch-aligning, despite +definite size on container:</p> +<div class="flexbox wrap" style="height: 50px;" data-expected-height="50"> + <div class="align-self-flex-start" data-expected-height="50"> + <div style="height: 50%" data-expected-height="50"> + <div class="rect" data-expected-height="50"></div> + </div> + </div> +</div> + +<p>Tests that we get a definite size in a definite-height flexbox:</p> +<div class="flexbox" style="height: 50px;" data-expected-height="50"> + <div data-expected-height="50"> + <div style="height: 50%" data-expected-height="25"> + <div class="rect" data-expected-height="50"></div> + </div> + </div> +</div> + +<p>Tests that we get a definite size in a nested flexbox where only the outer +one has an explicit height:</p> +<div class="flexbox" style="height: 50px;" data-expected-height="50"> + <div class="flexbox" data-expected-height="50"> + <div data-expected-height="50"> + <div style="height: 50%" data-expected-height="25"> + <div class="rect" data-expected-height="50"></div> + </div> + </div> + </div> +</div> + +<p>Tests that we get a definite size in a nested flexbox where only the outer +one has an explicit height and has an opposite direction:</p> +<div class="flexbox" style="height: 50px;" data-expected-height="50"> + <div class="flexbox column" data-expected-height="50"> + <div class="flex-one" data-expected-height="50"> + <div style="height: 50%" data-expected-height="25"> + <div class="rect" data-expected-height="50"></div> + </div> + </div> + </div> +</div> + +<p>Tests that we respect min-height, on child of a flex item with percent +height that's treated as definite:</p> +<div class="flexbox" style="height: 50px;" data-expected-height="50"> + <div data-expected-height="50"> + <div style="height: 50%; min-height: 30px;" data-expected-height="30"> + <div class="rect" data-expected-height="50"></div> + </div> + </div> +</div> + +<p>Tests that max-height also supports percentages:</p> +<div class="flexbox" data-expected-height="50"> + <div data-expected-height="50"> + <div style="max-height: 50%" data-expected-height="25"> + <div class="rect" data-expected-height="50"></div> + </div> + </div> +</div> + +<p>Tests that percentage sizes can also be definite:</p> +<div class="flexbox" style="height: 10%;" data-expected-height="80"> + <div data-expected-height="80"> + <div style="height: 50%" data-expected-height="40"> + <div class="rect" data-expected-height="50"></div> + </div> + </div> +</div> + +<p>Tests that we use a definite size even when a percentage size is not definite</p> +<div> + <div class="flexbox" style="height: 10%;" data-expected-height="50"> + <div data-expected-height="50"> + <div style="height: 50%" data-expected-height="25"> + <div class="rect" data-expected-height="50"></div> + </div> + </div> + </div> +</div> + +<p>Tests that we don't mix up widths and heights</p> +<div class="flexbox" style="height: 50px; width: 100px;" data-expected-height="50"> + <div style="width: 100px;" data-expected-height="50" data-expected-width="100"> + <div style="width: 50%" data-expected-width="50"> + <div class="rect" data-expected-height="50" data-expected-width="50"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-heights-002-ref.html b/testing/web-platform/tests/css/css-flexbox/percentage-heights-002-ref.html new file mode 100644 index 0000000000..55ec381d23 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-heights-002-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<link rel="author" title="Google Inc." href="http://www.google.com/"> +<style> +body { + position: relative; + width: 800px; + height: 600px; +} + +#container { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +} + +#top-bar { + background-color: green; + height: 100px; +} + +#content { + background-color: blue; + height: 500px; +} +</style> + + +<div id="container"> + <div id="top-bar"> + Tests that percentage heights get resolved correctly when the flexbox is + </div> + <div id="content"> + absolutely positioned without an explicit height. You should see no red. + </div> +</div> + + diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-heights-002.html b/testing/web-platform/tests/css/css-flexbox/percentage-heights-002.html new file mode 100644 index 0000000000..cfdf5be2ff --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-heights-002.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<title>CSS Test: Percentage sizing in flexboxes</title> +<link rel="author" title="Google Inc." href="http://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes"> +<link rel="match" href="percentage-heights-002-ref.html"> +<meta name="assert" content="Checks that we correctly size percentage-sized +children of absolute-positioned flex boxes"> +<style> +body { + position: relative; + width: 800px; + height: 600px; +} + +#container { + background-color: red; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + display: flex; + flex-direction: column; +} + +#top-bar { + background-color: green; + height: 20%; +} + +#content { + background-color: blue; + flex-basis: 100%; +} +</style> + + +<div id="container"> + <div id="top-bar"> + Tests that percentage heights get resolved correctly when the flexbox is + </div> + <div id="content"> + absolutely positioned without an explicit height. You should see no red. + </div> +</div> + + diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-heights-003.html b/testing/web-platform/tests/css/css-flexbox/percentage-heights-003.html new file mode 100644 index 0000000000..c27af53216 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-heights-003.html @@ -0,0 +1,125 @@ +<!DOCTYPE html> +<html> +<title>CSS Flexbox: Resolving relative height content within a flex container against flexed size</title> +<link rel="author" title="Microsoft" href="https://www.microsoft.com/" /> +<link rel="author" title="Greg Whitworth" href="gwhit@microsoft.com" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#definite-sizes" /> +<link rel="issue" href="https://github.com/w3c/csswg-drafts/issues/1679" /> +<meta name="assert" content="This test checks that percentage heights of content within a flex item are resolved against the flexed item" /> + +<style> +.flexbox { + display: flex; + min-height: 100%; +} + +.column { + flex-flow: column; +} + +.column-wrap { + flex-flow: column wrap; +} + +.flexbox > div { + background: teal; + flex-grow: 1; +} + +.flexbox span { + height: 100%; + background: orange; + display: block; +} +.vert-wm { + writing-mode: vertical-rl; +} +.horiz-wm { + writing-mode: horizontal-tb; +} +</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> + +<!-- The wrapper divs are here to give the flexbox something to fill --> + +<!-- definite unwrapped column flexbox --> +<div style="height: 100px;"> + <div class="flexbox column" style="height: 0"> + <div> + <span data-expected-height="100"></span> + </div> + </div> +</div> + +<!-- definite wrapped column flexbox --> +<div style="height: 100px;"> + <div class="flexbox column-wrap" style="height: 0"> + <div> + <span data-expected-height="50"></span> + </div> + <div> + <span data-expected-height="50"></span> + </div> + </div> +</div> + +<!-- indefinite unwrapped column flexbox --> +<div style="height: 100px;"> + <div class="flexbox column"> + <div> + <span data-expected-height="0"></span> + </div> + </div> +</div> + +<!-- indefinite unwrapped column flexbox where item doesn't stretch --> +<div style="height: 100px;"> + <div class="flexbox column"> + <div style="align-self: flex-start"> + <span data-expected-height="0"></span> + </div> + </div> +</div> + +<!-- indefinite wrapped column flexbox --> +<div style="height: 100px;"> + <div class="flexbox column-wrap"> + <div> + <span data-expected-height="0"></span> + </div> + <div> + <span data-expected-height="0"></span> + </div> + </div> +</div> + +<!-- indefinite unwrapped column flexbox, with orthogonal-flow flex item. The + flex item's main size (height) is definite, since it's the item's inline + size, and inline sizes always end up definite. --> +<div style="height: 100px;"> + <div class="flexbox column"> + <div class="vert-wm"> + <span data-expected-height="100"></span> + </div> + </div> +</div> + +<!-- indefinite unwrapped row-oriented vertical-writing-mode flexbox, with + orthogonal-flow (horizontal-writing-mode) flex item. The flex item's + height (main size) is definite, since its parent flex container has a + definite main size, because the flex container's main axis is its + inline-axis and inline sizes are definite. --> +<div style="height: 100px;"> + <div class="flexbox vert-wm"> + <div class="horiz-wm"> + <span data-expected-height="100"></span> + </div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-heights-004-ref.html b/testing/web-platform/tests/css/css-flexbox/percentage-heights-004-ref.html new file mode 100644 index 0000000000..7c1e585813 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-heights-004-ref.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> +<title>CSS Flexbox: Percentages in stretched container</title> +<link rel="author" title="Google" href="https://www.google.com/" /> + +<style> +#outer { + height: 10em; + display: inline-block; + background: tan; + vertical-align: top; +} + +#middle { + overflow-x: scroll; + height: 100%; +} + +#inner { + width: 200px; + height: 100%; + background: green; +} + +#outer2 { + height: 10em; + display: inline-block; + background: tan; +} + +#middle2 { + overflow-x: scroll; + height: 10em; +} + +#inner2 { + width: 200px; + height: 100%; + background: green; +} +</style> + +<p>You should not see tan (except perhaps as the background of a horizontal + scrollbar), and you should not see a vertical scrollbar.</p> + +<div id="outer"> + <div id="middle"> + <div id="inner"> + hello + </div> + </div> +</div> + +<div id="outer2"> + <div id="middle2"> + <div id="inner2"> + hello + </div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-heights-004.html b/testing/web-platform/tests/css/css-flexbox/percentage-heights-004.html new file mode 100644 index 0000000000..3fb0806b63 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-heights-004.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html> +<title>CSS Flexbox: Percentages in stretched container</title> +<link rel="author" title="Google" href="https://www.google.com/" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#definite-sizes" /> +<link rel="match" href="percentage-heights-004-ref.html"> + +<style> +#outer { + height: 10em; + display: inline-flex; + background: tan; +} + +#middle { + overflow-x: scroll; +} + +#inner { + width: 200px; + height: 100%; + background: green; +} + +#outer2 { + height: 10em; + display: inline-flex; + flex-direction: column; + background: tan; +} + +#middle2 { + overflow-x: scroll; + flex: 1.0; +} + +#inner2 { + width: 200px; + height: 100%; + background: green; +} +</style> + +<p>You should not see tan (except perhaps as the background of a horizontal + scrollbar), and you should not see a vertical scrollbar.</p> + +<div id="outer"> + <div id="middle"> + <div id="inner"> + hello + </div> + </div> +</div> + +<div id="outer2"> + <div id="middle2"> + <div id="inner2"> + hello + </div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-heights-005.html b/testing/web-platform/tests/css/css-flexbox/percentage-heights-005.html new file mode 100644 index 0000000000..5f3cfeec7e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-heights-005.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Tests that we consider main axis sizes to be definite in column flexboxes +when the height is an explicit definite height, even if the container does +not have a definite main axis size.</title> +<link rel="author" title="Google Inc." href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display:flex; flex-direction:column;"> + <div style="width:100px; height:100px; background:red;"> + <div style="height:100%; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-heights-006.html b/testing/web-platform/tests/css/css-flexbox/percentage-heights-006.html new file mode 100644 index 0000000000..2f0b4a51e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-heights-006.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<title>Definite cross sizes</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#definite-sizes"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="In a column flexbox, the height of a fully inflexible item with fixed flex-basis is definite, and percent children resolve against the flex basis, not the specified height." /> + +<style> +x-flexbox { + display: flex; + flex-direction: column; +} + +x-item { + height: 0px; + flex: 0 0 100px; +} + +x-item>div { + width: 100px; + height: 100%; + background: green; +} + +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> + +<x-flexbox> + <x-item> + <div></div> + </x-item> +</x-flexbox> diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-heights-007.html b/testing/web-platform/tests/css/css-flexbox/percentage-heights-007.html new file mode 100644 index 0000000000..c885245bc3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-heights-007.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<title>Definite sizes with fixed flex-basis</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#definite-sizes"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="In a column flexbox, the height of a fully inflexible item with fixed flex-basis is definite even when the heights of the item and the container are indefinite." /> + +<style> +x-flexbox { + display: flex; + flex-direction: column; +} + +x-item { + flex: 0 0 100px; +} + +x-item>div { + width: 100px; + height: 100%; + background: green; +} + +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> + +<x-flexbox> + <x-item> + <div></div> + </x-item> +</x-flexbox> diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-heights-008.html b/testing/web-platform/tests/css/css-flexbox/percentage-heights-008.html new file mode 100644 index 0000000000..3fc44867ee --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-heights-008.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>Fixed indefinite heights</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#definite-sizes"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Percent height flex items in a nested column flexbox have height resolved to auto." /> + +<style> +.column-flexbox { + display: flex; + flex-direction: column; +} + +#percent-height-item { + height: 50%; + background: red; +} + +#fixed-height-item { + height: 100px; + width: 100px; + background: green; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div class=column-flexbox> + <div class=column-flexbox> + <div id=fixed-height-item></div> + <div id=percent-height-item></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-heights-009.html b/testing/web-platform/tests/css/css-flexbox/percentage-heights-009.html new file mode 100644 index 0000000000..b3de59562b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-heights-009.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>height: 100% should not be considered indefinite on a second flex item (triggers an obscure bug in Blink)</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#definite-sizes" /> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1019138" /> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<style type="text/css"> +.container { + height: 100px; + width: 100px; +} +.flexbox { + background: red; + display: flex; + flex-direction: column; + height: 100%; +} +.first-item { + background: green; + display: flex; +} +.second-item { + /* This should not be considered indefinite */ + height: 100%; + background: green; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container"> + <div class="flexbox"> + <div class="first-item"> + <div style="width: 100px; height: 20px;"></div> + </div> + <div class="second-item"> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-heights-010.html b/testing/web-platform/tests/css/css-flexbox/percentage-heights-010.html new file mode 100644 index 0000000000..003cc2487a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-heights-010.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>A height: 100% descendant should trigger a relayout when stretching.</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#definite-sizes" /> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1043071" /> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display: flex; width: 100px;"> + <div style="display: flex; flex-direction: column; flex: 1; min-height: 100px;"> + <div style="flex: 1; background: red;"> + <div style="height: 100%; background-color: green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-heights-011.html b/testing/web-platform/tests/css/css-flexbox/percentage-heights-011.html new file mode 100644 index 0000000000..fda9c9b4f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-heights-011.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Flexbox: percentage height of flex item</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property"> +<link href="support/flexbox.css" rel="stylesheet"> +<meta name="assert" content="This test checks that the height of flexitems work properly +with percentage value and 'overflow-y' auto."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script> +window.onload = function() +{ + var outer = document.getElementById("outer"); + outer.style.height = "300px"; + outer.offsetLeft; + outer.style.height = "100px"; + checkLayout('#outer'); +}; +</script> +</head> +<body> +<div id=log></div> +<div id="outer" data-expected-height="100"> + <div class="flexbox" data-expected-height="100" style="height: 100%"> + <div class="flex-one" data-expected-height="100" style="overflow-y: auto; height: 100%"> + <div data-expected-height="100" style="height: 100%"> + <div data-expected-height="100" style="width: 100px; height: 100px; background-color: green"></div> + </div> + </div> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-heights-012.html b/testing/web-platform/tests/css/css-flexbox/percentage-heights-012.html new file mode 100644 index 0000000000..63f63aa8ec --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-heights-012.html @@ -0,0 +1,82 @@ +<!DOCTYPE html> +<title>CSS Flexbox: percentages in flex items</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes"> +<link rel="help" href="https://crbug.com/341310"> +<meta name="assert" content="This test ensures that percentages are resolved in flex items."> +<link href="support/flexbox.css" rel="stylesheet"> +<style> +.horizontal { + height: 50px; + background-color: purple; + position: relative; +} +.vertical { + width: 50px; + height: 10px; + background-color: purple; + position: relative; + writing-mode: vertical-rl; +} +.flex-one { + background-color: red; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script> +function changeHeight() +{ + document.getElementById('dynamicHorizontalChild').style.height = "90%"; + document.getElementById('dynamicVerticalChild').style.width = "30%"; + checkLayout('.flexbox'); +} +</script> +<body onload="changeHeight()"> +<div class="flexbox horizontal"> + <div data-expected-height="50" class="flex-one"> + <div data-expected-height="35" style="height: 70%; background-color: lime"></div> + </div> +</div> +<div class="flexbox horizontal"> + <div data-expected-height="50" class="flex-one"> + <div id="dynamicHorizontalChild" data-expected-height="45" style="height: 70%; background-color: lime"></div> + </div> +</div> +<div class="flexbox horizontal"> + <div data-expected-height="50" class="flex-one" style="padding: 10px; border: 2px solid black"> + <div data-expected-height="18" style="height: 70%; background-color: lime"></div> + </div> +</div> +<div class="flexbox horizontal"> + <img data-expected-height="25" style="max-height: 50%" src="support/10x10-green.png" /> +</div> +<div class="flexbox horizontal"> + <div data-expected-height="25" class="flex-one" style="max-height:50%"> + <div data-expected-height="13" style="height: 50%; background-color: lime"></div> + </div> +</div> +<div class="flexbox vertical"> + <div data-expected-width="50" class="flex-one"> + <div data-expected-width="25" style="width: 50%; background-color: lime"></div> + </div> +</div> +<div class="flexbox vertical"> + <div data-expected-width="50" class="flex-one"> + <div id="dynamicVerticalChild" data-expected-width="15" style="width: 50%; background-color: lime"></div> + </div> +</div> +<div class="flexbox vertical"> + <div data-expected-width="50" class="flex-one" style="padding: 10px; border: 2px solid black"> + <div data-expected-width="13" style="width: 50%; background-color: lime"></div> + </div> +</div> +<div class="flexbox vertical"> + <img data-expected-width="25" style="max-width: 50%" src="support/10x10-green.png" /> +</div> +<div class="flexbox vertical"> + <div data-expected-width="25" class="flex-one" style="max-width: 50%"> + <div data-expected-width="13" style="width: 50%; background-color: lime"></div> + </div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-heights-013.html b/testing/web-platform/tests/css/css-flexbox/percentage-heights-013.html new file mode 100644 index 0000000000..f39e83c19f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-heights-013.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<title>CSS Flexbox: percentage height of replaced elements</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes"> +<link rel="help" href="https://crbug.com/499766"> +<meta name="assert" content="This test checks that percent heights of flex items' replaced children are resolved correctly" /> +<link href="support/flexbox.css" rel="stylesheet"> + +<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> + +<p>You should see no red -- the height should be considered definite</p> + +<div class="flexbox" style="width: 100px; height: 150px; outline: 5px solid black;"> + <div style="background: red;"> + <img style="height: 100%; width: 100%;" src="support/100x100-green.png" data-expected-height="150"> + </div> +</div> + +<div class="flexbox column" style="width: 100px; height: 150px; outline: 5px solid black;"> + <div class="flex-one" style="background: red;"> + <img style="height: 100%; width: 100%;" src="support/100x100-green.png" data-expected-height="150"> + </div> +</div> + +<div class="flexbox" style="width: 100px; height: 150px; outline: 5px solid black;"> + <div style="background: red;"> + <object style="height: 100%; width: 100%;" data="support/100x100-green.png" data-expected-height="150"></object> + </div> +</div> + +<div class="flexbox" style="width: 100px; height: 150px; outline: 5px solid black;"> + <div style="background: red;"> + <embed style="display:inline-block; height: 100%; width: 100%;" type="application/x-webkit-test-webplugin" data-expected-height="150"></embed> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-heights-014.html b/testing/web-platform/tests/css/css-flexbox/percentage-heights-014.html new file mode 100644 index 0000000000..8e9ce201a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-heights-014.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="A flex-item with a replaced height descendant should determine its flex-basis correctly when the height of the flexbox changes." /> +<p>Test passes if there is a filled green square.</p> +<div id="target" style="display: flex; width: 100px; height: 100px;"> + <div style="height: 50%; flex: 1; background: green;"> + <canvas width=10 height=10 style="height: 100%;"></canvas> + </div> + <div style="flex: 1;"></div> +</div> +<script> + document.body.offsetTop; + document.getElementById('target').style.height = '200px'; +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-heights-015-ref.html b/testing/web-platform/tests/css/css-flexbox/percentage-heights-015-ref.html new file mode 100644 index 0000000000..874bf6da63 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-heights-015-ref.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Reference: Test the percentage resolution of a child in a flex item that has an indefinite main size</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + + <style> + .container { + display: inline-block; + width: 100px; + vertical-align: top; + } + + .item { + height: 200px; + background: red; + width: 100px; + } + + .child { + background: green + } + + .tall { + height: 250px; + } + </style> + + <p>You should not see any red (except perhaps as the background of a vertical scrollbar)</p> + + <div class="container"> + <div class="item" style="overflow:hidden"> + <div class="child"> + <div class="tall"></div> + </div> + </div> + </div> + + <div class="container"> + <div class="item" style="overflow:auto"> + <div class="child"> + <div class="tall"></div> + </div> + </div> + </div> + + <div class="container"> + <div class="item" style="overflow:scroll"> + <div class="child"> + <div class="tall"></div> + </div> + </div> + </div> + + <div class="container"> + <div class="item" style="overflow:visible"> + <div class="child" > + <div class="tall"></div> + </div> + </div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-heights-015.html b/testing/web-platform/tests/css/css-flexbox/percentage-heights-015.html new file mode 100644 index 0000000000..bdeb7c8d0c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-heights-015.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Test the percentage resolution of a child in a flex item that has an indefinite main size</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#definite-sizes"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1654044"> + <link rel="match" href="percentage-heights-015-ref.html"> + + <style> + .container { + display: inline-flex; + flex-direction: column; + width: 100px; + max-height: 200px; + } + + .item { + min-height: 0px; + background: red; + width: 100px; + } + + .child { + height: 50%; + background: green + } + + .tall { + height: 250px; + } + </style> + + <p>You should not see any red (except perhaps as the background of a vertical scrollbar)</p> + + <div class="container"> + <div class="item" style="overflow:hidden"> + <div class="child"> + <div class="tall"></div> + </div> + </div> + </div> + + <div class="container"> + <div class="item" style="overflow:auto"> + <div class="child"> + <div class="tall"></div> + </div> + </div> + </div> + + <div class="container"> + <div class="item" style="overflow:scroll"> + <div class="child"> + <div class="tall"></div> + </div> + </div> + </div> + + <div class="container"> + <div class="item" style="overflow:visible"> + <div class="child" > + <div class="tall"></div> + </div> + </div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-heights-016.html b/testing/web-platform/tests/css/css-flexbox/percentage-heights-016.html new file mode 100644 index 0000000000..2090257eb5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-heights-016.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>Fixed indefinite heights</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#definite-sizes"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<link rel="bookmark" href="https://crbug.com/1255340"> +<meta name="assert" content="Flex items don't get definite heights just because their specified main sizes are definite." /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: flex; flex-direction: column;"> + <!-- Remove min-height:auto so we don't have to think about whether it matters. --> + <div style="flex: 1 1 content; height: 100px; min-height: 0px;"> + <div style="height: 100px; width: 100px; background: green;"></div> + <div style="height: 100%; width: 100px; background: red;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-heights-017.html b/testing/web-platform/tests/css/css-flexbox/percentage-heights-017.html new file mode 100644 index 0000000000..484a6a2195 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-heights-017.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>Fixed indefinite heights</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#definite-sizes"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-common"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<link rel="bookmark" href="https://crbug.com/1255340"> +<meta name="assert" content="Flex items don't get definite heights just because their specified main sizes are definite. This affects flex items with with a flex-basis that behaves as auto, where the auto-behaving flex-basis derives from omitted flex-basis from flex shorthand." /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: flex; flex-direction: column;"> + <!-- Remove min-height:auto so we don't have to think about whether it matters. --> + <!-- Chrome 96 and Firefox 94 still use 0% as the value of flex-basis when it is omitted from the flex shorthand, despite the recent spec change that dictates 0px instead of 0%. --> + <div style="flex: 1 1; height: 100px; min-height: 0px;"> + <div style="height: 100px; width: 100px; background: green;"></div> + <div style="height: 100%; width: 100px; background: red;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-heights-018.html b/testing/web-platform/tests/css/css-flexbox/percentage-heights-018.html new file mode 100644 index 0000000000..4cdcd5d3f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-heights-018.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>Fixed indefinite heights</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#definite-sizes"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<link rel="bookmark" href="https://crbug.com/1255340"> +<meta name="assert" content="Flex items don't get definite heights just because their specified main sizes are definite. This affects flex items with with a flex-basis that behaves as auto." /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: flex; flex-direction: column;"> + <!-- Remove min-height:auto so we don't have to think about whether it matters. --> + <!-- The 0% behaves as auto because the parent container has an indefinite height. --> + <div style="flex: 1 1 0%; height: 100px; min-height: 0px;"> + <div style="height: 100px; width: 100px; background: green;"></div> + <div style="height: 100%; width: 100px; background: red;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-heights-019.html b/testing/web-platform/tests/css/css-flexbox/percentage-heights-019.html new file mode 100644 index 0000000000..4cc714c5cd --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-heights-019.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Flexbox Test: Test the percentage resolution of a child in a flex item that has an indefinite main size</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#definite-sizes"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1739048"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + <meta name="assert" content="Per 9.8.4, once the outer flex container's cross size has been determined, the inner flex container's main size is considered definite. Then per 9.8.1, the item's post-flexing main size is also treated as definite. Therefore, in the final layout, the child's percentage block-size should be treated as resolvable and should be honored."> + + <style> + .outer { + display: flex; + } + + .inner { + display: flex; + flex-direction: column; + inline-size: 100px; + } + + .item { + overflow: hidden; /* This is essential to reproduce the bug. */ + min-block-size: 100px; + background: red; + } + + .child { + block-size: 100%; + background: green; + } + </style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div class="outer"> + <div class="inner"> + <div class="item"> + <div class="child"></div> + </div> + </div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-margins-001.html b/testing/web-platform/tests/css/css-flexbox/percentage-margins-001.html new file mode 100644 index 0000000000..b98bfa1af8 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-margins-001.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>CSS Flexbox: percent margins with flex child</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers"> +<link rel="help" href="https://drafts.csswg.org/css2/box.html#margin-properties"> +<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=93411"> +<meta name="assert" content="This test ensures that percent margins always are computed with respect to the containing block's width even when there is flex on any child."> +<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" style="display:flex; flex-direction: column; background-color: salmon; height: 300px; width: 400px;"> + <div style="margin: 10%; background-color: orange; height: 5px; flex: 1" data-expected-width=320 data-expected-height=135></div> + <div style="margin: 10%; background-color: orange; height: 5px;" data-expected-width=320 data-expected-height=5></div> +</div> + +<div class="flexbox" style="display:flex; background-color: salmon; height: 300px; width: 400px;"> + <div style="margin: 10%; background-color: orange; height: 5px; flex: 1 5px" data-expected-width=235 data-expected-height=5></div> + <div style="margin: 10%; background-color: orange; height: 5px; width: 5px" data-expected-width=5 data-expected-height=5></div> +</div> + +<div class="flexbox" style="display:flex; background-color: salmon; height: 300px; width: 400px; padding: 100px;"> + <div style="margin: 10%; background-color: orange; height: 5px; flex: 1 5px" data-expected-width=235 data-expected-height=5></div> + <div style="margin: 10%; background-color: orange; height: 5px; width: 5px" data-expected-width=5 data-expected-height=5></div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-max-height-001.html b/testing/web-platform/tests/css/css-flexbox/percentage-max-height-001.html new file mode 100644 index 0000000000..8e6dd227a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-max-height-001.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<style> +.flexbox { + height: 100px; + width: 100px; + display: flex; + flex-direction: column; + background-color: red; +} + +.flexbox img { + max-height: 100%; + min-height: 0; +} +</style> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#layout-algorithm" title="9. Flex Layout Algorithm"> +<link rel="author" title="Google LLC" href="https://www.google.com/"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="flexbox"> + <img src="support/100x100-green.png"> +</div> + diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-max-height-002.html b/testing/web-platform/tests/css/css-flexbox/percentage-max-height-002.html new file mode 100644 index 0000000000..f674ec57d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-max-height-002.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<link rel="bookmark" href="https://crbug.com/1092934"> +<meta name="assert" content="Replaced children with % max-height are sized correctly when their parents are flex items with imposed definite heights." /> + +<p>Test passes if there is a filled green square.</p> + +<div style="display: flex; height: 100px;"> + <div> + <!-- This is a 200x200 green square. It's inline so that there is no + raciness when an image resource loads, which affects chrome's behavior + on this test. --> + <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' width='200' height='200'><rect width='200' height='200' fill='green'/></svg>" style="max-height: 100%"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-max-height-003.html b/testing/web-platform/tests/css/css-flexbox/percentage-max-height-003.html new file mode 100644 index 0000000000..eaab8a35e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-max-height-003.html @@ -0,0 +1,57 @@ +<!doctype html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<link rel="bookmark" href="https://crbug.com/1107604"> +<meta name="assert" content="Replaced children with % max-height are sized correctly when they are deeply nested flex items with imposed definite heights." /> + +<style> +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} + +#outer-flexbox { + display: flex; + width: 200px; + height: 200px; + flex-direction: column; + align-items: flex-start; +} + +#middle-flexbox { + display: flex; + height: 50%; + /* This needs to be stretched for repro */ + align-items: stretch; + min-height: 0px; +} + +#inner-flexbox { + display: flex; + align-items: flex-start; + min-width: 0px; +} + +img { + max-height: 100%; + min-width: 0px; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="reference-overlapped-red"></div> + +<div id=outer-flexbox> + <div id=middle-flexbox> + <div id=inner-flexbox> + <!-- This is a 400x400 green square. It's inline so that there is no + raciness when an image resource loads, which affects chrome's behavior + on this test. --> + <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' width='400' height='400'><rect width='400' height='400' fill='green'/></svg>"> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-max-height-004-ref.html b/testing/web-platform/tests/css/css-flexbox/percentage-max-height-004-ref.html new file mode 100644 index 0000000000..e7cdafacb5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-max-height-004-ref.html @@ -0,0 +1,3 @@ +<!-- quirks mode --> +<div style="width:100px; height:100px; background:green;"></div> + diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-max-height-004.html b/testing/web-platform/tests/css/css-flexbox/percentage-max-height-004.html new file mode 100644 index 0000000000..3d155e3579 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-max-height-004.html @@ -0,0 +1,29 @@ +<!doctype quirks> +<title>CSS Flexbox Test: replaced element in nested flexboxes has correct height to resolve percentage against </title> +<link rel="author" title="Ziran Sun" href="mailto:zsun@igalia.com"> +<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 href="support/flexbox.css" rel="stylesheet"> +<link rel="match" href="percentage-max-height-004-ref.html"> +<meta name="assert" content="Replaced children with % max-height are sized correctly when their parents are flex items with percentage heights in quirks mode." /> + + +<style> +.flex { + display:flex; + flex-direction:column; +} +.percent-height { + height: 100%; +} +.max-sizes { + max-height: 100%; + max-width: 100%; +} +</style> +<div class="percent-height flex"> + <div class="percent-height"> + <img class="max-sizes" src="support/100x100-green.png" alt="Image download support must be enabled"> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-max-width-cross-axis.html b/testing/web-platform/tests/css/css-flexbox/percentage-max-width-cross-axis.html new file mode 100644 index 0000000000..6aa20a6bb5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-max-width-cross-axis.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>CSS Flexbox: percentage max width when using 'flex-direction: column'</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#percentage-sizing"> +<link rel="help" href="https://crbug.com/675333"> +<meta name="assert" content="This test checks that an item's percentage max-width is correctly resolved when using 'flex-direction: column'"> +<link rel="stylesheet" href="support/flexbox.css"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.flexbox')"> + +<p>Both bars should be the same width</p> +<div class="flexbox column" style="width: 400px;"> + <div data-expected-width="200" style="margin-left: 50%; width: 50%; background: green;"> + Content + </div> +</div> + +<div class="flexbox column" style="width: 400px;"> + <div data-expected-width="200" style="margin-left: 50%; max-width: 50%; background: blue;"> + Content + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-padding-001.html b/testing/web-platform/tests/css/css-flexbox/percentage-padding-001.html new file mode 100644 index 0000000000..0762513995 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-padding-001.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src='/resources/check-layout-th.js'></script> +<link rel="author" title="David Grogan" href="dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-box-3/#padding-physical" title="Percentages line"> +<meta name="assert" content="item's padding is resolved against parent's size, not item's" /> + +<style> +x-flexbox { + display: flex; + height: 50px; + width: 500px; +} + +x-item { + padding-left: 10%; + background: blue; + position: relative; /* Just so offsetLeft returns distance between x-item and div */ +} + +div { + height: 50px; + width: 50px; + background: orange; +} +</style> + +If the item's % padding is calculated correctly, there is a blue square on the left and an orange square on the right, both 50x50. + +<x-flexbox> + <x-item> + <div data-offset-x=50></div> + </x-item> +</x-flexbox> + +<script> +checkLayout('x-flexbox'); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-padding-002-ref.html b/testing/web-platform/tests/css/css-flexbox/percentage-padding-002-ref.html new file mode 100644 index 0000000000..65d5519406 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-padding-002-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com"> +<style> +div { + width: 50px; + height: 50px; +} +span { + display: block; + border: 5px solid black; +} +</style> +<p>Test passes if there is a white square inside a 10x30 white box.</p> +<div> + <span style="width: 10px; height: 30px;"> + <span style="padding: 10px;"></span> + </span> +<div> diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-padding-002.html b/testing/web-platform/tests/css/css-flexbox/percentage-padding-002.html new file mode 100644 index 0000000000..9eaaff013e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-padding-002.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>This test checks that percentage paddings do not lead to flex items with negative sizes.</title> +<link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-box-3/#padding-physical" title="Percentages line"> +<link rel="match" href="percentage-padding-002-ref.html"> +<style> +div { + width: 50px; + height: 50px; +} +span { + display: inline-flex; + border: 5px solid black; +} +</style> +<p>Test passes if there is a white square inside a 10x30 white box.</p> +<div> + <span> + <span style="padding: 100%;"></span> + </span> +<div> diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-padding-003.html b/testing/web-platform/tests/css/css-flexbox/percentage-padding-003.html new file mode 100644 index 0000000000..ee84f1570e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-padding-003.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://crbug.com/1440908"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" + content="vertical-rl block's auto height should encompass its children, and the percentage padding should resolve based on that." /> + +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> + +<div id=reference-overlapped-red></div> + +<div id="container" style="writing-mode:vertical-rl; width:101px;"> + <div style="display:flex; padding-right:5%;"> + <div style="writing-mode:horizontal-tb; padding-right:10%;"> + <div + style="width:100px; height:100px; background:green; position:relative; left:15px;"> + </div> + </div> + </div> +</div> +<script> + document.body.offsetTop; + container.style.width = "100px"; +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-padding-004.html b/testing/web-platform/tests/css/css-flexbox/percentage-padding-004.html new file mode 100644 index 0000000000..ca96e546cc --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-padding-004.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://crbug.com/1445257"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" + content="vertical-rl block's auto height should encompass its column wrap flexbox child and descendants, and the percentage padding should resolve based on that." /> + +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> + +<div id=reference-overlapped-red></div> + +<div id="container" style="writing-mode:vertical-rl; width:101px;"> + <div style="display:flex; flex-flow:column wrap; padding-right:5%;"> + <div style="writing-mode:horizontal-tb; padding-right:10%;"> + <div + style="width:100px; height:100px; background:green; position:relative; left:15px;"> + </div> + </div> + </div> +</div> +<script> + document.body.offsetTop; + container.style.width = "100px"; +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-size-quirks-002.html b/testing/web-platform/tests/css/css-flexbox/percentage-size-quirks-002.html new file mode 100644 index 0000000000..c66ebd4428 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-size-quirks-002.html @@ -0,0 +1,63 @@ +<!doctype quirks> +<title>CSS Flexbox: percentage size in flexbox children in quirks mode</title> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers"> +<link rel="help" href="https://quirks.spec.whatwg.org/#the-percentage-height-calculation-quirk" title="Number 4"> +<link rel="help" href="https://crbug.com/1054185"> +<meta name="assert" content="This test checks that percentage height/width values in flexbox descendants are correctly resolved in quirks mode."> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<style> +.fixed-height { height: 100px; } +.flex { + display: flex; + border: 3px solid black; +} + +.pct { + height: 100%; + min-height: 10px; + width: 50px; + display: inline-block; + vertical-align: top; + background: purple; +} +.px { + height: 50px; + width: 50px; + display: inline-block; + vertical-align: top; + background: blue +}; +</style> + +flex with 1 wrapper div inside: +<div class="fixed-height"> + <div class="flex"> + <div> + <div class="pct" data-expected-height=50></div> + <div class="px"></div> + </div> + </div> +</div> +flex with several wrapper divs inside: +<div class="fixed-height"> + <div class="flex"> + <div> + <div> + <div> + <div class="pct" data-expected-height=50></div> + <div class="px"></div> + </div> + </div> + </div> + </div> +</div> + +<script> +checkLayout('.pct'); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-size-quirks.html b/testing/web-platform/tests/css/css-flexbox/percentage-size-quirks.html new file mode 100644 index 0000000000..1a5c5136be --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-size-quirks.html @@ -0,0 +1,107 @@ +<title>CSS Flexbox: percentage size in flexbox children in quirks mode</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://crbug.com/531783"> +<meta name="assert" content="This test checks that percentage height/width values in flexbox children are correctly resolved regardless of quirks mode."> +<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> diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-size-subitems-001.html b/testing/web-platform/tests/css/css-flexbox/percentage-size-subitems-001.html new file mode 100644 index 0000000000..70f3953052 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-size-subitems-001.html @@ -0,0 +1,93 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: Percentage size on child of a flex item with margin, border, padding and scrollbar</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-items"> +<link rel="match" href="reference/percentage-size-subitems-001-ref.html"> +<meta name="assert" content="Checks that flex items children resolve properly their percentage sizes, even when the flex item has margin, border, padding and scrollbar."> +<style> +.flex { + display: inline-flex; + border: solid 5px black; + width: 150px; + height: 100px; + margin: 10px; + vertical-align: top; +} + +.item { + flex: 1; + overflow: scroll; + border: solid magenta; + border-width: 12px 9px 6px 3px; + margin: 1px 2px 3px 4px; + padding: 5px 15px 10px 20px; + background: cyan; +} + +.subitem { + width: 100%; + height: 100%; + background: yellow; +} + +.horizontalTB { writing-mode: horizontal-tb; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } +</style> + +<p>The test passes if in the different examples you see scrollbars but there's no overflow, so you cannot actually scroll.</p> + +<div class="flex"> + <div class="item horizontalTB"> + <div class="subitem"></div> + </div> +</div> + +<div class="flex"> + <div class="item horizontalTB"> + <div class="subitem verticalLR"></div> + </div> +</div> + +<div class="flex"> + <div class="item horizontalTB"> + <div class="subitem verticalRL"></div> + </div> +</div> + +<div class="flex"> + <div class="item verticalLR"> + <div class="subitem"></div> + </div> +</div> + +<div class="flex"> + <div class="item verticalLR"> + <div class="subitem horizontalTB"></div> + </div> +</div> + +<div class="flex"> + <div class="item verticalLR"> + <div class="subitem verticalRL"></div> + </div> +</div> + +<div class="flex"> + <div class="item verticalRL"> + <div class="subitem"></div> + </div> +</div> + +<div class="flex"> + <div class="item verticalRL"> + <div class="subitem horizontalTB"></div> + </div> +</div> + +<div class="flex"> + <div class="item verticalRL"> + <div class="subitem verticalLR"></div> + </div> +</div> 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> diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-widths-001-ref.html b/testing/web-platform/tests/css/css-flexbox/percentage-widths-001-ref.html new file mode 100644 index 0000000000..ca0c4d9b2a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-widths-001-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<link rel="author" title="Google Inc." href="http://www.google.com/"> +<style> +body { + position: relative; + width: 600px; + height: 800px; +} + +#container { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + display: flex; +} + +#top-bar { + background-color: green; + width: 100px; +} + +#content { + background-color: blue; + width: 500px; +} +</style> + + +<div id="container"> + <div id="top-bar"> + Tests that percentage widths get resolved correctly when the flexbox is + </div> + <div id="content"> + absolutely positioned without an explicit width. You should see no red. + </div> +</div> + + diff --git a/testing/web-platform/tests/css/css-flexbox/percentage-widths-001.html b/testing/web-platform/tests/css/css-flexbox/percentage-widths-001.html new file mode 100644 index 0000000000..b1b5acff62 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/percentage-widths-001.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<title>CSS Test: Absolutely positioned children of flexboxes</title> +<link rel="author" title="Google Inc." href="http://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes"> +<link rel="match" href="percentage-widths-001-ref.html"> +<meta name="assert" content="Checks that we correctly size percentage-sized +children of absolute-positioned flex boxes"> +<style> +body { + position: relative; + width: 600px; + height: 800px; +} + +#container { + background-color: red; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + display: flex; + flex-direction: row; +} + +#top-bar { + background-color: green; + width: 20%; +} + +#content { + background-color: blue; + flex-basis: 100%; +} +</style> + + +<div id="container"> + <div id="top-bar"> + Tests that percentage widths get resolved correctly when the flexbox is + </div> + <div id="content"> + absolutely positioned without an explicit width. You should see no red. + </div> +</div> + + diff --git a/testing/web-platform/tests/css/css-flexbox/position-absolute-scrollbar-freeze-ref.html b/testing/web-platform/tests/css/css-flexbox/position-absolute-scrollbar-freeze-ref.html new file mode 100644 index 0000000000..d0bf617951 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/position-absolute-scrollbar-freeze-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; overflow: auto;"> + <div style="height: 200px; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/position-absolute-scrollbar-freeze.html b/testing/web-platform/tests/css/css-flexbox/position-absolute-scrollbar-freeze.html new file mode 100644 index 0000000000..ac510f11e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/position-absolute-scrollbar-freeze.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1148288"> +<link rel="match" href="position-absolute-scrollbar-freeze-ref.html"> +<div style="display: flex; position: relative;"> + <div style="display: flex;"> + <div id="target1" style="width: 0px;">text</div> + </div> + <div id="target2" style="position: absolute; overflow: auto; top: 0; left: 0; width: 100px; max-height: 100px; display: none;"> + <div style="height: 200px; background: green;"></div> + </div> +</div> +<script> +document.body.offsetTop; +document.getElementById('target1').innerText = ''; +document.getElementById('target2').style.display = ''; +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/position-fixed-001.html b/testing/web-platform/tests/css/css-flexbox/position-fixed-001.html new file mode 100644 index 0000000000..a3de19d6d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/position-fixed-001.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html> +<title>CSS Flexbox: flex-direction: column in fixed-positioned flexboxes.</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property"> +<link rel="help" href="https://drafts.csswg.org/css-position/#position-property"> +<link rel="match" href="reference/position-fixed-001-ref.html"> +<link rel="help" href="https://crbug.com/604346"/> +<meta name="assert" content="This test ensures that widths are always definite for inner flexboxes that are nested inside fixed-positioned flexboxes using 'flex-direction: column'."/> + +<style> +.fixed-pos{ + position: fixed; + background: red; +} + +.inner { + width: 100%; + background: green; +} + +.flexbox { + display: flex; +} + +.column { + flex-direction: column; +} +</style> + +<body> + +<p>You should see no red.</p> + +<div class="fixed-pos" > + <div class="flexbox column"> + + <div class="flexbox"> + <div class="inner"> + XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX + </div> + </div> + + <div class="flexbox"> + <div class="inner"> + YYYY + </div> + </div> + + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/position-relative-percentage-top-001.html b/testing/web-platform/tests/css/css-flexbox/position-relative-percentage-top-001.html new file mode 100644 index 0000000000..3ec47c1d42 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/position-relative-percentage-top-001.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<title>CSS Flexbox: Relative position with a percentage top</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#valdef-align-items-stretch"> +<meta name="assert" content="This test ensures that a flexbox with 'flex-flow: row wrap' properly centers a grandchild with 'position: relative' and 'top: 50%'."> +<style> +html, body { + margin: 0; +} + +.border { + border:1px solid #000; +} +.width-50 { + width: 50%; +} +.flex { + display: flex; + flex-flow: row wrap; +} +.tall { + height: 300px; +} +.top-50 { + position: relative; + top: 50%; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.border')"> +<div class="border"> + <div class="flex"> + <div class="width-50"> + <label class="top-50" data-offset-y="151">This should be in the center of the container</label> + </div> + <div class="width-50"> + <div class="tall"> + This is tall + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/position-relative-percentage-top-002.html b/testing/web-platform/tests/css/css-flexbox/position-relative-percentage-top-002.html new file mode 100644 index 0000000000..698f310e90 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/position-relative-percentage-top-002.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta name="assert" content="This ensures that a relative-positioned grandchild (of a flexbox) correctly resolves percentages against its stretched parent."> +<link rel="help" href="https://crbug.com/1106074"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; background: red;"></div> +<div style="display: flex; width: 100px;"> + <div style="height: 100px;"></div> + <div style="width: 100px;"> + <div style="background: green; height: 100px; position: relative; top: -100%;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/position-relative-percentage-top-003.html b/testing/web-platform/tests/css/css-flexbox/position-relative-percentage-top-003.html new file mode 100644 index 0000000000..0570b246af --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/position-relative-percentage-top-003.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<meta name="assert" content="This ensures that a relative-positioned great-grandchild (of a flexbox) correctly resolves percentages against its stretched parent."> +<link rel="help" href="https://crbug.com/1108508"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display: flex; width: 100px; height: 100px;"> + <div> + <div style="width: 100%; height: 100%;"> + <div style="width: 100px; height: 100px; background: red;"></div> + <div style="width: 100px; height: 100px; background: green; position: relative; top: -100%;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/position-relative-with-scrollable-with-abspos-crash.html b/testing/web-platform/tests/css/css-flexbox/position-relative-with-scrollable-with-abspos-crash.html new file mode 100644 index 0000000000..f0699f2046 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/position-relative-with-scrollable-with-abspos-crash.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>CSS Flexbox: Crash for flex box with relpos with scrollable with abspos</title> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@opera.com"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-container"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable-overflow"> +<link rel="issue" href="https://crbug.com/498969"> +<meta name="assert" content="Check that crash doesn't happen in flex box with descendents that include relpos, overflow:auto scrollbars, and abspos."> + +<div style="display:flex;"> + <div> + <div style="position:relative; width:5em;"> + <div style="overflow:auto;"> + <div>xxxxxxxxxxxxxxxxxxxxxx</div> + <div style="position:absolute;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/quirks-auto-block-size-with-percentage-item.html b/testing/web-platform/tests/css/css-flexbox/quirks-auto-block-size-with-percentage-item.html new file mode 100644 index 0000000000..f5c3d7c181 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/quirks-auto-block-size-with-percentage-item.html @@ -0,0 +1,19 @@ +<!-- quirks mode --> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#the-height-property"> +<meta name="assert" content="The percentage height resolution quirk isn't applied to flexboxes."> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<!-- Have to wait for onload to fire to ensure the image is loaded. --> +<body onload="checkLayout('#container')"> + +<p>There should be a green square to the left of a blue square, and no red.</p> +<div id="container" style="width:200px; height:456px;"> + <div style="display:flex; background:blue;" data-expected-height="100"> + <img style="width:100px; height: 50%;" src="support/1x1-green.png" data-expected-height="100"> + <div style="width: 50px; height: 100%; background: red;" data-expected-height="0"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/radiobutton-min-size.html b/testing/web-platform/tests/css/css-flexbox/radiobutton-min-size.html new file mode 100644 index 0000000000..1dd84b0766 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/radiobutton-min-size.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<title>CSS Flexbox: minimum size of the radio button</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto"> +<meta name="assert" content="This test ensures that radio buttons used as flex items do not shrink below their default sizes."> +<style> +.flex { + display: flex; + width: 500px; +} + +.wide { + width: 600px; + flex: none; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<p>You should see two identical-looking lines, both with a radio button at the +beginning.</p> + +<div class="flex"> + <input type="radio" id="check"> + <div class="wide">Text</div> +</div> + +<div> + <input type="radio" style="vertical-align: top;" id="ref"><span>Text</span> +</div> + +<script> +var ref = document.getElementById("ref"); +var check = document.getElementById("check"); + +test(function() { + assert_equals(ref.offsetWidth, check.offsetWidth, "width should be equal"); +}, "two radio button widths are identical"); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/align-baseline-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/align-baseline-ref.html new file mode 100644 index 0000000000..d1c579045e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/align-baseline-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<link href="../support/flexbox.css" rel="stylesheet"> +<style> +body { + margin: 0; +} +</style> + +<body> +<div class='flexbox column align-items-flex-start'> + <h1>This text</h1> + <p>should be left aligned.</p> +</div> + +<div style='margin-left: auto; width: max-content;' class='flexbox column align-items-flex-start'> + <h1>This text</h1> + <p>should be right aligned.</p> +</div> +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/align-content-001-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/align-content-001-ref.html new file mode 100644 index 0000000000..bd46882033 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/align-content-001-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + div { + background: green; + height: 100px; + width: 300px; + } +</style> +<body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/align-content_center-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/align-content_center-ref.html new file mode 100644 index 0000000000..e6a3d8820b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/align-content_center-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Flexible Box Test: align-content_center</title> +<link rel="stylesheet" href="../support/test-style.css"> +<style> +#test { + height: 200px; + width: 80px; +} +#spacer { + width: 50px; + height: 25px; +} +</style> +</head> +<body> +<p>Test passes if:<br> +1. the rectangle 1, 2, 3 show up in a vertical column in a red rectangle and no gap between them.<br> +2. the rectangle 1, 2, 3 appear in middle left of red rectangle.</p> +<div id=test><div id=spacer></div><div id=test01>1</div><div id=test02>2</div><div id=test03>3</div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/align-content_flex-end-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/align-content_flex-end-ref.html new file mode 100644 index 0000000000..03ebcbed24 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/align-content_flex-end-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Flexible Box Test: align-content_flex-end</title> +<link rel="stylesheet" href="../support/test-style.css"> +<style> +#test { + height: 200px; + width: 80px; +} +#spacer { + width: 50px; + height: 50px; +} +</style> +</head> +<body> +<p>Test passes if:<br> +1. the rectangle 1, 2, 3 show up in a vertical column in a red rectangle and no gap between them.<br> +2. the rectangle 1, 2, 3 appear in bottom left of red rectangle.</p> +<div id=test><div id=spacer></div><div id=test01>1</div><div id=test02>2</div><div id=test03>3</div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/align-content_flex-start-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/align-content_flex-start-ref.html new file mode 100644 index 0000000000..061bec5e24 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/align-content_flex-start-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Flexible Box Test: align-content_flex-start</title> +<link rel="stylesheet" href="../support/test-style.css"> +<style> +#test { + height: 200px; + width: 80px; +} +</style> +</head> +<body> +<p>Test passes if:<br> +1. the rectangle 1, 2, 3 show up in a vertical column in a red rectangle and no gap between them.<br> +2. the rectangle 1, 2, 3 appear in upper left of red rectangle.</p> +<div id=test><div id=test01>1</div><div id=test02>2</div><div id=test03>3</div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/align-content_space-around-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/align-content_space-around-ref.html new file mode 100644 index 0000000000..cab31db1f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/align-content_space-around-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Flexible Box Test: align-content_space-around</title> +<link rel="stylesheet" href="../support/test-style.css"> +<style> +#test { + height: 210px; + width: 80px; +} +#spacer { + width: 50px; + height: 20px; +} +#halfspacer { + width: 50px; + height: 10px; +} +</style> +</head> +<body> +<p>Test passes if:<br> +1. the rectangle 1, 2, 3 show up in a vertical column in a red rectangle.<br> +2. the rectangle 1, 2, 3 are distributed such that the empty space between any two adjacent rectangle is the same, and the empty space of the column before the first and after the last rectangle are half the size of the other empty spaces.</p> +<div id=test><div id=halfspacer></div><div id=test01>1</div><div id=spacer></div><div id=test02>2</div><div id=spacer></div><div id=test03>3</div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/align-content_space-between-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/align-content_space-between-ref.html new file mode 100644 index 0000000000..97b56e23ef --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/align-content_space-between-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Flexible Box Test: align-content_space-between</title> +<link rel="stylesheet" href="../support/test-style.css"> +<style> +#test { + height: 200px; + width: 80px; +} +#spacer { + width: 50px; + height: 25px; +} +</style> +</head> +<body> +<p>Test passes if:<br> +1. the rectangle 1, 2, 3 show up in a vertical column in a red rectangle.<br> +2. No gap between the top of red rectangle and the top of rectangle 1, no gap between the bottom of red rectangle and the bottom of rectangle 3 too, and rectangle 2 is distributed so that the empty space between rectangle 1 and rectangle 3 is the same.</p> +<div id=test><div id=test01>1</div><div id=spacer></div><div id=test02>2</div><div id=spacer></div><div id=test03>3</div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/align-content_stretch-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/align-content_stretch-ref.html new file mode 100644 index 0000000000..f66a1ad959 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/align-content_stretch-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Flexible Box Test: align-content_stretch</title> +<link rel="stylesheet" href="../support/test-style.css"> +<style> +#test { + height: 210px; + width: 80px; +} +#spacerone { + width: 50px; + height: 20px; +} +#spacertwo { + width: 50px; + height: 20px; +} +</style> +</head> +<body> +<p>Test passes if:<br> +1. the rectangle 1, 2, 3 show up in a vertical column in a red rectangle.<br> +2. No gap between the top of red rectangle and the top of rectangle 1, and rectangle 1 , 2, 3 are distributed so that the empty space in the column between 1 , 2 , 3 is the same. +<div id=test><div id=test01>1</div><div id=spacerone></div><div id=test02>2</div><div id=spacertwo></div><div id=test03>3</div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/align-items-baseline-overflow-non-visible-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/align-items-baseline-overflow-non-visible-ref.html new file mode 100644 index 0000000000..c2f6d2353c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/align-items-baseline-overflow-non-visible-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<style> +.flex { + display: flex; + align-items: baseline; + font: 25px/1 Ahem; +} +</style> + +<body> +<div class="flex"> + <span>XX</span> + <div><div>YY</div></div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/align-self-015-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/align-self-015-ref.html new file mode 100644 index 0000000000..415a36f42d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/align-self-015-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/testing/web-platform/tests/css/css-flexbox/reference/anonymous-block-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/anonymous-block-ref.html new file mode 100644 index 0000000000..fc8fe9f991 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/anonymous-block-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> +<body> +<p>This tests that text nodes that have a flexbox as a parent are wrapped in +anonymous blocks.</p> +<div>This text should be visible.</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/auto-height-column-with-border-and-padding-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/auto-height-column-with-border-and-padding-ref.html new file mode 100644 index 0000000000..a5ed108546 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/auto-height-column-with-border-and-padding-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +Tests that auto-height column flexboxes with border and padding correctly size their height to their content. +<div style="border: 5px solid salmon; padding: 5px; overflow: scroll"> + <div> + <div style="height: 50px; background-color: pink"> + <div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/auto-height-with-flex-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/auto-height-with-flex-ref.html new file mode 100644 index 0000000000..d56fe356dc --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/auto-height-with-flex-ref.html @@ -0,0 +1,5 @@ +<div style="border:1px solid purple;"> +<div>Header</div> +<div>Flexible content<br> +</div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/auto-margins-003-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/auto-margins-003-ref.html new file mode 100644 index 0000000000..4c8f69c8a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/auto-margins-003-ref.html @@ -0,0 +1,32 @@ +<!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"> + <div class="item1 align-self-center">centeredWithMargins</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + </div> + <div style="writing-mode: vertical-lr;"> + <div class="flexbox column"> + <div class="item1 align-self-center">centeredWithMargins</div> + <div class="item2 align-self-center">centeredWithAlignSelf</div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/content-height-with-scrollbars-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/content-height-with-scrollbars-ref.html new file mode 100644 index 0000000000..8a1484f693 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/content-height-with-scrollbars-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<head> +<style> +.outer { + height: 100px; + overflow:scroll; +} +.outer > div, td:nth-child(1) { + background-color: lightgreen; +} +td:nth-child(2) { + background-color: lightblue; +} +table, td { + padding: 0; + border-spacing: 0; +} +</style> +</head> +<body> +<p>This tests that when setting the height of a flex item to a percentage +height, we use the content height with scrollbars. The content should not be +scrollable in any of the test cases below.</p> + +<div class="outer"> + <div style="height: 100%"></div> +</div> + +<div class="outer"> + <div style="height: 100%; box-sizing: border-box; border: 5px solid green"></div> +</div> + +<div class="outer"> + <div style="display:inline-block; height: 50px; width: 50%;"></div><div + style="display:inline-block; height: 50px; width: 50%; background-color: lightblue"></div> +</div> +<div class="outer" style="padding: 10px; height: auto"> + <table style="margin: 0; padding: 0; width: 600px"> + <tr> + <td style="width: 50%; height: 50px"></td> + <td style="width: 50%; height: 50px"></td> + </tr> + </table> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/cross-axis-scrollbar-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/cross-axis-scrollbar-ref.html new file mode 100644 index 0000000000..f0a3225502 --- /dev/null +++ b/testing/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> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/css-box-justify-content-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/css-box-justify-content-ref.html new file mode 100644 index 0000000000..e8377473fd --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/css-box-justify-content-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>flexbox |css-box-justify-content</title> +<link rel="author" href="mailto:ava656094@gmail.com" title="xiaoxia"> +<style> +#flexbox { + background: green; + display: inline-block; + width: 300px; + height: 40px; + text-align:right; +} +.item{ + display: inline-block; + text-align:left; + width:50px; + height: 30px; + } +</style> + +<p>This test passes if the DIV5's position in the end and the div is Horizontal layout</p> +<div id="flexbox"> + <div class="item" style="background-color: rgb(242, 210, 80); color: rgb(41, 119, 248);">DIV1</div> + <div class="item" style="background-color: rgb(110, 8, 7); color: rgb(162, 152, 22);">DIV2</div> + <div class="item" style="background-color: rgb(215, 172, 243); color: rgb(74, 123, 110);">DIV3</div> + <div class="item" style="background-color: rgb(242, 133, 80); color: rgb(41, 119, 248);">DIV4</div> + <div class="item" style="background-color: rgb(242, 50, 80); color: rgb(41, 119, 248);">DIV5</div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/css-flexbox-img-expand-evenly-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/css-flexbox-img-expand-evenly-ref.html new file mode 100644 index 0000000000..146242074b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/css-flexbox-img-expand-evenly-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Eiji Kitamura" href="mailto:agektmr+github@gmail.com"> + <style type="text/css"> + + /* ADD STYLE BLOCK HERE (PREFERRABLE TO INLINE STYLES) */ + div.flexbox { + height: 50px; + width: 300px; + border: 2px dotted black; + } + img { + width: 98px; + height: 48px; + background: purple; + border: 1px solid white; + } + + </style> +</head> +<body> + <p>3 rectangular images fill out border.</p> + + <!-- PAGE CONTENT --> + <div class="flexbox"> + <!-- It is important that there is no linebreak between the <img> tags. + The line break would be rendered as whitespace, breaking the test. + --> + <img src="../support/solidblue.png" /><img src="../support/solidblue.png" /><img src="../support/solidblue.png" /> + </div> + + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-align-content-center-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-align-content-center-ref.html new file mode 100644 index 0000000000..79e5022be2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-align-content-center-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Flexible Box Test: align-content property - center</title> + <link rel="author" title="haosdent" href="mailto:haosdent@gmail.com"> + <style type="text/css"> + .container { + position: relative; + height: 6em; + width: 20em; + background: red; + margin: 1em; + border: 1px solid black; + } + span:nth-child(3), span:nth-child(4) { + margin: 2em 1em; + } + span { + height: 2em; + display: inline-block; + background: green; + color: white; + margin: 0 1em; + width: 8em; + float: left; + } + </style> +</head> +<body> + <p>The test passed if you see a centered 2*2 table.</p> + <div class="container"> + <span>first</span> + <span>second</span> + <span>third</span> + <span>forth</span> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-align-content-end-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-align-content-end-ref.html new file mode 100644 index 0000000000..767ecaf187 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-align-content-end-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Flexible Box Test: align-content property - flex-end</title> + <link rel="author" title="haosdent" href="mailto:haosdent@gmail.com"> + <style type="text/css"> + .container { + position: relative; + height: 8em; + width: 20em; + background: red; + margin: 1em; + padding-top: 6em; + border: 1px solid black; + } + span { + height: 2em; + display: inline-block; + background: green; + color: white; + margin: 1em; + width: 8em; + float: left; + } + </style> +</head> +<body> + <p>The test passed if you see a 2*2 table and all the cells are at the bottom of container.</p> + <div class="container"> + <span>first</span> + <span>second</span> + <span>third</span> + <span>forth</span> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-align-content-space-around-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-align-content-space-around-ref.html new file mode 100644 index 0000000000..98f7b0228b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-align-content-space-around-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Flexible Box Test: align-content property - space-between</title> + <link rel="author" title="haosdent" href="mailto:haosdent@gmail.com"> + <style type="text/css"> + .container { + position: relative; + height: 14em; + width: 20em; + background: red; + margin: 1em; + border: 1px solid black; + } + + span { + height: 2em; + display: inline-block; + background: green; + color: white; + margin: 2.5em 1em; + width: 8em; + float: left; + } + </style> +</head> +<body> + <p>The test passed if you see a 2*2 table and all the cells are at the bottom of container.</p> + <div class="container"> + <span>first</span> + <span>second</span> + <span>third</span> + <span>forth</span> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-align-content-space-between-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-align-content-space-between-ref.html new file mode 100644 index 0000000000..4813bd5608 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-align-content-space-between-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Flexible Box Test: align-content property - space-between</title> + <link rel="author" title="haosdent" href="mailto:haosdent@gmail.com"> + <style type="text/css"> + .container { + position: relative; + height: 14em; + width: 20em; + background: red; + margin: 1em; + border: 1px solid black; + } + .first, .second { + margin-bottom: 112px; + } + span { + height: 2em; + display: inline-block; + background: green; + color: white; + margin: 1em; + width: 8em; + float: left; + } + </style> +</head> +<body> + <p>The test passed if you see a 2*2 table and all the cells are spaced equally apart.</p> + <div class="container"> + <span class="first">first</span> + <span class="second">second</span> + <span>third</span> + <span>forth</span> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-align-content-start-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-align-content-start-ref.html new file mode 100644 index 0000000000..5fe4eadd95 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-align-content-start-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Flexible Box Test: align-content property - flex-start</title> + <link rel="author" title="haosdent" href="mailto:haosdent@gmail.com"> + <style type="text/css"> + .container { + position: relative; + height: 14em; + width: 20em; + background: red; + margin: 1em; + border: 1px solid black; + } + span { + height: 2em; + display: inline-block; + background: green; + color: white; + margin: 1em; + width: 8em; + float: left; + } + </style> +</head> +<body> + <p>The test passed if you see a 2*2 table and all the cells are at the top of the container.</p> + <div class="container"> + <span>first</span> + <span>second</span> + <span>third</span> + <span>forth</span> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-aspect-ratio-img-row-014-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-aspect-ratio-img-row-014-ref.html new file mode 100644 index 0000000000..ea36ff4030 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-aspect-ratio-img-row-014-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>CSS Reference</title> +<link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com" /> +<style> +span { + display: inline-block; + background-color: green; + height: 225px; + width: 90px; +} + +div { + border: 1px solid black; + height: 225px; + width: 300px; +} +</style> + +<p>Test passes if there is <strong>no red</strong> visible on the page.</p> +<div><span></span></div> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-box-float-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-box-float-ref.html new file mode 100644 index 0000000000..726257dbf8 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-box-float-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> + <title>flexible box flex item float effect</title> + <link rel="author" title="zhouli" href="mailto:liz@oupeng.com"> + <style> + #myDiv{ + position: relative; + } + #myDiv p{ + width: 300px; + height: 30px; + display: inline-block; + margin: 0; + } + #first-p{ + background-color: green; + } + #second-p{ + background-color: blue; + } + #myDiv #fail-flag{ + width: 600px; + background-color: red; + position: absolute; + left: 0; + top: 0; + z-index: -1; + } + </style> +</head> +<body> + <p>'float' have no effect on a flex item.</p> + <p>The test passes if there is a green square, a blue square and no red square.</p> +<div id="myDiv"> + <p id="first-p"> </p><p id="second-p"> </p><p id="fail-flag"> </p> +</div> +<script> +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-box-wrap-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-box-wrap-ref.html new file mode 100644 index 0000000000..de24c4609b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-box-wrap-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Flexbox Test: flex-wrap: wrap</title> + <link rel="author" title="Tsuyoshi Tokuda" href="mailto:tokuda109@gmail.com"> + <style type="text/css"> + + .box { + margin: 0; + padding-left: 0; + width: 200px; + } + .item { + float: left; + list-style-type: none; + width: 120px; + height: 100px; + background-color: green; + } + + </style> +</head> +<body> + <p>There should be a green block with no red.</p> + + <ul class="box"> + <li class="item">width: 120px</li> + <li class="item">width: 120px</li> + </ul> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-container-margin-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-container-margin-ref.html new file mode 100644 index 0000000000..8241c14b7c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-container-margin-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Test: flex-container-margin-not-collapse-with-content-margin</title> +<link rel="author" title="houzhenyu" href="http://www.github.com/sskyy" /> +<style> + .flex-container{ + display:block; + margin:20px; + background: #333; + line-height: 0px; + } + .flex-item{ + display: inline-block; + width:50px; + height:50px; + margin:20px 20px; + background: #eee; + } + .flex-item.first{ + margin-left:20px; + } + .flex-item.last{ + margin-right: 20px; + } +</style> +</head> +<body> + <div class="flex-container"> + <div class="flex-item first"></div><div class="flex-item"></div><div class="flex-item last"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-direction-column-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-direction-column-ref.html new file mode 100644 index 0000000000..90c168766c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-direction-column-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Flexible Box Test: flex-direction proprety - column</title> + <link rel="author" title="haosdent" href="mailto:haosdent@gmail.com"> + <style type="text/css"> + /* Positioned container allows for the self-describing statement to still + be visible in the case of failure */ + .container { + position: relative; + background: red; + margin: 1em 0; + border: 1px solid black; + } + span ~ span { + margin: 2em 1em 1em; + } + span { + display: block; + background: green; + color: white; + margin: 1em; + width: 8em; + } + </style> +</head> +<body> + <p>The test passed if you see all the cells are arraged vertically.</p> + <div class="container"> + <span>first</span> + <span>second</span> + <span>third</span> + <span>forth</span> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-direction-column-reverse-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-direction-column-reverse-ref.html new file mode 100644 index 0000000000..576a5779e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-direction-column-reverse-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Flexible Box Test: flex-direction proprety - column-reverse</title> + <link rel="author" title="haosdent" href="mailto:haosdent@gmail.com"> + <style type="text/css"> + /* Positioned container allows for the self-describing statement to still + be visible in the case of failure */ + .container { + position: relative; + background: red; + margin: 1em 0; + border: 1px solid black; + } + span ~ span { + margin: 2em 1em 1em; + } + span { + display: block; + background: green; + color: white; + margin: 1em; + width: 8em; + } + </style> +</head> +<body> + <p>The test passed if you see all the cells are arraged vertically and reversed.</p> + <div class="container"> + <span>forth</span> + <span>third</span> + <span>second</span> + <span>first</span> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-direction-modify.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-direction-modify.html new file mode 100644 index 0000000000..42f9de95a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-direction-modify.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Test: flex flow direction</title> +<link rel="author" title="houzhenyu" href="http://www.github.com/sskyy" /> +<style> + .flex-container{ + display: flex; + margin:20px; + background: #333; + } + .flex-item{ + display: inline-block; + width:50px; + height:50px; + margin:20px; + background: #eee; + line-height: 50px; + text-align: center; + } + + + .flex-container.flex-direction-row{ + flex-direction : row; + } + + .flex-container.flex-direction-row-reverse{ + flex-direction : row-reverse; + } + + .flex-container.flex-direction-column{ + flex-direction : column; + } + .flex-container.flex-direction-column-reverse{ + flex-direction : column-reverse; + } +</style> +</head> +<body> + <h1>flex-direction:row</h1> + <div id="flex_container" class="flex-container flex-direction-row"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div></div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-direction-row-reverse-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-direction-row-reverse-ref.html new file mode 100644 index 0000000000..5f9d45f0fb --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-direction-row-reverse-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Flexible Box Test: flex-direction proprety - row-reverse</title> + <link rel="author" title="haosdent" href="mailto:haosdent@gmail.com"> + <style type="text/css"> + .container { + position: relative; + background: red; + margin: 1em 0; + border: 1px solid black; + text-align: right; + } + span { + display: inline-block; + background: green; + color: white; + margin: 1em; + width: 8em; + text-align: left; + } + </style> +</head> +<body> + <p>The test passed if you see all the cells are arranged horizontally and the order of cells are reversed.</p> + <div class="container"> + <span>forth</span><span>third</span><span>second</span><span>first</span> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-direction-with-element-insert.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-direction-with-element-insert.html new file mode 100644 index 0000000000..d7faf34eb7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-direction-with-element-insert.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Test: flex flow direction</title> +<link rel="author" title="houzhenyu" href="http://www.github.com/sskyy" /> +<style> + .flex-container{ + display:block; + margin:20px; + background: #333; + line-height: 0px; + } + .flex-item{ + display: inline-block; + width:50px; + height:50px; + margin:20px 20px; + background: #eee; + line-height: 50px; + text-align: center; + } + + .flex-container.flex-direction-row{ + flex-direction : row; + } + .flex-container.flex-direction-row-reverse{ + text-align: right; + } + + .flex-container.flex-direction-column{ + padding:20px 0px; + } + + .flex-container.flex-direction-column .flex-item{ + display: block; + margin:40px 20px; + } + + .flex-container.flex-direction-column .flex-item.first{ + margin-top:0px; + } + .flex-container.flex-direction-column .flex-item.last{ + margin-bottom:0px; + } + + .flex-container.flex-direction-column-reverse{ + padding:20px 0px; + } + + .flex-container.flex-direction-column-reverse .flex-item{ + display: block; + margin:40px 20px; + } + + .flex-container.flex-direction-column-reverse .flex-item.first{ + margin-top:0px; + } + .flex-container.flex-direction-column-reverse .flex-item.last{ + margin-bottom:0px; + } +</style> +</head> +<body> + <h1>flex-direction:row</h1> + <div class="flex-container flex-direction-row"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div><div class="flex-item">new</div></div> + + <h1>flex-direction:row-reverse</h1> + <div class="flex-container flex-direction-row-reverse"><div class="flex-item">new</div><div class="flex-item">3</div><div class="flex-item">2</div><div class="flex-item">1</div></div> + + <h1>flex-direction:column</h1> + <div class="flex-container flex-direction-column"><div class="flex-item first">1</div><div class="flex-item">2</div><div class="flex-item">3</div><div class="flex-item last">new</div></div> + + <h1>flex-direction:column-reverse</h1> + <div class="flex-container flex-direction-column-reverse"><div class="flex-item first">new</div><div class="flex-item">3</div><div class="flex-item">2</div><div class="flex-item last">1</div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-direction.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-direction.html new file mode 100644 index 0000000000..27be911458 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-direction.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Test: flex flow direction</title> +<link rel="author" title="houzhenyu" href="http://www.github.com/sskyy" /> +<style> + .flex-container{ + display:block; + margin:20px; + background: #333; + line-height: 0px; + } + .flex-item{ + display: inline-block; + width:50px; + height:50px; + margin:20px 20px; + background: #eee; + line-height: 50px; + text-align: center; + } + + .flex-container.flex-direction-row{ + flex-direction : row; + } + .flex-container.flex-direction-row-reverse{ + text-align: right; + } + + .flex-container.flex-direction-column{ + padding:20px 0px; + } + + .flex-container.flex-direction-column .flex-item{ + display: block; + margin:40px 20px; + } + + .flex-container.flex-direction-column .flex-item.first{ + margin-top:0px; + } + .flex-container.flex-direction-column .flex-item.last{ + margin-bottom:0px; + } + + .flex-container.flex-direction-column-reverse{ + padding:20px 0px; + } + + .flex-container.flex-direction-column-reverse .flex-item{ + display: block; + margin:40px 20px; + } + + .flex-container.flex-direction-column-reverse .flex-item.first{ + margin-top:0px; + } + .flex-container.flex-direction-column-reverse .flex-item.last{ + margin-bottom:0px; + } +</style> +</head> +<body> + <h1>flex-direction:row</h1> + <div class="flex-container flex-direction-row"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div></div> + + <h1>flex-direction:row-reverse</h1> + <div class="flex-container flex-direction-row-reverse"><div class="flex-item">3</div><div class="flex-item">2</div><div class="flex-item">1</div></div> + + <h1>flex-direction:column</h1> + <div class="flex-container flex-direction-column"><div class="flex-item first">1</div><div class="flex-item">2</div><div class="flex-item last">3</div></div> + + <h1>flex-direction:column-reverse</h1> + <div class="flex-container flex-direction-column-reverse"><div class="flex-item first">3</div><div class="flex-item">2</div><div class="flex-item last">1</div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-inline-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-inline-ref.html new file mode 100644 index 0000000000..369de990ff --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-inline-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Flexible Box Test: display proprety - inline-flex</title> + <link rel="author" title="haosdent" href="mailto:haosdent@gmail.com"> + <style type="text/css"> + /* Positioned container allows for the self-describing statement to still + be visible in the case of failure */ + .container { + position: relative; + } + .greenSquare { + display: inline-block; + margin-top: -200px; + background: green; + } + </style> +</head> +<body> + <p>The test passed if you see a green block which its text is 'Success!'.</p> + <div class="container"> + <!-- This is the square that should not be visible if the test passes --> + <div class="greenSquare">Success!</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-item-vertical-align-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-item-vertical-align-ref.html new file mode 100644 index 0000000000..82d7a6ea31 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-item-vertical-align-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link href="../support/flexbox.css" rel="stylesheet"> + +<style> +.flexbox { + background-color: lightgrey; +} +</style> + +<div class='flexbox'> + <!-- flex item: block child --> + <div>block</div> + <!-- flex item: anonymous block box around inline content --> + anonymous item 2 + <!-- flex item: inline child --> + <span>item 3</span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-item-z-ordering-001-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-item-z-ordering-001-ref.html new file mode 100644 index 0000000000..a97de6e826 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-item-z-ordering-001-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<style> +.container > * { + position: absolute; +} +.large { + width: 50px; + height: 50px; +} +.small { + left: 25px; + height: 25px; + width: 50px; +} +</style> +<div>The green boxes should be above the orange boxes, which should be above the purple boxes, which are above the salmon boxes.<div> +<div class="container" style="position:relative"> + <div class="large" style="z-index: 1; background-color: salmon;"></div> + <div class="large" style="z-index: 100; background-color: orange; left: 50px;"></div> + <div class="small" style="z-index: 150; background-color: green"></div> + <div class="small" style="z-index: 50; background-color: purple; top: 25px;"></div> +</div> +<div class="container" style="position:relative; top: 50px"> + <img class="large" style="z-index: 1; background-color: salmon;"></img> + <img class="large" style="z-index: 100; background-color: orange; left: 50px;"></img> + <img class="small" style="z-index: 150; background-color: green"></img> + <img class="small" style="z-index: 50; background-color: purple; top: 25px;"></img> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-margin-no-collapse-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-margin-no-collapse-ref.html new file mode 100644 index 0000000000..eac4ed57d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-margin-no-collapse-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Flexible Box Reference File</title> + <link rel="author" title="Ping Huang" href="mailto:phuangce@gmail.com" /> + <style type="text/css"> + #container { + position: absolute; + top: 100px; + left: 10px; + width: 200px; + height: 300px; + } + + .box { + width: 100px; + height: 100px; + background-color: green; + } + + #box1 { + margin: 50px 0; + } + + #box2 { + margin: 100px 0; + } + + </style> +</head> +<body> + <p>The test passes if there are two green boxes and no red.</p> + <div id="container"> + <div id="box1" class="box"></div> + <div id="box2" class="box"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flex-vertical-align-effect.html b/testing/web-platform/tests/css/css-flexbox/reference/flex-vertical-align-effect.html new file mode 100644 index 0000000000..0d14362a37 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flex-vertical-align-effect.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: 'display' property set to 'flex'</title> + <link rel="author" title="Hua Zhao" href="mailto:zhaohua.design@163.com" /> + + <style type="text/css"> + input{ + margin:0; + padding:0; + vertical-align:top; + float: left; + } + </style> +</head> +<body> + + <div id="container"> + <input type="text" value="input1" /> + <input type="radio" /> + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flexbox-flex-direction-column-percentage-ignored-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flexbox-flex-direction-column-percentage-ignored-ref.html new file mode 100644 index 0000000000..812b6797ee --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flexbox-flex-direction-column-percentage-ignored-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> +<style> +.flexbox { + max-height: 10px; + overflow: hidden; +} +</style> + +<body> + +<div class="flexbox"> + <div> + The height here should be ignored. + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flexbox-flex-direction-ref.htm b/testing/web-platform/tests/css/css-flexbox/reference/flexbox-flex-direction-ref.htm new file mode 100644 index 0000000000..2d52c62122 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flexbox-flex-direction-ref.htm @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference: Flexbox direction and wrapping</title> + <link rel="author" title="Gavin Elster" href="mailto:gavin.elster@me.com"> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> + <style> + + /* Ref test styles */ + + .flex-wrapper div{ + display: inline-block; + } + + + /* Test-series styles */ + + .flex-wrapper { + width: 120px; + height: 120px; + + /* should only display on error */ + background: red; + + /* Enforce writing mode */ + direction: ltr; + writing-mode: horizontal-tb; + } + + .flex-wrapper div { + width: 38px; + height: 38px; + + background: green; + border: 1px solid limegreen; + + color: white; + line-height: 40px; + text-align: center; + vertical-align: middle; + } + </style> + </head> + <body> + <p>The test passes if there is a 3x3 grid of green squares, numbered 1-9 left-to-right and top-to-bottom, and there is no red.</p> + <div class="flex-wrapper"> + <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flexbox-flex-wrap-nowrap-ref.htm b/testing/web-platform/tests/css/css-flexbox/reference/flexbox-flex-wrap-nowrap-ref.htm new file mode 100644 index 0000000000..391ddeaa28 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flexbox-flex-wrap-nowrap-ref.htm @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference: Flexbox flex-wrap: nowrap</title> + <link rel="author" title="Gavin Elster" href="mailto:gavin.elster@me.com"> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> + <style type="text/css"> + div { + width: 120px; + height: 120px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flexbox-min-width-auto-005-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flexbox-min-width-auto-005-ref.html new file mode 100644 index 0000000000..6bc8a27f62 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flexbox-min-width-auto-005-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS Reference</title> +<link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com" /> +<style> +div { + background-color: green; + height: 50px; + width: 100px; +} +br { margin: 50px; } +</style> + +<p>Test passes if there is <strong>no red</strong> visible on the page.</p> +<div></div> +<br> +<div></div> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flexbox-min-width-auto-006-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flexbox-min-width-auto-006-ref.html new file mode 100644 index 0000000000..1f1b7dfb24 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flexbox-min-width-auto-006-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>CSS Reference</title> +<link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com" /> +<style> +.box { + width: 100px; + height: 100px; + background: green; + border: 1px solid black; +} +</style> + +<p>Test passes if there are two 100x100 green squares.</p> +<div class="box"></div> + +<br> + +<div class="box"></div> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flexbox-order-only-flexitems-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flexbox-order-only-flexitems-ref.html new file mode 100644 index 0000000000..74697723c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flexbox-order-only-flexitems-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: order only affects flex items</title> + </head> + <body> + <p>Test passes if the paragraph below reads 'First, Second, Third'.</p> + <p>First, Second, Third</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flexbox-with-multi-column-property-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flexbox-with-multi-column-property-ref.html new file mode 100644 index 0000000000..fbb8fcda3e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flexbox-with-multi-column-property-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link href="resources/flexbox.css" rel="stylesheet"> +<style> +.flexbox, .inline-flexbox { + width: 20em; + font-kerning: none; +} +</style> +<div class="flexbox"> +AAAAAAAAAA BBBBBBBBBB CCCCCCCCCC DDDDDDDDDD +</div> + +<div class="inline-flexbox"> +AAAAAAAAAA BBBBBBBBBB CCCCCCCCCC DDDDDDDDDD +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flexbox_quirks_body-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flexbox_quirks_body-ref.html new file mode 100644 index 0000000000..164784fbd3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flexbox_quirks_body-ref.html @@ -0,0 +1,17 @@ +<!doctype quirks> +<title>CSS Test: Flex body in quirks mode</title> +<link rel="author" title="Aleks Totic" href="atotic@chromium.org"> +<style> +html { + margin:3px 6px 9px 12px; + padding: 0px; + background-color: green; +} +body { + display: block; + margin: 7px 11px 14px 23px;; + padding: 0px; + background-color: yellow; +} +</style> +Flex body in quirks mode should fill viewport except for margins. diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flexbox_writing_mode_vertical_lays_out_contents_from_top_to_bottom-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flexbox_writing_mode_vertical_lays_out_contents_from_top_to_bottom-ref.html new file mode 100644 index 0000000000..0a8869a145 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flexbox_writing_mode_vertical_lays_out_contents_from_top_to_bottom-ref.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Ryuichi Nonaka" href="mailto:ryuichi1com@gmail.com"> + <style type="text/css"> + .container { + position: relative; + + width: 200px; + height: 200px; + } + + .item + { + position: absolute; + + width: 100px; + height:100px; + } + + .item.one + { + top: 0; + right: 0; + + background: red; + } + .item.two + { + top: 100px; + right: 0; + + background: yellow; + } + .item.three + { + top: 0; + right: 100px; + + background: green; + } + .item.four + { + top: 100px; + right: 100px; + + background: blue; + } + </style> +</head> +<body> + <p>The test passes if you see green and red top, blue and yellow bottom.</p> + <div id="test"> + <div class="container"> + <div class="item one"></div> + <div class="item two"></div> + <div class="item three"></div> + <div class="item four"></div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flexible-order-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flexible-order-ref.html new file mode 100644 index 0000000000..12e94ba598 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flexible-order-ref.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html> +<head><title>CSS Test: Change the value of 'order' property</title> +<link rel="author" title="KeynesQu" href="mailto:keynesqu@sohu.com" /> + +<style> + +.box { + margin:0 auto; + background:#CCC; + border-radius:5px; + width:600px; +} + +.box div { + margin:0; + width:200px; + float:left; + text-align:center; +} + +.box .red { + background:#F00; +} +.box .blue { + background:#00F; +} +.box .black { + color:#FFF; + background:#000; +} + + + + +</style> + +</head> + +<body> + + +<!-- FLEX CONTAINER --> +<div class="box"> + <div class="blue">B</div> + <div class="red">A</div> + <div class="black">C</div> +</div> + + + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/flexitem-stretch-range-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/flexitem-stretch-range-ref.html new file mode 100644 index 0000000000..01c617698e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/flexitem-stretch-range-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> +<body> +<p>When stretching a range input, the thumb should be centered vertically.</p> +<div style="height: 200px;"> + <input type="range" style="width: 100%; height: 100%; margin: 0; box-sizing: border-box;"> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/item-with-max-height-and-scrollbar-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/item-with-max-height-and-scrollbar-ref.html new file mode 100644 index 0000000000..b0b2469c2c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/item-with-max-height-and-scrollbar-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>css-flexbox: Tests that we correctly size a flex item with a scrollbar and max-height</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> + +<div style="width: 100px;"> + <div style="overflow: scroll; background: green;"> + <div style="height: 100px; width: 100px;"> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/justify-content-001-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/justify-content-001-ref.html new file mode 100644 index 0000000000..cea76d4c18 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/justify-content-001-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + #blue { + background: blue; + height: 100px; + width: 150px; + } + #orange { + background: orange; + height: 100px; + left: 150px; + position: relative; + top: -100px; + width: 150px; + } +</style> +<body> + <p>Test passes if there is a single blue rectangle on the left, a single orange rectangle directly to its right, and there is no red visible on the page.</p> + <div id="blue"></div> + <div id="orange"></div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/layout-algorithm_algo-cross-line-001-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/layout-algorithm_algo-cross-line-001-ref.html new file mode 100644 index 0000000000..5174bd1d9f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/layout-algorithm_algo-cross-line-001-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Flex-basis Test</title> + <link rel="author" title="Tomek Wytrebowicz" href="mailto:tomalecpub+github@gmail.com"> + <style type="text/css"> + .flex { + width: 200px; + height: 200px; + } + + .flex > * { + background: green; + height: 200px; + width: 100px; + overflow: scroll; + display: inline-block; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square with scrollbars and <strong>no red</strong>.</p> + + <div class="flex"> + <div></div><div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/layout-algorithm_algo-cross-line-002-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/layout-algorithm_algo-cross-line-002-ref.html new file mode 100644 index 0000000000..b3a18185dc --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/layout-algorithm_algo-cross-line-002-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Flex-basis Test</title> + <link rel="author" title="Tomek Wytrebowicz" href="mailto:tomalecpub+github@gmail.com"> + <style type="text/css"> + .flex { + width: 200px; + height: 200px; + } + + .flex > * { + background: green; + height: 100px; + width: 200px; + overflow: scroll; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square with scrollbars and <strong>no red</strong>.</p> + + <div class="flex"> + <div></div><div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/multiline-column-max-height-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/multiline-column-max-height-ref.html new file mode 100644 index 0000000000..a9601fde2d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/multiline-column-max-height-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<style> +.flex { + height: 200px; + background: blue; +} +</style> +There should only be a blue box below, and the word "FAIL" should +not be seen. +<div class="flex"> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/multiline-reverse-wrap-baseline-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/multiline-reverse-wrap-baseline-ref.html new file mode 100644 index 0000000000..d4911b33fc --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/multiline-reverse-wrap-baseline-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> +<head> +<style> +table { + border-spacing: 0; + border-collapse: collapse; + margin-bottom: 10px; +} + +td { + padding: 0; + width: 100px; +} +</style> +</head> +<body> + +<table style="background-color: #aaa"> +<tr><td colspan=2 style="height: 5px"></td></tr> +<tr> + <td style="vertical-align: top"><div style="background-color: pink">third</div></td> + <td style="background-color: yellow">fourth<br>fourth</td> +</tr> +<tr> + <td style="background-color: lightblue">first<br>first<br>first</td> + <td style="vertical-align: top"><div style="background-color: lightgreen">second</div></td> +</tr> +</table> + +<table style="background-color: #aaa"> +<tr> + <td style="vertical-align: top"><div style="background-color: pink">third</div></td> + <td style="background-color: yellow">fourth<br>fourth</td> +</tr> +<tr><td colspan=2 style="height: 5px"></td></tr> +<tr> + <td style="background-color: lightblue">first<br>first<br>first</td> + <td style="vertical-align: top"><div style="background-color: lightgreen">second</div></td> +</tr> +</table> + +<table style="background-color: #aaa"> +<tr> + <td style="vertical-align: top; background-color: lightblue; height: 100px">first</td> + <td style="vertical-align: bottom"><div style="background-color: lightgreen">second</div><div> </div></td> + <td style="vertical-align: bottom"><div style="background-color: pink">third<br>third</div></td> +</tr> +</table> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/multiline-shrink-to-fit-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/multiline-shrink-to-fit-ref.html new file mode 100644 index 0000000000..1429b25112 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/multiline-shrink-to-fit-ref.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<html> +<style> +.testcase { + float: left; + background-color: #aaa; +} + +.testcase > :nth-child(1) { + background-color: lightblue; +} +.testcase > :nth-child(2) { + background-color: lightgreen; +} +.testcase > :nth-child(3) { + background-color: pink; +} +.testcase > :nth-child(4) { + background-color: yellow; +} + +table { + border-spacing: 0; + border-collapse: collapse; +} + +td { + padding: 0; + width: 100px; +} + +</style> +<body> + +<div class="testcase" style="height: 60px; width: 100px"> + <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 class="testcase" style="height: 30px; width: 100px"> + <table> + <td> + <div style="width: 100px; height: 20px"></div> + <div style="width: 100px; height: 10px; background-color: lightgreen"></div> + </td> + <td> + <div style="width: 100px; height: 10px; background-color: pink"></div> + <div style="width: 100px; height: 20px; background-color: yellow"></div> + </td> + </table> +</div> +<p style="clear:left">The grey background should be 100px wide.</p> + +<div style="width: 150px"> +<div class="testcase" style="height: 60px; width: 100px"> + <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 class="testcase" style="height: 35px; width: 100px;"> + <table> + <td> + <div style="width: 100px; height: 20px"></div> + <div style="width: 100px; height: 10px; background-color: lightgreen"></div> + </td> + <td> + <div style="width: 100px; height: 10px; background-color: pink"></div> + <div style="width: 100px; height: 20px; background-color: yellow"></div> + </td> + </table> +</div> +</div> +<p style="clear:left">The grey background should be 100px wide and 5px should +stick out the bottom.</p> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/negative-margins-001-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/negative-margins-001-ref.html new file mode 100644 index 0000000000..186c5d130c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/negative-margins-001-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Reference for negative margins</title> +<link rel="author" title="Google Inc." href="https://www.google.com/"> +<style> + .container { + width: 40px; + height: 10px; + background-color: green; + border: 3px black solid; + } +</style> +<body> + <p>You should see a green rectangle with a black border, 40px wide. You should see no red.</p> + + <div class="container"> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/nested-orthogonal-flexbox-relayout-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/nested-orthogonal-flexbox-relayout-ref.html new file mode 100644 index 0000000000..124ecf843c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/nested-orthogonal-flexbox-relayout-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<style> +#column { + display: flex; + flex-direction: column; + border: 5px solid yellow; + width: 200px; +} + +#row { + display: flex; + flex-direction: row; + border: 5px solid blue; +} + +.item { + border: 5px solid green; +} +</style> +<body> +<div id="column"> + <div id="row"> + <div class="item">This text should not overflow its box</div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/order-painting-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/order-painting-ref.html new file mode 100644 index 0000000000..bf7bc30d01 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/order-painting-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> +<body> +<p>This test passes if there is no red showing.</p> + +<div style="width: 100px; height: 100px; background-color: green"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/overflow-area-001-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/overflow-area-001-ref.html new file mode 100644 index 0000000000..2c2a825f41 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/overflow-area-001-ref.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<title>CSS Flexbox: scrollable overflow area (LTR)</title> +<style> + +.set { + clear: both; + margin: 1em; +} + +.ref { + display: flex; + overflow: scroll; + border: solid blue; + background: aqua; + margin: 1em 0.5em; + float: left; + width: 80px; + height: 80px; +} +div { + flex: none; +} + +.ref:first-child { + border-color: orange; +} +.ref > div { + border: 30px solid aqua; + width: 30px; + height: 30px; + background: teal; +} +</style> + +<p>Test passes if all blue boxes in each row are identical to its first orange one, +including the size and position of the scrollbar. + +<div class="set"> + <div class="ref"> + <div></div> + </div> + <div class="ref" style="flex-flow: row"> + <div></div> + </div> + <div class="ref" style="flex-flow: row wrap"> + <div></div> + </div> + <div class="ref" style="flex-flow: column"> + <div></div> + </div> + <div class="ref" style="flex-flow: column wrap"> + <div></div> + </div> +</div> + +<div class="set"> + <div class="ref" style="flex-flow: row-reverse"> + <div></div> + </div> + <div class="ref" style="flex-flow: row-reverse"> + <div></div> + </div> + <div class="ref" style="flex-flow: row-reverse wrap"> + <div></div> + </div> +</div> + +<div class="set"> + <div class="ref" style="flex-flow: column-reverse"> + <div></div> + </div> + <div class="ref" style="flex-flow: column-reverse"> + <div></div> + </div> + <div class="ref" style="flex-flow: column-reverse wrap"> + <div></div> + </div> +</div> + +<div class="set"> + <div class="ref" style="flex-flow: row wrap-reverse"> + <div></div> + </div> + <div class="ref" style="flex-flow: row wrap-reverse"> + <div></div> + </div> + <div class="ref" style="flex-flow: column-reverse wrap"> + <div></div> + </div> +</div> + +<div class="set"> + <div class="ref" style="flex-flow: row-reverse wrap-reverse"> + <div></div> + </div> + <div class="ref" style="flex-flow: row-reverse wrap-reverse"> + <div></div> + </div> + <div class="ref" style="flex-flow: column-reverse wrap-reverse"> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/overflow-area-002-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/overflow-area-002-ref.html new file mode 100644 index 0000000000..f5d06c6cf3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/overflow-area-002-ref.html @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<title>CSS Flexbox: scrollable overflow area (RTL)</title> +<style> + +.set { + clear: both; + margin: 1em; + direction: rtl; +} + +.ref { + display: flex; + overflow: scroll; + border: solid blue; + background: aqua; + margin: 1em 0.5em; + float: left; + width: 80px; + height: 80px; +} +div { + flex: none; +} + +.ref:first-child { + border-color: orange; +} +.ref > div { + border: 30px solid aqua; + width: 30px; + height: 30px; + background: teal; +} +</style> + +<p>Test passes if all blue boxes in each row are identical to its first orange one, +including the size and position of the scrollbar. + +<div class="set"> + <div class="ref"> + <div></div> + </div> + <div class="ref" style="flex-flow: row"> + <div></div> + </div> + <div class="ref" style="flex-flow: row wrap"> + <div></div> + </div> + <div class="ref" style="flex-flow: column"> + <div></div> + </div> + <div class="ref" style="flex-flow: column wrap"> + <div></div> + </div> +</div> + +<div class="set"> + <div class="ref" style="flex-flow: row-reverse"> + <div></div> + </div> + <div class="ref" style="flex-flow: row-reverse"> + <div></div> + </div> + <div class="ref" style="flex-flow: row-reverse wrap"> + <div></div> + </div> +</div> + +<div class="set"> + <div class="ref" style="flex-flow: column-reverse"> + <div></div> + </div> + <div class="ref" style="flex-flow: column-reverse"> + <div></div> + </div> + <div class="ref" style="flex-flow: column-reverse wrap"> + <div></div> + </div> +</div> + +<div class="set"> + <div class="ref" style="flex-flow: row wrap-reverse"> + <div></div> + </div> + <div class="ref" style="flex-flow: row wrap-reverse"> + <div></div> + </div> + <div class="ref" style="flex-flow: column-reverse wrap"> + <div></div> + </div> +</div> + +<div class="set"> + <div class="ref" style="flex-flow: row-reverse wrap-reverse"> + <div></div> + </div> + <div class="ref" style="flex-flow: row-reverse wrap-reverse"> + <div></div> + </div> + <div class="ref" style="flex-flow: column-reverse wrap-reverse"> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/overflow-area-003-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/overflow-area-003-ref.html new file mode 100644 index 0000000000..2d9bf19922 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/overflow-area-003-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Flexible Box Layout Reference: Test flex container's overflow rect</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + + <style> + .set { + clear: both; + margin: 1em; + } + + .test { + display: flex; + padding: 10px; + width: 60px; + height: 60px; + background: teal; + margin: 1em 0.5em; + float: left; + } + </style> + + <p>Test passes if all the teal boxes have no scrollbars.</p> + + <!-- This set tests emply flex containers. --> + <div class="set"> + <div class="test"></div> + <div class="test"></div> + <div class="test"></div> + <div class="test"></div> + </div> + + <!-- This set tests flex containers having only abs-pos children, but no flex items. --> + <div class="set"> + <div class="test"></div> + <div class="test"></div> + <div class="test"></div> + <div class="test"></div> + </div> + + <!-- This set tests flex containers having a small centered flex item. --> + <div class="set"> + <div class="test"></div> + <div class="test"></div> + <div class="test"></div> + <div class="test"></div> + </div> + + <!-- This set tests flex containers having a relative positioned flex item. --> + <div class="set"> + <div class="test"></div> + <div class="test"></div> + <div class="test"></div> + <div class="test"></div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/overflow-auto-005-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/overflow-auto-005-ref.html new file mode 100644 index 0000000000..633623936a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/overflow-auto-005-ref.html @@ -0,0 +1,87 @@ +<!DOCTYPE html> +<html> +<head> +<style> +.test-row { + display: flex; + margin-bottom: 5px; +} +.test-row > div { + flex: none; +} + +.container { + margin-right: 5px; + border: 5px solid lightgreen; + width: 100px; +} + +.flexbox { + display: block; + height: 100px; + width: 100px; + overflow: auto; +} + +.flexbox > div { + width: 200px; + height: 200px; + background: radial-gradient(at right 60%, red, yellow, green); +} + +.vertical-rl { + writing-mode: vertical-rl; +} + +</style> +</head> +<body> + <p>Scrollbars should work in all the flexboxes.</p> +</body> +<script> +var results = [ + 'left top', 'left top', 'right top', 'left bottom', + 'right top', 'right top', 'right bottom', 'left top', + 'left top', 'left top', 'left bottom', 'right top']; + +var testContents = ''; +for (var i = 0; i < results.length; ++i) { + if (!(i % 4)) + testContents += "<div class='test-row'>"; + + var containerClass = 'container ' + results[i]; + + // Use vertical-rl here because Firefox and WebKit put vertical scrollbars + // on the left in the vertical-rl test cases, and this is the easiest way to + // match that. + let maybe_vertical = ""; + if (i > 3 && i < 8) + maybe_vertical = " vertical-rl"; + + testContents += + "<div class='" + containerClass + "'>" + + "<div class='flexbox" + maybe_vertical + "'>" + + "<div></div>" + + "</div>" + + "</div>"; + if (i % 4 == 3) + testContents += "</div>"; +} + +document.body.innerHTML += testContents; + +Array.prototype.forEach.call(document.querySelectorAll(".left"), function(element) { + element.firstChild.scrollLeft = -1000; +}); + +Array.prototype.forEach.call(document.querySelectorAll(".right"), function(element) { + element.firstChild.scrollLeft = 1000; +}); + +Array.prototype.forEach.call(document.querySelectorAll(".bottom"), function(element) { + element.firstChild.scrollTop = 1000; +}); + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/overflow-auto-007-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/overflow-auto-007-ref.html new file mode 100644 index 0000000000..1cf9eea0e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/overflow-auto-007-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<p>This test should not have a horizontal scrollbar</p> + +<div style="width: 400px; height: 100px; overflow-x: hidden; overflow-y: scroll;"> +<br> +<br> +<br> +<br> +<br> +<br> +<br> +<br> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/percentage-descendant-of-anonymous-flex-item-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/percentage-descendant-of-anonymous-flex-item-ref.html new file mode 100644 index 0000000000..78dac9724f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/percentage-descendant-of-anonymous-flex-item-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: percentage heights in descendants of anonymous flex items</title> +<link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com"> +<p>The test PASS if you see a 200x100 green rectangle inside a button.</p> +<button style="width: 200px; height: 100px;"> + <div style="width: 200px; height: 100%; background-color: green;"></div> +</button> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/percentage-size-subitems-001-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/percentage-size-subitems-001-ref.html new file mode 100644 index 0000000000..b9883c5f2e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/percentage-size-subitems-001-ref.html @@ -0,0 +1,92 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Refttest Reference: Percentage size on child of a flex item with margin, border, padding and scrollbar</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +.flex { + display: inline-block; + border: solid 5px black; + width: 150px; + height: 100px; + margin: 10px; + vertical-align: top; +} + +.item { + overflow: scroll; + border: solid magenta; + border-width: 12px 9px 6px 3px; + margin: 1px 2px 3px 4px; + padding: 5px 15px 10px 20px; + background: cyan; + width: calc(100% - 6px); + height: calc(100% - 4px); + box-sizing: border-box; +} + +.subitem { + width: 100%; + height: 100%; + background: yellow; +} + +.horizontalTB { writing-mode: horizontal-tb; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } +</style> + +<p>The test passes if in the different examples you see scrollbars but there's no overflow, so you cannot actually scroll.</p> + +<div class="flex"> + <div class="item horizontalTB"> + <div class="subitem"></div> + </div> +</div> + +<div class="flex"> + <div class="item horizontalTB"> + <div class="subitem verticalLR"></div> + </div> +</div> + +<div class="flex"> + <div class="item horizontalTB"> + <div class="subitem verticalRL"></div> + </div> +</div> + +<div class="flex"> + <div class="item verticalLR"> + <div class="subitem"></div> + </div> +</div> + +<div class="flex"> + <div class="item verticalLR"> + <div class="subitem horizontalTB"></div> + </div> +</div> + +<div class="flex"> + <div class="item verticalLR"> + <div class="subitem verticalRL"></div> + </div> +</div> + +<div class="flex"> + <div class="item verticalRL"> + <div class="subitem"></div> + </div> +</div> + +<div class="flex"> + <div class="item verticalRL"> + <div class="subitem horizontalTB"></div> + </div> +</div> + +<div class="flex"> + <div class="item verticalRL"> + <div class="subitem verticalLR"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/position-fixed-001-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/position-fixed-001-ref.html new file mode 100644 index 0000000000..4943f537f7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/position-fixed-001-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + +<style> +.fixed-pos{ + position: fixed; + background: green; +} +</style> + +<body> + +<p>You should see no red.</p> + +<div class="fixed-pos" > + <div> + XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX + </div> + <div> + YYYY + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/stretch-input-in-column-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/stretch-input-in-column-ref.html new file mode 100644 index 0000000000..85d2a49e3e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/stretch-input-in-column-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<link href="../support/flexbox.css" rel="stylesheet"> +<style> +.flexbox { + background-color: grey; +} +.flexbox > * { + flex: 1; +} +</style> +<body> +<p>This test passes if none of the form controls overflow.</p> +<div class="flexbox"> + <input> +</div> +<div class="flexbox"> + <textarea></textarea> +</div> +<div class="flexbox"> + <input type="button"> +</div> +<div class="flexbox"> + <select></select> +</div> +<div class="flexbox"> + <legend style="border: 2px solid black">legend</legend> +</div> +<div class="flexbox"> + <div type="border: 4px solid black; padding: 10px;"> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/stretching-orthogonal-flows-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/stretching-orthogonal-flows-ref.html new file mode 100644 index 0000000000..3a3efaad5d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/stretching-orthogonal-flows-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> + +<p>You should see no red.</p> + +<div style="height: 40px; background-color: green;"></div> diff --git a/testing/web-platform/tests/css/css-flexbox/reference/text-overflow-on-flexbox-001-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/text-overflow-on-flexbox-001-ref.html new file mode 100644 index 0000000000..571b9a1357 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/reference/text-overflow-on-flexbox-001-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<style> +div.flex { + display: flex; + width: 100px; + overflow: hidden; +} +</style> +</head> +<body> + <div class="flex"> + AAAAAAAAAAAAAAAAAAAA + </div> + <div class="flex"> + <b>bbbbbbbbbbbbbbbbbbbb</b> + </div> + <div class="flex"> + <div>cccccccccccccccccccc</div> + </div> + <div class="flex"> + DDDDDDDDDDDDDDDDDDDD<b>ee</b>FFFFFFFFFFFFFFFFFFFF + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/relayout-align-items.html b/testing/web-platform/tests/css/css-flexbox/relayout-align-items.html new file mode 100644 index 0000000000..0569d51439 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/relayout-align-items.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Flexbox: Relayout align flex items</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#align-items-property"> +<meta name="assert" content="This test ensures that align items work properly after changing existing values with 'flex-end' and 'stretch'."> +<link href="support/flexbox.css" rel="stylesheet"> +<style> +.flexbox { + height: 100px; + position: relative; +} +.flexbox > div { + border: 5px solid green; + width: 50px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +</head> +<body> +<div id=log></div> +<div id="from-stretch" class="flexbox"> + <div data-expected-height="10" data-offset-y="90"></div> + <div data-expected-height="10" data-offset-y="90" class="align-self-auto"></div> + <div data-expected-height="10" data-offset-y="0" class="align-self-flex-start"></div> + <div data-expected-height="10" data-offset-y="90" class="align-self-flex-end"></div> + <div data-expected-height="10" data-offset-y="45" class="align-self-center"></div> + <div data-expected-height="10" data-offset-y="0" class="align-self-baseline"></div> + <div data-expected-height="100" data-offset-y="0" class="align-self-stretch"></div> +</div> + +<div id="to-stretch" class="flexbox align-items-flex-start"> + <div data-expected-height="100" data-offset-y="0"></div> + <div data-expected-height="100" data-offset-y="0" class="align-self-auto"></div> + <div data-expected-height="10" data-offset-y="0" class="align-self-flex-start"></div> + <div data-expected-height="10" data-offset-y="90" class="align-self-flex-end"></div> + <div data-expected-height="10" data-offset-y="45" class="align-self-center"></div> + <div data-expected-height="10" data-offset-y="0" class="align-self-baseline"></div> + <div data-expected-height="100" data-offset-y="0" class="align-self-stretch"></div> +</div> +<script> +document.body.offsetLeft; +document.getElementById("from-stretch").style.alignItems = "flex-end"; +document.getElementById("to-stretch").style.alignItems = "stretch"; +checkLayout(".flexbox"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/relayout-image-load.html b/testing/web-platform/tests/css/css-flexbox/relayout-image-load.html new file mode 100644 index 0000000000..30091c5681 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/relayout-image-load.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Flexbox: Relayout after loading an image</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#resolve-flexible-lengths"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-values"> +<meta name="assert" content="This test ensures flexbox does a relayout after an image loads."> +<link href="support/flexbox.css" rel="stylesheet"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +</head> +<body> +<div id=log></div> +<p>Test passes if a green 100x100 image is rendered.</p> +<div id="test" class="flexbox"> + + <div class="flexbox"> + <img data-expected-width=100 data-expected-height=100 id="image" onload="imageLoaded()"> + </div> +</div> +<script> + +function changeImage() +{ + document.getElementById("image").src = "support/100x100-green.png"; +} +step_timeout(changeImage, 0); + +function imageLoaded() +{ + checkLayout('#test') +} +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/relayout-input.html b/testing/web-platform/tests/css/css-flexbox/relayout-input.html new file mode 100644 index 0000000000..b95601c04c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/relayout-input.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/1082447" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<div style="display: flex; width: 100px;"> + <input id="target" style="position: relative; height: 20px; flex: 1; width: 0px;" data-expected-width="100" /> +</div> +<script> +test(function() { + document.body.offsetTop; + document.getElementById('target').value = 'text'; + checkLayout('#target'); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/remove-out-of-flow-child-crash.html b/testing/web-platform/tests/css/css-flexbox/remove-out-of-flow-child-crash.html new file mode 100644 index 0000000000..dfffdffd8d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/remove-out-of-flow-child-crash.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Flexbox: absolutely position child removal.</title> +<link rel="stylesheet" href="support/flexbox.css" > +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> +<meta name="assert" content="This test ensures that removing absolute positioned flexbox children works."/> +</head> +<body> + +<div id="outer" class="inline-flexbox"> + <div id="middle" class="inline-flexbox"> + <div id="inner" style="position: absolute">absolute</div> + </div> +</div> + +<script> + var outer = document.getElementById("outer"); + var middle = document.getElementById("middle"); + var inner = document.getElementById("inner"); + + // Force layout. + outer.offsetHeight; + + middle.removeChild(inner); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/scrollbars-auto-min-content-sizing.html b/testing/web-platform/tests/css/css-flexbox/scrollbars-auto-min-content-sizing.html new file mode 100644 index 0000000000..45a1296240 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/scrollbars-auto-min-content-sizing.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1127415"> +<meta name="assert" content="The presence of a scrollbar should not make a min-sized flexbox, and a single flex-item differ in size."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div style="display: flex; width: 100px;"> + <div id="outer" style="display: flex; width: min-content; height: 100px;"> + <div id="inner" style="flex: 0 0 auto; overflow-y: auto;"> + <div style="width: 100px; height: 3000px;"></div> + </div> + </div> +</div> +<script> +test(() => { + const outer = document.getElementById('outer'); + const inner = document.getElementById('inner'); + assert_equals(outer.getBoundingClientRect().width, inner.getBoundingClientRect().width); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/scrollbars-auto-ref.html b/testing/web-platform/tests/css/css-flexbox/scrollbars-auto-ref.html new file mode 100644 index 0000000000..6ae896d37d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/scrollbars-auto-ref.html @@ -0,0 +1,169 @@ +<!DOCTYPE html> +<head> + +<script src="support/scrollbars.js"></script> + +<style> +.horizontal-header { + width: 120px; +} +.vertical-header { + width: 60px; +} +.container-row { + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: flex-start; +} +.container { + flex: none; + margin: 5px; +} +.ltr { + direction: ltr; +} +.rtl { + direction: rtl; +} +.horizontal { + writing-mode: horizontal-tb; +} +.flipped-blocks { + writing-mode: vertical-rl; +} +.flipped-lines { + writing-mode: vertical-lr; +} +.flex { + border: 2px solid red; + overflow: auto; + max-width: 100px; + max-height: 100px; + white-space: nowrap; +} +.row > div, .row-reverse > div { + display: inline-flex; + margin: 3px; +} +.column > div, .column-reverse > div { + display: flex; + margin: 3px; +} + +/* Adjust margins to account for collapsing. */ +.horizontal > .column > .leaf1, .horizontal > .column > .leaf2 { + margin: 3px 3px 6px 3px; +} +.flipped-blocks > .column > .leaf1, .flipped-blocks > .column > .leaf2 { + margin: 3px 3px 3px 6px; +} +.flipped-lines > .column > .leaf1, .flipped-lines > .column > .leaf2 { + margin: 3px 6px 3px 3px; +} + +.horizontal > .column-reverse > .leaf1, .horizontal > .column-reverse > .leaf2 { + margin: 6px 3px 3px 3px; +} +.flipped-blocks > .column-reverse > .leaf1, .flipped-blocks > .column-reverse > .leaf2 { + margin: 3px 6px 3px 3px; +} +.flipped-lines > .column-reverse > .leaf1, .flipped-lines > .column-reverse > .leaf2 { + margin: 3px 3px 3px 6px; +} + +.flex > div { + width: 30px; + height: 30px; + border: 2px solid blue; + flex-direction: column; + justify-content: center; +} +.flex > div > div { + font-size: 20px; + text-align: center; + flex: none; +} +</style> + +</head> + +<div class="container-row"> + <div class="vertical-header ltr horizontal"></div> + <div class="horizontal-header ltr horizontal">ltr<br>horizontal-tb</div> + <div class="vertical-header ltr flipped-blocks">ltr<br>vertical-rl</div> + <div class="vertical-header ltr flipped-blocks">ltr<br>vertical-lr</div> + <div class="horizontal-header rtl horizontal">rtl<br>horizontal-tb</div> + <div class="vertical-header rtl flipped-blocks">rtl<br>vertical-rl</div> + <div class="vertical-header rtl flipped-blocks">rtl<br>vertical-lr</div> +</div> + +<script> +// Override createContentNode to emulate reverse flow direction. +createContentNode = (flexDirection, textDirection, writingMode) => { + var flexNode = document.createElement("div"); + flexNode.className = "flex " + flexDirection; + flexNode.title = "flex-direction: " + flexDirection + "; direction: " + textDirection + "; writing-mode: " + writingMode; + for (var i = 1; i < 4; i++) + flexNode.appendChild(createLeafNode(flexDirection.endsWith("reverse") ? 4 - i : i)); + return flexNode; +} + +flexDirections.forEach((flexDirection) => { + var containerRow = createContainerRow(flexDirection); + document.body.appendChild(containerRow); +}); + +// Scroll all {row,column}-reverse flex containers to the emulated beginning +// of flow. +// * "row-reverse" changes the initial scroll position of a flex container to +// correspond to its *inline-end* edge. So in our emulation, we need to +// scroll to the extreme inline-end position. For 'direction:ltr', this is a +// positive scroll offset; for 'direction:rtl', it's a zero or negative offset. +var nodes = document.querySelectorAll(".ltr.horizontal > .row-reverse"); +for (var i = 0; i < nodes.length; i++) { + nodes[i].scrollLeft = 10000; +} +nodes = document.querySelectorAll(".ltr.flipped-blocks > .row-reverse"); +for (var i = 0; i < nodes.length; i++) { + nodes[i].scrollTop = 10000; +} +nodes = document.querySelectorAll(".ltr.flipped-lines > .row-reverse"); +for (var i = 0; i < nodes.length; i++) { + nodes[i].scrollTop = 10000; +} +var nodes = document.querySelectorAll(".rtl.horizontal > .row-reverse"); +for (var i = 0; i < nodes.length; i++) { + nodes[i].scrollLeft = -10000; +} +nodes = document.querySelectorAll(".rtl.flipped-blocks > .row-reverse"); +for (var i = 0; i < nodes.length; i++) { + nodes[i].scrollTop = -10000; +} +nodes = document.querySelectorAll(".rtl.flipped-lines > .row-reverse"); +for (var i = 0; i < nodes.length; i++) { + nodes[i].scrollTop = -10000; +} +// * "column-reverse" changes the initial scroll position of a flex container +// to correspond to its *block-end* edge. So in our emulation, we need to +// scroll to the extreme block-end position. For horizontal-tb and +// vertical-lr, this is a positive scroll offset (since "tb" and "lr" indicate +// progression in a positive direction along the underlying physical axis). +// For vertical-rl, this is a zero or negative scroll offset (since "rl" +// indicates progression in a negative direction (right-to-left) along the +// underlying physical axis). Note that the 'direction:rtl/ltr' doesn't need to +// be considered at all in this section, since that only impacts the inline +// axis, which isn't the axis that we're emulating a reversal for here. +nodes = document.querySelectorAll(".horizontal > .column-reverse"); +for (var i = 0; i < nodes.length; i++) { + nodes[i].scrollTop = 10000; +} +nodes = document.querySelectorAll(".flipped-blocks > .column-reverse"); +for (var i = 0; i < nodes.length; i++) { + nodes[i].scrollLeft = -10000; +} +nodes = document.querySelectorAll(".flipped-lines > .column-reverse"); +for (var i = 0; i < nodes.length; i++) { + nodes[i].scrollLeft = 10000; +} +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/scrollbars-auto.html b/testing/web-platform/tests/css/css-flexbox/scrollbars-auto.html new file mode 100644 index 0000000000..ed1ffb8d93 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/scrollbars-auto.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<head> +<title>Auto scrollbars inside flexbox with direction and writing-mode</title> +<link rel="author" title="Google, Inc." href="http://www.google.com/"> +<link rel="match" href="scrollbars-auto-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/"> + +<script src="support/scrollbars.js"></script> + +<style> +.horizontal-header { + width: 120px; +} +.vertical-header { + width: 60px; +} +.container-row { + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: flex-start; +} +.container { + flex: none; + margin: 5px; +} +.ltr { + direction: ltr; +} +.rtl { + direction: rtl; +} +.horizontal { + writing-mode: horizontal-tb; +} +.flipped-blocks { + writing-mode: vertical-rl; +} +.flipped-lines { + writing-mode: vertical-lr; +} +.flex { + border: 2px solid red; + display: flex; + overflow: auto; + max-width: 100px; + max-height: 100px; +} +.column { + flex-direction: column; +} +.column-reverse { + flex-direction: column-reverse; +} +.row { + flex-direction: row; +} +.row-reverse { + flex-direction: row-reverse; +} +.flex > .leaf1, .flex > .leaf2, .flex > .leaf3 { + flex: none; + width: 30px; + height: 30px; + border: 2px solid blue; + margin: 3px; + display: flex; + flex-direction: column; + justify-content: center; +} +.flex > div > div { + font-size: 20px; + text-align: center; + flex: none; +} +</style> + +</head> + +<div class="container-row"> + <div class="vertical-header ltr horizontal"></div> + <div class="horizontal-header ltr horizontal">ltr<br>horizontal-tb</div> + <div class="vertical-header ltr flipped-blocks">ltr<br>vertical-rl</div> + <div class="vertical-header ltr flipped-blocks">ltr<br>vertical-lr</div> + <div class="horizontal-header rtl horizontal">rtl<br>horizontal-tb</div> + <div class="vertical-header rtl flipped-blocks">rtl<br>vertical-rl</div> + <div class="vertical-header rtl flipped-blocks">rtl<br>vertical-lr</div> +</div> + +<script> +flexDirections.forEach((flexDirection) => { + var containerRow = createContainerRow(flexDirection); + document.body.appendChild(containerRow); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/scrollbars-no-margin-ref.html b/testing/web-platform/tests/css/css-flexbox/scrollbars-no-margin-ref.html new file mode 100644 index 0000000000..eaeb36e448 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/scrollbars-no-margin-ref.html @@ -0,0 +1,118 @@ +<!DOCTYPE html> +<head> + +<script src="support/scrollbars.js"></script> + +<style> +.horizontal-header { + width: 120px; +} +.vertical-header { + width: 60px; +} +.container-row { + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: flex-start; +} +.container { + flex: none; + margin: 5px; +} +.ltr { + direction: ltr; +} +.rtl { + direction: rtl; +} +.horizontal { + writing-mode: horizontal-tb; +} +.flipped-blocks { + writing-mode: vertical-rl; +} +.flipped-lines { + writing-mode: vertical-lr; +} +.flex { + border: 2px solid red; + overflow: scroll; + max-width: 100px; + max-height: 100px; + white-space: nowrap; + font-size: 0; + scrollbar-width: thin; + scrollbar-color: black white; +} +.row > div, .row-reverse > div { + display: inline-flex; +} +.column > div, .column-reverse > div { + display: flex; +} + +.flex > div { + width: 30px; + height: 30px; + border: 2px solid blue; + flex-direction: column; + justify-content: center; +} +.flex > div > div { + font-size: 20px; + text-align: center; + flex: none; +} +</style> + +</head> + +<div class="container-row"> + <div class="vertical-header ltr horizontal"></div> + <div class="horizontal-header ltr horizontal">ltr<br>horizontal-tb</div> + <div class="vertical-header ltr flipped-blocks">ltr<br>vertical-rl</div> + <div class="vertical-header ltr flipped-blocks">ltr<br>vertical-lr</div> + <div class="horizontal-header rtl horizontal">rtl<br>horizontal-tb</div> + <div class="vertical-header rtl flipped-blocks">rtl<br>vertical-rl</div> + <div class="vertical-header rtl flipped-blocks">rtl<br>vertical-lr</div> +</div> + +<script> +// Override createContentNode to emulate reverse flow direction. +createContentNode = (flexDirection, textDirection, writingMode) => { + var flexNode = document.createElement("div"); + flexNode.className = "flex " + flexDirection; + flexNode.title = "flex-direction: " + flexDirection + "; direction: " + textDirection + "; writing-mode: " + writingMode; + for (var i = 1; i < 4; i++) + flexNode.appendChild(createLeafNode(flexDirection.endsWith("reverse") ? 4 - i : i)); + return flexNode; +} + +flexDirections.forEach((flexDirection) => { + var containerRow = createContainerRow(flexDirection); + document.body.appendChild(containerRow); +}); + +// Scroll all flex containers to the emulated beginning of flow. +var nodes = document.querySelectorAll(".ltr > .row-reverse"); +for (var i = 0; i < nodes.length; i++) { + nodes[i].scrollLeft = 10000; + nodes[i].scrollTop = 10000; +} +nodes = document.querySelectorAll(".rtl > .row-reverse"); +for (var i = 0; i < nodes.length; i++) { + nodes[i].scrollLeft = -10000; + nodes[i].scrollTop = -10000; +} +nodes = document.querySelectorAll(".column-reverse"); +for (var i = 0; i < nodes.length; i++) { + nodes[i].scrollLeft = 10000; + nodes[i].scrollTop = 10000; +} +nodes = document.querySelectorAll(".flipped-blocks > .column-reverse"); +for (var i = 0; i < nodes.length; i++) { + nodes[i].scrollLeft = -10000; + nodes[i].scrollTop = 0; +} +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/scrollbars-no-margin.html b/testing/web-platform/tests/css/css-flexbox/scrollbars-no-margin.html new file mode 100644 index 0000000000..092e4c5ea9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/scrollbars-no-margin.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<head> +<title>Scrollbars inside flexbox with direction and writing-mode</title> +<link rel="author" title="Google, Inc." href="http://www.google.com/"> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="match" href="scrollbars-no-margin-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/"> + +<script src="support/scrollbars.js"></script> + +<style> +.horizontal-header { + width: 120px; +} +.vertical-header { + width: 60px; +} +.container-row { + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: flex-start; +} +.container { + flex: none; + margin: 5px; +} +.ltr { + direction: ltr; +} +.rtl { + direction: rtl; +} +.horizontal { + writing-mode: horizontal-tb; +} +.flipped-blocks { + writing-mode: vertical-rl; +} +.flipped-lines { + writing-mode: vertical-lr; +} +.flex { + border: 2px solid red; + display: flex; + overflow: scroll; + max-width: 100px; + max-height: 100px; + font-size: 0; + scrollbar-width: thin; + scrollbar-color: black white; +} +.column { + flex-direction: column; +} +.column-reverse { + flex-direction: column-reverse; +} +.row { + flex-direction: row; +} +.row-reverse { + flex-direction: row-reverse; +} +.flex > .leaf1, .flex > .leaf2, .flex > .leaf3 { + flex: none; + width: 30px; + height: 30px; + border: 2px solid blue; + display: flex; + flex-direction: column; + justify-content: center; +} +.flex > div > div { + font-size: 20px; + text-align: center; + flex: none; +} +</style> + +</head> + +<div class="container-row"> + <div class="vertical-header ltr horizontal"></div> + <div class="horizontal-header ltr horizontal">ltr<br>horizontal-tb</div> + <div class="vertical-header ltr flipped-blocks">ltr<br>vertical-rl</div> + <div class="vertical-header ltr flipped-blocks">ltr<br>vertical-lr</div> + <div class="horizontal-header rtl horizontal">rtl<br>horizontal-tb</div> + <div class="vertical-header rtl flipped-blocks">rtl<br>vertical-rl</div> + <div class="vertical-header rtl flipped-blocks">rtl<br>vertical-lr</div> +</div> + +<script> +flexDirections.forEach((flexDirection) => { + var containerRow = createContainerRow(flexDirection); + document.body.appendChild(containerRow); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/scrollbars-ref.html b/testing/web-platform/tests/css/css-flexbox/scrollbars-ref.html new file mode 100644 index 0000000000..552d9fc6da --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/scrollbars-ref.html @@ -0,0 +1,138 @@ +<!DOCTYPE html> +<head> + +<script src="support/scrollbars.js"></script> + +<style> +.horizontal-header { + width: 120px; +} +.vertical-header { + width: 60px; +} +.container-row { + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: flex-start; +} +.container { + flex: none; + margin: 5px; +} +.ltr { + direction: ltr; +} +.rtl { + direction: rtl; +} +.horizontal { + writing-mode: horizontal-tb; +} +.flipped-blocks { + writing-mode: vertical-rl; +} +.flipped-lines { + writing-mode: vertical-lr; +} +.flex { + border: 2px solid red; + overflow: scroll; + max-width: 100px; + max-height: 100px; + white-space: nowrap; +} +.row > div, .row-reverse > div { + display: inline-flex; + margin: 3px; +} +.column > div, .column-reverse > div { + display: flex; + margin: 3px; +} + +/* Adjust margins to account for collapsing. */ +.horizontal > .column > .leaf1, .horizontal > .column > .leaf2 { + margin: 3px 3px 6px 3px; +} +.flipped-blocks > .column > .leaf1, .flipped-blocks > .column > .leaf2 { + margin: 3px 3px 3px 6px; +} +.flipped-lines > .column > .leaf1, .flipped-lines > .column > .leaf2 { + margin: 3px 6px 3px 3px; +} + +.horizontal > .column-reverse > .leaf1, .horizontal > .column-reverse > .leaf2 { + margin: 6px 3px 3px 3px; +} +.flipped-blocks > .column-reverse > .leaf1, .flipped-blocks > .column-reverse > .leaf2 { + margin: 3px 6px 3px 3px; +} +.flipped-lines > .column-reverse > .leaf1, .flipped-lines > .column-reverse > .leaf2 { + margin: 3px 3px 3px 6px; +} + +.flex > div { + width: 30px; + height: 30px; + border: 2px solid blue; + flex-direction: column; + justify-content: center; +} +.flex > div > div { + font-size: 20px; + text-align: center; + flex: none; +} +</style> + +</head> + +<div class="container-row"> + <div class="vertical-header ltr horizontal"></div> + <div class="horizontal-header ltr horizontal">ltr<br>horizontal-tb</div> + <div class="vertical-header ltr flipped-blocks">ltr<br>vertical-rl</div> + <div class="vertical-header ltr flipped-blocks">ltr<br>vertical-lr</div> + <div class="horizontal-header rtl horizontal">rtl<br>horizontal-tb</div> + <div class="vertical-header rtl flipped-blocks">rtl<br>vertical-rl</div> + <div class="vertical-header rtl flipped-blocks">rtl<br>vertical-lr</div> +</div> + +<script> +// Override createContentNode to emulate reverse flow direction. +createContentNode = (flexDirection, textDirection, writingMode) => { + var flexNode = document.createElement("div"); + flexNode.className = "flex " + flexDirection; + flexNode.title = "flex-direction: " + flexDirection + "; direction: " + textDirection + "; writing-mode: " + writingMode; + for (var i = 1; i < 4; i++) + flexNode.appendChild(createLeafNode(flexDirection.endsWith("reverse") ? 4 - i : i)); + return flexNode; +} + +flexDirections.forEach((flexDirection) => { + var containerRow = createContainerRow(flexDirection); + document.body.appendChild(containerRow); +}); + +// Scroll all flex containers to the emulated beginning of flow. +var nodes = document.querySelectorAll(".ltr > .row-reverse"); +for (var i = 0; i < nodes.length; i++) { + nodes[i].scrollLeft = 10000; + nodes[i].scrollTop = 10000; +} +nodes = document.querySelectorAll(".rtl > .row-reverse"); +for (var i = 0; i < nodes.length; i++) { + nodes[i].scrollLeft = -10000; + nodes[i].scrollTop = -10000; +} +nodes = document.querySelectorAll(".column-reverse"); +for (var i = 0; i < nodes.length; i++) { + nodes[i].scrollLeft = 10000; + nodes[i].scrollTop = 10000; +} +nodes = document.querySelectorAll(".flipped-blocks > .column-reverse"); +for (var i = 0; i < nodes.length; i++) { + nodes[i].scrollLeft = -10000; + nodes[i].scrollTop = 0; +} +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/scrollbars.html b/testing/web-platform/tests/css/css-flexbox/scrollbars.html new file mode 100644 index 0000000000..0eca05bfc6 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/scrollbars.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<head> +<title>Scrollbars inside flexbox with direction and writing-mode</title> +<link rel="author" title="Google, Inc." href="http://www.google.com/"> +<link rel="match" href="scrollbars-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/"> + +<script src="support/scrollbars.js"></script> + +<style> +.horizontal-header { + width: 120px; +} +.vertical-header { + width: 60px; +} +.container-row { + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: flex-start; +} +.container { + flex: none; + margin: 5px; +} +.ltr { + direction: ltr; +} +.rtl { + direction: rtl; +} +.horizontal { + writing-mode: horizontal-tb; +} +.flipped-blocks { + writing-mode: vertical-rl; +} +.flipped-lines { + writing-mode: vertical-lr; +} +.flex { + border: 2px solid red; + display: flex; + overflow: scroll; + max-width: 100px; + max-height: 100px; +} +.column { + flex-direction: column; +} +.column-reverse { + flex-direction: column-reverse; +} +.row { + flex-direction: row; +} +.row-reverse { + flex-direction: row-reverse; +} +.flex > .leaf1, .flex > .leaf2, .flex > .leaf3 { + flex: none; + width: 30px; + height: 30px; + border: 2px solid blue; + margin: 3px; + display: flex; + flex-direction: column; + justify-content: center; +} +.flex > div > div { + font-size: 20px; + text-align: center; + flex: none; +} +</style> + +</head> + +<div class="container-row"> + <div class="vertical-header ltr horizontal"></div> + <div class="horizontal-header ltr horizontal">ltr<br>horizontal-tb</div> + <div class="vertical-header ltr flipped-blocks">ltr<br>vertical-rl</div> + <div class="vertical-header ltr flipped-blocks">ltr<br>vertical-lr</div> + <div class="horizontal-header rtl horizontal">rtl<br>horizontal-tb</div> + <div class="vertical-header rtl flipped-blocks">rtl<br>vertical-rl</div> + <div class="vertical-header rtl flipped-blocks">rtl<br>vertical-lr</div> +</div> + +<script> +flexDirections.forEach((flexDirection) => { + var containerRow = createContainerRow(flexDirection); + document.body.appendChild(containerRow); +}); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/select-element-zero-height-001-ref.html b/testing/web-platform/tests/css/css-flexbox/select-element-zero-height-001-ref.html new file mode 100644 index 0000000000..fab8bf7355 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/select-element-zero-height-001-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>Reference: Select element in flexbox with zero height</title> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<style> + .container { + height: 0px; + border: 1px dotted black; + } + select { + /* + WebKit applies intrinsic (default) margins to control elements in some circumstances, + let's disable them to avoid mismatch errors caused by those margins. + */ + margin: 0; + } +</style> +<body> + <div class="container"> + <select style="width:100%"><option>Hi</option></select> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/select-element-zero-height-001.html b/testing/web-platform/tests/css/css-flexbox/select-element-zero-height-001.html new file mode 100644 index 0000000000..9e07c8019d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/select-element-zero-height-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Select element in flexbox with zero height</title> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1591925"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#content-size-suggestion"> +<link rel="match" href="select-element-zero-height-001-ref.html"> +<style> + .container { + display: flex; + flex-direction: column; + height: 0px; + border: 1px dotted black; + } + select { + /* + WebKit applies intrinsic (default) margins to control elements in some circumstances, + let's disable them to avoid mismatch errors caused by those margins. + */ + margin: 0; + } +</style> +<body> + <div class="container"> + <select><option>Hi</option></select> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/select-element-zero-height-002-ref.html b/testing/web-platform/tests/css/css-flexbox/select-element-zero-height-002-ref.html new file mode 100644 index 0000000000..234ecd4e84 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/select-element-zero-height-002-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>Reference: Select element with background color in flexbox with zero height</title> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<style> + .container { + height: 0px; + border: 1px dotted black; + } + .with-background { + width: 100%; + background: lime; + } + select { + /* + WebKit applies intrinsic (default) margins to control elements in some circumstances, + let's disable them to avoid mismatch errors caused by those margins. + */ + margin: 0; + } +</style> +<body> + <div class="container"> + <select class="with-background"><option>Hi</option></select> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/select-element-zero-height-002.html b/testing/web-platform/tests/css/css-flexbox/select-element-zero-height-002.html new file mode 100644 index 0000000000..4ca56cc6e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/select-element-zero-height-002.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Select element with background color in flexbox with zero height</title> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1591925"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#content-size-suggestion"> +<link rel="match" href="select-element-zero-height-002-ref.html"> +<style> + .container { + display: flex; + flex-direction: column; + height: 0px; + border: 1px dotted black; + } + .with-background { + background: lime; + } + select { + /* + WebKit applies intrinsic (default) margins to control elements in some circumstances, + let's disable them to avoid mismatch errors caused by those margins. + */ + margin: 0; + } +</style> +<body> + <div class="container"> + <select class="with-background"><option>Hi</option></select> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/shrinking-column-flexbox.html b/testing/web-platform/tests/css/css-flexbox/shrinking-column-flexbox.html new file mode 100644 index 0000000000..680dc7eb7f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/shrinking-column-flexbox.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<title>CSS Flexbox: Shrink column</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property"> +<link href="support/flexbox.css" rel="stylesheet"> +<meta name="assert" content="This test ensures that flexbox shrinks the column height of a flex item +after applying a new style."> +<style> +body { + width: 800px; + height: 600px; +} + +.green { + background: green; +} + +.blue { + background: blue; +} + +.inner { + height: 200px; +} + +.small { + height: 100px; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<script> +onload = function() { + document.body.offsetWidth; + document.getElementById("target").classList.add("small"); + + checkLayout("body"); +}; +</script> + +<body class="flexbox column"> + +<div class="flexbox column flex-one-one-auto"> + <div class="flex-one-one-auto green" data-expected-height="250" id="target"> + <div class="inner"></div> + </div> + <div class="flex-one-one-auto blue" data-expected-height="350"> + <div class="inner"></div> + </div> +</div> + +<div id=log></div> diff --git a/testing/web-platform/tests/css/css-flexbox/stretch-after-sibling-size-change.html b/testing/web-platform/tests/css/css-flexbox/stretch-after-sibling-size-change.html new file mode 100644 index 0000000000..918ac38185 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/stretch-after-sibling-size-change.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Flexbox: Stretch after sibling size is changed</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property"> +<link href="support/flexbox.css" rel="stylesheet"> +<meta name="assert" content="This test ensures that flexbox stretches flex items +after a flex item height is changed."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script> +window.onload = function() +{ + document.getElementById("a").style.height = "20px"; + checkLayout(".flexbox"); +}; +</script> +</head> +<body> +<div id=log></div> +<div data-expected-width="100" data-expected-height="20" class="flexbox" style="width: 100px"> + <div id=a class="flex-one" data-expected-width="50" data-expected-height="20" style="background-color: blue; height: 30px;"></div> + <div id=b class="flex-one" data-expected-width="50" data-expected-height="20" style="background-color: green"></div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/stretch-flex-item-checkbox-input-ref.html b/testing/web-platform/tests/css/css-flexbox/stretch-flex-item-checkbox-input-ref.html new file mode 100644 index 0000000000..eda83f2d1d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/stretch-flex-item-checkbox-input-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<input type="checkbox" style="display: block; width: 50px; height: 50px; margin: 0;"> +<input type="checkbox" style="display: block; width: 50px; height: 50px; margin: 0;"> diff --git a/testing/web-platform/tests/css/css-flexbox/stretch-flex-item-checkbox-input.html b/testing/web-platform/tests/css/css-flexbox/stretch-flex-item-checkbox-input.html new file mode 100644 index 0000000000..896905d5e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/stretch-flex-item-checkbox-input.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=768999"> +<link rel="match" href="stretch-flex-item-checkbox-input-ref.html"> +<div style="display: flex; width: 50px; height: 50px;"> + <input type="checkbox" style="width: 100%; margin: 0;"> +</div> +<div style="display: flex; flex-direction: column; width: 50px; height: 50px;"> + <input type="checkbox" style="height: 100%; margin: 0;"> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/stretch-flex-item-radio-input-ref.html b/testing/web-platform/tests/css/css-flexbox/stretch-flex-item-radio-input-ref.html new file mode 100644 index 0000000000..7ba10710b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/stretch-flex-item-radio-input-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<input type="radio" style="display: block; width: 50px; height: 50px; margin: 0;"> +<input type="radio" style="display: block; width: 50px; height: 50px; margin: 0;"> diff --git a/testing/web-platform/tests/css/css-flexbox/stretch-flex-item-radio-input.html b/testing/web-platform/tests/css/css-flexbox/stretch-flex-item-radio-input.html new file mode 100644 index 0000000000..bf8a08e703 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/stretch-flex-item-radio-input.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=768999"> +<link rel="match" href="stretch-flex-item-radio-input-ref.html"> +<div style="display: flex; width: 50px; height: 50px;"> + <input type="radio" style="width: 100%; margin: 0;"> +</div> +<div style="display: flex; flex-direction: column; width: 50px; height: 50px;"> + <input type="radio" style="height: 100%; margin: 0;"> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/stretch-input-in-column.html b/testing/web-platform/tests/css/css-flexbox/stretch-input-in-column.html new file mode 100644 index 0000000000..4136c45d17 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/stretch-input-in-column.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<title>CSS Flexbox: Stretch input form controls in flexbox column</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#align-items-property"> +<link rel="match" href="reference/stretch-input-in-column-ref.html"> +<link href="support/flexbox.css" rel="stylesheet"> +<meta name="assert" content="This test ensures that input form controls that are stretched in +a column flexbox should not overflow the flexbox."> +<style> +.flexbox { + background-color: grey; +} +</style> +<body> +<p>This test passes if none of the form controls overflow.</p> +<div class="flexbox column"> + <input> +</div> +<div class="flexbox column align-content-flex-start"> + <textarea class="align-self-stretch"></textarea> +</div> +<div class="flexbox column wrap"> + <input type="button"> +</div> +<div class="flexbox column"> + <select></select> +</div> +<div class="flexbox column"> + <legend style="border: 2px solid black">legend</legend> +</div> +<div class="flexbox column wrap"> + <div type="border: 4px solid black; padding: 10px;"> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/stretch-obeys-min-max-001.html b/testing/web-platform/tests/css/css-flexbox/stretch-obeys-min-max-001.html new file mode 100644 index 0000000000..597b0f00a4 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/stretch-obeys-min-max-001.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>item's min/max cross sizes</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes" title="Bullet 1"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="specified max cross size on stretched items is honored pre-flexing" /> + +<style> +.inline-block { + display: inline-block; + width: 40px; + height: 50px; +} + +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> + +<div style="display:flex; flex-direction: column; width: 100px; background: green"> + <div style="max-width: 50px; line-height: 0px;"> + <!-- An engine where these inline blocks don't wrap will give green height 50px. --> + <div class=inline-block></div><div class=inline-block></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/stretch-obeys-min-max-002.html b/testing/web-platform/tests/css/css-flexbox/stretch-obeys-min-max-002.html new file mode 100644 index 0000000000..d1e24cc7a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/stretch-obeys-min-max-002.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<title>item's min/max cross sizes</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes" title="Bullet 1"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="specified max cross size on ortho stretched items is honored pre-flexing" /> + +<style> +.inline-block { + display: inline-block; + width: 50px; + height: 55px; +} + +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> + +<div style="display:flex; height: 110px;"> + <div style="writing-mode: vertical-lr; max-height: 100px; line-height: 0px; background: green;"> + <div class=inline-block></div><div class=inline-block></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/stretch-obeys-min-max-003.html b/testing/web-platform/tests/css/css-flexbox/stretch-obeys-min-max-003.html new file mode 100644 index 0000000000..77fd6955bd --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/stretch-obeys-min-max-003.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>item's min/max cross sizes</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes" title="Bullet 1"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="specified min cross size on stretched items is honored pre-flexing" /> + +<style> +.inline-block { + display: inline-block; + width: 1px; + height: 100px; +} + +</style> + +<p>Test passes if there is a filled green square.</p> + +<div style="display:flex; flex-direction: column; width: 0px;"> + <div style="background: green; min-width: 100px; line-height: 0px;"> + <div class=inline-block></div><div class=inline-block></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/stretched-child-shrink-on-relayout.html b/testing/web-platform/tests/css/css-flexbox/stretched-child-shrink-on-relayout.html new file mode 100644 index 0000000000..b427d7f01a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/stretched-child-shrink-on-relayout.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<title>CSS Flexbox: Shrink stretched child on relayout</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-flow-property"> +<meta name="assert" content="This ensures that flexbox shrinks stretched children after removing a sibling, in various writing-modes and flows."> +<style> +.flexbox { + display: flex; + background: papayawhip; + border: 1px solid midnightblue; + margin: 1em; + width: 50px; +} + +.flexbox > div { + margin: 5px; + min-width: 10px; + min-height: 10px; + background-color: lawngreen; +} + +.column { + flex-flow: column; +} + +.horizontal-tb { + writing-mode: horizontal-tb; +} +.vertical-lr { + writing-mode: vertical-lr; +} + +.largeitem { + height: 200px; + width: 200px; + margin: 5px; +} +</style> +</head> +<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 data-expected-height=10 data-expected-width=10></div> + <div class="largeitem"></div> +</div> +<div class="flexbox column"> + <div data-expected-height=10 data-expected-width=40></div> + <div class="largeitem"></div> +</div> + +<div class="flexbox"> + <div class="horizontal-tb" data-expected-height=10 data-expected-width=10></div> + <div class="largeitem"></div> +</div> +<div class="flexbox column"> + <div class="horizontal-tb" data-expected-height=10 data-expected-width=40></div> + <div class="largeitem"></div> +</div> +<div class="flexbox"> + <div class="vertical-lr" data-expected-height=10 data-expected-width=10></div> + <div class="largeitem"></div> +</div> +<div class="flexbox column"> + <div class="vertical-lr" data-expected-height=10 data-expected-width=40></div> + <div class="largeitem"></div> +</div> +<script> +document.body.offsetTop; +var targets = document.getElementsByClassName('largeitem'); +for (var i = targets.length - 1; i >= 0; i--) { + targets[i].remove(); +}; +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/stretching-orthogonal-flows.html b/testing/web-platform/tests/css/css-flexbox/stretching-orthogonal-flows.html new file mode 100644 index 0000000000..acaa787faf --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/stretching-orthogonal-flows.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>CSS Flexbox: Stretch alignment for children with orthogonal flows</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#align-items-property"> +<link rel="match" href="reference/stretching-orthogonal-flows-ref.html"> +<link href="support/flexbox.css" rel="stylesheet"> +<meta name="assert" content="The test ensures that the stretch alignment of flex items work +similarly with both parallel and orthogonal flows."> + +<p>You should see no red.</p> + +<div class="flexbox column align-items-stretch" style="background-color: red;"> + <div style="background-color: green; height: 20px;"></div> + <div style="writing-mode: vertical-lr; background-color: green; height: 20px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/support/100x100-blue.png b/testing/web-platform/tests/css/css-flexbox/support/100x100-blue.png Binary files differnew file mode 100644 index 0000000000..f578ae7253 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/100x100-blue.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/100x100-green.png b/testing/web-platform/tests/css/css-flexbox/support/100x100-green.png Binary files differnew file mode 100644 index 0000000000..25b76c3c6f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/100x100-green.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/10x10-green.png b/testing/web-platform/tests/css/css-flexbox/support/10x10-green.png Binary files differnew file mode 100644 index 0000000000..8c39b0d02d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/10x10-green.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/1x1-green.png b/testing/web-platform/tests/css/css-flexbox/support/1x1-green.png Binary files differnew file mode 100644 index 0000000000..b98ca0ba0a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/1x1-green.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/1x1-lime.png b/testing/web-platform/tests/css/css-flexbox/support/1x1-lime.png Binary files differnew file mode 100644 index 0000000000..cb397fb090 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/1x1-lime.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/1x1-maroon.png b/testing/web-platform/tests/css/css-flexbox/support/1x1-maroon.png Binary files differnew file mode 100644 index 0000000000..3f86b07219 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/1x1-maroon.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/1x1-navy.png b/testing/web-platform/tests/css/css-flexbox/support/1x1-navy.png Binary files differnew file mode 100644 index 0000000000..9b9a03955b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/1x1-navy.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/1x1-red.png b/testing/web-platform/tests/css/css-flexbox/support/1x1-red.png Binary files differnew file mode 100644 index 0000000000..6bd73ac101 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/1x1-red.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/1x1-white.png b/testing/web-platform/tests/css/css-flexbox/support/1x1-white.png Binary files differnew file mode 100644 index 0000000000..dd43faec54 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/1x1-white.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/200x200-green.png b/testing/web-platform/tests/css/css-flexbox/support/200x200-green.png Binary files differnew file mode 100644 index 0000000000..1dcc392a6e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/200x200-green.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/20x50-green.png b/testing/web-platform/tests/css/css-flexbox/support/20x50-green.png Binary files differnew file mode 100644 index 0000000000..f7f6e67fee --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/20x50-green.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/300x150-green.png b/testing/web-platform/tests/css/css-flexbox/support/300x150-green.png Binary files differnew file mode 100644 index 0000000000..57ece824a4 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/300x150-green.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/40x20-green.png b/testing/web-platform/tests/css/css-flexbox/support/40x20-green.png Binary files differnew file mode 100644 index 0000000000..c372de1dbd --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/40x20-green.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/60x60-gg-rr.png b/testing/web-platform/tests/css/css-flexbox/support/60x60-gg-rr.png Binary files differnew file mode 100644 index 0000000000..84f5b2a4f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/60x60-gg-rr.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/60x60-green.png b/testing/web-platform/tests/css/css-flexbox/support/60x60-green.png Binary files differnew file mode 100644 index 0000000000..b3c8cf3eb4 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/60x60-green.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/README b/testing/web-platform/tests/css/css-flexbox/support/README new file mode 100644 index 0000000000..2e5f2ad073 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/README @@ -0,0 +1,28 @@ +CSS Global Support Directory +============================ + +This directory contains common support files (such as images and external +style sheets). These are sync'ed into the support directories of all our +test suites. If you have test-suite-specific support files, please add +them to the appropriate test-suite-specific support/ directory. + +If you add to a support/ directory, please run the tools/supportprop.py +script from the top of the repository to cascade support files into the +lower-level support directories. + +Description of the Common Support File Collection +------------------------------------------------- + +The 1x1-* images are all exactly one pixel. + +The swatch-* images all use 15x15 cells. + +The square-* images all use 15x15 cells with one pixel borders. + +The pattern-* images use cells of various sizes: + + pattern-grg-rgr-grg.png 20x20 + pattern-rgr-grg-rgr.png 20x20 + pattern-tr.png 15x15 + pattern-grg-rrg-rgg.png 15x15 + diff --git a/testing/web-platform/tests/css/css-flexbox/support/a-green.css b/testing/web-platform/tests/css/css-flexbox/support/a-green.css new file mode 100644 index 0000000000..b0dbb071d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/a-green.css @@ -0,0 +1 @@ +.a { color: green; } diff --git a/testing/web-platform/tests/css/css-flexbox/support/b-green.css b/testing/web-platform/tests/css/css-flexbox/support/b-green.css new file mode 100644 index 0000000000..a0473f5ca2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/b-green.css @@ -0,0 +1 @@ +.b { color: green; }
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-flexbox/support/c-red.css b/testing/web-platform/tests/css/css-flexbox/support/c-red.css new file mode 100644 index 0000000000..d4ba5c64e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/c-red.css @@ -0,0 +1 @@ +.c { color: red; }
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-flexbox/support/cat.png b/testing/web-platform/tests/css/css-flexbox/support/cat.png Binary files differnew file mode 100644 index 0000000000..85dd732481 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/cat.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/flexbox.css b/testing/web-platform/tests/css/css-flexbox/support/flexbox.css new file mode 100644 index 0000000000..83502cd144 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/flexbox.css @@ -0,0 +1,143 @@ +.flexbox { + display: -webkit-flex; + display: flex; +} +.inline-flexbox { + display: -webkit-inline-flex; + display: inline-flex; +} + +.flex-none { + -webkit-flex: none; + flex: none; +} +.flex-auto { + -webkit-flex: auto; + flex: auto; +} +.flex-one { + -webkit-flex: 1; + flex: 1; +} +.flex-one-one-auto { + -webkit-flex: 1 1 auto; + flex: 1 1 auto; +} + +.row { + -webkit-flex-direction: row; + flex-direction: row; +} +.row-reverse { + -webkit-flex-direction: row-reverse; + flex-direction: row-reverse; +} +.column { + -webkit-flex-direction: column; + flex-direction: column; +} +.column-reverse { + -webkit-flex-direction: column-reverse; + flex-direction: column-reverse; +} + +.wrap { + -webkit-flex-wrap: wrap; + flex-wrap: wrap; +} +.wrap-reverse { + -webkit-flex-wrap: wrap-reverse; + flex-wrap: wrap-reverse; +} + +.align-content-flex-start { + -webkit-align-content: flex-start; + align-content: flex-start; +} +.align-content-flex-end { + -webkit-align-content: flex-end; + align-content: flex-end; +} +.align-content-center { + -webkit-align-content: center; + align-content: center; +} +.align-content-space-between { + -webkit-align-content: space-between; + align-content: space-between; +} +.align-content-space-around { + -webkit-align-content: space-around; + align-content: space-around; +} +.align-content-stretch { + -webkit-align-content: stretch; + align-content: stretch; +} + +.align-items-flex-start { + -webkit-align-items: flex-start; + align-items: flex-start; +} +.align-items-flex-end { + -webkit-align-items: flex-end; + align-items: flex-end; +} +.align-items-center { + -webkit-align-items: center; + align-items: center; +} +.align-items-baseline { + -webkit-align-items: baseline; + align-items: baseline; +} +.align-items-stretch { + -webkit-align-items: stretch; + align-items: stretch; +} + +.align-self-auto { + -webkit-align-self: auto; + align-self: auto; +} +.align-self-flex-start { + -webkit-align-self: flex-start; + align-self: flex-start; +} +.align-self-flex-end { + -webkit-align-self: flex-end; + align-self: flex-end; +} +.align-self-center { + -webkit-align-self: center; + align-self: center; +} +.align-self-baseline { + -webkit-align-self: baseline; + align-self: baseline; +} +.align-self-stretch { + -webkit-align-self: stretch; + align-self: stretch; +} + +.justify-content-flex-start { + -webkit-justify-content: flex-start; + justify-content: flex-start; +} +.justify-content-flex-end { + -webkit-justify-content: flex-end; + justify-content: flex-end; +} +.justify-content-center { + -webkit-justify-content: center; + justify-content: center; +} +.justify-content-space-between { + -webkit-justify-content: space-between; + justify-content: space-between; +} +.justify-content-space-around { + -webkit-justify-content: space-around; + justify-content: space-around; +} diff --git a/testing/web-platform/tests/css/css-flexbox/support/import-green.css b/testing/web-platform/tests/css/css-flexbox/support/import-green.css new file mode 100644 index 0000000000..537104e663 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/import-green.css @@ -0,0 +1 @@ +.import { color: green; } diff --git a/testing/web-platform/tests/css/css-flexbox/support/import-red.css b/testing/web-platform/tests/css/css-flexbox/support/import-red.css new file mode 100644 index 0000000000..9945ef4711 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/import-red.css @@ -0,0 +1 @@ +.import { color: red; } diff --git a/testing/web-platform/tests/css/css-flexbox/support/large-green-rectangle.svg b/testing/web-platform/tests/css/css-flexbox/support/large-green-rectangle.svg new file mode 100644 index 0000000000..228bb275c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/large-green-rectangle.svg @@ -0,0 +1,4 @@ +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> +<svg width="100%" height="100%" viewBox="0 0 7500 3750" version="1.1" xmlns="http://www.w3.org/2000/svg"> + <rect id="Background" x="0" y="0" width="7500" height="3750" style="fill:green;"/> +</svg> diff --git a/testing/web-platform/tests/css/css-flexbox/support/pattern-grg-rgr-grg.png b/testing/web-platform/tests/css/css-flexbox/support/pattern-grg-rgr-grg.png Binary files differnew file mode 100644 index 0000000000..9b88fbd811 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/pattern-grg-rgr-grg.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/pattern-grg-rrg-rgg.png b/testing/web-platform/tests/css/css-flexbox/support/pattern-grg-rrg-rgg.png Binary files differnew file mode 100644 index 0000000000..fcf4f3fd7d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/pattern-grg-rrg-rgg.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/pattern-rgr-grg-rgr.png b/testing/web-platform/tests/css/css-flexbox/support/pattern-rgr-grg-rgr.png Binary files differnew file mode 100644 index 0000000000..d454e3a630 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/pattern-rgr-grg-rgr.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/pattern-tr.png b/testing/web-platform/tests/css/css-flexbox/support/pattern-tr.png Binary files differnew file mode 100644 index 0000000000..8b4b25364e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/pattern-tr.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/ruler-h-50px.png b/testing/web-platform/tests/css/css-flexbox/support/ruler-h-50px.png Binary files differnew file mode 100644 index 0000000000..9f46583665 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/ruler-h-50px.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/ruler-v-100px.png b/testing/web-platform/tests/css/css-flexbox/support/ruler-v-100px.png Binary files differnew file mode 100644 index 0000000000..a837eca222 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/ruler-v-100px.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/ruler-v-50px.png b/testing/web-platform/tests/css/css-flexbox/support/ruler-v-50px.png Binary files differnew file mode 100644 index 0000000000..8414102802 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/ruler-v-50px.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/scrollbars.js b/testing/web-platform/tests/css/css-flexbox/support/scrollbars.js new file mode 100644 index 0000000000..5b61b499c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/scrollbars.js @@ -0,0 +1,45 @@ +var flexDirections = ["row", "row-reverse", "column", "column-reverse"]; +var textDirections = ["ltr", "rtl"]; +var writingModes = ["horizontal", "flipped-blocks", "flipped-lines"]; + +var createLeafNode = (i) => { + var flexItem = document.createElement("div"); + flexItem.className = "leaf" + i; + var contentItem = document.createElement("div"); + contentItem.innerHTML = i; + flexItem.appendChild(contentItem); + return flexItem; +} + +var createContentNode = (flexDirection, textDirection, writingMode) => { + var flexNode = document.createElement("div"); + flexNode.className = "flex " + flexDirection; + flexNode.title = "flex-direction: " + flexDirection + "; direction: " + textDirection + "; writing-mode: " + writingMode; + for (var i = 1; i < 4; i++) + flexNode.appendChild(createLeafNode(i)); + var marginShim = document.createElement("div"); + return flexNode; +} + +var createContainerNode = (flexDirection, textDirection, writingMode) => { + var containerNode = document.createElement("div"); + containerNode.className = "container " + textDirection + " " + writingMode; + containerNode.appendChild(createContentNode(flexDirection, textDirection, writingMode)); + return containerNode; +} + +var createContainerRow = (flexDirection) => { + var containerRow = document.createElement("div"); + containerRow.className = "container-row"; + var rowLabel = document.createElement("div"); + rowLabel.className = "vertical-header horizontal " + flexDirection; + rowLabel.innerHTML = flexDirection; + containerRow.appendChild(rowLabel); + textDirections.forEach((textDirection) => { + writingModes.forEach((writingMode) => { + var containerNode = createContainerNode(flexDirection, textDirection, writingMode); + containerRow.appendChild(containerNode); + }); + }); + return containerRow; +} diff --git a/testing/web-platform/tests/css/css-flexbox/support/solidblue.png b/testing/web-platform/tests/css/css-flexbox/support/solidblue.png Binary files differnew file mode 100644 index 0000000000..8584a701a8 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/solidblue.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/square-purple.png b/testing/web-platform/tests/css/css-flexbox/support/square-purple.png Binary files differnew file mode 100644 index 0000000000..0f522d7872 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/square-purple.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/square-teal.png b/testing/web-platform/tests/css/css-flexbox/support/square-teal.png Binary files differnew file mode 100644 index 0000000000..e567f51b91 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/square-teal.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/square-white.png b/testing/web-platform/tests/css/css-flexbox/support/square-white.png Binary files differnew file mode 100644 index 0000000000..5853cbb238 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/square-white.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/support/README b/testing/web-platform/tests/css/css-flexbox/support/support/README new file mode 100644 index 0000000000..ea8cb9ef35 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/support/README @@ -0,0 +1,4 @@ +The swatch-green.png file in this directory is really a RED swatch, +and the swatch-red.png file is really a green swatch. + +This directory is used to test relative URIs.
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-flexbox/support/support/swatch-green.png b/testing/web-platform/tests/css/css-flexbox/support/support/swatch-green.png Binary files differnew file mode 100644 index 0000000000..1caf25c992 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/support/swatch-green.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/support/swatch-red.png b/testing/web-platform/tests/css/css-flexbox/support/support/swatch-red.png Binary files differnew file mode 100644 index 0000000000..0aa79b0c86 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/support/swatch-red.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/swatch-blue.png b/testing/web-platform/tests/css/css-flexbox/support/swatch-blue.png Binary files differnew file mode 100644 index 0000000000..bf2759634d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/swatch-blue.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/swatch-green.png b/testing/web-platform/tests/css/css-flexbox/support/swatch-green.png Binary files differnew file mode 100644 index 0000000000..0aa79b0c86 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/swatch-green.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/swatch-lime.png b/testing/web-platform/tests/css/css-flexbox/support/swatch-lime.png Binary files differnew file mode 100644 index 0000000000..55fd7fdaed --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/swatch-lime.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/swatch-orange.png b/testing/web-platform/tests/css/css-flexbox/support/swatch-orange.png Binary files differnew file mode 100644 index 0000000000..d3cd498b52 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/swatch-orange.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/swatch-red.png b/testing/web-platform/tests/css/css-flexbox/support/swatch-red.png Binary files differnew file mode 100644 index 0000000000..1caf25c992 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/swatch-red.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/swatch-teal.png b/testing/web-platform/tests/css/css-flexbox/support/swatch-teal.png Binary files differnew file mode 100644 index 0000000000..0293ce89de --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/swatch-teal.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/swatch-white.png b/testing/web-platform/tests/css/css-flexbox/support/swatch-white.png Binary files differnew file mode 100644 index 0000000000..1a7d4323d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/swatch-white.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/swatch-yellow.png b/testing/web-platform/tests/css/css-flexbox/support/swatch-yellow.png Binary files differnew file mode 100644 index 0000000000..1591aa0e2e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/swatch-yellow.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/test-bl.png b/testing/web-platform/tests/css/css-flexbox/support/test-bl.png Binary files differnew file mode 100644 index 0000000000..904e24e996 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/test-bl.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/test-br.png b/testing/web-platform/tests/css/css-flexbox/support/test-br.png Binary files differnew file mode 100644 index 0000000000..f413ff5c1a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/test-br.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/test-inner-half-size.png b/testing/web-platform/tests/css/css-flexbox/support/test-inner-half-size.png Binary files differnew file mode 100644 index 0000000000..e473bf80ef --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/test-inner-half-size.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/test-outer.png b/testing/web-platform/tests/css/css-flexbox/support/test-outer.png Binary files differnew file mode 100644 index 0000000000..82eeace7fc --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/test-outer.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/test-style.css b/testing/web-platform/tests/css/css-flexbox/support/test-style.css new file mode 100644 index 0000000000..17f44c1179 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/test-style.css @@ -0,0 +1,18 @@ + #test01, #test02, #test03{ + width: 50px; + height: 50px; + text-align:center; + font-size: 20px; + } + #test{ + background: #ff0000; + } + #test01{ + background: #7FFF00; + } + #test02{ + background: #00FFFF; + } + #test03{ + background: #4169E1; + } diff --git a/testing/web-platform/tests/css/css-flexbox/support/test-tl.png b/testing/web-platform/tests/css/css-flexbox/support/test-tl.png Binary files differnew file mode 100644 index 0000000000..f6ac0ef7e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/test-tl.png diff --git a/testing/web-platform/tests/css/css-flexbox/support/test-tr.png b/testing/web-platform/tests/css/css-flexbox/support/test-tr.png Binary files differnew file mode 100644 index 0000000000..59843ae54b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/support/test-tr.png diff --git a/testing/web-platform/tests/css/css-flexbox/svg-no-natural-size-grandchild.html b/testing/web-platform/tests/css/css-flexbox/svg-no-natural-size-grandchild.html new file mode 100644 index 0000000000..6f99654014 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/svg-no-natural-size-grandchild.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1217941"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The flex-item shouldn't have a zero max content size."> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display: flex; align-items: center; width: 100px; height: 100px; background: red;"> + <div style="line-height: 0;"> + <svg height="100%" width="100%" viewBox="0 0 1 1"> + <rect height="100%" width="100%" fill="green"></rect> + </svg> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-flexbox/svg-root-as-flex-item-001.html b/testing/web-platform/tests/css/css-flexbox/svg-root-as-flex-item-001.html new file mode 100644 index 0000000000..56d134e69b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/svg-root-as-flex-item-001.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>SVG root as flex item</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Part E"> +<!-- The note refers to CSS2§10, but I didn't include that here because items in flex formatting contexts aren't included. --> +<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#intrinsic-sizes" title="first Note"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<link rel="bookmark" href="https://crbug.com/1065134"> +<meta name="assert" content="Honor SVG root's aspect ratio for flex layout." /> + +<style> +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> + +<div style="display: flex;"> + <svg viewBox="0 0 200 200" style="height: 100px"> + <rect width="200" height="200" fill="green" /> + </svg> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/svg-root-as-flex-item-002.html b/testing/web-platform/tests/css/css-flexbox/svg-root-as-flex-item-002.html new file mode 100644 index 0000000000..0594eb406e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/svg-root-as-flex-item-002.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>SVG root as flex item</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Part E"> +<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#intrinsic-sizes" title="For boxes with an intrinsic aspect ratio, but no intrinsic size"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="SVG's intrinsic width when used as flex base size stretches into the available size when it has no specified intrinsic sizes." /> + +<style> +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> + +<div style="display: flex; width: 100px;"> + <svg viewBox="0 0 200 200"> + <rect width="100%" height="100%" fill="green" /> + </svg> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/svg-root-as-flex-item-003.html b/testing/web-platform/tests/css/css-flexbox/svg-root-as-flex-item-003.html new file mode 100644 index 0000000000..778690d794 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/svg-root-as-flex-item-003.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>SVG root as flex item</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Part E"> +<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#intrinsic-sizes" title="For boxes with an intrinsic aspect ratio, but no intrinsic size"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="SVG's intrinsic width when used as flex base size stretches into the available size (minus inline margins) when it has no specified intrinsic sizes." /> + +<p>Test passes if there is a filled green square.</p> + +<div style="display: flex; width: 150px;"> + <svg viewBox="0 0 200 200" style="margin-right: 50px; flex: 1 0 auto;"> + <rect width="100%" height="100%" fill="green" /> + </svg> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/svg-root-as-flex-item-004.html b/testing/web-platform/tests/css/css-flexbox/svg-root-as-flex-item-004.html new file mode 100644 index 0000000000..1321433634 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/svg-root-as-flex-item-004.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>SVG root as flex item</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Part E"> +<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#intrinsic-sizes" title="For boxes with an intrinsic aspect ratio, but no intrinsic size"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="SVG's intrinsic width when used as flex base size stretches into the available size when it has no specified intrinsic sizes and is passed through the aspect ratio " /> + +<style> +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> + +<div style="display: flex; flex-direction: column; width: 100px; align-items: flex-start;"> + <svg viewBox="0 0 200 200"> + <rect width="100%" height="100%" fill="green" /> + </svg> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/svg-root-as-flex-item-005.html b/testing/web-platform/tests/css/css-flexbox/svg-root-as-flex-item-005.html new file mode 100644 index 0000000000..1950134766 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/svg-root-as-flex-item-005.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>SVG root as flex item</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Part E"> +<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#intrinsic-sizes" title="For boxes with an intrinsic aspect ratio, but no intrinsic size"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="SVG's intrinsic width when used as flex base size stretches into the available size (minus inline margins) when it has no specified intrinsic sizes and is passed through the aspect ratio, block margins have no effect. " /> + +<style> +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> + +<div style="display: flex; flex-direction: column; width: 150px; align-items: flex-start;"> + <svg viewBox="0 0 200 200" style="margin-right: 50px; flex 1 0 auto; margin-bottom: 70px;"> + <rect width="100%" height="100%" fill="green" /> + </svg> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/svg-root-as-flex-item-006.html b/testing/web-platform/tests/css/css-flexbox/svg-root-as-flex-item-006.html new file mode 100644 index 0000000000..2f7ef5c99e --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/svg-root-as-flex-item-006.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title>SVG root as flex item</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Part E"> +<link rel="help" href="https://crbug.com/965672"> +<meta name="assert" + content="When SVG has aspect ratio and no intrinsic height its flex-basis is available width * ratio, not 150px, when in a column flexbox." /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +The test passes if you see a 600x300 blue rectangle. + +<div style="display: flex; flex-direction: column; width: 600px;"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" data-expected-bounding-client-rect-width=600 + data-expected-bounding-client-rect-height=300> + <rect x="0" y="0" width="200" height="100" fill="blue" /> + </svg> +</div> + +<script> + checkLayout('svg'); +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/synthesize-vrl-baseline.html b/testing/web-platform/tests/css/css-flexbox/synthesize-vrl-baseline.html new file mode 100644 index 0000000000..1e753da0a2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/synthesize-vrl-baseline.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#generate-baselines"> +<link rel="help" href="https://www.w3.org/TR/css-inline-3/#valdef-dominant-baseline-auto"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<style> +#inline-block { + display: inline-block; + width: 100px; + height: 50px; + background: green; +} + +#inline-flex { + display: inline-flex; +} + +#inline-flex > div { + width: 100px; + height: 50px; + background: green; +} +</style> +<p>Test passes if there is a filled green square.</p> +<div style="width: 100px; height: 100px; line-height: 0; writing-mode: vertical-rl; background: red;"> + <span id="inline-block"></span><span id="inline-flex"><div></div></span> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/table-as-flex-item-max-content.html b/testing/web-platform/tests/css/css-flexbox/table-as-flex-item-max-content.html new file mode 100644 index 0000000000..c7316aab95 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/table-as-flex-item-max-content.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" + href="https://drafts.csswg.org/css-flexbox/#intrinsic-cross-sizes"> +<link rel="help" href="https://webkit.org/b/253922"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" + content="A table's max-content width is used for its parent flexbox's max-content calculation. Safari 16.4 uses min-content width."> + +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + .inline-block { + float: left; + width: 50px; + } + +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> + +<div id=reference-overlapped-red></div> +<div + style="display: flex; flex-direction: column; height: 100px; width: max-content; background-color: green;"> + <div style="display: table"> + <div style="display: table-cell"> + <div class="inline-block"></div> + <div class="inline-block"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/table-as-item-auto-min-width.html b/testing/web-platform/tests/css/css-flexbox/table-as-item-auto-min-width.html new file mode 100644 index 0000000000..66a77327f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/table-as-item-auto-min-width.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS Flexbox Test: Flex item as table, specified width less than minimum intrinsic width</title> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#layout-algorithm" title="9. Flex Layout Algorithm"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display:flex; width:100px; background:red;"> + <div style="display:table; width:10px; max-width:10px; height:100px; background:green;"> + <div style="width:100px; height:10px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/table-as-item-change-cell.html b/testing/web-platform/tests/css/css-flexbox/table-as-item-change-cell.html new file mode 100644 index 0000000000..a83f518a23 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/table-as-item-change-cell.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Flexbox Test: Flex item as table, change contents of cell</title> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#layout-algorithm" title="9. Flex Layout Algorithm"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display:flex; flex-direction:column; width:100px; background:green;"> + <div style="position:relative; z-index:-1; display:table; width:100%; height:100px; background:hotpink;"> + <div style="display:table-cell; width:100px;"></div> + <div id="cell" style="display:table-cell;"> + <div id="child" style="display:none; color:red;"> + <!-- Add some whitespace after the word "FAIL", in case of negative glyph bearings. --> + FAIL + </div> + </div> + </div> +</div> +<script> + document.body.offsetTop; + document.getElementById("child").style.display = "block"; +</script> diff --git a/testing/web-platform/tests/css/css-flexbox/table-as-item-cross-size.html b/testing/web-platform/tests/css/css-flexbox/table-as-item-cross-size.html new file mode 100644 index 0000000000..ba788bdd72 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/table-as-item-cross-size.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Flexbox: Correct cross size of Table with 'align-self: stretch'</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property"> +<meta name="assert" content="This test ensures that flexbox computes a correct cross size of a <table> flex item with align-self: stretch."> +<style> +.container { + display: flex; + flex-direction: column; + height: 100px; + width: 50px; +} +.first { + flex: 1 1 auto; + background-color: blue; +} +.test { + flex: 0 0 auto; + background-color: green; + display: flex; +} +td { + padding: 23px; +} +</style> +</head> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.test')"> +<div id=log></div> +<div class="container"> + <div class="first"> + </div> + <!-- This wrapper div is a row flexbox. It should get a height of 50px, matching the height + of the inner table. In particular, it should not be 0 on the basis that tables don't + have an intrinsic block-size. --> + <div class="test" data-expected-height=50> + <table> + <tr><td></td></tr> + </table> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/table-as-item-fixed-min-width-2.html b/testing/web-platform/tests/css/css-flexbox/table-as-item-fixed-min-width-2.html new file mode 100644 index 0000000000..f04f9e58f7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/table-as-item-fixed-min-width-2.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>table is flex item</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#layout-algorithm" title="9. Flex Layout Algorithm"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#used-min-width-of-table"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Flex item table's min-width is honored when it is larger than the table's min-content width"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: flex; width: 100px;"> + <div style="display: table; min-width: 100px; background: green;"> + <div style="display:table-cell;"> + <div style="width: 50px; height: 100px;"></div> + </div> + </div> + <div style="height: 100px; background: red; flex-basis: 100px; min-width: 0px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/table-as-item-fixed-min-width-3.html b/testing/web-platform/tests/css/css-flexbox/table-as-item-fixed-min-width-3.html new file mode 100644 index 0000000000..a13a94f56f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/table-as-item-fixed-min-width-3.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>table is flex item</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#layout-algorithm" title="9. Flex Layout Algorithm"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#used-min-width-of-table"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Flex item table's min-content width is honored when it is larger than the table's specified min-width, and the sum of the flex base sizes are greater than the container's available size."> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<!-- This test passed in Chrome 83, was broken in 84 and 85, and will start to pass again in 86. --> + +<div style="display: flex; width: 100px;"> + <div style="display: table; min-width: 50px; background: green;"> + <div style="display:table-cell;"> + <div style="width: 100px; height: 100px;"></div> + </div> + </div> + <div style="height: 100px; background: red; flex-basis: 100px; min-width: 0px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/table-as-item-fixed-min-width.html b/testing/web-platform/tests/css/css-flexbox/table-as-item-fixed-min-width.html new file mode 100644 index 0000000000..83f0511031 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/table-as-item-fixed-min-width.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS Flexbox Test: Flex item as table, specified width and min-width less than minimum intrinsic width</title> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#layout-algorithm" title="9. Flex Layout Algorithm"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#used-min-width-of-table"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Flex item table's min-content width takes precedence over used max-width."> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display:flex; width:100px; background:red;"> + <div style="display:table; min-width: 5px; width: 10px; max-width:10px; height:100px; background:green;"> + <div style="width:100px; height:10px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/table-as-item-flex-cross-size.html b/testing/web-platform/tests/css/css-flexbox/table-as-item-flex-cross-size.html new file mode 100644 index 0000000000..bfb6c34f55 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/table-as-item-flex-cross-size.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#resolve-flexible-lengths"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The table's main-axis (block-size) size is flex to consume the available space."> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display: flex; flex-direction: column; width: 100px; height: 100px; background: red;"> + <table style="border-spacing: 0; flex-grow: 1;"> + <caption style="height: 10px; background: green;"></caption> + <caption style="height: 20px; background: green; caption-side: bottom;"></caption> + <td style="background: green;"></td> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/table-as-item-inflexible-in-column-1.html b/testing/web-platform/tests/css/css-flexbox/table-as-item-inflexible-in-column-1.html new file mode 100644 index 0000000000..201a97fb45 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/table-as-item-inflexible-in-column-1.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>Table as a flex item in column-oriented flex container</title> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#resolve-flexible-lengths"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1692116"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="Inflexible table flex item's flex base size is its final main size."> + +<p>Test passes if there is a filled green square.</p> +<div style="display: flex; flex-direction: column;"> + <div style="display: table; border: 10px solid green; width: 80px; background: green; flex: 0 0 80px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/table-as-item-inflexible-in-column-2.html b/testing/web-platform/tests/css/css-flexbox/table-as-item-inflexible-in-column-2.html new file mode 100644 index 0000000000..05a5cbc81c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/table-as-item-inflexible-in-column-2.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>Table as a flex item in column-oriented flex container</title> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#resolve-flexible-lengths"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1692116"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="Inflexible table flex item's flex base size is its final main size."> + +<p>Test passes if there is a filled green square.</p> +<div style="display: flex; flex-direction: column;"> + <!-- Use display:table and display:table-caption instead of the HTML tags so that box-sizing is used in WebKit-based browsers. + Since long time ago WebKit ignores box-sizing for HTML tables. That isn't the case for CSS tables though. --> + <div style="display: table; box-sizing: content-box; border: 10px solid green; background: green; + width: 80px; flex: 0 0 50px"> + <div style="display: table-caption; height: 10px; border: 10px solid green; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/table-as-item-inflexible-in-row-1.html b/testing/web-platform/tests/css/css-flexbox/table-as-item-inflexible-in-row-1.html new file mode 100644 index 0000000000..073e7f7274 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/table-as-item-inflexible-in-row-1.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>Table as a flex item in row-oriented flex container</title> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#resolve-flexible-lengths"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1692116"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="Inflexible table flex item's flex base size is its final main size."> + +<p>Test passes if there is a filled green square.</p> +<div style="display: flex; flex-direction: row;"> + <div style="display: table; border: 10px solid green; height: 80px; background: green; flex: 0 0 80px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/table-as-item-inflexible-in-row-2.html b/testing/web-platform/tests/css/css-flexbox/table-as-item-inflexible-in-row-2.html new file mode 100644 index 0000000000..4ef3db11f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/table-as-item-inflexible-in-row-2.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>Table as a flex item in row-oriented flex container</title> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#resolve-flexible-lengths"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1692116"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="Inflexible table flex item's flex base size is its final main size."> + +<p>Test passes if there is a filled green square.</p> +<div style="display: flex; flex-direction: row;"> + <!-- Use display:table and display:table-caption instead of the HTML tags so that box-sizing is used in WebKit-based browsers. + Since long time ago WebKit ignores box-sizing for HTML tables. That isn't the case for CSS tables though. --> + <div style="display:table; box-sizing: content-box; border: 10px solid green; background: green; + height: 50px; flex: 0 0 80px"> + <div style="display: table-caption; height: 10px; border: 10px solid green; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/table-as-item-large-intrinsic-size.html b/testing/web-platform/tests/css/css-flexbox/table-as-item-large-intrinsic-size.html new file mode 100644 index 0000000000..1aba63b4fb --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/table-as-item-large-intrinsic-size.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display: flex; width: 100px; height: 50px;"> + <table style="position: relative; flex: 1; border-spacing: 0;"> + <td style="padding: 0;"> + <div style="height: 100px;"></div> + <div style="position: absolute; inset: 0; background: green;"></div> + </td> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/table-as-item-min-content-height-1.tentative.html b/testing/web-platform/tests/css/css-flexbox/table-as-item-min-content-height-1.tentative.html new file mode 100644 index 0000000000..f60561b453 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/table-as-item-min-content-height-1.tentative.html @@ -0,0 +1,26 @@ +<!doctype html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Table's block size is not shrunk below its min-content block size when a specified min-height precludes automatic minimum sizes."> + +<style> +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="reference-overlapped-red"></div> + +<div style="display: flex; flex-direction: column; height: 0px; width: 100px;"> + <div style="display: table; min-height: 0px; width: 100px; background: green;"> + <div style="display: table-cell"> + <div style="height: 50px"></div> + </div> + </div> + <div style="flex: 0 0 50px; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/table-as-item-min-content-height-2.tentative.html b/testing/web-platform/tests/css/css-flexbox/table-as-item-min-content-height-2.tentative.html new file mode 100644 index 0000000000..cac19f9500 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/table-as-item-min-content-height-2.tentative.html @@ -0,0 +1,26 @@ +<!doctype html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Table's block size is not shrunk below its min-content block size when a specified size suggestion makes its automatic minimum size = 0."> + +<style> +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="reference-overlapped-red"></div> + +<div style="display: flex; flex-direction: column; height: 0px; width: 100px;"> + <div style="display: table; height: 0px; width: 100px; background: green;"> + <div style="display: table-cell"> + <div style="height: 50px"></div> + </div> + </div> + <div style="flex: 0 0 50px; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/table-as-item-min-height-1.html b/testing/web-platform/tests/css/css-flexbox/table-as-item-min-height-1.html new file mode 100644 index 0000000000..9b0b9d2508 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/table-as-item-min-height-1.html @@ -0,0 +1,27 @@ +<!doctype html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Table's min-height is ignored when calculating flex basis."> + +<style> +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="reference-overlapped-red"></div> + +<div style="display: flex; flex-direction: column; height: 200px;"> + <div style="display: table; min-height: 80px; flex: 1 0 auto; width: 100px; background: green;"> + <div style="display: table-cell"> + <div style="height: 1px"></div> + </div> + </div> + <div style="flex: 1 0 1px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/table-as-item-narrow-content-2.html b/testing/web-platform/tests/css/css-flexbox/table-as-item-narrow-content-2.html new file mode 100644 index 0000000000..96af10770f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/table-as-item-narrow-content-2.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>CSS Flexbox Test: Flex item as table with narrow content</title> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#layout-algorithm" title="9. Flex Layout Algorithm"> +<meta name="assert" content="A flex item as a table uses the sizing algorithm of the flexbox"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="display:flex; flex-direction:column; width: 100px; height:200px; "> + <div style="display:table; flex:1 0; background:green;"> + <div style="width:100px; height:10px;"></div> + </div> + <div style="flex:1 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/table-as-item-narrow-content.html b/testing/web-platform/tests/css/css-flexbox/table-as-item-narrow-content.html new file mode 100644 index 0000000000..31cf112518 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/table-as-item-narrow-content.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS Flexbox Test: Flex item as table with narrow content</title> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#layout-algorithm" title="9. Flex Layout Algorithm"> +<meta name="assert" content="A flex item as a table uses the sizing algorithm of the flexbox"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="display:flex; width:200px;"> + <div style="display:table; flex:1 0; background:green;"> + <div style="width:10px; height:100px;"></div> + </div> + <div style="flex:1 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/table-as-item-percent-width-cell-001-ref.html b/testing/web-platform/tests/css/css-flexbox/table-as-item-percent-width-cell-001-ref.html new file mode 100644 index 0000000000..2f40b6c49f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/table-as-item-percent-width-cell-001-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Flexbox Reference: display:table flex items with percent-width cells and content keywords for used flex-basis</title> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<style> + .container { + display: block; + width: 200px; + border: 1px solid black; + } + table { width: max-content; } + td { + background-color: cyan; + width: 100%; + border: 1px solid gray; + } + +</style> +<body> + <div class="container"> + <table><tr><td>1</td><td>2</td></tr></table> + </div> + <div class="container"> + <table><tr><td>1</td><td>2</td></tr></table> + </div> + <div class="container"> + <table><tr><td>1</td><td>2</td></tr></table> + </div> + <div class="container"> + <table><tr><td>1</td><td>2</td></tr></table> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/table-as-item-percent-width-cell-001.html b/testing/web-platform/tests/css/css-flexbox/table-as-item-percent-width-cell-001.html new file mode 100644 index 0000000000..b578b23340 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/table-as-item-percent-width-cell-001.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Flexbox Test: display:table flex items with percent-width cells and content keywords for used flex-basis</title> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#valdef-flex-basis-content"> +<link rel="match" href="table-as-item-percent-width-cell-001-ref.html"> +<meta name="assert" content="If a table as a flex item has used 'flex-basis:content' (or another content-based keyword), and default flex factors, and plenty of space, then it should be sized similarly to a table with 'width:max-content' in a block formatting context."> +<style> + .container { + display: flex; + width: 200px; + border: 1px solid black; + } + td { + background-color: cyan; + width: 100%; + border: 1px solid gray; + } + +</style> +<body> + <div class="container"> + <!-- The used value of flex-basis is 'content' here, due to the flex-basis + and the main-size property both having the value 'auto'. --> + <table><tr><td>1</td><td>2</td></tr></table> + </div> + <div class="container"> + <table style="flex-basis: content"><tr><td>1</td><td>2</td></tr></table> + </div> + <div class="container"> + <table style="flex-basis: min-content"><tr><td>1</td><td>2</td></tr></table> + </div> + <div class="container"> + <table style="flex-basis: max-content"><tr><td>1</td><td>2</td></tr></table> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-flexbox/table-as-item-specified-height.html b/testing/web-platform/tests/css/css-flexbox/table-as-item-specified-height.html new file mode 100644 index 0000000000..f8f3740fcd --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/table-as-item-specified-height.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>table is flex item</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#layout-algorithm" title="9. Flex Layout Algorithm"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1692116"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="Table's specified height does not count as another min-height for the purposes of the flexbox algorithm."> + +<p>Test passes if there is a filled green square.</p> + +<div style="display: flex; flex-direction: column; width: 100px;"> + <div style="display: table; width: 100px; height: 500px; background: green; flex: 0 0 100px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/table-as-item-specified-width-vertical.html b/testing/web-platform/tests/css/css-flexbox/table-as-item-specified-width-vertical.html new file mode 100644 index 0000000000..623e7508e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/table-as-item-specified-width-vertical.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>Table with vertical writing mode inside a row flexbox container</title> +<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@igalia.com" /> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#layout-algorithm" title="9. Flex Layout Algorithm"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="The width of an empty table (vertical direction) inside a flexbox container (row direction) is computed correctly."> + +<p>Test passes if there is a filled green square.</p> + +<div style="display: flex; flex-direction: row; height: 100px;"> + <div style="display: table; writing-mode: vertical-lr; width: 500px; background: green; flex: 0 0 100px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/table-as-item-specified-width.html b/testing/web-platform/tests/css/css-flexbox/table-as-item-specified-width.html new file mode 100644 index 0000000000..2d6850fdd7 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/table-as-item-specified-width.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>table is flex item</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#layout-algorithm" title="9. Flex Layout Algorithm"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#used-min-width-of-table"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="Table's specified width does not count as another min-width for the purposes of the flexbox algorithm."> + +<p>Test passes if there is a filled green square.</p> + +<!-- This test passed until Chrome 84 but has been broken since. + Firefox fixed this test since version 87. --> + +<div style="display: flex;"> + <div style="display: table; width: 500px; height: 100px; background: green; flex: 0 0 100px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/table-as-item-stretch-cross-size-2.html b/testing/web-platform/tests/css/css-flexbox/table-as-item-stretch-cross-size-2.html new file mode 100644 index 0000000000..04e5b1e342 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/table-as-item-stretch-cross-size-2.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#valdef-align-items-stretch"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The table's cross-axis (inline-size) is stretched."> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display: flex; flex-direction: column; width: 100px; height: 100px; background: red;"> + <table style="border-spacing: 0; flex-grow: 1;"> + <caption style="height: 10px; background: green;"></caption> + <caption style="height: 20px; background: green; caption-side: bottom;"></caption> + <td style="background: green;"></td> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/table-as-item-stretch-cross-size-3.html b/testing/web-platform/tests/css/css-flexbox/table-as-item-stretch-cross-size-3.html new file mode 100644 index 0000000000..bba29bdd29 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/table-as-item-stretch-cross-size-3.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#valdef-align-items-stretch"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=799725"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The table's cross-axis (inline-size) is stretched while the main-axis is not growing."> +<style> +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="reference-overlapped-red"></div> + +<div style="display: flex; flex-direction: column; width: 100px; background: red;"> + <table style="border-spacing: 0; height: 90px;"> + <caption style="height: 10px; background: green;"></caption> + <td style="background: green;"></td> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/table-as-item-stretch-cross-size-4.html b/testing/web-platform/tests/css/css-flexbox/table-as-item-stretch-cross-size-4.html new file mode 100644 index 0000000000..0e70b4687c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/table-as-item-stretch-cross-size-4.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#valdef-align-items-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#used-min-width-of-table"> +<link rel="bookmark" href="https://crbug.com/1189359"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Flex doesn't stretch the table to an inline size less than the table's used min-width."> + +<style> +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="reference-overlapped-red"></div> + +<!-- No table html elements so I don't have to reset border-spacing, cellpadding etc --> +<div style="display: flex; flex-direction: column; width: 50px;"> + <div style="display: table; background: green"> + <div style="display: table-cell;"> + <div style="height: 100px; width: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/table-as-item-stretch-cross-size-5.html b/testing/web-platform/tests/css/css-flexbox/table-as-item-stretch-cross-size-5.html new file mode 100644 index 0000000000..f5b898ac12 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/table-as-item-stretch-cross-size-5.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#valdef-align-items-stretch"> +<link rel="bookmark" href="https://crbug.com/1181403"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Calculate the caption-height correctly when flexbox stretches the table inline size to between caption's min-content and max-width, affecting the caption's block size."> + +<style> +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} + +.caption-content { + float: left; + height: 10px; + width: 75px; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="reference-overlapped-red"></div> + +<!-- Chrome versions [84..90] incorrectly give the flexbox a height of 80px and the table a height of 100px. overflow: hidden hides the table overflow, showing the red underneath, which exposes the bug. --> +<div style="display: flex; flex-direction: column; width: 100px; overflow: hidden;"> + <div style="display: table; background: green; height: 80px;"> + <div style="display: table-caption; background: green"> + <div class="caption-content"></div> + <div class="caption-content"></div> + </div> + <div style="display: table-cell;"> + <div id="this-just-avoids-the-empty-table-code-path" style="height: 10px; width: 10px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/table-as-item-stretch-cross-size.html b/testing/web-platform/tests/css/css-flexbox/table-as-item-stretch-cross-size.html new file mode 100644 index 0000000000..06d685be8b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/table-as-item-stretch-cross-size.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#valdef-align-items-stretch"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The table's cross-axis (block-size) is stretched."> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display: flex; width: 100px; height: 100px; background: red;"> + <table style="border-spacing: 0; flex-grow: 1;"> + <caption style="height: 10px; background: green;"></caption> + <caption style="height: 20px; background: green; caption-side: bottom;"></caption> + <td style="background: green;"></td> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/table-as-item-wide-content.html b/testing/web-platform/tests/css/css-flexbox/table-as-item-wide-content.html new file mode 100644 index 0000000000..45ad49ec2d --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/table-as-item-wide-content.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title>CSS Flexbox Test: Flex item as table with wide content</title> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Sentence beginning with 'The hypothetical main size is...'"> +<meta name="assert" content="A flex item respects the _used_ min size of an item, which tables define specially."> +<link rel="bookmark" href="https://github.com/w3c/csswg-drafts/issues/2442" /> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> +#reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id=reference-overlapped-red></div> +<div style="display:flex; width:50px;"> + <div style="min-width:0; flex:1 1; display:table; background:green;"> + <div style="width:100px; height:100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/table-item-flex-percentage-min-width-ref.html b/testing/web-platform/tests/css/css-flexbox/table-item-flex-percentage-min-width-ref.html new file mode 100644 index 0000000000..ee2cc9af5a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/table-item-flex-percentage-min-width-ref.html @@ -0,0 +1,140 @@ +<!doctype html> +<title>Reference: display:table flex items with flex-shrink/flex-grow/flex-basis</title> +<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1674268"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> + html,body { + color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0; + } + + .container { + display: flex; + width: 180px; + border: 1px solid blue; + } + + .container > * { + background-color: cyan; + display: block; + } + .test1 > * { + flex-shrink: 0; + min-width: 100%; + } + .test2 > * { + flex-shrink: 0; + min-width: 50%; + } + .test3 > * { + flex-shrink: 0.5; + min-width: 50%; + } + .test4 > * { + flex-grow: 0.1; + min-width: 50%; + } + .test5 > * { + flex-shrink: 0.2; + flex-grow: 0.5; + min-width: 10%; + } + .base > * { + flex-basis: 100px; + } + .large-base { + width: 100px; + } + .large-base > * { + flex-basis: 200px; + } +</style> + +<div class="container test1"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test2"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test3"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test4"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test5"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test1 base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test2 base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test3 base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test4 base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test5 base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test1 large-base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test2 large-base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test3 large-base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test4 large-base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test5 large-base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/table-item-flex-percentage-min-width.html b/testing/web-platform/tests/css/css-flexbox/table-item-flex-percentage-min-width.html new file mode 100644 index 0000000000..a67e4fe15f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/table-item-flex-percentage-min-width.html @@ -0,0 +1,144 @@ +<!doctype html> +<title>Flexbox Test: display:table flex items with flex-shrink/flex-grow/flex-basis</title> +<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1674268"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1673006"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1454330"> +<link rel="match" href="table-item-flex-percentage-min-width-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> + html,body { + color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0; + } + + .container { + display: flex; + width: 180px; + border: 1px solid blue; + } + + .container > * { + background-color: cyan; + display: table; + } + .test1 > * { + flex-shrink: 0; + min-width: 100%; + } + .test2 > * { + flex-shrink: 0; + min-width: 50%; + } + .test3 > * { + flex-shrink: 0.5; + min-width: 50%; + } + .test4 > * { + flex-grow: 0.1; + min-width: 50%; + } + .test5 > * { + flex-shrink: 0.2; + flex-grow: 0.5; + min-width: 10%; + } + .base > * { + flex-basis: 100px; + } + .large-base { + width: 100px; + } + .large-base > * { + flex-basis: 200px; + } +</style> + +<div class="container test1"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test2"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test3"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test4"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test5"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test1 base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test2 base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test3 base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test4 base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test5 base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test1 large-base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test2 large-base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test3 large-base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test4 large-base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test5 large-base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/table-item-flex-percentage-width-ref.html b/testing/web-platform/tests/css/css-flexbox/table-item-flex-percentage-width-ref.html new file mode 100644 index 0000000000..e598475fdd --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/table-item-flex-percentage-width-ref.html @@ -0,0 +1,140 @@ +<!doctype html> +<title>Reference: display:table flex items with flex-shrink/flex-grow/flex-basis</title> +<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1673006"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> + html,body { + color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0; + } + + .container { + display: flex; + width: 180px; + border: 1px solid blue; + } + + .container > * { + background-color: cyan; + display: block; + } + .test1 > * { + flex-shrink: 0; + width: 100%; + } + .test2 > * { + flex-shrink: 0; + width: 50%; + } + .test3 > * { + flex-shrink: 0.5; + width: 50%; + } + .test4 > * { + flex-grow: 0.1; + width: 50%; + } + .test5 > * { + flex-shrink: 0.2; + flex-grow: 0.5; + width: 10%; + } + .base > * { + flex-basis: 100px; + } + .large-base { + width: 100px; + } + .large-base > * { + flex-basis: 200px; + } +</style> + +<div class="container test1"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test2"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test3"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test4"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test5"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test1 base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test2 base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test3 base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test4 base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test5 base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test1 large-base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test2 large-base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test3 large-base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test4 large-base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test5 large-base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/table-item-flex-percentage-width.html b/testing/web-platform/tests/css/css-flexbox/table-item-flex-percentage-width.html new file mode 100644 index 0000000000..f21b5f0c65 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/table-item-flex-percentage-width.html @@ -0,0 +1,144 @@ +<!doctype html> +<title>Flexbox Test: display:table flex items with flex-shrink/flex-grow/flex-basis</title> +<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1673006"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1673006"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1454330"> +<link rel="match" href="table-item-flex-percentage-width-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> + html,body { + color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0; + } + + .container { + display: flex; + width: 180px; + border: 1px solid blue; + } + + .container > * { + background-color: cyan; + display: table; + } + .test1 > * { + flex-shrink: 0; + width: 100%; + } + .test2 > * { + flex-shrink: 0; + width: 50%; + } + .test3 > * { + flex-shrink: 0.5; + width: 50%; + } + .test4 > * { + flex-grow: 0.1; + width: 50%; + } + .test5 > * { + flex-shrink: 0.2; + flex-grow: 0.5; + width: 10%; + } + .base > * { + flex-basis: 100px; + } + .large-base { + width: 100px; + } + .large-base > * { + flex-basis: 200px; + } +</style> + +<div class="container test1"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test2"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test3"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test4"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test5"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test1 base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test2 base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test3 base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test4 base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test5 base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test1 large-base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test2 large-base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test3 large-base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test4 large-base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> + +<div class="container test5 large-base"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/table-with-float-paint.html b/testing/web-platform/tests/css/css-flexbox/table-with-float-paint.html new file mode 100644 index 0000000000..da78a0a576 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/table-with-float-paint.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/1090715"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="display: flex;"> + <div style="display: table;"> + <span style="float: left; width: 100px; height: 100px; background: green;"></span> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/table-with-infinite-max-intrinsic-width.html b/testing/web-platform/tests/css/css-flexbox/table-with-infinite-max-intrinsic-width.html new file mode 100644 index 0000000000..7f4a4645f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/table-with-infinite-max-intrinsic-width.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>Table flex item with infinite max intrinsic inline size</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#algo-main-item" title="3. Determine the flex base size and hypothetical main size of each item:"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="display:flex; width:100px; height:100px; align-items:flex-start; background:green;"> + <table style="flex-grow:1; flex-shrink:0; height:50px; background:green;" cellpadding="0" cellspacing="0"> + <tr> + <td style="width:100%; background:green;"> </td> + <td style="background:green;"> </td> + </tr> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/table-with-percent-intrinsic-width.html b/testing/web-platform/tests/css/css-flexbox/table-with-percent-intrinsic-width.html new file mode 100644 index 0000000000..e0cd66dd84 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/table-with-percent-intrinsic-width.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Flexbox: table descendants</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1123100"> +<meta name="assert" content="Percentage sized flex table does not use percent for intrinsic, or layout size."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<style> + .container { + display:flex; + width: 200px; + } + .left { + width:200px; + background:yellow; + } + main table { + border-spacing: 0; + background: red; + } + .spacer { + display:inline-block; + width: 10px; + height: 10px; + background: green; + } + main td { + padding: 0; + } +</style> +</head> +<body> +<main> +<div class="container"> + <div class="left"> + </div> + <table style="width:100%" data-expected-width=100> + <td data-expected-width=20><div class="spacer"></div><div class="spacer"></div></td> + <td data-expected-width=20><div class="spacer"></div><div class="spacer"></div></td> + <td data-expected-width=20><div class="spacer"></div><div class="spacer"></div></td> + <td data-expected-width=20><div class="spacer"></div><div class="spacer"></div></td> + <td data-expected-width=20><div class="spacer"></div><div class="spacer"></div></td> + </table> +</div> + +<div class="container"> + <div class="left"> + </div> + <table style="width:70%; flex-basis: 200px" data-expected-width=100> + <td data-expected-width=20><div class="spacer"></div><div class="spacer"></div></td> + <td data-expected-width=20><div class="spacer"></div><div class="spacer"></div></td> + <td data-expected-width=20><div class="spacer"></div><div class="spacer"></div></td> + <td data-expected-width=20><div class="spacer"></div><div class="spacer"></div></td> + <td data-expected-width=20><div class="spacer"></div><div class="spacer"></div></td> + </table> +</div> +</main> +<div id=log></div> + +<script> + checkLayout("table"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/text-as-flexitem-size-001.html b/testing/web-platform/tests/css/css-flexbox/text-as-flexitem-size-001.html new file mode 100644 index 0000000000..6d621bbb5b --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/text-as-flexitem-size-001.html @@ -0,0 +1,200 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ + + This test is a text-based variant of text-as-flexitem-size-001. + (Not sure if all these variants are needed without an aspect ratio, + but seemed best to keep it in parallel as much as reasonable.) +--> +<html> + <head> + <meta charset="utf-8"> + <title> + CSS Test: Testing how explicit main-size & cross-size constraints + influence sizing on non-stretched flex item containing text. + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> + <link rel="author" title="Elika J. Etemad" href="http://inkedblade.net/contact"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size"> + <style> + @import "/fonts/ahem.css"; + .flexbox { + display: flex; + flex-direction: row; + border: 1px solid black; + margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ + width: 80px; + height: 50px; + + justify-content: flex-start; + align-items: flex-start; + + float: left; /* For testing in "rows" */ + } + br { clear: both; } + + .flexbox > * { + /* Disable "min-width:auto"/"min-height:auto" to focus purely on + later channels of influence. */ + min-width: 0; + min-height: 0; + background: orange; + } + + .flexbox p { + font: 10px/1 Ahem, monospace; + margin: 0.5em; + color: #0006; + } + /* Depending on wrapping, flex item content will be 35px or 45px tall, + min-content width = 40px and max-content width = 70px */ + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> + </head> + <body onload="checkLayout('.flexbox > div')"> + <!-- Row 1: no special sizing: --> + <div class="flexbox"> + <div data-expected-width="70" data-expected-height="35"> + <p>xx xxx</p> + <p>xx</p> + </div> + </div> + <div class="flexbox" style="width: 50px"> + <div data-expected-width="50" data-expected-height="45"> + <p>xx xxx</p> + <p>xx</p> + </div> + </div> + <div class="flexbox" style="width: 20px"> + <div data-expected-width="20" data-expected-height="45"> + <p>xx xxx</p> + <p>xx</p> + </div> + </div> + <br> + + <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> + <div class="flexbox"> + <div style="width: 30px" + data-expected-width="30" data-expected-height="45"> + <p>xx xxx</p> + <p>xx</p> + </div> + </div> + <div class="flexbox"> + <div style="height: 30px" + data-expected-width="70" data-expected-height="30"> + <p>xx xxx</p> + <p>xx</p> + </div> + </div> + <div class="flexbox"> + <div style="flex: 0 0 30px" + data-expected-width="30" data-expected-height="45"> + <p>xx xxx</p> + <p>xx</p> + </div> + </div> + <br> + + <!-- Row 3: min main-size OR min cross-size, or both --> + <div class="flexbox"> + <div style="min-width: 75px" + data-expected-width="75" data-expected-height="35"> + <p>xx xxx</p> + <p>xx</p> + </div> + </div> + <div class="flexbox"> + <div style="min-height: 40px" + data-expected-width="70" data-expected-height="40"> + <p>xx xxx</p> + <p>xx</p> + </div> + </div> + <div class="flexbox"> + <div style="min-width: 75px; min-height: 40px" + data-expected-width="75" data-expected-height="40"> + <p>xx xxx</p> + <p>xx</p> + </div> + </div> + <br> + + <!-- Row 4: max main-size OR max cross-size, or both --> + <div class="flexbox"> + <div style="max-width: 20px" + data-expected-width="20" data-expected-height="45"> + <p>xx xxx</p> + <p>xx</p> + </div> + </div> + <div class="flexbox"> + <div style="max-height: 20px" + data-expected-width="70" data-expected-height="20"> + <p>xx xxx</p> + <p>xx</p> + </div> + </div> + <div class="flexbox"> + <div style="max-width: 20px; max-height: 20px" + data-expected-width="20" data-expected-height="20"> + <p>xx xxx</p> + <p>xx</p> + </div> + </div> + <br> + + <!-- Row 5: min main-size vs. max cross-size, & vice versa --> + <div class="flexbox"> + <div style="min-width: 70px; max-height: 20px" + data-expected-width="70" data-expected-height="20"> + <p>xx xxx</p> + <p>xx</p> + </div> + </div> + <div class="flexbox"> + <div style="max-width: 20px; min-height: 50px" + data-expected-width="20" data-expected-height="50"> + <p>xx xxx</p> + <p>xx</p> + </div> + </div> + <br> + + <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> + <div class="flexbox"> + <div style="min-width: 70px; height: 20px" + data-expected-width="70" data-expected-height="20"> + <p>xx xxx</p> + <p>xx</p> + </div> + </div> + <div class="flexbox"> + <div style="width: 40px; max-height: 20px" + data-expected-width="40" data-expected-height="20"> + <p>xx xxx</p> + <p>xx</p> + </div> + </div> + <div class="flexbox"> + <div style="max-width: 20px; height: 20px" + data-expected-width="20" data-expected-height="20"> + <p>xx xxx</p> + <p>xx</p> + </div> + </div> + <div class="flexbox"> + <div style="width: 20px; min-height: 20px" + data-expected-width="20" data-expected-height="45"> + <p>xx xxx</p> + <p>xx</p> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/text-overflow-on-flexbox-001.html b/testing/web-platform/tests/css/css-flexbox/text-overflow-on-flexbox-001.html new file mode 100644 index 0000000000..ba04309994 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/text-overflow-on-flexbox-001.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Flexbox: text-overflow in flexbox</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers"> +<link rel="match" href="reference/text-overflow-on-flexbox-001-ref.html"> +<meta name="assert" content="This test ensures that the text-overflow on flexbox should have no effect"/> +<style> +div.flex { + display: flex; + width: 100px; + overflow: hidden; + text-overflow: ellipsis; +} +</style> +</head> +<body> + <div class="flex"> + AAAAAAAAAAAAAAAAAAAA + </div> + <div class="flex"> + <b>bbbbbbbbbbbbbbbbbbbb</b> + </div> + <div class="flex"> + <div>cccccccccccccccccccc</div> + </div> + <div class="flex"> + DDDDDDDDDDDDDDDDDDDD<b>ee</b>FFFFFFFFFFFFFFFFFFFF + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-flexbox/webkit-box-vertical-writing-mode-ref.html b/testing/web-platform/tests/css/css-flexbox/webkit-box-vertical-writing-mode-ref.html new file mode 100644 index 0000000000..81da85dc46 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/webkit-box-vertical-writing-mode-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<div style="display: flex; writing-mode: vertical-rl;"> + This text should be vertical. +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/webkit-box-vertical-writing-mode.html b/testing/web-platform/tests/css/css-flexbox/webkit-box-vertical-writing-mode.html new file mode 100644 index 0000000000..c041b011d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/webkit-box-vertical-writing-mode.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/"> +<link rel="match" href="webkit-box-vertical-writing-mode-ref.html"> +<div style="display: -webkit-box; writing-mode: vertical-rl;"> + This text should be vertical. +</div> diff --git a/testing/web-platform/tests/css/css-flexbox/whitespace-in-flexitem-001-ref.html b/testing/web-platform/tests/css/css-flexbox/whitespace-in-flexitem-001-ref.html new file mode 100644 index 0000000000..f7ab7baf7c --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/whitespace-in-flexitem-001-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<link href="support/flexbox.css" rel="stylesheet"> +<link rel="author" title="Google Inc." href="http://www.google.com/"> +<style> + .a { + flex: none; + width: 30px; + background: salmon; + } +</style> +<body> + <div class="flexbox justify-content-space-around"> + <div class="a"></div> + </div> + + <div class="flexbox"> + <b>foo</b><b>bar</b> + </div> diff --git a/testing/web-platform/tests/css/css-flexbox/whitespace-in-flexitem-001.html b/testing/web-platform/tests/css/css-flexbox/whitespace-in-flexitem-001.html new file mode 100644 index 0000000000..a2fae9bd56 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/whitespace-in-flexitem-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<title>CSS Test: Whitespace-only nodes in Flexboxes</title> +<link href="support/flexbox.css" rel="stylesheet"> +<link rel="author" title="Google Inc." href="http://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-items"> +<link rel="match" href="whitespace-in-flexitem-001-ref.html"> +<meta name="assert" content="Whitespace-only nodes in a flexbox should not +be rendered and not influence justify-content, even in the presence of +white-space: pre"> +<style> + .flexbox { white-space: pre; } + .a { + flex: none; + width: 30px; + background: salmon; + } +</style> +<body> + <div class="flexbox justify-content-space-around"> + <div class="a"></div> 	 + </div> + + <div class="flexbox"> + <b>foo</b> <b>bar</b> + </div> diff --git a/testing/web-platform/tests/css/css-flexbox/zero-content-size-with-scrollbar-crash.html b/testing/web-platform/tests/css/css-flexbox/zero-content-size-with-scrollbar-crash.html new file mode 100644 index 0000000000..35a64aa61f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/zero-content-size-with-scrollbar-crash.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-containers"> +<meta name="assert" content="This test passes if the renderer does not crash."/> +<div style="display: flex;"> + <div style="max-width: 0px; overflow: scroll;"></div> +</div> |
