diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-align/abspos')
48 files changed, 5710 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-align/abspos/align-self-htb-ltr-htb.html b/testing/web-platform/tests/css/css-align/abspos/align-self-htb-ltr-htb.html new file mode 100644 index 0000000000..786cec7acf --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/align-self-htb-ltr-htb.html @@ -0,0 +1,110 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: horizontal-tb; + direction: ltr; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + writing-mode: horizontal-tb; + direction: ltr; + position: absolute; + background: green; + inset: 0; +} + +.item::before { + width: 20px; + height: 20px; + content: ''; + display: block; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item" style="align-self: start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: center;" data-expected-height="20" data-offset-y="10"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: baseline;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: last baseline;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: self-start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: self-end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: stretch;" data-expected-height="40" data-offset-y="0"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container"> + <div class="item rtl" style="align-self: start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: center;" data-expected-height="20" data-offset-y="10"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: baseline;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: last baseline;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: self-start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: self-end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: stretch;" data-expected-height="40" data-offset-y="0"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/align-self-htb-ltr-vlr.html b/testing/web-platform/tests/css/css-align/abspos/align-self-htb-ltr-vlr.html new file mode 100644 index 0000000000..917e50d5e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/align-self-htb-ltr-vlr.html @@ -0,0 +1,110 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: horizontal-tb; + direction: ltr; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + writing-mode: vertical-lr; + direction: ltr; + position: absolute; + background: green; + inset: 0; +} + +.item::before { + width: 20px; + height: 20px; + content: ''; + display: block; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item" style="align-self: start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: center;" data-expected-height="20" data-offset-y="10"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: baseline;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: last baseline;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: self-start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: self-end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: stretch;" data-expected-height="40" data-offset-y="0"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container"> + <div class="item rtl" style="align-self: start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: center;" data-expected-height="20" data-offset-y="10"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: baseline;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: last baseline;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: self-start;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: self-end;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: stretch;" data-expected-height="40" data-offset-y="0"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/align-self-htb-ltr-vrl.html b/testing/web-platform/tests/css/css-align/abspos/align-self-htb-ltr-vrl.html new file mode 100644 index 0000000000..b60d461531 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/align-self-htb-ltr-vrl.html @@ -0,0 +1,110 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: horizontal-tb; + direction: ltr; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + writing-mode: vertical-rl; + direction: ltr; + position: absolute; + background: green; + inset: 0; +} + +.item::before { + width: 20px; + height: 20px; + content: ''; + display: block; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item" style="align-self: start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: center;" data-expected-height="20" data-offset-y="10"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: baseline;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: last baseline;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: self-start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: self-end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: stretch;" data-expected-height="40" data-offset-y="0"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container"> + <div class="item rtl" style="align-self: start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: center;" data-expected-height="20" data-offset-y="10"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: baseline;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: last baseline;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: self-start;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: self-end;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: stretch;" data-expected-height="40" data-offset-y="0"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/align-self-htb-rtl-htb.html b/testing/web-platform/tests/css/css-align/abspos/align-self-htb-rtl-htb.html new file mode 100644 index 0000000000..9bf919dd46 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/align-self-htb-rtl-htb.html @@ -0,0 +1,110 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: horizontal-tb; + direction: rtl; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + writing-mode: horizontal-tb; + direction: ltr; + position: absolute; + background: green; + inset: 0; +} + +.item::before { + width: 20px; + height: 20px; + content: ''; + display: block; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item" style="align-self: start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: center;" data-expected-height="20" data-offset-y="10"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: baseline;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: last baseline;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: self-start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: self-end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: stretch;" data-expected-height="40" data-offset-y="0"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container"> + <div class="item rtl" style="align-self: start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: center;" data-expected-height="20" data-offset-y="10"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: baseline;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: last baseline;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: self-start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: self-end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: stretch;" data-expected-height="40" data-offset-y="0"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/align-self-htb-rtl-vlr.html b/testing/web-platform/tests/css/css-align/abspos/align-self-htb-rtl-vlr.html new file mode 100644 index 0000000000..5c1e8c75c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/align-self-htb-rtl-vlr.html @@ -0,0 +1,110 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: horizontal-tb; + direction: rtl; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + writing-mode: vertical-lr; + direction: ltr; + position: absolute; + background: green; + inset: 0; +} + +.item::before { + width: 20px; + height: 20px; + content: ''; + display: block; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item" style="align-self: start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: center;" data-expected-height="20" data-offset-y="10"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: baseline;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: last baseline;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: self-start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: self-end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: stretch;" data-expected-height="40" data-offset-y="0"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container"> + <div class="item rtl" style="align-self: start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: center;" data-expected-height="20" data-offset-y="10"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: baseline;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: last baseline;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: self-start;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: self-end;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: stretch;" data-expected-height="40" data-offset-y="0"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/align-self-htb-rtl-vrl.html b/testing/web-platform/tests/css/css-align/abspos/align-self-htb-rtl-vrl.html new file mode 100644 index 0000000000..b7f0056976 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/align-self-htb-rtl-vrl.html @@ -0,0 +1,110 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: horizontal-tb; + direction: rtl; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + writing-mode: vertical-rl; + direction: ltr; + position: absolute; + background: green; + inset: 0; +} + +.item::before { + width: 20px; + height: 20px; + content: ''; + display: block; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item" style="align-self: start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: center;" data-expected-height="20" data-offset-y="10"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: baseline;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: last baseline;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: self-start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: self-end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: stretch;" data-expected-height="40" data-offset-y="0"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container"> + <div class="item rtl" style="align-self: start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: center;" data-expected-height="20" data-offset-y="10"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: baseline;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: last baseline;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: self-start;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: self-end;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: stretch;" data-expected-height="40" data-offset-y="0"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/align-self-vlr-ltr-htb.html b/testing/web-platform/tests/css/css-align/abspos/align-self-vlr-ltr-htb.html new file mode 100644 index 0000000000..98e3c0b936 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/align-self-vlr-ltr-htb.html @@ -0,0 +1,110 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: vertical-lr; + direction: ltr; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + writing-mode: horizontal-tb; + direction: ltr; + position: absolute; + background: green; + inset: 0; +} + +.item::before { + width: 20px; + height: 20px; + content: ''; + display: block; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item" style="align-self: start;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: center;" data-expected-width="20" data-offset-x="10"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: end;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: baseline;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: last baseline;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: self-start;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: self-end;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: stretch;" data-expected-width="40" data-offset-x="0"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container"> + <div class="item rtl" style="align-self: start;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: center;" data-expected-width="20" data-offset-x="10"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: end;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: baseline;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: last baseline;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: self-start;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: self-end;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: stretch;" data-expected-width="40" data-offset-x="0"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/align-self-vlr-ltr-vlr.html b/testing/web-platform/tests/css/css-align/abspos/align-self-vlr-ltr-vlr.html new file mode 100644 index 0000000000..73585d2db5 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/align-self-vlr-ltr-vlr.html @@ -0,0 +1,110 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: vertical-lr; + direction: ltr; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + writing-mode: vertical-lr; + direction: ltr; + position: absolute; + background: green; + inset: 0; +} + +.item::before { + width: 20px; + height: 20px; + content: ''; + display: block; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item" style="align-self: start;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: center;" data-expected-width="20" data-offset-x="10"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: end;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: baseline;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: last baseline;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: self-start;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: self-end;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: stretch;" data-expected-width="40" data-offset-x="0"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container"> + <div class="item rtl" style="align-self: start;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: center;" data-expected-width="20" data-offset-x="10"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: end;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: baseline;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: last baseline;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: self-start;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: self-end;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: stretch;" data-expected-width="40" data-offset-x="0"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/align-self-vlr-ltr-vrl.html b/testing/web-platform/tests/css/css-align/abspos/align-self-vlr-ltr-vrl.html new file mode 100644 index 0000000000..39ecd38899 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/align-self-vlr-ltr-vrl.html @@ -0,0 +1,110 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: vertical-lr; + direction: ltr; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + writing-mode: vertical-rl; + direction: ltr; + position: absolute; + background: green; + inset: 0; +} + +.item::before { + width: 20px; + height: 20px; + content: ''; + display: block; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item" style="align-self: start;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: center;" data-expected-width="20" data-offset-x="10"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: end;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: baseline;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: last baseline;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: self-start;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: self-end;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: stretch;" data-expected-width="40" data-offset-x="0"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container"> + <div class="item rtl" style="align-self: start;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: center;" data-expected-width="20" data-offset-x="10"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: end;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: baseline;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: last baseline;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: self-start;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: self-end;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: stretch;" data-expected-width="40" data-offset-x="0"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/align-self-vlr-rtl-htb.html b/testing/web-platform/tests/css/css-align/abspos/align-self-vlr-rtl-htb.html new file mode 100644 index 0000000000..7a4167f62a --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/align-self-vlr-rtl-htb.html @@ -0,0 +1,110 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: vertical-lr; + direction: rtl; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + writing-mode: horizontal-tb; + direction: ltr; + position: absolute; + background: green; + inset: 0; +} + +.item::before { + width: 20px; + height: 20px; + content: ''; + display: block; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item" style="align-self: start;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: center;" data-expected-width="20" data-offset-x="10"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: end;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: baseline;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: last baseline;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: self-start;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: self-end;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: stretch;" data-expected-width="40" data-offset-x="0"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container"> + <div class="item rtl" style="align-self: start;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: center;" data-expected-width="20" data-offset-x="10"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: end;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: baseline;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: last baseline;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: self-start;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: self-end;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: stretch;" data-expected-width="40" data-offset-x="0"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/align-self-vlr-rtl-vlr.html b/testing/web-platform/tests/css/css-align/abspos/align-self-vlr-rtl-vlr.html new file mode 100644 index 0000000000..4ce7d46520 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/align-self-vlr-rtl-vlr.html @@ -0,0 +1,110 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: vertical-lr; + direction: rtl; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + writing-mode: vertical-lr; + direction: ltr; + position: absolute; + background: green; + inset: 0; +} + +.item::before { + width: 20px; + height: 20px; + content: ''; + display: block; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item" style="align-self: start;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: center;" data-expected-width="20" data-offset-x="10"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: end;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: baseline;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: last baseline;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: self-start;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: self-end;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: stretch;" data-expected-width="40" data-offset-x="0"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container"> + <div class="item rtl" style="align-self: start;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: center;" data-expected-width="20" data-offset-x="10"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: end;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: baseline;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: last baseline;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: self-start;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: self-end;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: stretch;" data-expected-width="40" data-offset-x="0"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/align-self-vlr-rtl-vrl.html b/testing/web-platform/tests/css/css-align/abspos/align-self-vlr-rtl-vrl.html new file mode 100644 index 0000000000..0fe160442f --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/align-self-vlr-rtl-vrl.html @@ -0,0 +1,110 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: vertical-lr; + direction: rtl; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + writing-mode: vertical-rl; + direction: ltr; + position: absolute; + background: green; + inset: 0; +} + +.item::before { + width: 20px; + height: 20px; + content: ''; + display: block; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item" style="align-self: start;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: center;" data-expected-width="20" data-offset-x="10"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: end;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: baseline;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: last baseline;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: self-start;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: self-end;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: stretch;" data-expected-width="40" data-offset-x="0"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container"> + <div class="item rtl" style="align-self: start;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: center;" data-expected-width="20" data-offset-x="10"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: end;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: baseline;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: last baseline;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: self-start;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: self-end;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: stretch;" data-expected-width="40" data-offset-x="0"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/align-self-vrl-ltr-htb.html b/testing/web-platform/tests/css/css-align/abspos/align-self-vrl-ltr-htb.html new file mode 100644 index 0000000000..98e6145a63 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/align-self-vrl-ltr-htb.html @@ -0,0 +1,110 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: vertical-rl; + direction: ltr; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + writing-mode: horizontal-tb; + direction: ltr; + position: absolute; + background: green; + inset: 0; +} + +.item::before { + width: 20px; + height: 20px; + content: ''; + display: block; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item" style="align-self: start;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: center;" data-expected-width="20" data-offset-x="10"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: end;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: baseline;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: last baseline;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: self-start;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: self-end;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: stretch;" data-expected-width="40" data-offset-x="0"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container"> + <div class="item rtl" style="align-self: start;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: center;" data-expected-width="20" data-offset-x="10"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: end;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: baseline;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: last baseline;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: self-start;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: self-end;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: stretch;" data-expected-width="40" data-offset-x="0"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/align-self-vrl-ltr-vlr.html b/testing/web-platform/tests/css/css-align/abspos/align-self-vrl-ltr-vlr.html new file mode 100644 index 0000000000..d22b347da3 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/align-self-vrl-ltr-vlr.html @@ -0,0 +1,110 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: vertical-rl; + direction: ltr; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + writing-mode: vertical-lr; + direction: ltr; + position: absolute; + background: green; + inset: 0; +} + +.item::before { + width: 20px; + height: 20px; + content: ''; + display: block; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item" style="align-self: start;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: center;" data-expected-width="20" data-offset-x="10"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: end;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: baseline;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: last baseline;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: self-start;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: self-end;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: stretch;" data-expected-width="40" data-offset-x="0"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container"> + <div class="item rtl" style="align-self: start;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: center;" data-expected-width="20" data-offset-x="10"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: end;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: baseline;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: last baseline;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: self-start;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: self-end;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: stretch;" data-expected-width="40" data-offset-x="0"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/align-self-vrl-ltr-vrl.html b/testing/web-platform/tests/css/css-align/abspos/align-self-vrl-ltr-vrl.html new file mode 100644 index 0000000000..602b7afb7b --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/align-self-vrl-ltr-vrl.html @@ -0,0 +1,110 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: vertical-rl; + direction: ltr; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + writing-mode: vertical-rl; + direction: ltr; + position: absolute; + background: green; + inset: 0; +} + +.item::before { + width: 20px; + height: 20px; + content: ''; + display: block; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item" style="align-self: start;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: center;" data-expected-width="20" data-offset-x="10"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: end;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: baseline;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: last baseline;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: self-start;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: self-end;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: stretch;" data-expected-width="40" data-offset-x="0"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container"> + <div class="item rtl" style="align-self: start;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: center;" data-expected-width="20" data-offset-x="10"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: end;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: baseline;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: last baseline;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: self-start;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: self-end;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: stretch;" data-expected-width="40" data-offset-x="0"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/align-self-vrl-rtl-htb.html b/testing/web-platform/tests/css/css-align/abspos/align-self-vrl-rtl-htb.html new file mode 100644 index 0000000000..1dcfd8709f --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/align-self-vrl-rtl-htb.html @@ -0,0 +1,110 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: vertical-rl; + direction: rtl; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + writing-mode: horizontal-tb; + direction: ltr; + position: absolute; + background: green; + inset: 0; +} + +.item::before { + width: 20px; + height: 20px; + content: ''; + display: block; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item" style="align-self: start;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: center;" data-expected-width="20" data-offset-x="10"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: end;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: baseline;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: last baseline;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: self-start;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: self-end;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: stretch;" data-expected-width="40" data-offset-x="0"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container"> + <div class="item rtl" style="align-self: start;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: center;" data-expected-width="20" data-offset-x="10"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: end;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: baseline;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: last baseline;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: self-start;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: self-end;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: stretch;" data-expected-width="40" data-offset-x="0"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/align-self-vrl-rtl-vlr.html b/testing/web-platform/tests/css/css-align/abspos/align-self-vrl-rtl-vlr.html new file mode 100644 index 0000000000..d22b347da3 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/align-self-vrl-rtl-vlr.html @@ -0,0 +1,110 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: vertical-rl; + direction: ltr; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + writing-mode: vertical-lr; + direction: ltr; + position: absolute; + background: green; + inset: 0; +} + +.item::before { + width: 20px; + height: 20px; + content: ''; + display: block; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item" style="align-self: start;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: center;" data-expected-width="20" data-offset-x="10"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: end;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: baseline;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: last baseline;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: self-start;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: self-end;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: stretch;" data-expected-width="40" data-offset-x="0"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container"> + <div class="item rtl" style="align-self: start;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: center;" data-expected-width="20" data-offset-x="10"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: end;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: baseline;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: last baseline;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: self-start;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: self-end;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: stretch;" data-expected-width="40" data-offset-x="0"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/align-self-vrl-rtl-vrl.html b/testing/web-platform/tests/css/css-align/abspos/align-self-vrl-rtl-vrl.html new file mode 100644 index 0000000000..602b7afb7b --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/align-self-vrl-rtl-vrl.html @@ -0,0 +1,110 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: vertical-rl; + direction: ltr; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + writing-mode: vertical-rl; + direction: ltr; + position: absolute; + background: green; + inset: 0; +} + +.item::before { + width: 20px; + height: 20px; + content: ''; + display: block; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item" style="align-self: start;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: center;" data-expected-width="20" data-offset-x="10"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: end;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: baseline;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: last baseline;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: self-start;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: self-end;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="align-self: stretch;" data-expected-width="40" data-offset-x="0"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container"> + <div class="item rtl" style="align-self: start;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: center;" data-expected-width="20" data-offset-x="10"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: end;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: baseline;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: last baseline;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: self-start;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: self-end;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="align-self: stretch;" data-expected-width="40" data-offset-x="0"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/justify-self-htb-ltr-htb.html b/testing/web-platform/tests/css/css-align/abspos/justify-self-htb-ltr-htb.html new file mode 100644 index 0000000000..cfef344e04 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/justify-self-htb-ltr-htb.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: horizontal-tb; + direction: ltr; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + writing-mode: horizontal-tb; + direction: ltr; + position: absolute; + background: green; + inset: 0; +} + +.item::before { + width: 20px; + height: 20px; + content: ''; + display: block; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item" style="justify-self: start;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: center;" data-expected-width="20" data-offset-x="10"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: end;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: baseline;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: last baseline;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: self-start;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: self-end;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: left;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: right;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: stretch;" data-expected-width="40" data-offset-x="0"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container"> + <div class="item rtl" style="justify-self: start;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: center;" data-expected-width="20" data-offset-x="10"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: end;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: baseline;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: last baseline;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: self-start;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: self-end;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: left;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: right;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: stretch;" data-expected-width="40" data-offset-x="0"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/justify-self-htb-ltr-vlr.html b/testing/web-platform/tests/css/css-align/abspos/justify-self-htb-ltr-vlr.html new file mode 100644 index 0000000000..55680f4b2c --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/justify-self-htb-ltr-vlr.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: horizontal-tb; + direction: ltr; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + writing-mode: vertical-lr; + direction: ltr; + position: absolute; + background: green; + inset: 0; +} + +.item::before { + width: 20px; + height: 20px; + content: ''; + display: block; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item" style="justify-self: start;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: center;" data-expected-width="20" data-offset-x="10"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: end;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: baseline;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: last baseline;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: self-start;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: self-end;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: left;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: right;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: stretch;" data-expected-width="40" data-offset-x="0"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container"> + <div class="item rtl" style="justify-self: start;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: center;" data-expected-width="20" data-offset-x="10"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: end;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: baseline;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: last baseline;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: self-start;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: self-end;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: left;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: right;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: stretch;" data-expected-width="40" data-offset-x="0"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/justify-self-htb-ltr-vrl.html b/testing/web-platform/tests/css/css-align/abspos/justify-self-htb-ltr-vrl.html new file mode 100644 index 0000000000..57ee3af640 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/justify-self-htb-ltr-vrl.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: horizontal-tb; + direction: ltr; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + writing-mode: vertical-rl; + direction: ltr; + position: absolute; + background: green; + inset: 0; +} + +.item::before { + width: 20px; + height: 20px; + content: ''; + display: block; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item" style="justify-self: start;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: center;" data-expected-width="20" data-offset-x="10"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: end;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: baseline;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: last baseline;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: self-start;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: self-end;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: left;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: right;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: stretch;" data-expected-width="40" data-offset-x="0"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container"> + <div class="item rtl" style="justify-self: start;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: center;" data-expected-width="20" data-offset-x="10"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: end;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: baseline;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: last baseline;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: self-start;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: self-end;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: left;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: right;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: stretch;" data-expected-width="40" data-offset-x="0"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/justify-self-htb-rtl-htb.html b/testing/web-platform/tests/css/css-align/abspos/justify-self-htb-rtl-htb.html new file mode 100644 index 0000000000..95e54c2b99 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/justify-self-htb-rtl-htb.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: horizontal-tb; + direction: rtl; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + writing-mode: horizontal-tb; + direction: ltr; + position: absolute; + background: green; + inset: 0; +} + +.item::before { + width: 20px; + height: 20px; + content: ''; + display: block; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item" style="justify-self: start;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: center;" data-expected-width="20" data-offset-x="10"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: end;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: baseline;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: last baseline;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: self-start;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: self-end;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: left;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: right;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: stretch;" data-expected-width="40" data-offset-x="0"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container"> + <div class="item rtl" style="justify-self: start;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: center;" data-expected-width="20" data-offset-x="10"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: end;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: baseline;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: last baseline;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: self-start;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: self-end;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: left;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: right;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: stretch;" data-expected-width="40" data-offset-x="0"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/justify-self-htb-rtl-vlr.html b/testing/web-platform/tests/css/css-align/abspos/justify-self-htb-rtl-vlr.html new file mode 100644 index 0000000000..e7224e76db --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/justify-self-htb-rtl-vlr.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: horizontal-tb; + direction: rtl; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + writing-mode: vertical-lr; + direction: ltr; + position: absolute; + background: green; + inset: 0; +} + +.item::before { + width: 20px; + height: 20px; + content: ''; + display: block; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item" style="justify-self: start;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: center;" data-expected-width="20" data-offset-x="10"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: end;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: baseline;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: last baseline;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: self-start;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: self-end;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: left;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: right;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: stretch;" data-expected-width="40" data-offset-x="0"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container"> + <div class="item rtl" style="justify-self: start;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: center;" data-expected-width="20" data-offset-x="10"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: end;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: baseline;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: last baseline;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: self-start;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: self-end;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: left;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: right;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: stretch;" data-expected-width="40" data-offset-x="0"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/justify-self-htb-rtl-vrl.html b/testing/web-platform/tests/css/css-align/abspos/justify-self-htb-rtl-vrl.html new file mode 100644 index 0000000000..ba7e98a676 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/justify-self-htb-rtl-vrl.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: horizontal-tb; + direction: rtl; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + writing-mode: vertical-rl; + direction: ltr; + position: absolute; + background: green; + inset: 0; +} + +.item::before { + width: 20px; + height: 20px; + content: ''; + display: block; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item" style="justify-self: start;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: center;" data-expected-width="20" data-offset-x="10"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: end;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: baseline;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: last baseline;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: self-start;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: self-end;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: left;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: right;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: stretch;" data-expected-width="40" data-offset-x="0"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container"> + <div class="item rtl" style="justify-self: start;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: center;" data-expected-width="20" data-offset-x="10"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: end;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: baseline;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: last baseline;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: self-start;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: self-end;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: left;" data-expected-width="20" data-offset-x="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: right;" data-expected-width="20" data-offset-x="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: stretch;" data-expected-width="40" data-offset-x="0"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/justify-self-vlr-ltr-htb.html b/testing/web-platform/tests/css/css-align/abspos/justify-self-vlr-ltr-htb.html new file mode 100644 index 0000000000..d47c504679 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/justify-self-vlr-ltr-htb.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: vertical-lr; + direction: ltr; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + writing-mode: horizontal-tb; + direction: ltr; + position: absolute; + background: green; + inset: 0; +} + +.item::before { + width: 20px; + height: 20px; + content: ''; + display: block; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item" style="justify-self: start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: center;" data-expected-height="20" data-offset-y="10"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: baseline;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: last baseline;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: self-start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: self-end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: left;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: right;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: stretch;" data-expected-height="40" data-offset-y="0"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container"> + <div class="item rtl" style="justify-self: start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: center;" data-expected-height="20" data-offset-y="10"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: baseline;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: last baseline;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: self-start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: self-end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: left;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: right;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: stretch;" data-expected-height="40" data-offset-y="0"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/justify-self-vlr-ltr-vlr.html b/testing/web-platform/tests/css/css-align/abspos/justify-self-vlr-ltr-vlr.html new file mode 100644 index 0000000000..71e3687f6f --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/justify-self-vlr-ltr-vlr.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: vertical-lr; + direction: ltr; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + writing-mode: vertical-lr; + direction: ltr; + position: absolute; + background: green; + inset: 0; +} + +.item::before { + width: 20px; + height: 20px; + content: ''; + display: block; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item" style="justify-self: start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: center;" data-expected-height="20" data-offset-y="10"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: baseline;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: last baseline;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: self-start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: self-end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: left;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: right;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: stretch;" data-expected-height="40" data-offset-y="0"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container"> + <div class="item rtl" style="justify-self: start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: center;" data-expected-height="20" data-offset-y="10"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: baseline;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: last baseline;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: self-start;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: self-end;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: left;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: right;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: stretch;" data-expected-height="40" data-offset-y="0"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/justify-self-vlr-ltr-vrl.html b/testing/web-platform/tests/css/css-align/abspos/justify-self-vlr-ltr-vrl.html new file mode 100644 index 0000000000..ae90d4da0d --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/justify-self-vlr-ltr-vrl.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: vertical-lr; + direction: ltr; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + writing-mode: vertical-rl; + direction: ltr; + position: absolute; + background: green; + inset: 0; +} + +.item::before { + width: 20px; + height: 20px; + content: ''; + display: block; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item" style="justify-self: start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: center;" data-expected-height="20" data-offset-y="10"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: baseline;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: last baseline;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: self-start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: self-end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: left;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: right;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: stretch;" data-expected-height="40" data-offset-y="0"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container"> + <div class="item rtl" style="justify-self: start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: center;" data-expected-height="20" data-offset-y="10"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: baseline;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: last baseline;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: self-start;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: self-end;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: left;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: right;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: stretch;" data-expected-height="40" data-offset-y="0"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/justify-self-vlr-rtl-htb.html b/testing/web-platform/tests/css/css-align/abspos/justify-self-vlr-rtl-htb.html new file mode 100644 index 0000000000..1a192b5692 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/justify-self-vlr-rtl-htb.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: vertical-lr; + direction: rtl; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + writing-mode: horizontal-tb; + direction: ltr; + position: absolute; + background: green; + inset: 0; +} + +.item::before { + width: 20px; + height: 20px; + content: ''; + display: block; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item" style="justify-self: start;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: center;" data-expected-height="20" data-offset-y="10"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: end;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: baseline;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: last baseline;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: self-start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: self-end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: left;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: right;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: stretch;" data-expected-height="40" data-offset-y="0"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container"> + <div class="item rtl" style="justify-self: start;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: center;" data-expected-height="20" data-offset-y="10"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: end;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: baseline;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: last baseline;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: self-start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: self-end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: left;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: right;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: stretch;" data-expected-height="40" data-offset-y="0"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/justify-self-vlr-rtl-vlr.html b/testing/web-platform/tests/css/css-align/abspos/justify-self-vlr-rtl-vlr.html new file mode 100644 index 0000000000..cb9986db10 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/justify-self-vlr-rtl-vlr.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: vertical-lr; + direction: rtl; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + writing-mode: vertical-lr; + direction: ltr; + position: absolute; + background: green; + inset: 0; +} + +.item::before { + width: 20px; + height: 20px; + content: ''; + display: block; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item" style="justify-self: start;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: center;" data-expected-height="20" data-offset-y="10"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: end;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: baseline;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: last baseline;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: self-start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: self-end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: left;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: right;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: stretch;" data-expected-height="40" data-offset-y="0"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container"> + <div class="item rtl" style="justify-self: start;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: center;" data-expected-height="20" data-offset-y="10"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: end;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: baseline;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: last baseline;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: self-start;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: self-end;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: left;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: right;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: stretch;" data-expected-height="40" data-offset-y="0"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/justify-self-vlr-rtl-vrl.html b/testing/web-platform/tests/css/css-align/abspos/justify-self-vlr-rtl-vrl.html new file mode 100644 index 0000000000..fb717a051f --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/justify-self-vlr-rtl-vrl.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: vertical-lr; + direction: rtl; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + writing-mode: vertical-rl; + direction: ltr; + position: absolute; + background: green; + inset: 0; +} + +.item::before { + width: 20px; + height: 20px; + content: ''; + display: block; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item" style="justify-self: start;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: center;" data-expected-height="20" data-offset-y="10"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: end;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: baseline;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: last baseline;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: self-start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: self-end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: left;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: right;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: stretch;" data-expected-height="40" data-offset-y="0"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container"> + <div class="item rtl" style="justify-self: start;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: center;" data-expected-height="20" data-offset-y="10"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: end;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: baseline;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: last baseline;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: self-start;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: self-end;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: left;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: right;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: stretch;" data-expected-height="40" data-offset-y="0"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/justify-self-vrl-ltr-htb.html b/testing/web-platform/tests/css/css-align/abspos/justify-self-vrl-ltr-htb.html new file mode 100644 index 0000000000..e2cbff322b --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/justify-self-vrl-ltr-htb.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: vertical-rl; + direction: ltr; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + writing-mode: horizontal-tb; + direction: ltr; + position: absolute; + background: green; + inset: 0; +} + +.item::before { + width: 20px; + height: 20px; + content: ''; + display: block; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item" style="justify-self: start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: center;" data-expected-height="20" data-offset-y="10"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: baseline;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: last baseline;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: self-start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: self-end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: left;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: right;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: stretch;" data-expected-height="40" data-offset-y="0"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container"> + <div class="item rtl" style="justify-self: start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: center;" data-expected-height="20" data-offset-y="10"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: baseline;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: last baseline;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: self-start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: self-end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: left;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: right;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: stretch;" data-expected-height="40" data-offset-y="0"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/justify-self-vrl-ltr-vlr.html b/testing/web-platform/tests/css/css-align/abspos/justify-self-vrl-ltr-vlr.html new file mode 100644 index 0000000000..5aa2f48288 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/justify-self-vrl-ltr-vlr.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: vertical-rl; + direction: ltr; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + writing-mode: vertical-lr; + direction: ltr; + position: absolute; + background: green; + inset: 0; +} + +.item::before { + width: 20px; + height: 20px; + content: ''; + display: block; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item" style="justify-self: start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: center;" data-expected-height="20" data-offset-y="10"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: baseline;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: last baseline;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: self-start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: self-end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: left;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: right;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: stretch;" data-expected-height="40" data-offset-y="0"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container"> + <div class="item rtl" style="justify-self: start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: center;" data-expected-height="20" data-offset-y="10"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: baseline;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: last baseline;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: self-start;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: self-end;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: left;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: right;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: stretch;" data-expected-height="40" data-offset-y="0"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/justify-self-vrl-ltr-vrl.html b/testing/web-platform/tests/css/css-align/abspos/justify-self-vrl-ltr-vrl.html new file mode 100644 index 0000000000..cf2db8d369 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/justify-self-vrl-ltr-vrl.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: vertical-rl; + direction: ltr; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + writing-mode: vertical-rl; + direction: ltr; + position: absolute; + background: green; + inset: 0; +} + +.item::before { + width: 20px; + height: 20px; + content: ''; + display: block; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item" style="justify-self: start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: center;" data-expected-height="20" data-offset-y="10"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: baseline;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: last baseline;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: self-start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: self-end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: left;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: right;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: stretch;" data-expected-height="40" data-offset-y="0"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container"> + <div class="item rtl" style="justify-self: start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: center;" data-expected-height="20" data-offset-y="10"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: baseline;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: last baseline;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: self-start;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: self-end;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: left;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: right;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: stretch;" data-expected-height="40" data-offset-y="0"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/justify-self-vrl-rtl-htb.html b/testing/web-platform/tests/css/css-align/abspos/justify-self-vrl-rtl-htb.html new file mode 100644 index 0000000000..317e53e92e --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/justify-self-vrl-rtl-htb.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: vertical-rl; + direction: rtl; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + writing-mode: horizontal-tb; + direction: ltr; + position: absolute; + background: green; + inset: 0; +} + +.item::before { + width: 20px; + height: 20px; + content: ''; + display: block; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item" style="justify-self: start;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: center;" data-expected-height="20" data-offset-y="10"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: end;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: baseline;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: last baseline;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: self-start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: self-end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: left;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: right;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: stretch;" data-expected-height="40" data-offset-y="0"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container"> + <div class="item rtl" style="justify-self: start;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: center;" data-expected-height="20" data-offset-y="10"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: end;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: baseline;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: last baseline;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: self-start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: self-end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: left;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: right;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: stretch;" data-expected-height="40" data-offset-y="0"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/justify-self-vrl-rtl-vlr.html b/testing/web-platform/tests/css/css-align/abspos/justify-self-vrl-rtl-vlr.html new file mode 100644 index 0000000000..2d144d16aa --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/justify-self-vrl-rtl-vlr.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: vertical-rl; + direction: rtl; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + writing-mode: vertical-lr; + direction: ltr; + position: absolute; + background: green; + inset: 0; +} + +.item::before { + width: 20px; + height: 20px; + content: ''; + display: block; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item" style="justify-self: start;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: center;" data-expected-height="20" data-offset-y="10"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: end;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: baseline;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: last baseline;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: self-start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: self-end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: left;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: right;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: stretch;" data-expected-height="40" data-offset-y="0"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container"> + <div class="item rtl" style="justify-self: start;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: center;" data-expected-height="20" data-offset-y="10"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: end;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: baseline;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: last baseline;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: self-start;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: self-end;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: left;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: right;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: stretch;" data-expected-height="40" data-offset-y="0"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/justify-self-vrl-rtl-vrl.html b/testing/web-platform/tests/css/css-align/abspos/justify-self-vrl-rtl-vrl.html new file mode 100644 index 0000000000..026c6e9681 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/justify-self-vrl-rtl-vrl.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: vertical-rl; + direction: rtl; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + writing-mode: vertical-rl; + direction: ltr; + position: absolute; + background: green; + inset: 0; +} + +.item::before { + width: 20px; + height: 20px; + content: ''; + display: block; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item" style="justify-self: start;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: center;" data-expected-height="20" data-offset-y="10"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: end;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: baseline;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: last baseline;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: self-start;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: self-end;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: left;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: right;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: stretch;" data-expected-height="40" data-offset-y="0"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container"> + <div class="item rtl" style="justify-self: start;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: center;" data-expected-height="20" data-offset-y="10"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: end;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: baseline;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: last baseline;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: self-start;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: self-end;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: left;" data-expected-height="20" data-offset-y="0"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: right;" data-expected-height="20" data-offset-y="20"></div> +</div> + +<div class="container"> + <div class="item rtl" style="justify-self: stretch;" data-expected-height="40" data-offset-y="0"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/safe-align-self-htb.html b/testing/web-platform/tests/css/css-align/abspos/safe-align-self-htb.html new file mode 100644 index 0000000000..9e259c1e63 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/safe-align-self-htb.html @@ -0,0 +1,149 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: horizontal-tb; + direction: ltr; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + position: absolute; + background: green; + inset: 5px; + margin: 10px; + width: 30px; + height: 30px; +} + +.safe { + align-self: safe end; +} +.unsafe { + align-self: unsafe end; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item safe" style="writing-mode: horizontal-tb; direction: ltr;" data-offset-y="15"></div> +</div> + +<div class="container"> + <div class="item safe" style="writing-mode: horizontal-tb; direction: rtl;" data-offset-y="15"></div> +</div> + +<div class="container"> + <div class="item safe" style="writing-mode: veritcal-rl; direction: ltr;" data-offset-y="15"></div> +</div> + +<div class="container"> + <div class="item safe" style="writing-mode: vertical-rl; direction: rtl;" data-offset-y="15"></div> +</div> + +<div class="container"> + <div class="item safe" style="writing-mode: vertical-lr; direction: ltr;" data-offset-y="15"></div> +</div> + +<div class="container"> + <div class="item safe" style="writing-mode: vertical-lr; direction: rtl;" data-offset-y="15"></div> +</div> + +<!-- UNSAFE --> +<br> + +<div class="container"> + <div class="item unsafe" style="writing-mode: horizontal-tb; direction: ltr;" data-offset-y="-5"></div> +</div> + +<div class="container"> + <div class="item unsafe" style="writing-mode: horizontal-tb; direction: rtl;" data-offset-y="-5"></div> +</div> + +<div class="container"> + <div class="item unsafe" style="writing-mode: veritcal-rl; direction: ltr;" data-offset-y="-5"></div> +</div> + +<div class="container"> + <div class="item unsafe" style="writing-mode: vertical-rl; direction: rtl;" data-offset-y="-5"></div> +</div> + +<div class="container"> + <div class="item unsafe" style="writing-mode: vertical-lr; direction: ltr;" data-offset-y="-5"></div> +</div> + +<div class="container"> + <div class="item unsafe" style="writing-mode: vertical-lr; direction: rtl;" data-offset-y="-5"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container rtl"> + <div class="item safe" style="writing-mode: horizontal-tb; direction: ltr;" data-offset-y="15"></div> +</div> + +<div class="container rtl"> + <div class="item safe" style="writing-mode: horizontal-tb; direction: rtl;" data-offset-y="15"></div> +</div> + +<div class="container rtl"> + <div class="item safe" style="writing-mode: veritcal-rl; direction: ltr;" data-offset-y="15"></div> +</div> + +<div class="container rtl"> + <div class="item safe" style="writing-mode: vertical-rl; direction: rtl;" data-offset-y="15"></div> +</div> + +<div class="container rtl"> + <div class="item safe" style="writing-mode: vertical-lr; direction: ltr;" data-offset-y="15"></div> +</div> + +<div class="container rtl"> + <div class="item safe" style="writing-mode: vertical-lr; direction: rtl;" data-offset-y="15"></div> +</div> + +<!-- UNSAFE RTL --> +<br> + +<div class="container rtl"> + <div class="item unsafe" style="writing-mode: horizontal-tb; direction: ltr;" data-offset-y="-5"></div> +</div> + +<div class="container rtl"> + <div class="item unsafe" style="writing-mode: horizontal-tb; direction: rtl;" data-offset-y="-5"></div> +</div> + +<div class="container rtl"> + <div class="item unsafe" style="writing-mode: veritcal-rl; direction: ltr;" data-offset-y="-5"></div> +</div> + +<div class="container rtl"> + <div class="item unsafe" style="writing-mode: vertical-rl; direction: rtl;" data-offset-y="-5"></div> +</div> + +<div class="container rtl"> + <div class="item unsafe" style="writing-mode: vertical-lr; direction: ltr;" data-offset-y="-5"></div> +</div> + +<div class="container rtl"> + <div class="item unsafe" style="writing-mode: vertical-lr; direction: rtl;" data-offset-y="-5"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/safe-align-self-vlr.html b/testing/web-platform/tests/css/css-align/abspos/safe-align-self-vlr.html new file mode 100644 index 0000000000..d47b1836d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/safe-align-self-vlr.html @@ -0,0 +1,149 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: vertical-lr; + direction: ltr; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + position: absolute; + background: green; + inset: 5px; + margin: 10px; + width: 30px; + height: 30px; +} + +.safe { + align-self: safe end; +} +.unsafe { + align-self: unsafe end; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item safe" style="writing-mode: horizontal-tb; direction: ltr;" data-offset-x="15"></div> +</div> + +<div class="container"> + <div class="item safe" style="writing-mode: horizontal-tb; direction: rtl;" data-offset-x="15"></div> +</div> + +<div class="container"> + <div class="item safe" style="writing-mode: veritcal-rl; direction: ltr;" data-offset-x="15"></div> +</div> + +<div class="container"> + <div class="item safe" style="writing-mode: vertical-rl; direction: rtl;" data-offset-x="15"></div> +</div> + +<div class="container"> + <div class="item safe" style="writing-mode: vertical-lr; direction: ltr;" data-offset-x="15"></div> +</div> + +<div class="container"> + <div class="item safe" style="writing-mode: vertical-lr; direction: rtl;" data-offset-x="15"></div> +</div> + +<!-- UNSAFE --> +<br> + +<div class="container"> + <div class="item unsafe" style="writing-mode: horizontal-tb; direction: ltr;" data-offset-x="-5"></div> +</div> + +<div class="container"> + <div class="item unsafe" style="writing-mode: horizontal-tb; direction: rtl;" data-offset-x="-5"></div> +</div> + +<div class="container"> + <div class="item unsafe" style="writing-mode: veritcal-rl; direction: ltr;" data-offset-x="-5"></div> +</div> + +<div class="container"> + <div class="item unsafe" style="writing-mode: vertical-rl; direction: rtl;" data-offset-x="-5"></div> +</div> + +<div class="container"> + <div class="item unsafe" style="writing-mode: vertical-lr; direction: ltr;" data-offset-x="-5"></div> +</div> + +<div class="container"> + <div class="item unsafe" style="writing-mode: vertical-lr; direction: rtl;" data-offset-x="-5"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container rtl"> + <div class="item safe" style="writing-mode: horizontal-tb; direction: ltr;" data-offset-x="15"></div> +</div> + +<div class="container rtl"> + <div class="item safe" style="writing-mode: horizontal-tb; direction: rtl;" data-offset-x="15"></div> +</div> + +<div class="container rtl"> + <div class="item safe" style="writing-mode: veritcal-rl; direction: ltr;" data-offset-x="15"></div> +</div> + +<div class="container rtl"> + <div class="item safe" style="writing-mode: vertical-rl; direction: rtl;" data-offset-x="15"></div> +</div> + +<div class="container rtl"> + <div class="item safe" style="writing-mode: vertical-lr; direction: ltr;" data-offset-x="15"></div> +</div> + +<div class="container rtl"> + <div class="item safe" style="writing-mode: vertical-lr; direction: rtl;" data-offset-x="15"></div> +</div> + +<!-- UNSAFE RTL --> +<br> + +<div class="container rtl"> + <div class="item unsafe" style="writing-mode: horizontal-tb; direction: ltr;" data-offset-x="-5"></div> +</div> + +<div class="container rtl"> + <div class="item unsafe" style="writing-mode: horizontal-tb; direction: rtl;" data-offset-x="-5"></div> +</div> + +<div class="container rtl"> + <div class="item unsafe" style="writing-mode: veritcal-rl; direction: ltr;" data-offset-x="-5"></div> +</div> + +<div class="container rtl"> + <div class="item unsafe" style="writing-mode: vertical-rl; direction: rtl;" data-offset-x="-5"></div> +</div> + +<div class="container rtl"> + <div class="item unsafe" style="writing-mode: vertical-lr; direction: ltr;" data-offset-x="-5"></div> +</div> + +<div class="container rtl"> + <div class="item unsafe" style="writing-mode: vertical-lr; direction: rtl;" data-offset-x="-5"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/safe-align-self-vrl.html b/testing/web-platform/tests/css/css-align/abspos/safe-align-self-vrl.html new file mode 100644 index 0000000000..3432762007 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/safe-align-self-vrl.html @@ -0,0 +1,149 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: vertical-rl; + direction: ltr; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + position: absolute; + background: green; + inset: 5px; + margin: 10px; + width: 30px; + height: 30px; +} + +.safe { + align-self: safe end; +} +.unsafe { + align-self: unsafe end; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item safe" style="writing-mode: horizontal-tb; direction: ltr;" data-offset-x="-5"></div> +</div> + +<div class="container"> + <div class="item safe" style="writing-mode: horizontal-tb; direction: rtl;" data-offset-x="-5"></div> +</div> + +<div class="container"> + <div class="item safe" style="writing-mode: veritcal-rl; direction: ltr;" data-offset-x="-5"></div> +</div> + +<div class="container"> + <div class="item safe" style="writing-mode: vertical-rl; direction: rtl;" data-offset-x="-5"></div> +</div> + +<div class="container"> + <div class="item safe" style="writing-mode: vertical-lr; direction: ltr;" data-offset-x="-5"></div> +</div> + +<div class="container"> + <div class="item safe" style="writing-mode: vertical-lr; direction: rtl;" data-offset-x="-5"></div> +</div> + +<!-- UNSAFE --> +<br> + +<div class="container"> + <div class="item unsafe" style="writing-mode: horizontal-tb; direction: ltr;" data-offset-x="15"></div> +</div> + +<div class="container"> + <div class="item unsafe" style="writing-mode: horizontal-tb; direction: rtl;" data-offset-x="15"></div> +</div> + +<div class="container"> + <div class="item unsafe" style="writing-mode: veritcal-rl; direction: ltr;" data-offset-x="15"></div> +</div> + +<div class="container"> + <div class="item unsafe" style="writing-mode: vertical-rl; direction: rtl;" data-offset-x="15"></div> +</div> + +<div class="container"> + <div class="item unsafe" style="writing-mode: vertical-lr; direction: ltr;" data-offset-x="15"></div> +</div> + +<div class="container"> + <div class="item unsafe" style="writing-mode: vertical-lr; direction: rtl;" data-offset-x="15"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container rtl"> + <div class="item safe" style="writing-mode: horizontal-tb; direction: ltr;" data-offset-x="-5"></div> +</div> + +<div class="container rtl"> + <div class="item safe" style="writing-mode: horizontal-tb; direction: rtl;" data-offset-x="-5"></div> +</div> + +<div class="container rtl"> + <div class="item safe" style="writing-mode: veritcal-rl; direction: ltr;" data-offset-x="-5"></div> +</div> + +<div class="container rtl"> + <div class="item safe" style="writing-mode: vertical-rl; direction: rtl;" data-offset-x="-5"></div> +</div> + +<div class="container rtl"> + <div class="item safe" style="writing-mode: vertical-lr; direction: ltr;" data-offset-x="-5"></div> +</div> + +<div class="container rtl"> + <div class="item safe" style="writing-mode: vertical-lr; direction: rtl;" data-offset-x="-5"></div> +</div> + +<!-- UNSAFE RTL --> +<br> + +<div class="container rtl"> + <div class="item unsafe" style="writing-mode: horizontal-tb; direction: ltr;" data-offset-x="15"></div> +</div> + +<div class="container rtl"> + <div class="item unsafe" style="writing-mode: horizontal-tb; direction: rtl;" data-offset-x="15"></div> +</div> + +<div class="container rtl"> + <div class="item unsafe" style="writing-mode: veritcal-rl; direction: ltr;" data-offset-x="15"></div> +</div> + +<div class="container rtl"> + <div class="item unsafe" style="writing-mode: vertical-rl; direction: rtl;" data-offset-x="15"></div> +</div> + +<div class="container rtl"> + <div class="item unsafe" style="writing-mode: vertical-lr; direction: ltr;" data-offset-x="15"></div> +</div> + +<div class="container rtl"> + <div class="item unsafe" style="writing-mode: vertical-lr; direction: rtl;" data-offset-x="15"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/safe-justify-self-htb.html b/testing/web-platform/tests/css/css-align/abspos/safe-justify-self-htb.html new file mode 100644 index 0000000000..0fa5cc34d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/safe-justify-self-htb.html @@ -0,0 +1,149 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: horizontal-tb; + direction: ltr; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + position: absolute; + background: green; + inset: 5px; + margin: 10px; + width: 30px; + height: 30px; +} + +.safe { + justify-self: safe end; +} +.unsafe { + justify-self: unsafe end; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item safe" style="writing-mode: horizontal-tb; direction: ltr;" data-offset-x="15"></div> +</div> + +<div class="container"> + <div class="item safe" style="writing-mode: horizontal-tb; direction: rtl;" data-offset-x="15"></div> +</div> + +<div class="container"> + <div class="item safe" style="writing-mode: veritcal-rl; direction: ltr;" data-offset-x="15"></div> +</div> + +<div class="container"> + <div class="item safe" style="writing-mode: vertical-rl; direction: rtl;" data-offset-x="15"></div> +</div> + +<div class="container"> + <div class="item safe" style="writing-mode: vertical-lr; direction: ltr;" data-offset-x="15"></div> +</div> + +<div class="container"> + <div class="item safe" style="writing-mode: vertical-lr; direction: rtl;" data-offset-x="15"></div> +</div> + +<!-- UNSAFE --> +<br> + +<div class="container"> + <div class="item unsafe" style="writing-mode: horizontal-tb; direction: ltr;" data-offset-x="-5"></div> +</div> + +<div class="container"> + <div class="item unsafe" style="writing-mode: horizontal-tb; direction: rtl;" data-offset-x="-5"></div> +</div> + +<div class="container"> + <div class="item unsafe" style="writing-mode: veritcal-rl; direction: ltr;" data-offset-x="-5"></div> +</div> + +<div class="container"> + <div class="item unsafe" style="writing-mode: vertical-rl; direction: rtl;" data-offset-x="-5"></div> +</div> + +<div class="container"> + <div class="item unsafe" style="writing-mode: vertical-lr; direction: ltr;" data-offset-x="-5"></div> +</div> + +<div class="container"> + <div class="item unsafe" style="writing-mode: vertical-lr; direction: rtl;" data-offset-x="-5"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container rtl"> + <div class="item safe" style="writing-mode: horizontal-tb; direction: ltr;" data-offset-x="-5"></div> +</div> + +<div class="container rtl"> + <div class="item safe" style="writing-mode: horizontal-tb; direction: rtl;" data-offset-x="-5"></div> +</div> + +<div class="container rtl"> + <div class="item safe" style="writing-mode: veritcal-rl; direction: ltr;" data-offset-x="-5"></div> +</div> + +<div class="container rtl"> + <div class="item safe" style="writing-mode: vertical-rl; direction: rtl;" data-offset-x="-5"></div> +</div> + +<div class="container rtl"> + <div class="item safe" style="writing-mode: vertical-lr; direction: ltr;" data-offset-x="-5"></div> +</div> + +<div class="container rtl"> + <div class="item safe" style="writing-mode: vertical-lr; direction: rtl;" data-offset-x="-5"></div> +</div> + +<!-- UNSAFE RTL --> +<br> + +<div class="container rtl"> + <div class="item unsafe" style="writing-mode: horizontal-tb; direction: ltr;" data-offset-x="15"></div> +</div> + +<div class="container rtl"> + <div class="item unsafe" style="writing-mode: horizontal-tb; direction: rtl;" data-offset-x="15"></div> +</div> + +<div class="container rtl"> + <div class="item unsafe" style="writing-mode: veritcal-rl; direction: ltr;" data-offset-x="15"></div> +</div> + +<div class="container rtl"> + <div class="item unsafe" style="writing-mode: vertical-rl; direction: rtl;" data-offset-x="15"></div> +</div> + +<div class="container rtl"> + <div class="item unsafe" style="writing-mode: vertical-lr; direction: ltr;" data-offset-x="15"></div> +</div> + +<div class="container rtl"> + <div class="item unsafe" style="writing-mode: vertical-lr; direction: rtl;" data-offset-x="15"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/safe-justify-self-vlr.html b/testing/web-platform/tests/css/css-align/abspos/safe-justify-self-vlr.html new file mode 100644 index 0000000000..7554975f1b --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/safe-justify-self-vlr.html @@ -0,0 +1,149 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: vertical-lr; + direction: ltr; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + position: absolute; + background: green; + inset: 5px; + margin: 10px; + width: 30px; + height: 30px; +} + +.safe { + justify-self: safe end; +} +.unsafe { + justify-self: unsafe end; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item safe" style="writing-mode: horizontal-tb; direction: ltr;" data-offset-y="15"></div> +</div> + +<div class="container"> + <div class="item safe" style="writing-mode: horizontal-tb; direction: rtl;" data-offset-y="15"></div> +</div> + +<div class="container"> + <div class="item safe" style="writing-mode: veritcal-rl; direction: ltr;" data-offset-y="15"></div> +</div> + +<div class="container"> + <div class="item safe" style="writing-mode: vertical-rl; direction: rtl;" data-offset-y="15"></div> +</div> + +<div class="container"> + <div class="item safe" style="writing-mode: vertical-lr; direction: ltr;" data-offset-y="15"></div> +</div> + +<div class="container"> + <div class="item safe" style="writing-mode: vertical-lr; direction: rtl;" data-offset-y="15"></div> +</div> + +<!-- UNSAFE --> +<br> + +<div class="container"> + <div class="item unsafe" style="writing-mode: horizontal-tb; direction: ltr;" data-offset-y="-5"></div> +</div> + +<div class="container"> + <div class="item unsafe" style="writing-mode: horizontal-tb; direction: rtl;" data-offset-y="-5"></div> +</div> + +<div class="container"> + <div class="item unsafe" style="writing-mode: veritcal-rl; direction: ltr;" data-offset-y="-5"></div> +</div> + +<div class="container"> + <div class="item unsafe" style="writing-mode: vertical-rl; direction: rtl;" data-offset-y="-5"></div> +</div> + +<div class="container"> + <div class="item unsafe" style="writing-mode: vertical-lr; direction: ltr;" data-offset-y="-5"></div> +</div> + +<div class="container"> + <div class="item unsafe" style="writing-mode: vertical-lr; direction: rtl;" data-offset-y="-5"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container rtl"> + <div class="item safe" style="writing-mode: horizontal-tb; direction: ltr;" data-offset-y="-5"></div> +</div> + +<div class="container rtl"> + <div class="item safe" style="writing-mode: horizontal-tb; direction: rtl;" data-offset-y="-5"></div> +</div> + +<div class="container rtl"> + <div class="item safe" style="writing-mode: veritcal-rl; direction: ltr;" data-offset-y="-5"></div> +</div> + +<div class="container rtl"> + <div class="item safe" style="writing-mode: vertical-rl; direction: rtl;" data-offset-y="-5"></div> +</div> + +<div class="container rtl"> + <div class="item safe" style="writing-mode: vertical-lr; direction: ltr;" data-offset-y="-5"></div> +</div> + +<div class="container rtl"> + <div class="item safe" style="writing-mode: vertical-lr; direction: rtl;" data-offset-y="-5"></div> +</div> + +<!-- UNSAFE RTL --> +<br> + +<div class="container rtl"> + <div class="item unsafe" style="writing-mode: horizontal-tb; direction: ltr;" data-offset-y="15"></div> +</div> + +<div class="container rtl"> + <div class="item unsafe" style="writing-mode: horizontal-tb; direction: rtl;" data-offset-y="15"></div> +</div> + +<div class="container rtl"> + <div class="item unsafe" style="writing-mode: veritcal-rl; direction: ltr;" data-offset-y="15"></div> +</div> + +<div class="container rtl"> + <div class="item unsafe" style="writing-mode: vertical-rl; direction: rtl;" data-offset-y="15"></div> +</div> + +<div class="container rtl"> + <div class="item unsafe" style="writing-mode: vertical-lr; direction: ltr;" data-offset-y="15"></div> +</div> + +<div class="container rtl"> + <div class="item unsafe" style="writing-mode: vertical-lr; direction: rtl;" data-offset-y="15"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/safe-justify-self-vrl.html b/testing/web-platform/tests/css/css-align/abspos/safe-justify-self-vrl.html new file mode 100644 index 0000000000..fe2405cf79 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/safe-justify-self-vrl.html @@ -0,0 +1,149 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: vertical-rl; + direction: ltr; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + position: absolute; + background: green; + inset: 5px; + margin: 10px; + width: 30px; + height: 30px; +} + +.safe { + justify-self: safe end; +} +.unsafe { + justify-self: unsafe end; +} + +.rtl { + direction: rtl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<div class="container"> + <div class="item safe" style="writing-mode: horizontal-tb; direction: ltr;" data-offset-y="15"></div> +</div> + +<div class="container"> + <div class="item safe" style="writing-mode: horizontal-tb; direction: rtl;" data-offset-y="15"></div> +</div> + +<div class="container"> + <div class="item safe" style="writing-mode: veritcal-rl; direction: ltr;" data-offset-y="15"></div> +</div> + +<div class="container"> + <div class="item safe" style="writing-mode: vertical-rl; direction: rtl;" data-offset-y="15"></div> +</div> + +<div class="container"> + <div class="item safe" style="writing-mode: vertical-lr; direction: ltr;" data-offset-y="15"></div> +</div> + +<div class="container"> + <div class="item safe" style="writing-mode: vertical-lr; direction: rtl;" data-offset-y="15"></div> +</div> + +<!-- UNSAFE --> +<br> + +<div class="container"> + <div class="item unsafe" style="writing-mode: horizontal-tb; direction: ltr;" data-offset-y="-5"></div> +</div> + +<div class="container"> + <div class="item unsafe" style="writing-mode: horizontal-tb; direction: rtl;" data-offset-y="-5"></div> +</div> + +<div class="container"> + <div class="item unsafe" style="writing-mode: veritcal-rl; direction: ltr;" data-offset-y="-5"></div> +</div> + +<div class="container"> + <div class="item unsafe" style="writing-mode: vertical-rl; direction: rtl;" data-offset-y="-5"></div> +</div> + +<div class="container"> + <div class="item unsafe" style="writing-mode: vertical-lr; direction: ltr;" data-offset-y="-5"></div> +</div> + +<div class="container"> + <div class="item unsafe" style="writing-mode: vertical-lr; direction: rtl;" data-offset-y="-5"></div> +</div> + +<!-- RTL --> +<br> + +<div class="container rtl"> + <div class="item safe" style="writing-mode: horizontal-tb; direction: ltr;" data-offset-y="-5"></div> +</div> + +<div class="container rtl"> + <div class="item safe" style="writing-mode: horizontal-tb; direction: rtl;" data-offset-y="-5"></div> +</div> + +<div class="container rtl"> + <div class="item safe" style="writing-mode: veritcal-rl; direction: ltr;" data-offset-y="-5"></div> +</div> + +<div class="container rtl"> + <div class="item safe" style="writing-mode: vertical-rl; direction: rtl;" data-offset-y="-5"></div> +</div> + +<div class="container rtl"> + <div class="item safe" style="writing-mode: vertical-lr; direction: ltr;" data-offset-y="-5"></div> +</div> + +<div class="container rtl"> + <div class="item safe" style="writing-mode: vertical-lr; direction: rtl;" data-offset-y="-5"></div> +</div> + +<!-- UNSAFE RTL --> +<br> + +<div class="container rtl"> + <div class="item unsafe" style="writing-mode: horizontal-tb; direction: ltr;" data-offset-y="15"></div> +</div> + +<div class="container rtl"> + <div class="item unsafe" style="writing-mode: horizontal-tb; direction: rtl;" data-offset-y="15"></div> +</div> + +<div class="container rtl"> + <div class="item unsafe" style="writing-mode: veritcal-rl; direction: ltr;" data-offset-y="15"></div> +</div> + +<div class="container rtl"> + <div class="item unsafe" style="writing-mode: vertical-rl; direction: rtl;" data-offset-y="15"></div> +</div> + +<div class="container rtl"> + <div class="item unsafe" style="writing-mode: vertical-lr; direction: ltr;" data-offset-y="15"></div> +</div> + +<div class="container rtl"> + <div class="item unsafe" style="writing-mode: vertical-lr; direction: rtl;" data-offset-y="15"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/stretch-intrinsic-size-htb-htb.html b/testing/web-platform/tests/css/css-align/abspos/stretch-intrinsic-size-htb-htb.html new file mode 100644 index 0000000000..dc7df332e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/stretch-intrinsic-size-htb-htb.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: horizontal-tb; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 60px; + height: 60px; +} + +.item { + writing-mode: horizontal-tb; + position: absolute; + background: green; + inset: 5px 10px 5px 10px; +} + +.child::before { + aspect-ratio: 1/1; + min-width: 20px; + min-height: 20px; + width: 100%; + height: 100%; + content: ''; + display: block; +} + +.ar { + aspect-ratio: 1/1; + min-width: 20px; + min-height: 20px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<body> + +<div class="container"> + <div class="item child" style="justify-self: start; align-self: start;" data-expected-width="20" data-expected-height="20"></div> +</div> + +<div class="container"> + <div class="item child" style="justify-self: stretch; align-self: start;" data-expected-width="40" data-expected-height="40"></div> +</div> + +<div class="container"> + <div class="item child" style="justify-self: start; align-self: stretch;" data-expected-width="50" data-expected-height="50"></div> +</div> + +<div class="container"> + <div class="item child" style="justify-self: stretch; align-self: stretch;" data-expected-width="40" data-expected-height="50"></div> +</div> + +<br> + +<div class="container"> + <div class="item ar" style="justify-self: start; align-self: start;" data-expected-width="20" data-expected-height="20"></div> +</div> + +<div class="container"> + <div class="item ar" style="justify-self: stretch; align-self: start;" data-expected-width="40" data-expected-height="40"></div> +</div> + +<div class="container"> + <div class="item ar" style="justify-self: start; align-self: stretch;" data-expected-width="50" data-expected-height="50"></div> +</div> + +<div class="container"> + <div class="item ar" style="justify-self: stretch; align-self: stretch;" data-expected-width="40" data-expected-height="50"></div> +</div> + +<br> + +<div class="container"> + <canvas width="10" height="10" class="item" style="justify-self: start; align-self: start;" data-expected-width="10" data-expected-height="10"></canvas> +</div> + +<div class="container"> + <canvas width="10" height="10" class="item" style="justify-self: stretch; align-self: start;" data-expected-width="40" data-expected-height="40"></canvas> +</div> + +<div class="container"> + <canvas width="10" height="10" class="item" style="justify-self: start; align-self: stretch;" data-expected-width="50" data-expected-height="50"></canvas> +</div> + +<div class="container"> + <canvas width="10" height="10" class="item" style="justify-self: stretch; align-self: stretch;" data-expected-width="40" data-expected-height="50"></canvas> +</div> diff --git a/testing/web-platform/tests/css/css-align/abspos/stretch-intrinsic-size-htb-vrl.html b/testing/web-platform/tests/css/css-align/abspos/stretch-intrinsic-size-htb-vrl.html new file mode 100644 index 0000000000..cd2c9b9abc --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/stretch-intrinsic-size-htb-vrl.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: horizontal-tb; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 60px; + height: 60px; +} + +.item { + writing-mode: vertical-rl; + position: absolute; + background: green; + inset: 5px 10px 5px 10px; +} + +.item::before { + aspect-ratio: 1/1; + min-width: 20px; + min-height: 20px; + width: 100%; + height: 100%; + content: ''; + display: block; +} + +.ar { + aspect-ratio: 1/1; + min-width: 20px; + min-height: 20px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<body> + +<div class="container"> + <div class="item" style="justify-self: start; align-self: start;" data-expected-width="20" data-expected-height="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: stretch; align-self: start;" data-expected-width="40" data-expected-height="40"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: start; align-self: stretch;" data-expected-width="50" data-expected-height="50"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: stretch; align-self: stretch;" data-expected-width="40" data-expected-height="50"></div> +</div> + +<br> + +<div class="container"> + <div class="item ar" style="justify-self: start; align-self: start;" data-expected-width="20" data-expected-height="20"></div> +</div> + +<div class="container"> + <div class="item ar" style="justify-self: stretch; align-self: start;" data-expected-width="40" data-expected-height="40"></div> +</div> + +<div class="container"> + <div class="item ar" style="justify-self: start; align-self: stretch;" data-expected-width="50" data-expected-height="50"></div> +</div> + +<div class="container"> + <div class="item ar" style="justify-self: stretch; align-self: stretch;" data-expected-width="40" data-expected-height="50"></div> +</div> + +<br> + +<div class="container"> + <canvas width="10" height="10" class="item" style="justify-self: start; align-self: start;" data-expected-width="10" data-expected-height="10"></canvas> +</div> + +<div class="container"> + <canvas width="10" height="10" class="item" style="justify-self: stretch; align-self: start;" data-expected-width="40" data-expected-height="40"></canvas> +</div> + +<div class="container"> + <canvas width="10" height="10" class="item" style="justify-self: start; align-self: stretch;" data-expected-width="50" data-expected-height="50"></canvas> +</div> + +<div class="container"> + <canvas width="10" height="10" class="item" style="justify-self: stretch; align-self: stretch;" data-expected-width="40" data-expected-height="50"></canvas> +</div> diff --git a/testing/web-platform/tests/css/css-align/abspos/stretch-intrinsic-size-vrl-htb.html b/testing/web-platform/tests/css/css-align/abspos/stretch-intrinsic-size-vrl-htb.html new file mode 100644 index 0000000000..7b1002191f --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/stretch-intrinsic-size-vrl-htb.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: vertical-rl; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 60px; + height: 60px; +} + +.item { + writing-mode: horizontal-tb; + position: absolute; + background: green; + inset: 5px 10px 5px 10px; +} + +.item::before { + aspect-ratio: 1/1; + min-width: 20px; + min-height: 20px; + width: 100%; + height: 100%; + content: ''; + display: block; +} + +.ar { + aspect-ratio: 1/1; + min-width: 20px; + min-height: 20px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<body> + +<div class="container"> + <div class="item" style="justify-self: start; align-self: start;" data-expected-width="20" data-expected-height="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: stretch; align-self: start;" data-expected-width="50" data-expected-height="50"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: start; align-self: stretch;" data-expected-width="40" data-expected-height="40"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: stretch; align-self: stretch;" data-expected-width="40" data-expected-height="50"></div> +</div> + +<br> + +<div class="container"> + <div class="item ar" style="justify-self: start; align-self: start;" data-expected-width="20" data-expected-height="20"></div> +</div> + +<div class="container"> + <div class="item ar" style="justify-self: stretch; align-self: start;" data-expected-width="50" data-expected-height="50"></div> +</div> + +<div class="container"> + <div class="item ar" style="justify-self: start; align-self: stretch;" data-expected-width="40" data-expected-height="40"></div> +</div> + +<div class="container"> + <div class="item ar" style="justify-self: stretch; align-self: stretch;" data-expected-width="40" data-expected-height="50"></div> +</div> + +<br> + +<div class="container"> + <canvas width="10" height="10" class="item" style="justify-self: start; align-self: start;" data-expected-width="10" data-expected-height="10"></canvas> +</div> + +<div class="container"> + <canvas width="10" height="10" class="item" style="justify-self: stretch; align-self: start;" data-expected-width="50" data-expected-height="50"></canvas> +</div> + +<div class="container"> + <canvas width="10" height="10" class="item" style="justify-self: start; align-self: stretch;" data-expected-width="40" data-expected-height="40"></canvas> +</div> + +<div class="container"> + <canvas width="10" height="10" class="item" style="justify-self: stretch; align-self: stretch;" data-expected-width="40" data-expected-height="50"></canvas> +</div> diff --git a/testing/web-platform/tests/css/css-align/abspos/stretch-intrinsic-size-vrl-vrl.html b/testing/web-platform/tests/css/css-align/abspos/stretch-intrinsic-size-vrl-vrl.html new file mode 100644 index 0000000000..10f11a9f12 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/stretch-intrinsic-size-vrl-vrl.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: vertical-rl; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 60px; + height: 60px; +} + +.item { + writing-mode: vertical-rl; + position: absolute; + background: green; + inset: 5px 10px 5px 10px; +} + +.item::before { + aspect-ratio: 1/1; + min-width: 20px; + min-height: 20px; + width: 100%; + height: 100%; + content: ''; + display: block; +} + +.ar { + aspect-ratio: 1/1; + min-width: 20px; + min-height: 20px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<body> + +<div class="container"> + <div class="item" style="justify-self: start; align-self: start;" data-expected-width="20" data-expected-height="20"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: stretch; align-self: start;" data-expected-width="50" data-expected-height="50"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: start; align-self: stretch;" data-expected-width="40" data-expected-height="40"></div> +</div> + +<div class="container"> + <div class="item" style="justify-self: stretch; align-self: stretch;" data-expected-width="40" data-expected-height="50"></div> +</div> + +<br> + +<div class="container"> + <div class="item ar" style="justify-self: start; align-self: start;" data-expected-width="20" data-expected-height="20"></div> +</div> + +<div class="container"> + <div class="item ar" style="justify-self: stretch; align-self: start;" data-expected-width="50" data-expected-height="50"></div> +</div> + +<div class="container"> + <div class="item ar" style="justify-self: start; align-self: stretch;" data-expected-width="40" data-expected-height="40"></div> +</div> + +<div class="container"> + <div class="item ar" style="justify-self: stretch; align-self: stretch;" data-expected-width="40" data-expected-height="50"></div> +</div> + +<br> + +<div class="container"> + <canvas width="10" height="10" class="item" style="justify-self: start; align-self: start;" data-expected-width="10" data-expected-height="10"></canvas> +</div> + +<div class="container"> + <canvas width="10" height="10" class="item" style="justify-self: stretch; align-self: start;" data-expected-width="50" data-expected-height="50"></canvas> +</div> + +<div class="container"> + <canvas width="10" height="10" class="item" style="justify-self: start; align-self: stretch;" data-expected-width="40" data-expected-height="40"></canvas> +</div> + +<div class="container"> + <canvas width="10" height="10" class="item" style="justify-self: stretch; align-self: stretch;" data-expected-width="40" data-expected-height="50"></canvas> +</div> diff --git a/testing/web-platform/tests/css/css-align/abspos/table-align-self-stretch.html b/testing/web-platform/tests/css/css-align/abspos/table-align-self-stretch.html new file mode 100644 index 0000000000..bedd0a5695 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/table-align-self-stretch.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: horizontal-tb; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + writing-mode: horizontal-tb; + position: absolute; + background: green; + inset: 5px; + align-self: stretch; + display: table; +} + +.item::before { + content: ''; + display: block; + width: 10px; + height: 20px; +} + +.big::before { + width: 50px; + height: 60px; +} + +.vrl { + writing-mode: vertical-rl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<body> + +<div class="container"> + <div class="item" data-expected-width="10" data-expected-height="30"></div> +</div> + +<div class="container"> + <div class="item big" data-expected-width="50" data-expected-height="60"></div> +</div> + +<div class="container"> + <div class="item vrl" data-expected-width="10" data-expected-height="30"></div> +</div> + +<div class="container"> + <div class="item big vrl" data-expected-width="50" data-expected-height="60"></div> +</div> + +<br> + +<div class="container vrl"> + <div class="item" data-expected-width="30" data-expected-height="20"></div> +</div> + +<div class="container vrl"> + <div class="item big" data-expected-width="50" data-expected-height="60"></div> +</div> + +<div class="container vrl"> + <div class="item vrl" data-expected-width="30" data-expected-height="20"></div> +</div> + +<div class="container vrl"> + <div class="item big vrl" data-expected-width="50" data-expected-height="60"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/abspos/table-justify-self-stretch.html b/testing/web-platform/tests/css/css-align/abspos/table-justify-self-stretch.html new file mode 100644 index 0000000000..c409b10714 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/abspos/table-justify-self-stretch.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos"> +<style> +body { + margin: 0; +} + +.container { + writing-mode: horizontal-tb; + display: inline-block; + position: relative; + margin: 20px; + border: solid 4px; + width: 40px; + height: 40px; +} + +.item { + writing-mode: horizontal-tb; + position: absolute; + background: green; + inset: 5px; + justify-self: stretch; + display: table; +} + +.item::before { + content: ''; + display: block; + width: 10px; + height: 20px; +} + +.big::before { + width: 50px; + height: 60px; +} + +.vrl { + writing-mode: vertical-rl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.item')"> + +<body> + +<div class="container"> + <div class="item" data-expected-width="30" data-expected-height="20"></div> +</div> + +<div class="container"> + <div class="item big" data-expected-width="50" data-expected-height="60"></div> +</div> + +<div class="container"> + <div class="item vrl" data-expected-width="30" data-expected-height="20"></div> +</div> + +<div class="container"> + <div class="item big vrl" data-expected-width="50" data-expected-height="60"></div> +</div> + +<br> + +<div class="container vrl"> + <div class="item" data-expected-width="10" data-expected-height="30"></div> +</div> + +<div class="container vrl"> + <div class="item big" data-expected-width="50" data-expected-height="60"></div> +</div> + +<div class="container vrl"> + <div class="item vrl" data-expected-width="10" data-expected-height="30"></div> +</div> + +<div class="container vrl"> + <div class="item big vrl" data-expected-width="50" data-expected-height="60"></div> +</div> + |