diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-flexbox/abspos | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-flexbox/abspos')
77 files changed, 6056 insertions, 0 deletions
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> |