diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-align')
230 files changed, 19524 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-align/META.yml b/testing/web-platform/tests/css/css-align/META.yml new file mode 100644 index 0000000000..bd26585d9e --- /dev/null +++ b/testing/web-platform/tests/css/css-align/META.yml @@ -0,0 +1,5 @@ +spec: https://drafts.csswg.org/css-align/ +suggested_reviewers: + - dholbert + - emilio + - javifernandez 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> + diff --git a/testing/web-platform/tests/css/css-align/animation/align-no-interpolation.html b/testing/web-platform/tests/css/css-align/animation/align-no-interpolation.html new file mode 100644 index 0000000000..037743bdd3 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/animation/align-no-interpolation.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://github.com/w3c/csswg-drafts/issues/4441"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_no_interpolation({ + property: 'align-content', + from: 'initial', + to: 'baseline' +}); + +test_no_interpolation({ + property: 'align-items', + from: 'initial', + to: 'baseline' +}); + +test_no_interpolation({ + property: 'align-self', + from: 'initial', + to: 'baseline' +}); +</script> diff --git a/testing/web-platform/tests/css/css-align/animation/column-gap-composition.html b/testing/web-platform/tests/css/css-align/animation/column-gap-composition.html new file mode 100644 index 0000000000..0054206cca --- /dev/null +++ b/testing/web-platform/tests/css/css-align/animation/column-gap-composition.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>column-gap composition</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-column-gap"> +<meta name="assert" content="column-gap supports animation by computed value type"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_composition({ + property: 'column-gap', + underlying: '50px', + addFrom: '100px', + addTo: '200px', +}, [ + {at: -0.3, expect: '120px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '200px'}, + {at: 1, expect: '250px'}, + {at: 1.5, expect: '300px'}, +]); + +test_composition({ + property: 'column-gap', + underlying: '100px', + addFrom: '10px', + addTo: '2px', +}, [ + {at: -0.5, expect: '114px'}, + {at: 0, expect: '110px'}, + {at: 0.5, expect: '106px'}, + {at: 1, expect: '102px'}, + {at: 1.5, expect: '98px'}, // Value clamping should happen after composition. +]); + +test_composition({ + property: 'column-gap', + underlying: '50px', + addFrom: '100px', + replaceTo: '200px', +}, [ + {at: -0.3, expect: '135px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '175px'}, + {at: 1, expect: '200px'}, + {at: 1.5, expect: '225px'}, +]); + +test_composition({ + property: 'column-gap', + underlying: '100px', + addFrom: '100px', + addTo: 'normal', +}, [ + {at: -0.3, expect: '200px'}, + {at: 0, expect: '200px'}, + {at: 0.5, expect: 'normal'}, + {at: 1, expect: 'normal'}, + {at: 1.5, expect: 'normal'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-align/animation/column-gap-interpolation.html b/testing/web-platform/tests/css/css-align/animation/column-gap-interpolation.html new file mode 100644 index 0000000000..c2f02d3ba8 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/animation/column-gap-interpolation.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>column-gap interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-column-gap"> +<meta name="assert" content="column-gap supports animation by computed value type"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + column-gap: 90px; +} +.target { + column-count: 2; + column-gap: 10px; +} +.expected div { + opacity: 0.7; +} +.target > div { + height: 20px; + background-color: black; +} +.target.expected > div { + background-color: green; +} +</style> + +<body> +<template id='target-template'> + <div></div><div></div> +</template> +</body> + +<script> +test_interpolation({ + property: 'column-gap', + from: neutralKeyframe, + to: '40px', +}, [ + {at: -0.3, expect: '1px'}, + {at: 0, expect: '10px'}, + {at: 0.3, expect: '19px'}, + {at: 0.6, expect: '28px'}, + {at: 1, expect: '40px'}, + {at: 1.5, expect: '55px'}, +]); + +test_no_interpolation({ + property: 'column-gap', + from: 'initial', + to: '20px', +}); + +test_interpolation({ + property: 'column-gap', + from: 'inherit', + to: '20px', +}, [ + {at: -0.3, expect: '111px'}, + {at: 0, expect: '90px'}, + {at: 0.3, expect: '69px'}, + {at: 0.6, expect: '48px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '0px'}, +]); + +test_no_interpolation({ + property: 'column-gap', + from: 'unset', + to: '20px', +}); + +test_no_interpolation({ + property: 'column-gap', + from: 'normal', + to: '20px', +}); + +test_interpolation({ + property: 'column-gap', + from: '0px', + to: '100px' +}, [ + {at: -0.3, expect: '0'}, // column-gap can't be negative. + {at: 0, expect: '0'}, + {at: 0.3, expect: '30px'}, + {at: 0.6, expect: '60px'}, + {at: 1, expect: '100px'}, + {at: 1.5, expect: '150px'} +]); +</script> diff --git a/testing/web-platform/tests/css/css-align/animation/justify-no-interpolation.html b/testing/web-platform/tests/css/css-align/animation/justify-no-interpolation.html new file mode 100644 index 0000000000..b72ccdc435 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/animation/justify-no-interpolation.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://drafts.csswg.org/css-align/#justify-items-property"> +<link rel=help href="https://drafts.csswg.org/css-align/#justify-self-property"> +<link rel=help href="https://github.com/w3c/csswg-drafts/issues/4441"> +<link rel=help href="https://drafts.csswg.org/css-transitions-2/#transition-property-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_no_interpolation({ + property: 'justify-items', + from: 'initial', + to: 'baseline' +}); + +test_no_interpolation({ + property: 'justify-self', + from: 'initial', + to: 'baseline' +}); +</script> diff --git a/testing/web-platform/tests/css/css-align/animation/row-gap-composition.html b/testing/web-platform/tests/css/css-align/animation/row-gap-composition.html new file mode 100644 index 0000000000..238253adf0 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/animation/row-gap-composition.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>row-gap composition</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-row-gap"> +<meta name="assert" content="row-gap supports animation by computed value type"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_composition({ + property: 'row-gap', + underlying: '50px', + addFrom: '100px', + addTo: '200px', +}, [ + {at: -0.3, expect: '120px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '200px'}, + {at: 1, expect: '250px'}, + {at: 1.5, expect: '300px'}, +]); + +test_composition({ + property: 'row-gap', + underlying: '100px', + addFrom: '10px', + addTo: '2px', +}, [ + {at: -0.5, expect: '114px'}, + {at: 0, expect: '110px'}, + {at: 0.5, expect: '106px'}, + {at: 1, expect: '102px'}, + {at: 1.5, expect: '98px'}, // Value clamping should happen after composition. +]); + +test_composition({ + property: 'row-gap', + underlying: '50px', + addFrom: '100px', + replaceTo: '200px', +}, [ + {at: -0.3, expect: '135px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '175px'}, + {at: 1, expect: '200px'}, + {at: 1.5, expect: '225px'}, +]); + +test_composition({ + property: 'row-gap', + underlying: '100px', + addFrom: '100px', + addTo: 'normal', +}, [ + {at: -0.3, expect: '200px'}, + {at: 0, expect: '200px'}, + {at: 0.5, expect: 'normal'}, + {at: 1, expect: 'normal'}, + {at: 1.5, expect: 'normal'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-align/animation/row-gap-interpolation.html b/testing/web-platform/tests/css/css-align/animation/row-gap-interpolation.html new file mode 100644 index 0000000000..1d85ffa3b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/animation/row-gap-interpolation.html @@ -0,0 +1,93 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>row-gap interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-row-gap"> +<meta name="assert" content="row-gap supports animation by computed value type"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + row-gap: 90px; +} +.target { + row-gap: 10px; +} +.expected div { + opacity: 0.7; +} +.target > div { + height: 20px; + background-color: black; +} +.target.expected > div { + background-color: green; +} +</style> + +<body> +<template id='target-template'> + <div></div><div></div> +</template> +</body> + +<script> +test_interpolation({ + property: 'row-gap', + from: neutralKeyframe, + to: '40px', +}, [ + {at: -0.3, expect: '1px'}, + {at: 0, expect: '10px'}, + {at: 0.3, expect: '19px'}, + {at: 0.6, expect: '28px'}, + {at: 1, expect: '40px'}, + {at: 1.5, expect: '55px'}, +]); + +test_no_interpolation({ + property: 'row-gap', + from: 'initial', + to: '20px', +}); + +test_interpolation({ + property: 'row-gap', + from: 'inherit', + to: '20px', +}, [ + {at: -0.3, expect: '111px'}, + {at: 0, expect: '90px'}, + {at: 0.3, expect: '69px'}, + {at: 0.6, expect: '48px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '0px'}, +]); + +test_no_interpolation({ + property: 'row-gap', + from: 'unset', + to: '20px', +}); + +test_no_interpolation({ + property: 'row-gap', + from: 'normal', + to: '20px', +}); + +test_interpolation({ + property: 'row-gap', + from: '0px', + to: '100px' +}, [ + {at: -0.3, expect: '0'}, // row-gap can't be negative. + {at: 0, expect: '0'}, + {at: 0.3, expect: '30px'}, + {at: 0.6, expect: '60px'}, + {at: 1, expect: '100px'}, + {at: 1.5, expect: '150px'} +]); +</script> diff --git a/testing/web-platform/tests/css/css-align/baseline-of-scrollable-1a.html b/testing/web-platform/tests/css/css-align/baseline-of-scrollable-1a.html new file mode 100644 index 0000000000..a55e2318ca --- /dev/null +++ b/testing/web-platform/tests/css/css-align/baseline-of-scrollable-1a.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="UTF-8"> + <title> + CSS Test: baseline of scrollable element should be taken from its + contents. (Except if the scrollable element is an inline-block, which gets + baseline from its margin-box.) + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://drafts.csswg.org/css-align/#baseline-export"> + <link rel="match" href="reference/baseline-of-scrollable-1-ref.html"> + <style> + .container { + overflow: hidden; + height: 50px; + width: 100px; + border-style: solid; + border-width: 2px 3px 4px 5px; + padding: 4px 5px 7px 8px; + margin: 1px 2px 3px 4px; + } + .inline-block { + display: inline-block; + } + .inline-flex { + display: inline-flex; + } + .inline-grid { + display: inline-grid; + } +</style> +</head> +<body> + Test passes if the a/b text aligns with the bottom margin-edge of the "block" + rect and baseline-aligns with the "flex" and "grid" text. + <br><br> + + <!-- Note: for this first "inline-block" case, the element's baseline is + synthesized from its margin box. For the other cases, the element's + baseline is taken from its contents, i.e. the text inside of it. --> + a + <div class="container inline-block">block</div> + b + <br> + + a + <div class="container inline-flex">flex</div> + b + <br> + + a + <div class="container inline-grid">grid</div> + b + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/baseline-of-scrollable-1b.html b/testing/web-platform/tests/css/css-align/baseline-of-scrollable-1b.html new file mode 100644 index 0000000000..79db8a8543 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/baseline-of-scrollable-1b.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="UTF-8"> + <title> + CSS Test: baseline of scrollable element (for use by a parent inline-block) + should be taken from its contents. (Except if the scrollable element is a + block, which gets baseline from its margin-box.) + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://drafts.csswg.org/css-align/#baseline-export"> + <link rel="match" href="reference/baseline-of-scrollable-1-ref.html"> + <style> + .container { + overflow: hidden; + height: 50px; + width: 100px; + border-style: solid; + border-width: 2px 3px 4px 5px; + padding: 4px 5px 7px 8px; + margin: 1px 2px 3px 4px; + } + .inline-block { + display: inline-block; + } + .block { + display: block; + } + .flex { + display: flex; + } + .grid { + display: grid; + } +</style> +</head> +<body> + Test passes if the a/b text aligns with the bottom margin-edge of the "block" + rect and baseline-aligns with the "flex" and "grid" text. + <br><br> + + <!-- Note: for this first "inline-block" case, the element's baseline is + synthesized from its margin box. For the other cases, the element's + baseline is taken from its contents, i.e. the text inside of it. --> + a + <div class="inline-block"> + <div class="container block">block</div> + </div> + b + <br> + + a + <div class="inline-block"> + <div class="container flex">flex</div> + </div> + b + <br> + + a + <div class="inline-block"> + <div class="container grid">grid</div> + </div> + b + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/baseline-of-scrollable-2.html b/testing/web-platform/tests/css/css-align/baseline-of-scrollable-2.html new file mode 100644 index 0000000000..5511d6d68a --- /dev/null +++ b/testing/web-platform/tests/css/css-align/baseline-of-scrollable-2.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="UTF-8"> + <title> + CSS Test: baseline of scrollable "details" element should be derived + from its margin-box. + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://drafts.csswg.org/css-align/#baseline-export"> + <link rel="match" href="reference/baseline-of-scrollable-2-ref.html"> + <style> + .overflow-ib { + overflow: hidden; + display: inline-block; + } + + details { + height: 40px; + width: 100px; + /* Transparent text & "details-arrow", so that it's easier to make + a simple reference case: */ + color: transparent; + border-color: gray; + border-style: solid; + border-width: 2px 3px 4px 5px; + padding: 4px 5px 7px 8px; + margin: 1px 2px 3px 4px; + } +</style> +</head> +<body> + Test passes if the a/b text aligns with the bottom margin-edge of the + gray rects. + <br><br> + + a + <details class="overflow-ib"> + c<br>d<br>e<br>f<br>g + </details> + b + <br> + + a + <details class="overflow-ib" open> + c<br>d<br>e<br>f<br>g + </details> + b + <br> + + a + <div class="overflow-ib"> + <details> + c<br>d<br>e<br>f<br>g + </details> + </div> + b + <br> + + a + <div class="overflow-ib"> + <details open> + c<br>d<br>e<br>f<br>g + </details> + </div> + b + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/baseline-rules/grid-item-input-type-number-ref.html b/testing/web-platform/tests/css/css-align/baseline-rules/grid-item-input-type-number-ref.html new file mode 100644 index 0000000000..dc91342cc8 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/baseline-rules/grid-item-input-type-number-ref.html @@ -0,0 +1,62 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset=utf-8> + <title>Reference baseline alignment of inline-grid with an INPUT type=number item</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> + +.grid { + display: inline-block; + line-height: 0; + border: 5px solid; + padding: 1px 0 3px 0; + margin: 11px 0; +} + +input { -webkit-appearance:none; inline-size:4ch; } + +.big { + font-size: 4em; +} + +.small { + font-size: 0.2em; +} + +.vlr { writing-mode: vertical-lr; } + </style> +</head> +<body> + +<div> + <span class="big">B</span> + <div class="grid"><input type="number" value="9"></div> + <span class="small">B</span> +</div> + +<div> + <span>B</span> + <div class="grid"><input class="big" type="number" value="9"></div> + <span class="small">B</span> +</div> + +<div class="vlr"> +<div> + <span class="big">B</span> + <div class="grid"><input type="number" value="9"></div> + <span class="small">B</span> +</div> + +<div> + <span>B</span> + <div class="grid"><input class="big" type="number" value="9"></div> + <span class="small">B</span> +</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/baseline-rules/grid-item-input-type-number.html b/testing/web-platform/tests/css/css-align/baseline-rules/grid-item-input-type-number.html new file mode 100644 index 0000000000..9b9735c7be --- /dev/null +++ b/testing/web-platform/tests/css/css-align/baseline-rules/grid-item-input-type-number.html @@ -0,0 +1,63 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset=utf-8> + <title>Test baseline alignment of inline-grid with an INPUT type=number item</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align/"> + <link rel="match" href="grid-item-input-type-number-ref.html"> + <style> + +.grid { + display: inline-grid; + border: 5px solid; + padding: 1px 0 3px 0; + margin: 11px 0; +} + +input { -webkit-appearance:none; inline-size:4ch; } + +.big { + font-size: 4em; +} + +.small { + font-size: 0.2em; +} + +.vlr { writing-mode: vertical-lr; } + </style> +</head> +<body> + +<div> + <span class="big">B</span> + <div class="grid"><input type="number" value="9"></div> + <span class="small">B</span> +</div> + +<div> + <span>B</span> + <div class="grid"><input class="big" type="number" value="9"></div> + <span class="small">B</span> +</div> + +<div class="vlr"> +<div> + <span class="big">B</span> + <div class="grid"><input type="number" value="9"></div> + <span class="small">B</span> +</div> + +<div> + <span>B</span> + <div class="grid"><input class="big" type="number" value="9"></div> + <span class="small">B</span> +</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/baseline-rules/grid-item-input-type-text-ref.html b/testing/web-platform/tests/css/css-align/baseline-rules/grid-item-input-type-text-ref.html new file mode 100644 index 0000000000..e6d2786c5e --- /dev/null +++ b/testing/web-platform/tests/css/css-align/baseline-rules/grid-item-input-type-text-ref.html @@ -0,0 +1,62 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset=utf-8> + <title>Reference baseline alignment of inline-grid with an INPUT type=text item</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> + +.grid { + display: inline-block; + line-height: 0; + border: 5px solid; + padding: 1px 0 3px 0; + margin: 11px 0; +} + +input { -webkit-appearance:none; inline-size:4ch; } + +.big { + font-size: 4em; +} + +.small { + font-size: 0.2em; +} + +.vlr { writing-mode: vertical-lr; } + </style> +</head> +<body> + +<div> + <span class="big">B</span> + <div class="grid"><input value="9"></div> + <span class="small">B</span> +</div> + +<div> + <span>B</span> + <div class="grid"><input class="big" value="9"></div> + <span class="small">B</span> +</div> + +<div class="vlr"> +<div> + <span class="big">B</span> + <div class="grid"><input value="9"></div> + <span class="small">B</span> +</div> + +<div> + <span>B</span> + <div class="grid"><input class="big" value="9"></div> + <span class="small">B</span> +</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/baseline-rules/grid-item-input-type-text.html b/testing/web-platform/tests/css/css-align/baseline-rules/grid-item-input-type-text.html new file mode 100644 index 0000000000..526dcbae6a --- /dev/null +++ b/testing/web-platform/tests/css/css-align/baseline-rules/grid-item-input-type-text.html @@ -0,0 +1,63 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset=utf-8> + <title>Test baseline alignment of inline-grid with an INPUT type=text item</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align/"> + <link rel="match" href="grid-item-input-type-text-ref.html"> + <style> + +.grid { + display: inline-grid; + border: 5px solid; + padding: 1px 0 3px 0; + margin: 11px 0; +} + +input { -webkit-appearance:none; inline-size:4ch; } + +.big { + font-size: 4em; +} + +.small { + font-size: 0.2em; +} + +.vlr { writing-mode: vertical-lr; } + </style> +</head> +<body> + +<div> + <span class="big">B</span> + <div class="grid"><input value="9"></div> + <span class="small">B</span> +</div> + +<div> + <span>B</span> + <div class="grid"><input class="big" value="9"></div> + <span class="small">B</span> +</div> + +<div class="vlr"> +<div> + <span class="big">B</span> + <div class="grid"><input value="9"></div> + <span class="small">B</span> +</div> + +<div> + <span>B</span> + <div class="grid"><input class="big" value="9"></div> + <span class="small">B</span> +</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/baseline-rules/inline-table-inline-block-baseline-ref.html b/testing/web-platform/tests/css/css-align/baseline-rules/inline-table-inline-block-baseline-ref.html new file mode 100644 index 0000000000..a255bee30f --- /dev/null +++ b/testing/web-platform/tests/css/css-align/baseline-rules/inline-table-inline-block-baseline-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<html> +<title>CSS Box Alignment Test: inline-block and inline-table baselines</title> +<link rel="author" title="Sammy Gill" href="sammy.gill@apple.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#baseline-export"> +<style> +.container { + border: solid 1px black; +} +.block { + display: inline-block; + background: aqua; +} +.table { + display: inline-table; + font-size: 40px; + background: tan; +} +.margin { + margin-block-start: 50px; +} +</style> +<body> +<div class="container"> +<div class="margin"> + <div class="block">aaa</div> + <table class="table" cellspacing="0" cellpadding="0"><td>bbb</table> +</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/baseline-rules/inline-table-inline-block-baseline-vert-rl-ref.html b/testing/web-platform/tests/css/css-align/baseline-rules/inline-table-inline-block-baseline-vert-rl-ref.html new file mode 100644 index 0000000000..37abf9d4af --- /dev/null +++ b/testing/web-platform/tests/css/css-align/baseline-rules/inline-table-inline-block-baseline-vert-rl-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<html> +<title>CSS Box Alignment Test: inline-block and inline-table baseline synthesis</title> +<link rel="author" title="Sammy Gill" href="sammy.gill@apple.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#baseline-export"> +<style> +.container { + border: solid 1px black; + writing-mode: vertical-rl; +} +.block { + display: inline-block; + background: aqua; +} +.table { + display: inline-table; + font-size: 40px; + background: tan; +} +.margin { + margin-block-start: 50px; +} +</style> +<body> +<div class="container"> +<div class="margin"> + <div class="block">aaa</div> + <table class="table" cellspacing="0" cellpadding="0"><td>bbb</table> +</div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/baseline-rules/inline-table-inline-block-baseline-vert-rl.html b/testing/web-platform/tests/css/css-align/baseline-rules/inline-table-inline-block-baseline-vert-rl.html new file mode 100644 index 0000000000..c0a6e2f12c --- /dev/null +++ b/testing/web-platform/tests/css/css-align/baseline-rules/inline-table-inline-block-baseline-vert-rl.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<html> +<title>CSS Box Alignment Test: inline-block and inline-table baseline synthesis</title> +<link rel="author" title="Sammy Gill" href="sammy.gill@apple.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#baseline-export"> +<link rel="match" href="inline-table-inline-block-baseline-vert-rl-ref.html"> +<style> +.container { + border: solid 1px black; + writing-mode: vertical-rl; +} +.block { + display: inline-block; + background: aqua; +} +.table { + display: inline-table; + font-size: 40px; + background: tan; + margin-block-start: 50px; +} +</style> +<body> +<div class="container"> + <div class="block">aaa</div> + <table class="table" cellspacing="0" cellpadding="0"><td>bbb</table> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/baseline-rules/inline-table-inline-block-baseline.html b/testing/web-platform/tests/css/css-align/baseline-rules/inline-table-inline-block-baseline.html new file mode 100644 index 0000000000..be9acc58cd --- /dev/null +++ b/testing/web-platform/tests/css/css-align/baseline-rules/inline-table-inline-block-baseline.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<html> +<title>CSS Box Alignment Test: inline-block and inline-table baselines</title> +<link rel="author" title="Sammy Gill" href="sammy.gill@apple.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#baseline-export"> +<link rel="match" href="inline-table-inline-block-baseline-ref.html"> +<style> +.container { + border: solid 1px black; +} +.block { + display: inline-block; + background: aqua; +} +.table { + display: inline-table; + font-size: 40px; + background: tan; + margin-block-start: 50px; +} +</style> +<body> +<div class="container"> + <div class="block">aaa</div> + <table class="table" cellspacing="0" cellpadding="0"><td>bbb</table> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/baseline-rules/synthesized-baseline-flexbox-001.html b/testing/web-platform/tests/css/css-align/baseline-rules/synthesized-baseline-flexbox-001.html new file mode 100644 index 0000000000..af2dac4cc5 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/baseline-rules/synthesized-baseline-flexbox-001.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: Synthesized baseline flexbox</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#valdef-align-items-baseline"> +<meta name="flags" content="ahem"> +<meta name="assert" content="This test check the synthesized of a flexbox container if it has no items (it should use the flex container margin box) or if the items have no baseline (in that case it should use the flex item's border box)."> +<style> +.wrapper { + border: solid thick; + position: relative; + width: 200px; + height: 150px; + margin: 10px; +} +canvas { + width: 100px; + height: 100px; + background: blue; +} +.magenta-dotted-border { + border: 5px dotted magenta; +} +.border-padding-margin { + border: 10px solid cyan; + padding: 15px; + margin: 20px 0px; + background: yellow; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.wrapper')"> + +<div id="log"></div> + +<div class="wrapper"> + <canvas></canvas> + <div style="display: inline-flex;" class="border-padding-margin" + data-offset-y="30"></div> +</div> +<div class="wrapper"> + <canvas></canvas> + <div style="display: inline-block;" class="magenta-dotted-border" + data-offset-y="5"> + <div style="display: inline-flex;" class="border-padding-margin" + data-offset-y="30"></div> + </div> +</div> +<div class="wrapper"> + <canvas></canvas> + <div style="display: inline-block;" class="magenta-dotted-border" + data-offset-y="0"> + <div style="display: flex;" class="border-padding-margin" + data-offset-y="25"></div> + </div> +</div> +<div class="wrapper"> + <canvas></canvas> + <div style="display: inline-flex;" class="magenta-dotted-border" + data-offset-y="25"> + <div class="border-padding-margin" data-offset-y="50"></div> + </div> +</div> +<div class="wrapper"> + <canvas></canvas> + <div style="display: inline-block;" class="magenta-dotted-border" + data-offset-y="25"> + <div style="display: flex;" + data-offset-y="30"> + <div class="border-padding-margin" data-offset-y="50"></div> + </div> + </div> +</div> +<div class="wrapper" style="display: flex; align-items: baseline;"> + <canvas></canvas> + <div style="display: inline-flex;" class="magenta-dotted-border" + data-offset-y="25"> + <div class="border-padding-margin" data-offset-y="50"></div> + </div> +</div> +<div class="wrapper" style="display: flex; align-items: baseline;"> + <canvas></canvas> + <div style="display: flex;" class="magenta-dotted-border" + data-offset-y="25"> + <div class="border-padding-margin" data-offset-y="50"></div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-align/baseline-rules/synthesized-baseline-grid-001.html b/testing/web-platform/tests/css/css-align/baseline-rules/synthesized-baseline-grid-001.html new file mode 100644 index 0000000000..48d8725801 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/baseline-rules/synthesized-baseline-grid-001.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: Synthesized baseline grid container</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-baselines"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property"> +<meta name="flags" content="ahem"> +<meta name="assert" content="This test check the synthesized of a grid container if it has no items (it should use the grid container margin box) or if the items have no baseline (in that case it should use the grid item's border box)."> +<style> +.wrapper { + border: solid thick; + position: relative; + width: 300px; + height: 150px; + margin: 10px; +} +canvas { + width: 100px; + height: 100px; + background: blue; +} +.magenta-dotted-border { + border: 5px dotted magenta; +} +.border-padding-margin { + border: 10px solid cyan; + padding: 15px; + margin: 20px 0px; + background: yellow; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.wrapper')"> + +<div id="log"></div> + +<div class="wrapper"> + <canvas></canvas> + <div style="display: inline-grid;" class="border-padding-margin" + data-offset-y="30"></div> +</div> +<div class="wrapper"> + <canvas></canvas> + <div style="display: inline-block;" class="magenta-dotted-border" + data-offset-y="5"> + <div style="display: inline-grid;" class="border-padding-margin" + data-offset-y="30"></div> + </div> +</div> +<div class="wrapper"> + <canvas></canvas> + <div style="display: inline-block;" class="magenta-dotted-border" + data-offset-y="0"> + <div style="display: grid;" class="border-padding-margin" + data-offset-y="25"></div> + </div> +</div> +<div class="wrapper"> + <canvas></canvas> + <div style="display: inline-grid;" class="magenta-dotted-border" + data-offset-y="25"> + <div class="border-padding-margin" data-offset-y="50"></div> + </div> +</div> +<div class="wrapper"> + <canvas></canvas> + <div style="display: inline-block;" class="magenta-dotted-border" + data-offset-y="25"> + <div style="display: grid;" + data-offset-y="30"> + <div class="border-padding-margin" data-offset-y="50"></div> + </div> + </div> +</div> +<div class="wrapper" style="display: flex; align-items: baseline;"> + <canvas></canvas> + <div style="display: inline-grid;" class="magenta-dotted-border" + data-offset-y="25"> + <div class="border-padding-margin" data-offset-y="50"></div> + </div> +</div> +<div class="wrapper" style="display: flex; align-items: baseline;"> + <canvas></canvas> + <div style="display: grid;" class="magenta-dotted-border" + data-offset-y="25"> + <div class="border-padding-margin" data-offset-y="50"></div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-align/baseline-rules/synthesized-baseline-inline-block-001.html b/testing/web-platform/tests/css/css-align/baseline-rules/synthesized-baseline-inline-block-001.html new file mode 100644 index 0000000000..fde0c2c432 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/baseline-rules/synthesized-baseline-inline-block-001.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: Synthesized baseline inline blocks</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#alignment-baseline-property"> +<meta name="flags" content="ahem"> +<meta name="assert" content="Inline blocks synthesized baseline use the margin box."> +<style> +.wrapper { + border: solid thick; + position: relative; + width: 200px; + height: 150px; + margin: 10px; +} +canvas { + width: 100px; + height: 100px; + background: blue; +} +.magenta-dotted-border { + border: 5px dotted magenta; +} +.border-padding-margin { + border: 10px solid cyan; + padding: 15px; + margin: 20px 0px; + background: yellow; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.wrapper')"> + +<div id="log"></div> + +<div class="wrapper"> + <canvas></canvas> + <div style="display: inline-block;" class="border-padding-margin" + data-offset-y="30"></div> +</div> +<div class="wrapper"> + <canvas></canvas> + <div style="display: inline-block;" class="magenta-dotted-border" + data-offset-y="5"> + <div style="display: inline-block;" class="border-padding-margin" + data-offset-y="30"></div> + </div> +</div> +<div class="wrapper"> + <canvas></canvas> + <div style="display: inline-block;" class="magenta-dotted-border" + data-offset-y="0"> + <div class="border-padding-margin" data-offset-y="25"></div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-align/baseline-rules/synthesized-baseline-table-cell-001-ref.html b/testing/web-platform/tests/css/css-align/baseline-rules/synthesized-baseline-table-cell-001-ref.html new file mode 100644 index 0000000000..a63d2c9d68 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/baseline-rules/synthesized-baseline-table-cell-001-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Reference: Synthesized baseline table cell</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +* { vertical-align: baseline; } +table { display: inline-table; border: 3px solid; } +td { width:10px; background-color:pink; background-clip:content-box; } +.p { padding: 0 10px 0 0; height:150px; } +.size { height:80px; } +.w { background: white; } +x { display: block; overflow: hidden; height:50px; background: white; } +.xp { height:80px; background-color:pink; } +.m50 { margin-top: 50px; } +.top { vertical-align:top; } +</style> +</head> +<body> + X + <table border=5><tr><td class="p w"><x></x></td></tr></table> + <table border=5><tr><td class="p w top"></td><td>X</td></tr></table> + <table border=2><tr><td><x style="height:0"></x></td></tr></table> + <table border=5><tr><td class="p w" style="height:230px"><x class="xp m50"></x></td></tr></table> + <table border=5><tr><td class="p w top" style="height:230px"><x class="xp m50"></x></td><td>X</td></tr></table> + <table border=2><tr><td><x class="xp"></x></td></tr></table> + <table border=2><tr><td class="top"><x class="xp" style="height:20px"></x></td><td><x class="xp" style="height:20px"></td></tr></table> + <table border=2><tr><td class="top"><x class="xp" style="height:20px"</td><td rowspan=2></td></tr><tr><td class="top"><x class="xp" style="height:20px"</td></tr></table> + <table border=2><tr><td>X</td><td rowspan=2 class="top"></td></tr><tr><td style="height:20px" class="top"></td></tr></table> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/baseline-rules/synthesized-baseline-table-cell-001.html b/testing/web-platform/tests/css/css-align/baseline-rules/synthesized-baseline-table-cell-001.html new file mode 100644 index 0000000000..a7119b8dc5 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/baseline-rules/synthesized-baseline-table-cell-001.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: Synthesized baseline table cell</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#synthesize-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-export"> +<link rel="match" href="synthesized-baseline-table-cell-001-ref.html"> +<style> +* { vertical-align: baseline; } +table { display: inline-table; border: 3px solid; } +td { width:10px; background-color:pink; background-clip:content-box; } +.p { padding: 50px 10px 100px 0; } +.size { height:80px; } +</style> +</head> +<body> + X + <table border=5><tr><td class="p"></td></tr></table> + <table border=5><tr><td class="p"></td><td>X</td></tr></table> + <table border=2><tr><td ></td></tr></table> + <table border=5><tr><td class="p size"></td></tr></table> + <table border=5><tr><td class="p size"></td><td>X</td></tr></table> + <table border=2><tr><td class="size" ></td></tr></table> + <table border=2><tr><td style="height:10px"></td><td style="height:20px"></td></tr></table> + <table border=2><tr><td style="height:20px"></td><td rowspan=2></td></tr><tr><td style="height:20px"></td></tr></table> + <table border=2><tr><td>X</td><td rowspan=2></td></tr><tr><td style="height:20px"></td></tr></table> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/blocks/align-content-block-001-ref.html b/testing/web-platform/tests/css/css-align/blocks/align-content-block-001-ref.html new file mode 100644 index 0000000000..6a454d60d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/blocks/align-content-block-001-ref.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: non-normal align-content establishes block formatting context root on blocks</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> + +<style> + html, body { margin: 0; font-size: 10px; line-height: 1; color: transparent; } + /* show bounds of test box without interfering with margin-collapsing */ + .test { background: black; padding-right: 2px; margin: 0.5em; } + /* ensure float cannot penetrate */ + .outer-float { float: left; height: 600px; /* reftest limit = 600px */ + margin: 0 1em; background: gray; } + /* ensure float is contained */ + .float { float: left; background: orange; height: 2em } + /* ensure margin is contained */ + .in-flow { margin-top: 1em; background: orange } + + /* reference code */ + .test { overflow: hidden; display: flow-root; } +</style> + +<div class="outer-float">FLT</div> +<div class="test"> + <div class="in-flow"><div class="float">FLT</div>BLOCK</div> +</div> +<div class="test"> + <div class="in-flow"><div class="float">FLT</div>BLOCK</div> +</div> +<div class="test"> + <div class="in-flow"><div class="float">FLT</div>BLOCK</div> +</div> +<div class="test"> + <div class="in-flow"><div class="float">FLT</div>BLOCK</div> +</div> +<div class="test"> + <div class="in-flow"><div class="float">FLT</div>BLOCK</div> +</div> +<div class="test"> + <div class="in-flow"><div class="float">FLT</div>BLOCK</div> +</div> +<div class="test"> + <div class="in-flow"><div class="float">FLT</div>BLOCK</div> +</div> +<div class="test"> + <div class="in-flow"><div class="float">FLT</div>BLOCK</div> +</div> +<div class="test"> + <div class="in-flow"><div class="float">FLT</div>BLOCK</div> +</div> +<div class="test"> + <div class="in-flow"><div class="float">FLT</div>BLOCK</div> +</div> +<div class="test"> + <div class="in-flow"><div class="float">FLT</div>BLOCK</div> +</div> +<div class="test"> + <div class="in-flow"><div class="float">FLT</div>BLOCK</div> +</div> +<div class="test"> + <div class="in-flow"><div class="float">FLT</div>BLOCK</div> +</div> +<div class="test"> + <div class="in-flow"><div class="float">FLT</div>BLOCK</div> +</div> +<div class="test" style="overflow: visible; display: block"> + <div class="in-flow"><div class="float">FLT</div>BLOCK</div> +</div> diff --git a/testing/web-platform/tests/css/css-align/blocks/align-content-block-001.html b/testing/web-platform/tests/css/css-align/blocks/align-content-block-001.html new file mode 100644 index 0000000000..472ecae576 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/blocks/align-content-block-001.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: non-normal align-content establishes block formatting context root on blocks</title> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block"> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<link rel="match" href="align-content-block-001-ref.html"> + +<style> + html, body { margin: 0; font-size: 10px; line-height: 1; color: transparent; } + /* show bounds of test box without interfering with margin-collapsing */ + .test { background: black; padding-right: 2px; margin: 0.5em; } + /* ensure float cannot penetrate */ + .outer-float { float: left; height: 600px; /* reftest limit = 600px */ + margin: 0 1em; background: gray; } + /* ensure float is contained */ + .float { float: left; background: orange; height: 2em } + /* ensure margin is contained */ + .in-flow { margin-top: 1em; background: orange } +</style> + +<div class="outer-float">FLT</div> +<div class="test" style="align-content: start"> + <div class="in-flow"><div class="float">FLT</div>BLOCK</div> +</div> +<div class="test" style="align-content: center"> + <div class="in-flow"><div class="float">FLT</div>BLOCK</div> +</div> +<div class="test" style="align-content: end"> + <div class="in-flow"><div class="float">FLT</div>BLOCK</div> +</div> +<div class="test" style="align-content: baseline"> + <div class="in-flow"><div class="float">FLT</div>BLOCK</div> +</div> +<div class="test" style="align-content: flex-start"> + <div class="in-flow"><div class="float">FLT</div>BLOCK</div> +</div> +<div class="test" style="align-content: flex-end"> + <div class="in-flow"><div class="float">FLT</div>BLOCK</div> +</div> +<div class="test" style="align-content: unsafe start"> + <div class="in-flow"><div class="float">FLT</div>BLOCK</div> +</div> +<div class="test" style="align-content: unsafe center"> + <div class="in-flow"><div class="float">FLT</div>BLOCK</div> +</div> +<div class="test" style="align-content: unsafe end"> + <div class="in-flow"><div class="float">FLT</div>BLOCK</div> +</div> +<div class="test" style="align-content: safe start"> + <div class="in-flow"><div class="float">FLT</div>BLOCK</div> +</div> +<div class="test" style="align-content: safe center"> + <div class="in-flow"><div class="float">FLT</div>BLOCK</div> +</div> +<div class="test" style="align-content: safe end"> + <div class="in-flow"><div class="float">FLT</div>BLOCK</div> +</div> +<div class="test" style="align-content: space-between"> + <div class="in-flow"><div class="float">FLT</div>BLOCK</div> +</div> +<div class="test" style="align-content: space-around"> + <div class="in-flow"><div class="float">FLT</div>BLOCK</div> +</div> +<div class="test" style="align-content: start; align-content: normal"> + <div class="in-flow"><div class="float">FLT</div>BLOCK</div> +</div> diff --git a/testing/web-platform/tests/css/css-align/blocks/align-content-block-002.html b/testing/web-platform/tests/css/css-align/blocks/align-content-block-002.html new file mode 100644 index 0000000000..795872e20b --- /dev/null +++ b/testing/web-platform/tests/css/css-align/blocks/align-content-block-002.html @@ -0,0 +1,233 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: align-content on large block container</title> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block"> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<style title="Needed for automation; delete to review/debug"> + @import "/fonts/ahem.css"; + html { font: 10px/1 Ahem; max-width: 800px; } + .label { display: none; } +</style> + +<style> + html, body { margin: 0; padding: 0; } + + .test { height: 5em; margin: 0.5em 2em; + /* show bounds of test box without interfering with margin-collapsing */ + background: black; padding-right: 2px; + /* ensure bullet follows first line */ + display: list-item; } + /* ensure margin is contained */ + .in-flow { margin: 1em 0 0.4em; background: orange } + /* ensure relpos is ignored */ + .relpos { position: relative; top: -1.5em; } + /* ensure abspos static position follows alignment */ + .wrapper { position: relative; } + .abspos { position: absolute; right: 0; margin-top: -1.5em; } + /* ensure overflow is not counted */ + .overflow { height: 0; } + + /* cram into 800x600 */ + html { max-height: 600px; columns: 3 } + .wrapper { break-inside: avoid; border: solid 2px gray; } + + /* readability */ + .test > * { color: #8888; } + .label { color: black; font-weight: bold; } +</style> + +<body onload="checkLayout('.test');"> +<div class="wrapper"> + <div class="test" style="align-content: start" title="start"> + <div class="in-flow" data-offset-y="15"></div> + <div class="in-flow"> + <span class="label">START</span> + <span class="abspos" data-offset-y="0">ABS</span> + <span class="relpos" data-offset-y="0">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: center" title="center"> + <div class="in-flow" data-offset-y="28"></div> + <div class="in-flow"> + <span class="label">CENTER</span> + <span class="abspos" data-offset-y="13">ABS</span> + <span class="relpos" data-offset-y="13">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: end" title="end"> + <div class="in-flow" data-offset-y="41"></div> + <div class="in-flow"> + <span class="label">END</span> + <span class="abspos" data-offset-y="26">ABS</span> + <span class="relpos" data-offset-y="26">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: baseline" title="baseline"> + <div class="in-flow" data-offset-y="15"></div> + <div class="in-flow"> + <span class="label">BASELINE</span> + <span class="abspos" data-offset-y="0">ABS</span> + <span class="relpos" data-offset-y="0">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: last baseline" title="last baseline"> + <div class="in-flow" data-offset-y="41"></div> + <div class="in-flow"> + <span class="label">LAST BASELINE</span> + <span class="abspos" data-offset-y="26">ABS</span> + <span class="relpos" data-offset-y="26">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: flex-start" title="flex-start"> + <div class="in-flow" data-offset-y="15"></div> + <div class="in-flow"> + <span class="label">FLEX-START</span> + <span class="abspos" data-offset-y="0">ABS</span> + <span class="relpos" data-offset-y="0">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: flex-end" title="flex-end"> + <div class="in-flow" data-offset-y="41"></div> + <div class="in-flow"> + <span class="label">FLEX-END</span> + <span class="abspos" data-offset-y="26">ABS</span> + <span class="relpos" data-offset-y="26">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: unsafe start" title="unsafe start"> + <div class="in-flow" data-offset-y="15"></div> + <div class="in-flow"> + <span class="label">UNSAFE START</span> + <span class="abspos" data-offset-y="0">ABS</span> + <span class="relpos" data-offset-y="0">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: unsafe center" title="unsafe center"> + <div class="in-flow" data-offset-y="28"></div> + <div class="in-flow"> + <span class="label">UNSAFE CENTER</span> + <span class="abspos" data-offset-y="13">ABS</span> + <span class="relpos" data-offset-y="13">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: unsafe end" title="unsafe end"> + <div class="in-flow" data-offset-y="41"></div> + <div class="in-flow"> + <span class="label">UNSAFE END</span> + <span class="abspos" data-offset-y="26">ABS</span> + <span class="relpos" data-offset-y="26">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: safe start" title="safe start"> + <div class="in-flow" data-offset-y="15"></div> + <div class="in-flow"> + <span class="label">SAFE START</span> + <span class="abspos" data-offset-y="0">ABS</span> + <span class="relpos" data-offset-y="0">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: safe center" title="safe center"> + <div class="in-flow" data-offset-y="28"></div> + <div class="in-flow"> + <span class="label">SAFE CENTER</span> + <span class="abspos" data-offset-y="13">ABS</span> + <span class="relpos" data-offset-y="13">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: safe end" title="safe end"> + <div class="in-flow" data-offset-y="41"></div> + <div class="in-flow"> + <span class="label">SAFE END</span> + <span class="abspos" data-offset-y="26">ABS</span> + <span class="relpos" data-offset-y="26">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: space-evenly" title="space-evenly"> + <div class="in-flow" data-offset-y="28"></div> + <div class="in-flow"> + <span class="label">SPACE-EVENLY</span> + <span class="abspos" data-offset-y="13">ABS</span> + <span class="relpos" data-offset-y="13">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: space-between" title="space-between"> + <div class="in-flow" data-offset-y="15"></div> + <div class="in-flow"> + <span class="label">SPACE-BETWEEN</span> + <span class="abspos" data-offset-y="0">ABS</span> + <span class="relpos" data-offset-y="0">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: space-around" title="space-around"> + <div class="in-flow" data-offset-y="28"></div> + <div class="in-flow"> + <span class="label">SPACE-AROUND</span> + <span class="abspos" data-offset-y="13">ABS</span> + <span class="relpos" data-offset-y="13">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: normal" title="normal"> + <div class="in-flow" data-offset-y="10"></div> + <div class="in-flow"> + <span class="label">NORMAL</span> + <span class="abspos" data-offset-y="-5">ABS</span> + <span class="relpos" data-offset-y="-5">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> + +<p> + <button onclick="document.querySelector('style[title]').textContent = 'html { font-size: 12px; }'">Show Text</button> +</body> diff --git a/testing/web-platform/tests/css/css-align/blocks/align-content-block-003.html b/testing/web-platform/tests/css/css-align/blocks/align-content-block-003.html new file mode 100644 index 0000000000..2f3fea9be3 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/blocks/align-content-block-003.html @@ -0,0 +1,233 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: align-content on small block container</title> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block"> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<style title="Needed for automation; delete to review/debug"> + @import "/fonts/ahem.css"; + html { font: 10px/1 Ahem; max-width: 800px; } + .label { display: none; } +</style> + +<style> + html, body { margin: 0; padding: 0; } + + .test { height: 0.5em; margin: 0.5em 2em; + /* show bounds of test box without interfering with margin-collapsing */ + background: black; padding-right: 2px; + /* ensure bullet follows first line */ + display: list-item; } + /* ensure margin is contained */ + .in-flow { margin: 1em 0 0.5em; background: orange } + /* ensure relpos is ignored */ + .relpos { position: relative; top: -1.5em; } + /* ensure abspos static position follows alignment */ + .wrapper { position: relative; } + .abspos { position: absolute; right: 0; margin-top: -1.5em; } + /* ensure overflow is not counted */ + .overflow { height: 0; } + + /* cram into 800x600 */ + html { max-height: 600px; columns: 3 } + .wrapper { break-inside: avoid; border: solid 2px gray; padding: 2em 0; } + + /* readability */ + .test > * { color: #8888; } + .label { color: black; font-weight: bold; } +</style> + +<body onload="checkLayout('.test');"> +<div class="wrapper"> + <div class="test" style="align-content: start" title="start"> + <div class="in-flow" data-offset-y="35"></div> + <div class="in-flow"> + <span class="label">START</span> + <span class="abspos" data-offset-y="20">ABS</span> + <span class="relpos" data-offset-y="20">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: center" title="center"> + <div class="in-flow" data-offset-y="35"></div> + <div class="in-flow"> + <span class="label">CENTER</span> + <span class="abspos" data-offset-y="20">ABS</span> + <span class="relpos" data-offset-y="20">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: end" title="end"> + <div class="in-flow" data-offset-y="35"></div> + <div class="in-flow"> + <span class="label">END</span> + <span class="abspos" data-offset-y="20">ABS</span> + <span class="relpos" data-offset-y="20">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: baseline" title="baseline"> + <div class="in-flow" data-offset-y="35"></div> + <div class="in-flow"> + <span class="label">BASELINE</span> + <span class="abspos" data-offset-y="20">ABS</span> + <span class="relpos" data-offset-y="20">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: last baseline" title="last baseline"> + <div class="in-flow" data-offset-y="35"></div> + <div class="in-flow"> + <span class="label">LAST BASELINE</span> + <span class="abspos" data-offset-y="20">ABS</span> + <span class="relpos" data-offset-y="20">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: flex-start" title="flex-start"> + <div class="in-flow" data-offset-y="35"></div> + <div class="in-flow"> + <span class="label">FLEX-START</span> + <span class="abspos" data-offset-y="20">ABS</span> + <span class="relpos" data-offset-y="20">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: flex-end" title="flex-end"> + <div class="in-flow" data-offset-y="35"></div> + <div class="in-flow"> + <span class="label">FLEX-END</span> + <span class="abspos" data-offset-y="20">ABS</span> + <span class="relpos" data-offset-y="20">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: unsafe start" title="unsafe start"> + <div class="in-flow" data-offset-y="35"></div> + <div class="in-flow"> + <span class="label">UNSAFE START</span> + <span class="abspos" data-offset-y="20">ABS</span> + <span class="relpos" data-offset-y="20">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: unsafe center" title="unsafe center"> + <div class="in-flow" data-offset-y="25"></div> + <div class="in-flow"> + <span class="label">UNSAFE CENTER</span> + <span class="abspos" data-offset-y="10">ABS</span> + <span class="relpos" data-offset-y="10">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: unsafe end" title="unsafe end"> + <div class="in-flow" data-offset-y="15"></div> + <div class="in-flow"> + <span class="label">UNSAFE END</span> + <span class="abspos" data-offset-y="0">ABS</span> + <span class="relpos" data-offset-y="0">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: safe start" title="safe start"> + <div class="in-flow" data-offset-y="35"></div> + <div class="in-flow"> + <span class="label">SAFE START</span> + <span class="abspos" data-offset-y="20">ABS</span> + <span class="relpos" data-offset-y="20">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: safe center" title="safe center"> + <div class="in-flow" data-offset-y="35"></div> + <div class="in-flow"> + <span class="label">SAFE CENTER</span> + <span class="abspos" data-offset-y="20">ABS</span> + <span class="relpos" data-offset-y="20">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: safe end" title="safe end"> + <div class="in-flow" data-offset-y="35"></div> + <div class="in-flow"> + <span class="label">SAFE END</span> + <span class="abspos" data-offset-y="20">ABS</span> + <span class="relpos" data-offset-y="20">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: space-evenly" title="space-evently"> + <div class="in-flow" data-offset-y="35"></div> + <div class="in-flow"> + <span class="label">SPACE-EVENLY</span> + <span class="abspos" data-offset-y="20">ABS</span> + <span class="relpos" data-offset-y="20">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: space-between" title="space-between"> + <div class="in-flow" data-offset-y="35"></div> + <div class="in-flow"> + <span class="label">SPACE-BETWEEN</span> + <span class="abspos" data-offset-y="20">ABS</span> + <span class="relpos" data-offset-y="20">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: space-around" title="space-around"> + <div class="in-flow" data-offset-y="35"></div> + <div class="in-flow"> + <span class="label">SPACE-AROUND</span> + <span class="abspos" data-offset-y="20">ABS</span> + <span class="relpos" data-offset-y="20">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: normal" title="normal"> + <div class="in-flow" data-offset-y="30"></div> + <div class="in-flow"> + <span class="label">NORMAL</span> + <span class="abspos" data-offset-y="15">ABS</span> + <span class="relpos" data-offset-y="15">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> + +<p> + <button onclick="document.querySelector('style[title]').textContent = 'html { font-size: 12px; }'">Show Text</button> +</body> diff --git a/testing/web-platform/tests/css/css-align/blocks/align-content-block-004.html b/testing/web-platform/tests/css/css-align/blocks/align-content-block-004.html new file mode 100644 index 0000000000..18ac4422b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/blocks/align-content-block-004.html @@ -0,0 +1,267 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: align-content on large block container with floats</title> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block"> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<style title="Needed for automation; delete to review/debug"> + @import "/fonts/ahem.css"; + html { font: 10px/1 Ahem; max-width: 800px; } + .label { display: none; } +</style> + +<style> + html, body { margin: 0; padding: 0; } + + .test { height: 5em; margin: 0.5em 1em; + /* show bounds of test box without interfering with margin-collapsing */ + background: black; padding-right: 2px; } + /* ensure float is contained */ + .float { float: right; background: orange; height: 2em } + /* ensure margin is contained */ + .in-flow { margin-top: 1em; background: orange } + /* ensure relpos is ignored */ + .relpos { position: relative; top: -1.5em; } + /* ensure abspos static position follows alignment */ + .wrapper { position: relative; } + .abspos { position: absolute; right: 0; margin-top: -1.5em; } + /* ensure overflow is not counted */ + .overflow { height: 0; } + + /* cram into 800x600 */ + html { max-height: 600px; columns: 3 } + .wrapper { break-inside: avoid; border: solid 2px gray; } + + /* readability */ + .test > * { color: #8888; } + .label { color: black; font-weight: bold; } +</style> + +<body onload="checkLayout('.test');"> +<div class="wrapper"> + <div class="test" style="align-content: start" title="start"> + <div class="float" data-offset-y="5">FLT</div> + <div class="in-flow" data-offset-y="15"></div> + <div class="in-flow"> + <div class="float" data-offset-y="15">FLT</div> + <span class="label">START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: center" title="center"> + <div class="float" data-offset-y="15">FLT</div> + <div class="in-flow" data-offset-y="25"></div> + <div class="in-flow"> + <div class="float" data-offset-y="25">FLT</div> + <span class="label">CENTER</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: end" title="end"> + <div class="float" data-offset-y="25">FLT</div> + <div class="in-flow" data-offset-y="35"></div> + <div class="in-flow"> + <div class="float" data-offset-y="35">FLT</div> + <span class="label">END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: baseline" title="baseline"> + <div class="float" data-offset-y="5">FLT</div> + <div class="in-flow" data-offset-y="15"></div> + <div class="in-flow"> + <div class="float" data-offset-y="15">FLT</div> + <span class="label">BASELINE</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: last baseline" title="last baseline"> + <div class="float" data-offset-y="25">FLT</div> + <div class="in-flow" data-offset-y="35"></div> + <div class="in-flow"> + <div class="float" data-offset-y="35">FLT</div> + <span class="label">LAST BASELINE</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: flex-start" title="flex-start"> + <div class="float" data-offset-y="5">FLT</div> + <div class="in-flow" data-offset-y="15"></div> + <div class="in-flow"> + <div class="float" data-offset-y="15">FLT</div> + <span class="label">FLEX-START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: flex-end" title="flex-end"> + <div class="float" data-offset-y="25">FLT</div> + <div class="in-flow" data-offset-y="35"></div> + <div class="in-flow"> + <div class="float" data-offset-y="35">FLT</div> + <span class="label">FLEX-END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: unsafe start" title="unsafe start"> + <div class="float" data-offset-y="5">FLT</div> + <div class="in-flow" data-offset-y="15"></div> + <div class="in-flow"> + <div class="float" data-offset-y="15">FLT</div> + <span class="label">UNSAFE START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: unsafe center" title="unsafe center"> + <div class="float" data-offset-y="15">FLT</div> + <div class="in-flow" data-offset-y="25"></div> + <div class="in-flow"> + <div class="float" data-offset-y="25">FLT</div> + <span class="label">UNSAFE CENTER</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: unsafe end" title="unsafe end"> + <div class="float" data-offset-y="25">FLT</div> + <div class="in-flow" data-offset-y="35"></div> + <div class="in-flow"> + <div class="float" data-offset-y="35">FLT</div> + <span class="label">UNSAFE END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: safe start" title="safe start"> + <div class="float" data-offset-y="5">FLT</div> + <div class="in-flow" data-offset-y="15"></div> + <div class="in-flow"> + <div class="float" data-offset-y="15">FLT</div> + <span class="label">SAFE START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: safe center" title="safe center"> + <div class="float" data-offset-y="15">FLT</div> + <div class="in-flow" data-offset-y="25"></div> + <div class="in-flow"> + <div class="float" data-offset-y="25">FLT</div> + <span class="label">SAFE CENTER</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: safe end" title="safe end"> + <div class="float" data-offset-y="25">FLT</div> + <div class="in-flow" data-offset-y="35"></div> + <div class="in-flow"> + <div class="float" data-offset-y="35">FLT</div> + <span class="label">SAFE END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: space-evenly" title="space-evenly"> + <div class="float" data-offset-y="15">FLT</div> + <div class="in-flow" data-offset-y="25"></div> + <div class="in-flow"> + <div class="float" data-offset-y="25">FLT</div> + <span class="label">SPACE-EVENLY</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: space-between" title="space-between"> + <div class="float" data-offset-y="5">FLT</div> + <div class="in-flow" data-offset-y="15"></div> + <div class="in-flow"> + <div class="float" data-offset-y="15">FLT</div> + <span class="label">SPACE-BETWEEN</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: space-around" title="space-around"> + <div class="float" data-offset-y="15">FLT</div> + <div class="in-flow" data-offset-y="25"></div> + <div class="in-flow"> + <div class="float" data-offset-y="25">FLT</div> + <span class="label">SPACE-AROUND</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: normal" title="normal"> + <div class="float" data-offset-y="10">FLT</div> + <div class="in-flow" data-offset-y="10"></div> + <div class="in-flow"> + <div class="float" data-offset-y="10">FLT</div> + <span class="label">NORMAL</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> + +<p> + <button onclick="document.querySelector('style[title]').textContent = 'html { font-size: 12px; }'">Show Text</button> +</body> diff --git a/testing/web-platform/tests/css/css-align/blocks/align-content-block-005.html b/testing/web-platform/tests/css/css-align/blocks/align-content-block-005.html new file mode 100644 index 0000000000..f20582d577 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/blocks/align-content-block-005.html @@ -0,0 +1,268 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: align-content on small block container with floats</title> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block"> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<style title="Needed for automation; delete to review/debug"> + @import "/fonts/ahem.css"; + html { font: 10px/1 Ahem; max-width: 800px; } + .label { display: none; } +</style> + +<style> + html, body { margin: 0; padding: 0; } + + .test { height: 1em; margin: 0.5em 2em; + /* show bounds of test box without interfering with margin-collapsing */ + background: black; padding-right: 2px; } + /* ensure float is contained */ + .float { float: right; background: orange; height: 2em } + /* ensure margin is contained */ + .in-flow { margin-top: 1em; background: orange } + /* ensure relpos is ignored */ + .relpos { position: relative; top: -1.5em; } + /* ensure abspos static position follows alignment */ + .wrapper { position: relative; } + .abspos { position: absolute; right: 0; margin-top: -1.5em; } + /* ensure overflow is not counted */ + .overflow { height: 0; } + + /* cram into 800x600 */ + html { max-height: 600px; columns: 3 } + .wrapper { break-inside: avoid; border: solid 2px gray; padding: 3em 0; } + + /* readability */ + .test > * { color: #8888; } + .label { color: black; font-weight: bold; } +</style> + +<body onload="checkLayout('.test');"> +<div class="wrapper"> + <div class="test" style="align-content: start" title="start"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: center" title="center"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">CENTER</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: end" title="end"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: baseline" title="baseline"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">BASELINE</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: last baseline" title="last baseline"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">LAST BASELINE</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: flex-start" title="flex-start"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">FLEX-START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: flex-end" title="flex-end"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">FLEX-END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: unsafe start" title="unsafe start"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">UNSAFE START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: unsafe center" title="unsafe center"> + <div class="float" data-offset-y="25">FLT</div> + <div class="in-flow" data-offset-y="35"></div> + <div class="in-flow"> + <div class="float" data-offset-y="35">FLT</div> + <span class="label">UNSAFE CENTER</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: unsafe end" title="unsafe end"> + <div class="float" data-offset-y="15">FLT</div> + <div class="in-flow" data-offset-y="25"></div> + <div class="in-flow"> + <div class="float" data-offset-y="25">FLT</div> + <span class="label">UNSAFE END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: safe start" title="safe start"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">SAFE START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: safe center" title="safe center"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">SAFE CENTER</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: safe end" title="safe end"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">SAFE END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: space-evenly" title="space-evenly"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">SPACE-EVENLY</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> + +<div class="wrapper"> + <div class="test" style="align-content: space-between" title="space-between"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">SPACE-BETWEEN</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: space-around" title="space-around"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">SPACE-AROUND</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: normal" title="normal"> + <div class="float" data-offset-y="40">FLT</div> + <div class="in-flow" data-offset-y="40"></div> + <div class="in-flow"> + <div class="float" data-offset-y="40">FLT</div> + <span class="label">NORMAL</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> + +<p> + <button onclick="document.querySelector('style[title]').textContent = 'html { font-size: 12px; }'">Show Text</button> +</body> diff --git a/testing/web-platform/tests/css/css-align/blocks/align-content-block-006.html b/testing/web-platform/tests/css/css-align/blocks/align-content-block-006.html new file mode 100644 index 0000000000..acdb6454bd --- /dev/null +++ b/testing/web-platform/tests/css/css-align/blocks/align-content-block-006.html @@ -0,0 +1,292 @@ +<!DOCTYPE html> +<html> +<title>CSS Box Alignment: align-content container change to large block container with floats</title> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block"> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<style title="Needed for automation; delete to review/debug"> + @import "/fonts/ahem.css"; + html { font: 10px/1 Ahem; max-width: 800px; } + .label { display: none; } + #manual { display: none; } +</style> + +<style id="initial"> + .test { height: 1em !important; } +</style> +<script> + function doTest() + { + document.body.offsetHeight; // trigger layout + document.getElementById('initial').type = 'text/plain'; // invalidate stylesheet + checkLayout('.test'); + } + window.onload = () => { + requestAnimationFrame(() => { + requestAnimationFrame(doTest); + }); + }; + window.addEventListener("click", () => { document.getElementById('manual').style.display = "inline"; }); +</script> + +<style> + html, body { margin: 0; padding: 0; } + + .test { height: 5em; margin: 0.5em 1em; + /* show bounds of test box without interfering with margin-collapsing */ + background: black; padding-right: 2px; } + /* ensure float is contained */ + .float { float: right; background: orange; height: 2em } + /* ensure margin is contained */ + .in-flow { margin-top: 1em; background: orange } + /* ensure relpos is ignored */ + .relpos { position: relative; top: -1.5em; } + /* ensure abspos static position follows alignment */ + .wrapper { position: relative; } + .abspos { position: absolute; right: 0; margin-top: -1.5em; } + /* ensure overflow is not counted */ + .overflow { height: 0; } + + /* cram into 800x600 */ + html { max-height: 600px; columns: 3 } + .wrapper { break-inside: avoid; border: solid 2px gray; } + + /* readability */ + .test > * { color: #8888; } + .label { color: black; font-weight: bold; } +</style> + +<!-- + Results should be same as align-content-block-004.html. +--> + +<body> + +<div class="wrapper"> + <div class="test" style="align-content: start" title="start"> + <div class="float" data-offset-y="5">FLT</div> + <div class="in-flow" data-offset-y="15"></div> + <div class="in-flow"> + <div class="float" data-offset-y="15">FLT</div> + <span class="label">START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: center" title="center"> + <div class="float" data-offset-y="15">FLT</div> + <div class="in-flow" data-offset-y="25"></div> + <div class="in-flow"> + <div class="float" data-offset-y="25">FLT</div> + <span class="label">CENTER</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: end" title="end"> + <div class="float" data-offset-y="25">FLT</div> + <div class="in-flow" data-offset-y="35"></div> + <div class="in-flow"> + <div class="float" data-offset-y="35">FLT</div> + <span class="label">END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: baseline" title="baseline"> + <div class="float" data-offset-y="5">FLT</div> + <div class="in-flow" data-offset-y="15"></div> + <div class="in-flow"> + <div class="float" data-offset-y="15">FLT</div> + <span class="label">BASELINE</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: last baseline" title="last baseline"> + <div class="float" data-offset-y="25">FLT</div> + <div class="in-flow" data-offset-y="35"></div> + <div class="in-flow"> + <div class="float" data-offset-y="35">FLT</div> + <span class="label">LAST BASELINE</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: flex-start" title="flex-start"> + <div class="float" data-offset-y="5">FLT</div> + <div class="in-flow" data-offset-y="15"></div> + <div class="in-flow"> + <div class="float" data-offset-y="15">FLT</div> + <span class="label">FLEX-START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: flex-end" title="flex-end"> + <div class="float" data-offset-y="25">FLT</div> + <div class="in-flow" data-offset-y="35"></div> + <div class="in-flow"> + <div class="float" data-offset-y="35">FLT</div> + <span class="label">FLEX-END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: unsafe start" title="unsafe start"> + <div class="float" data-offset-y="5">FLT</div> + <div class="in-flow" data-offset-y="15"></div> + <div class="in-flow"> + <div class="float" data-offset-y="15">FLT</div> + <span class="label">UNSAFE START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: unsafe center" title="unsafe center"> + <div class="float" data-offset-y="15">FLT</div> + <div class="in-flow" data-offset-y="25"></div> + <div class="in-flow"> + <div class="float" data-offset-y="25">FLT</div> + <span class="label">UNSAFE CENTER</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: unsafe end" title="unsafe end"> + <div class="float" data-offset-y="25">FLT</div> + <div class="in-flow" data-offset-y="35"></div> + <div class="in-flow"> + <div class="float" data-offset-y="35">FLT</div> + <span class="label">UNSAFE END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: safe start" title="safe start"> + <div class="float" data-offset-y="5">FLT</div> + <div class="in-flow" data-offset-y="15"></div> + <div class="in-flow"> + <div class="float" data-offset-y="15">FLT</div> + <span class="label">SAFE START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: safe center" title="safe center"> + <div class="float"" data-offset-y="15">FLT</div> + <div class="in-flow"" data-offset-y="25"></div> + <div class="in-flow"> + <div class="float"" data-offset-y="25">FLT</div> + <span class="label">SAFE CENTER</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: safe end" title="safe end"> + <div class="float" data-offset-y="25">FLT</div> + <div class="in-flow" data-offset-y="35"></div> + <div class="in-flow"> + <div class="float" data-offset-y="35">FLT</div> + <span class="label">SAFE END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: space-evenly" title="space-evenly"> + <div class="float" data-offset-y="15">FLT</div> + <div class="in-flow" data-offset-y="25"></div> + <div class="in-flow"> + <div class="float" data-offset-y="25">FLT</div> + <span class="label">SPACE-EVENLY</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: space-between" title="space-between"> + <div class="float" data-offset-y="5">FLT</div> + <div class="in-flow" data-offset-y="15"></div> + <div class="in-flow"> + <div class="float" data-offset-y="15">FLT</div> + <span class="label">SPACE-BETWEEN</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: space-around" title="space-around"> + <div class="float" data-offset-y="15">FLT</div> + <div class="in-flow" data-offset-y="25"></div> + <div class="in-flow"> + <div class="float" data-offset-y="25">FLT</div> + <span class="label">SPACE-AROUND</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: normal" title="normal"> + <div class="float" data-offset-y="10">FLT</div> + <div class="in-flow" data-offset-y="10"></div> + <div class="in-flow"> + <div class="float" data-offset-y="10">FLT</div> + <span class="label">NORMAL</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> + +<p> + <button onclick="document.querySelector('style[title]').textContent = 'html { font-size: 12px; }'">Show Text</button> +</body> diff --git a/testing/web-platform/tests/css/css-align/blocks/align-content-block-007.html b/testing/web-platform/tests/css/css-align/blocks/align-content-block-007.html new file mode 100644 index 0000000000..c60f640ab0 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/blocks/align-content-block-007.html @@ -0,0 +1,289 @@ +<!DOCTYPE html> +<html> +<title>CSS Box Alignment: align-content container change to small block container with floats</title> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block"> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<style title="Needed for automation; delete to review/debug"> + @import "/fonts/ahem.css"; + html { font: 10px/1 Ahem; max-width: 800px; } + .label { display: none; } + #manual { display: none; } +</style> + +<style id="initial"> + .test { height: 5em !important; } +</style> +<script> + function doTest() + { + document.body.offsetHeight; // trigger layout + document.getElementById('initial').type = 'text/plain'; // invalidate stylesheet + checkLayout('.test'); + } + window.onload = () => { + requestAnimationFrame(() => { + requestAnimationFrame(doTest); + }); + }; + window.addEventListener("click", () => { document.getElementById('manual').style.display = "inline"; }); +</script> + +<style> + html, body { margin: 0; padding: 0; } + + .test { height: 1em; margin: 0.5em 2em; + /* show bounds of test box without interfering with margin-collapsing */ + background: black; padding-right: 2px; } + /* ensure float is contained */ + .float { float: right; background: orange; height: 2em } + /* ensure margin is contained */ + .in-flow { margin-top: 1em; background: orange } + /* ensure relpos is ignored */ + .relpos { position: relative; top: -1.5em; } + /* ensure abspos static position follows alignment */ + .wrapper { position: relative; } + .abspos { position: absolute; right: 0; margin-top: -1.5em; } + /* ensure overflow is not counted */ + .overflow { height: 0; } + + /* cram into 800x600 */ + html { max-height: 600px; columns: 3 } + .wrapper { break-inside: avoid; border: solid 2px gray; padding: 3em 0; } + + /* readability */ + .test > * { color: #8888; } + .label { color: black; font-weight: bold; } +</style> + +<!-- + Results should be same as align-content-block-005.html. +--> + +<div class="wrapper"> + <div class="test" style="align-content: start" title="start"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: center" title="center"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">CENTER</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: end" title="end"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: baseline" title="baseline"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">BASELINE</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: last baseline" title="last baseline"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">LAST BASELINE</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: flex-start" title="flex-start"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">FLEX-START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: flex-end" title="flex-end"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">FLEX-END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: unsafe start" title="unsafe start"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">UNSAFE START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: unsafe center" title="unsafe center"> + <div class="float" data-offset-y="25">FLT</div> + <div class="in-flow" data-offset-y="35"></div> + <div class="in-flow"> + <div class="float" data-offset-y="35">FLT</div> + <span class="label">UNSAFE CENTER</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: unsafe end" title="unsafe end"> + <div class="float" data-offset-y="15">FLT</div> + <div class="in-flow" data-offset-y="25"></div> + <div class="in-flow"> + <div class="float" data-offset-y="25">FLT</div> + <span class="label">UNSAFE END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: safe start" title="safe start"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">SAFE START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: safe center" title="safe center"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">SAFE CENTER</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: safe end" title="safe end"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">SAFE END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: space-evenly" title="space-evenly"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">SPACE-EVENLY</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: space-between" title="space-between"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">SPACE-BETWEEN</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: space-around" title="space-around"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">SPACE-AROUND</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: normal" title="normal"> + <div class="float" data-offset-y="40">FLT</div> + <div class="in-flow" data-offset-y="40"></div> + <div class="in-flow"> + <div class="float" data-offset-y="40">FLT</div> + <span class="label">NORMAL</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> + +<p> + <button onclick="document.querySelector('style[title]').textContent = 'html { font-size: 12px; }'">Show Text</button> diff --git a/testing/web-platform/tests/css/css-align/blocks/align-content-block-008.html b/testing/web-platform/tests/css/css-align/blocks/align-content-block-008.html new file mode 100644 index 0000000000..7d088d6ae6 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/blocks/align-content-block-008.html @@ -0,0 +1,309 @@ +<!DOCTYPE html> +<html> +<title>CSS Box Alignment: align-content style change on large block container with floats</title> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block"> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<style title="Needed for automation; delete to review/debug"> + @import "/fonts/ahem.css"; + html { font: 10px/1 Ahem; max-width: 800px; } + .label { display: none; } + #manual { display: none; } +</style> + +<style id="initial"> + /* scramble test styles */ + [style$="start" ] { align-content: end !important; } + [style$="center" ] { align-content: unsafe end !important; } + [style$="end" ] { align-content: start !important; } + [style$="baseline" ] { align-content: unsafe end !important; } + [style$="last baseline"] { align-content: start !important; } + [style$="flex-start" ] { align-content: normal !important; } + [style$="flex-end" ] { align-content: start !important; } + [style$="unsafe start" ] { align-content: center !important; } + [style$="unsafe center"] { align-content: baseline !important; } + [style$="unsafe end" ] { align-content: unsafe center !important; } + [style$="safe start" ] { align-content: unsafe end !important; } + [style$="safe center" ] { align-content: normal !important; } + [style$="safe end" ] { align-content: unsafe end !important; } + [style$="space-evenly" ] { align-content: end !important; } + [style$="space-between"] { align-content: unsafe center !important; } + [style$="space-around" ] { align-content: start !important; } + [style$="normal" ] { align-content: unsafe end !important; } +</style> +<script> + function doTest() + { + document.body.offsetHeight; // trigger layout + document.getElementById('initial').type = 'text/plain'; // invalidate stylesheet + checkLayout('.test'); + } + window.onload = () => { + requestAnimationFrame(() => { + requestAnimationFrame(doTest); + }); + }; + window.addEventListener("click", () => { document.getElementById('manual').style.display = "inline"; }); +</script> + +<style> + html, body { margin: 0; padding: 0; } + + .test { height: 5em; margin: 0.5em 1em; + /* show bounds of test box without interfering with margin-collapsing */ + background: black; padding-right: 2px; } + /* ensure float is contained */ + .float { float: right; background: orange; height: 2em } + /* ensure margin is contained */ + .in-flow { margin-top: 1em; background: orange } + /* ensure relpos is ignored */ + .relpos { position: relative; top: -1.5em; } + /* ensure abspos static position follows alignment */ + .wrapper { position: relative; } + .abspos { position: absolute; right: 0; margin-top: -1.5em; } + /* ensure overflow is not counted */ + .overflow { height: 0; } + + /* cram into 800x600 */ + html { max-height: 600px; columns: 3 } + .wrapper { break-inside: avoid; border: solid 2px gray; } + + /* readability */ + .test > * { color: #8888; } + .label { color: black; font-weight: bold; } +</style> + +<!-- + Results should be same as align-content-block-004.html. +--> + +<body> + +<div class="wrapper"> + <div class="test" style="align-content: start" title="start"> + <div class="float" data-offset-y="5">FLT</div> + <div class="in-flow" data-offset-y="15"></div> + <div class="in-flow"> + <div class="float" data-offset-y="15">FLT</div> + <span class="label">START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: center" title="center"> + <div class="float" data-offset-y="15">FLT</div> + <div class="in-flow" data-offset-y="25"></div> + <div class="in-flow"> + <div class="float" data-offset-y="25">FLT</div> + <span class="label">CENTER</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: end" title="end"> + <div class="float" data-offset-y="25">FLT</div> + <div class="in-flow" data-offset-y="35"></div> + <div class="in-flow"> + <div class="float" data-offset-y="35">FLT</div> + <span class="label">END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: baseline" title="baseline"> + <div class="float" data-offset-y="5">FLT</div> + <div class="in-flow" data-offset-y="15"></div> + <div class="in-flow"> + <div class="float" data-offset-y="15">FLT</div> + <span class="label">BASELINE</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: last baseline" title="last baseline"> + <div class="float" data-offset-y="25">FLT</div> + <div class="in-flow" data-offset-y="35"></div> + <div class="in-flow"> + <div class="float" data-offset-y="35">FLT</div> + <span class="label">LAST BASELINE</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: flex-start" title="flex-start"> + <div class="float" data-offset-y="5">FLT</div> + <div class="in-flow" data-offset-y="15"></div> + <div class="in-flow"> + <div class="float" data-offset-y="15">FLT</div> + <span class="label">FLEX-START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: flex-end" title="flex-end"> + <div class="float" data-offset-y="25">FLT</div> + <div class="in-flow" data-offset-y="35"></div> + <div class="in-flow"> + <div class="float" data-offset-y="35">FLT</div> + <span class="label">FLEX-END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: unsafe start" title="unsafe start"> + <div class="float" data-offset-y="5">FLT</div> + <div class="in-flow" data-offset-y="15"></div> + <div class="in-flow"> + <div class="float" data-offset-y="15">FLT</div> + <span class="label">UNSAFE START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: unsafe center" title="unsafe center"> + <div class="float" data-offset-y="15">FLT</div> + <div class="in-flow" data-offset-y="25"></div> + <div class="in-flow"> + <div class="float" data-offset-y="25">FLT</div> + <span class="label">UNSAFE CENTER</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: unsafe end" title="unsafe end"> + <div class="float" data-offset-y="25">FLT</div> + <div class="in-flow" data-offset-y="35"></div> + <div class="in-flow"> + <div class="float" data-offset-y="35">FLT</div> + <span class="label">UNSAFE END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: safe start" title="safe start"> + <div class="float" data-offset-y="5">FLT</div> + <div class="in-flow" data-offset-y="15"></div> + <div class="in-flow"> + <div class="float" data-offset-y="15">FLT</div> + <span class="label">SAFE START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: safe center" title="safe center"> + <div class="float" data-offset-y="15">FLT</div> + <div class="in-flow" data-offset-y="25"></div> + <div class="in-flow"> + <div class="float" data-offset-y="25">FLT</div> + <span class="label">SAFE CENTER</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: safe end" title="safe end"> + <div class="float" data-offset-y="25">FLT</div> + <div class="in-flow" data-offset-y="35"></div> + <div class="in-flow"> + <div class="float" data-offset-y="35">FLT</div> + <span class="label">SAFE END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: space-evenly" title="space-evenly"> + <div class="float" data-offset-y="15">FLT</div> + <div class="in-flow" data-offset-y="25"></div> + <div class="in-flow"> + <div class="float" data-offset-y="25">FLT</div> + <span class="label">SPACE-EVENLY</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: space-between" title="space-between"> + <div class="float" data-offset-y="5">FLT</div> + <div class="in-flow" data-offset-y="15"></div> + <div class="in-flow"> + <div class="float" data-offset-y="15">FLT</div> + <span class="label">SPACE-BETWEEN</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: space-around" title="space-around"> + <div class="float" data-offset-y="15">FLT</div> + <div class="in-flow" data-offset-y="25"></div> + <div class="in-flow"> + <div class="float" data-offset-y="25">FLT</div> + <span class="label">SPACE-AROUND</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: normal" title="normal"> + <div class="float" data-offset-y="10">FLT</div> + <div class="in-flow" data-offset-y="10"></div> + <div class="in-flow"> + <div class="float" data-offset-y="10">FLT</div> + <span class="label">NORMAL</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> + +<p> + <button onclick="document.querySelector('style[title]').textContent = 'html { font-size: 12px; }'">Show Text</button> +</body> diff --git a/testing/web-platform/tests/css/css-align/blocks/align-content-block-009.html b/testing/web-platform/tests/css/css-align/blocks/align-content-block-009.html new file mode 100644 index 0000000000..df45aa588f --- /dev/null +++ b/testing/web-platform/tests/css/css-align/blocks/align-content-block-009.html @@ -0,0 +1,306 @@ +<!DOCTYPE html> +<html> +<title>CSS Box Alignment: align-content style change on small block container with floats</title> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block"> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<style title="Needed for automation; delete to review/debug"> + @import "/fonts/ahem.css"; + html { font: 10px/1 Ahem; max-width: 800px; } + .label { display: none; } + #manual { display: none; } +</style> + +<style id="initial"> + /* scramble test styles */ + [style$="start" ] { align-content: end !important; } + [style$="center" ] { align-content: unsafe end !important; } + [style$="end" ] { align-content: start !important; } + [style$="baseline" ] { align-content: unsafe end !important; } + [style$="last baseline"] { align-content: start !important; } + [style$="flex-start" ] { align-content: normal !important; } + [style$="flex-end" ] { align-content: start !important; } + [style$="unsafe start" ] { align-content: center !important; } + [style$="unsafe center"] { align-content: baseline !important; } + [style$="unsafe end" ] { align-content: unsafe center !important; } + [style$="safe start" ] { align-content: unsafe end !important; } + [style$="safe center" ] { align-content: normal !important; } + [style$="safe end" ] { align-content: unsafe end !important; } + [style$="space-evenly" ] { align-content: end !important; } + [style$="space-between"] { align-content: unsafe center !important; } + [style$="space-around" ] { align-content: start !important; } + [style$="normal" ] { align-content: unsafe end !important; } +</style> +<script> + function doTest() + { + document.body.offsetHeight; // trigger layout + document.getElementById('initial').type = 'text/plain'; // invalidate stylesheet + checkLayout('.test'); + } + window.onload = () => { + requestAnimationFrame(() => { + requestAnimationFrame(doTest); + }); + }; + window.addEventListener("click", () => { document.getElementById('manual').style.display = "inline"; }); +</script> + +<style> + html, body { margin: 0; padding: 0; } + + .test { height: 1em; margin: 0.5em 2em; + /* show bounds of test box without interfering with margin-collapsing */ + background: black; padding-right: 2px; } + /* ensure float is contained */ + .float { float: right; background: orange; height: 2em } + /* ensure margin is contained */ + .in-flow { margin-top: 1em; background: orange } + /* ensure relpos is ignored */ + .relpos { position: relative; top: -1.5em; } + /* ensure abspos static position follows alignment */ + .wrapper { position: relative; } + .abspos { position: absolute; right: 0; margin-top: -1.5em; } + /* ensure overflow is not counted */ + .overflow { height: 0; } + + /* cram into 800x600 */ + html { max-height: 600px; columns: 3 } + .wrapper { break-inside: avoid; border: solid 2px gray; padding: 3em 0; } + + /* readability */ + .test > * { color: #8888; } + .label { color: black; font-weight: bold; } +</style> + +<!-- + Results should be same as align-content-block-005.html. +--> + +<div class="wrapper"> + <div class="test" style="align-content: start" title="start"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: center" title="center"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">CENTER</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: end" title="end"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: baseline" title="baseline"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">BASELINE</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: last baseline" title="last baseline"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">LAST BASELINE</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: flex-start" title="flex-start"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">FLEX-START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: flex-end" title="flex-end"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">FLEX-END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: unsafe start" title="unsafe start"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">UNSAFE START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: unsafe center" title="unsafe center"> + <div class="float" data-offset-y="25">FLT</div> + <div class="in-flow" data-offset-y="35"></div> + <div class="in-flow"> + <div class="float" data-offset-y="35">FLT</div> + <span class="label">UNSAFE CENTER</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: unsafe end" title="unsafe end"> + <div class="float" data-offset-y="15">FLT</div> + <div class="in-flow" data-offset-y="25"></div> + <div class="in-flow"> + <div class="float" data-offset-y="25">FLT</div> + <span class="label">UNSAFE END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: safe start" title="safe start"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">SAFE START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: safe center" title="safe center"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">SAFE CENTER</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: safe end" title="safe end"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">SAFE END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: space-evenly" title="space-evenly"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">SPACE-EVENLY</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: space-between" title="space-between"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">SPACE-BETWEEN</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: space-around" title="space-around"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">SPACE-AROUND</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: normal" title="normal"> + <div class="float" data-offset-y="40">FLT</div> + <div class="in-flow" data-offset-y="40"></div> + <div class="in-flow"> + <div class="float" data-offset-y="40">FLT</div> + <span class="label">NORMAL</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> + +<p> + <button onclick="document.querySelector('style[title]').textContent = 'html { font-size: 12px; }'">Show Text</button> diff --git a/testing/web-platform/tests/css/css-align/blocks/align-content-block-010.html b/testing/web-platform/tests/css/css-align/blocks/align-content-block-010.html new file mode 100644 index 0000000000..f3ec7a4e92 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/blocks/align-content-block-010.html @@ -0,0 +1,292 @@ +<!DOCTYPE html> +<html> +<title>CSS Box Alignment: align-content content change in large block container with floats</title> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block"> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<style title="Needed for automation; delete to review/debug"> + @import "/fonts/ahem.css"; + html { font: 10px/1 Ahem; max-width: 800px; } + .label { display: none; } + #manual { display: none; } +</style> + +<style id="initial"> + .in-flow .float { height: 0; !important } +</style> +<script> + function doTest() + { + document.body.offsetHeight; // trigger layout + document.getElementById('initial').type = 'text/plain'; // invalidate stylesheet + checkLayout('.test'); + } + window.onload = () => { + requestAnimationFrame(() => { + requestAnimationFrame(doTest); + }); + }; + window.addEventListener("click", () => { document.getElementById('manual').style.display = "inline"; }); +</script> + +<style> + html, body { margin: 0; padding: 0; } + + .test { height: 5em; margin: 0.5em 1em; + /* show bounds of test box without interfering with margin-collapsing */ + background: black; padding-right: 2px; } + /* ensure float is contained */ + .float { float: right; background: orange; height: 2em } + /* ensure margin is contained */ + .in-flow { margin-top: 1em; background: orange } + /* ensure relpos is ignored */ + .relpos { position: relative; top: -1.5em; } + /* ensure abspos static position follows alignment */ + .wrapper { position: relative; } + .abspos { position: absolute; right: 0; margin-top: -1.5em; } + /* ensure overflow is not counted */ + .overflow { height: 0; } + + /* cram into 800x600 */ + html { max-height: 600px; columns: 3 } + .wrapper { break-inside: avoid; border: solid 2px gray; } + + /* readability */ + .test > * { color: #8888; } + .label { color: black; font-weight: bold; } +</style> + +<!-- + Results should be same as align-content-block-004.html. +--> + +<body> + +<div class="wrapper"> + <div class="test" style="align-content: start" title="start"> + <div class="float" data-offset-y="5">FLT</div> + <div class="in-flow" data-offset-y="15"></div> + <div class="in-flow"> + <div class="float" data-offset-y="15">FLT</div> + <span class="label">START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: center" title="center"> + <div class="float" data-offset-y="15">FLT</div> + <div class="in-flow" data-offset-y="25"></div> + <div class="in-flow"> + <div class="float" data-offset-y="25">FLT</div> + <span class="label">CENTER</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: end" title="end"> + <div class="float" data-offset-y="25">FLT</div> + <div class="in-flow" data-offset-y="35"></div> + <div class="in-flow"> + <div class="float" data-offset-y="35">FLT</div> + <span class="label">END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: baseline" title="baseline"> + <div class="float" data-offset-y="5">FLT</div> + <div class="in-flow" data-offset-y="15"></div> + <div class="in-flow"> + <div class="float" data-offset-y="15">FLT</div> + <span class="label">BASELINE</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: last baseline" title="last baseline"> + <div class="float" data-offset-y="25">FLT</div> + <div class="in-flow" data-offset-y="35"></div> + <div class="in-flow"> + <div class="float" data-offset-y="35">FLT</div> + <span class="label">LAST BASELINE</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: flex-start" title="flex-start"> + <div class="float" data-offset-y="5">FLT</div> + <div class="in-flow" data-offset-y="15"></div> + <div class="in-flow"> + <div class="float" data-offset-y="15">FLT</div> + <span class="label">FLEX-START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: flex-end" title="flex-end"> + <div class="float" data-offset-y="25">FLT</div> + <div class="in-flow" data-offset-y="35"></div> + <div class="in-flow"> + <div class="float" data-offset-y="35">FLT</div> + <span class="label">FLEX-END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: unsafe start" title="unsafe start"> + <div class="float" data-offset-y="5">FLT</div> + <div class="in-flow" data-offset-y="15"></div> + <div class="in-flow"> + <div class="float" data-offset-y="15">FLT</div> + <span class="label">UNSAFE START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: unsafe center" title="unsafe center"> + <div class="float" data-offset-y="15">FLT</div> + <div class="in-flow" data-offset-y="25"></div> + <div class="in-flow"> + <div class="float" data-offset-y="25">FLT</div> + <span class="label">UNSAFE CENTER</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: unsafe end" title="unsafe end"> + <div class="float" data-offset-y="25">FLT</div> + <div class="in-flow" data-offset-y="35"></div> + <div class="in-flow"> + <div class="float" data-offset-y="35">FLT</div> + <span class="label">UNSAFE END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: safe start" title="safe start"> + <div class="float" data-offset-y="5">FLT</div> + <div class="in-flow" data-offset-y="15"></div> + <div class="in-flow"> + <div class="float" data-offset-y="15">FLT</div> + <span class="label">SAFE START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: safe center" title="safe center"> + <div class="float" data-offset-y="15">FLT</div> + <div class="in-flow" data-offset-y="25"></div> + <div class="in-flow"> + <div class="float" data-offset-y="25">FLT</div> + <span class="label">SAFE CENTER</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: safe end" title="safe end"> + <div class="float" data-offset-y="25">FLT</div> + <div class="in-flow" data-offset-y="35"></div> + <div class="in-flow"> + <div class="float" data-offset-y="35">FLT</div> + <span class="label">SAFE END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: space-evenly" title="space-evenly"> + <div class="float" data-offset-y="15">FLT</div> + <div class="in-flow" data-offset-y="25"></div> + <div class="in-flow"> + <div class="float" data-offset-y="25">FLT</div> + <span class="label">SPACE-EVENLY</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: space-between" title="space-between"> + <div class="float" data-offset-y="5">FLT</div> + <div class="in-flow" data-offset-y="15"></div> + <div class="in-flow"> + <div class="float" data-offset-y="15">FLT</div> + <span class="label">SPACE-BETWEEN</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: space-around" title="space-around"> + <div class="float" data-offset-y="15">FLT</div> + <div class="in-flow" data-offset-y="25"></div> + <div class="in-flow"> + <div class="float" data-offset-y="25">FLT</div> + <span class="label">SPACE-AROUND</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: normal" title="normal"> + <div class="float" data-offset-y="10">FLT</div> + <div class="in-flow" data-offset-y="10"></div> + <div class="in-flow"> + <div class="float" data-offset-y="10">FLT</div> + <span class="label">NORMAL</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> + +<p> + <button onclick="document.querySelector('style[title]').textContent = 'html { font-size: 12px; }'">Show Text</button> +</body> diff --git a/testing/web-platform/tests/css/css-align/blocks/align-content-block-011.html b/testing/web-platform/tests/css/css-align/blocks/align-content-block-011.html new file mode 100644 index 0000000000..9210f5a83a --- /dev/null +++ b/testing/web-platform/tests/css/css-align/blocks/align-content-block-011.html @@ -0,0 +1,290 @@ +<!DOCTYPE html> +<html> +<title>CSS Box Alignment: align-content content change on small block container with floats</title> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block"> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<style title="Needed for automation; delete to review/debug"> + @import "/fonts/ahem.css"; + html { font: 10px/1 Ahem; max-width: 800px; } + .label { display: none; } + #manual { display: none; } +</style> + +<style id="initial"> + .in-flow .float { height: 0; !important } +</style> +<script> + function doTest() + { + document.body.offsetHeight; // trigger layout + document.getElementById('initial').type = 'text/plain'; // invalidate stylesheet + checkLayout('.test'); + } + window.onload = () => { + requestAnimationFrame(() => { + requestAnimationFrame(doTest); + }); + }; + window.addEventListener("click", () => { document.getElementById('manual').style.display = "inline"; }); +</script> + +<style> + html, body { margin: 0; padding: 0; } + + .test { height: 1em; margin: 0.5em 2em; + /* show bounds of test box without interfering with margin-collapsing */ + background: black; padding-right: 2px; } + /* ensure float is contained */ + .float { float: right; background: orange; height: 2em } + /* ensure margin is contained */ + .in-flow { margin-top: 1em; background: orange } + /* ensure relpos is ignored */ + .relpos { position: relative; top: -1.5em; } + /* ensure abspos static position follows alignment */ + .wrapper { position: relative; } + .abspos { position: absolute; right: 0; margin-top: -1.5em; } + /* ensure overflow is not counted */ + .overflow { height: 0; } + + /* cram into 800x600 */ + html { max-height: 600px; columns: 3 } + .wrapper { break-inside: avoid; border: solid 2px gray; padding: 3em 0; } + + /* readability */ + .test > * { color: #8888; } + .label { color: black; font-weight: bold; } +</style> + +<!-- + Results should be same as align-content-block-005.html. +--> + +<div class="wrapper"> + <div class="test" style="align-content: start" title="start"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: center" title="center"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">CENTER</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: end" title="end"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: baseline" title="baseline"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">BASELINE</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: last baseline" title="last baseline"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">LAST BASELINE</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: flex-start" title="flex-start"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">FLEX-START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: flex-end" title="flex-end"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">FLEX-END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: unsafe start" title="unsafe start"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">UNSAFE START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: unsafe center" title="unsafe center"> + <div class="float" data-offset-y="25">FLT</div> + <div class="in-flow" data-offset-y="35"></div> + <div class="in-flow"> + <div class="float" data-offset-y="35">FLT</div> + <span class="label">UNSAFE CENTER</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: unsafe end" title="unsafe end"> + <div class="float" data-offset-y="15">FLT</div> + <div class="in-flow" data-offset-y="25"></div> + <div class="in-flow"> + <div class="float" data-offset-y="25">FLT</div> + <span class="label">UNSAFE END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: safe start" title="safe start"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">SAFE START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: safe center" title="safe center"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">SAFE CENTER</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: safe end" title="safe end"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">SAFE END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: space-evenly" title="space-evenly"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">SPACE-EVENLY</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: space-between" title="space-between"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">SPACE-BETWEEN</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: space-around" title="space-around"> + <div class="float" data-offset-y="35">FLT</div> + <div class="in-flow" data-offset-y="45"></div> + <div class="in-flow"> + <div class="float" data-offset-y="45">FLT</div> + <span class="label">SPACE-AROUND</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: normal" title="normal"> + <div class="float" data-offset-y="40">FLT</div> + <div class="in-flow" data-offset-y="40"></div> + <div class="in-flow"> + <div class="float" data-offset-y="40">FLT</div> + <span class="label">NORMAL</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> + +<p> + <button onclick="document.querySelector('style[title]').textContent = 'html { font-size: 12px; }'">Show Text</button> + diff --git a/testing/web-platform/tests/css/css-align/blocks/align-content-block-break-content-010-aligned-ref.html b/testing/web-platform/tests/css/css-align/blocks/align-content-block-break-content-010-aligned-ref.html new file mode 100644 index 0000000000..4c92cc9b45 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/blocks/align-content-block-break-content-010-aligned-ref.html @@ -0,0 +1,186 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: align-content block fragmentation: simple content</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block"> + +<style title="Needed for automation; delete to review/debug"> + @import "/fonts/ahem.css"; + html { font: 10px/1 Ahem; max-width: 780px; } +</style> + +<style> + .pager { + column-fill: auto; + column-width: 15em; + height: 5em; + } + .test { + height: 5em; break-inside: avoid; + /* show bounds of test box without interfering with margin-collapsing */ + border-inline: solid black 1em; + } + .test:last-child { + height: 4em; + } + .large, .float { + height: 2.5em; + break-inside: avoid; + padding: 2px; /* using padding because of margin handling bugs + margin: 2px; +switch back once fixed */ + background: orange; + } + .float { + float: right; + } + .nobr { + break-inside: avoid; + } + + /* readability */ + .pager { border: solid 2px gray; margin: 0.5em 0; } + .test { color: #8888; text-align: center; } + .label { color: black; font-weight: bold; } + + /* reference */ + .center .test { align-content: center; } + .end .test { align-content: end; } + /* margins are truncated by unforced breaks, so mimic that */ + .test .large:first-child { margin-top: 0; } + .test .large:last-child { margin-bottom: 0; } +</style> + +<!-- + This test creates breaks: + * after some directly-contained text + * after a fixed-height block + * through some nested text + * after a block containing text +--> + +<div class="pager center"> + <div class="test"> + <span class="label">CENTER</span><br>LINE 2<br>LINE 3 + </div> + <div class="test"> + <div class="large"></div> + </div> + <div class="test"> + <div class="large"></div> + <div> + LINE 4 + </div> + </div> + <div class="test"> + <div> + <div class="nobr">LINE 5<br>LINE 6</div> + </div> + </div> + </div> +</div> + + +<div class="pager end"> + <div class="test"> + <span class="label">END</span><br>LINE 2<br>LINE 3 + </div> + <div class="test"> + <div class="large"></div> + </div> + <div class="test"> + <div class="large"></div> + <div> + LINE 4 + </div> + </div> + <div class="test"> + <div> + <div class="nobr">LINE 5<br>LINE 6</div> + </div> + </div> + </div> +</div> + +<div class="pager"> + <div class="test"> + <span class="label">BASELINE</span><br>LINE 2<br>LINE 3 + </div> + <div class="test"> + <div class="large"></div> + </div> + <div class="test"> + <div class="large"></div> + <div> + LINE 4 + </div> + </div> + <div class="test"> + <div> + <div class="nobr">LINE 5<br>LINE 6</div> + </div> + </div> + </div> +</div> + +<div class="pager"> + <div class="test"> + <span class="label">LAST BASELINE</span><br>LINE 2<br>LINE 3 + </div> + <div class="test"> + <div class="large"></div> + </div> + <div class="test"> + <div class="large"></div> + <div> + LINE 4 + </div> + </div> + <div class="test"> + <div> + <div class="nobr">LINE 5<br>LINE 6</div> + </div> + </div> + </div> +</div> + +<div class="pager center"> + <div class="test"> + <span class="label">UNSAFE CENTER</span><br>LINE 2<br>LINE 3 + </div> + <div class="test"> + <div class="large"></div> + </div> + <div class="test"> + <div class="large"></div> + <div> + LINE 4 + </div> + </div> + <div class="test"> + <div> + <div class="nobr">LINE 5<br>LINE 6</div> + </div> + </div> + </div> +</div> + +<div class="pager end"> + <div class="test"> + <span class="label">UNSAFE END</span><br>LINE 2<br>LINE 3 + </div> + <div class="test"> + <div class="large"></div> + </div> + <div class="test"> + <div class="large"></div> + <div> + LINE 4 + </div> + </div> + <div class="test"> + <div> + <div class="nobr">LINE 5<br>LINE 6</div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-align/blocks/align-content-block-break-content-010-unaligned-ref.html b/testing/web-platform/tests/css/css-align/blocks/align-content-block-break-content-010-unaligned-ref.html new file mode 100644 index 0000000000..458fcf2893 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/blocks/align-content-block-break-content-010-unaligned-ref.html @@ -0,0 +1,130 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: align-content block fragmentation: simple content</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block"> + +<style title="Needed for automation; delete to review/debug"> + @import "/fonts/ahem.css"; + html { font: 10px/1 Ahem; max-width: 780px; } +</style> + +<style> + .pager { + column-fill: auto; + column-width: 15em; + height: 5em; + } + .test { + height: 19em; + /* show bounds of test box without interfering with margin-collapsing */ + border-inline: solid black 1em; + } + .large, .float { + height: 2.5em; + break-inside: avoid; + padding: 2px; /* using padding because of margin handling bugs + margin: 2px; +switch back once fixed */ + background: orange; + } + .float { + float: right; + } + .nobr { + break-inside: avoid; + } + + /* readability */ + .pager { border: solid 2px gray; margin: 0.5em 0; } + .test { color: #8888; text-align: center; } + .label { color: black; font-weight: bold; } + .test .large { margin-top: 0; } /* margins truncated by unforced breaks */ +</style> + +<!-- + This test creates breaks: + * after some directly-contained text + * after a fixed-height block + * through some nested text + * after a block containing text +--> + +<div class="pager"> + <div class="test"> + <span class="label">CENTER</span><br>LINE 2<br>LINE 3 + <div class="large"></div> + <div class="large"></div> + <div> + LINE 4 + <div class="nobr">LINE 5<br>LINE 6</div> + </div> + </div> + </div> +</div> + + +<div class="pager"> + <div class="test"> + <span class="label">END</span><br>LINE 2<br>LINE 3 + <div class="large"></div> + <div class="large"></div> + <div> + LINE 4 + <div class="nobr">LINE 5<br>LINE 6</div> + </div> + </div> + </div> +</div> + +<div class="pager"> + <div class="test"> + <span class="label">BASELINE</span><br>LINE 2<br>LINE 3 + <div class="large"></div> + <div class="large"></div> + <div> + LINE 4 + <div class="nobr">LINE 5<br>LINE 6</div> + </div> + </div> + </div> +</div> + +<div class="pager"> + <div class="test"> + <span class="label">LAST BASELINE</span><br>LINE 2<br>LINE 3 + <div class="large"></div> + <div class="large"></div> + <div> + LINE 4 + <div class="nobr">LINE 5<br>LINE 6</div> + </div> + </div> + </div> +</div> + +<div class="pager"> + <div class="test"> + <span class="label">UNSAFE CENTER</span><br>LINE 2<br>LINE 3 + <div class="large"></div> + <div class="large"></div> + <div> + LINE 4 + <div class="nobr">LINE 5<br>LINE 6</div> + </div> + </div> + </div> +</div> + + +<div class="pager"> + <div class="test"> + <span class="label">UNSAFE END</span><br>LINE 2<br>LINE 3 + <div class="large"></div> + <div class="large"></div> + <div> + LINE 4 + <div class="nobr">LINE 5<br>LINE 6</div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-align/blocks/align-content-block-break-content-010.html b/testing/web-platform/tests/css/css-align/blocks/align-content-block-break-content-010.html new file mode 100644 index 0000000000..27a56a608f --- /dev/null +++ b/testing/web-platform/tests/css/css-align/blocks/align-content-block-break-content-010.html @@ -0,0 +1,133 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: align-content block fragmentation: simple content</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block"> +<meta name="flags" content="may"> +<!-- fragmented alignment is underdefined; these are two possibilities --> +<link rel="match" href="align-content-block-break-content-010-aligned-ref.html"> +<link rel="match" href="align-content-block-break-content-010-unaligned-ref.html"> + +<style title="Needed for automation; delete to review/debug"> + @import "/fonts/ahem.css"; + html { font: 10px/1 Ahem; max-width: 780px; } +</style> + +<style> + .pager { + column-fill: auto; + column-width: 15em; + height: 5em; + } + .test { + height: 19em; + /* show bounds of test box without interfering with margin-collapsing */ + border-inline: solid black 1em; + } + .large, .float { + height: 2.5em; + break-inside: avoid; + padding: 2px; /* using padding because of margin handling bugs + margin: 2px; +switch back once fixed */ + background: orange; + } + .float { + float: right; + } + .nobr { + break-inside: avoid; + } + + /* readability */ + .pager { border: solid 2px gray; margin: 0.5em 0; } + .test { color: #8888; text-align: center; } + .label { color: black; font-weight: bold; } +</style> + +<!-- + This test creates breaks: + * after some directly-contained text + * after a fixed-height block + * through some nested text + * after a block containing text +--> + +<div class="pager"> + <div class="test" style="align-content: center"> + <span class="label">CENTER</span><br>LINE 2<br>LINE 3 + <div class="large"></div> + <div class="large"></div> + <div> + LINE 4 + <div class="nobr">LINE 5<br>LINE 6</div> + </div> + </div> + </div> +</div> + + +<div class="pager"> + <div class="test" style="align-content: end"> + <span class="label">END</span><br>LINE 2<br>LINE 3 + <div class="large"></div> + <div class="large"></div> + <div> + LINE 4 + <div class="nobr">LINE 5<br>LINE 6</div> + </div> + </div> + </div> +</div> + +<div class="pager"> + <div class="test" style="align-content: baseline"> + <span class="label">BASELINE</span><br>LINE 2<br>LINE 3 + <div class="large"></div> + <div class="large"></div> + <div> + LINE 4 + <div class="nobr">LINE 5<br>LINE 6</div> + </div> + </div> + </div> +</div> + +<div class="pager"> + <div class="test" style="align-content: last baseline"> + <span class="label">LAST BASELINE</span><br>LINE 2<br>LINE 3 + <div class="large"></div> + <div class="large"></div> + <div> + LINE 4 + <div class="nobr">LINE 5<br>LINE 6</div> + </div> + </div> + </div> +</div> + +<div class="pager"> + <div class="test" style="align-content: unsafe center"> + <span class="label">UNSAFE CENTER</span><br>LINE 2<br>LINE 3 + <div class="large"></div> + <div class="large"></div> + <div> + LINE 4 + <div class="nobr">LINE 5<br>LINE 6</div> + </div> + </div> + </div> +</div> + + +<div class="pager"> + <div class="test" style="align-content: unsafe end"> + <span class="label">UNSAFE END</span><br>LINE 2<br>LINE 3 + <div class="large"></div> + <div class="large"></div> + <div> + LINE 4 + <div class="nobr">LINE 5<br>LINE 6</div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-align/blocks/align-content-block-break-content-020-aligned-ref.html b/testing/web-platform/tests/css/css-align/blocks/align-content-block-break-content-020-aligned-ref.html new file mode 100644 index 0000000000..6a0e387149 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/blocks/align-content-block-break-content-020-aligned-ref.html @@ -0,0 +1,244 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: align-content block fragmentation: complex block content</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block"> + +<style title="Needed for automation; delete to review/debug"> + @import "/fonts/ahem.css"; + html { font: 10px/1 Ahem; max-width: 800px; } +</style> + +<style> + .pager { + column-fill: auto; + column-width: 15em; + height: 5em; + } + .test { + height: 5em; break-inside: avoid; + /* show bounds of test box without interfering with margin-collapsing */ + border-inline: solid black 1em; + } + .test:last-child { + height: 4.5em; + } + .large, .float { + height: 2.5em; + break-inside: avoid; + background: orange; + } + .float { + float: right; + } + .margin { + padding: 0.2em; /* using padding because of margin handling bugs + margin-block: 0.5em; + } + .margin > * { + margin-block: -0.3em; +switch back once fixed */ + } + hr { + border: solid 1px; margin: 0.5em; + } + + /* readability */ + .pager { border: solid 2px gray; margin: 0.5em 0; } + .test { color: #8888; text-align: center; } + .label { color: black; font-weight: bold; } + + /* reference */ + .center .test { align-content: center; } + .end .test { align-content: end; } + /* margins are truncated by unforced breaks, so mimic that */ + .test .large:first-child { margin-top: 0; } + .test .large:last-child { margin-bottom: 0; } +</style> + +<!-- + This test creates breaks: + * between two blocks with collapsing negative margins + * through the middle of a float + * through some nested text + * after a nested float +--> + +<div class="pager center"> + <div class="test"> + <span class="label">CENTER</span> + <div class="margin"> + <div class="large"></div> + </div> + </div> + <div class="test"> + <div class="margin"> + <div class="large"></div> + </div> + LINE 1<br>LINE 2 + </div> + <div class="test"> + <div class="float">FLT</div> + LINE 3 + <hr> + <div> + LINE 4<br>LINE 5 + </div> + </div> + <div class="test"> + <div> + LINE 6 + <div class="float">FLT</div> + </div> + LINE 7 + </div> +</div> + +<div class="pager end"> + <div class="test"> + <span class="label">END</span> + <div class="margin"> + <div class="large"></div> + </div> + </div> + <div class="test"> + <div class="margin"> + <div class="large"></div> + </div> + LINE 1<br>LINE 2 + </div> + <div class="test"> + <div class="float">FLT</div> + LINE 3 + <hr> + <div> + LINE 4<br>LINE 5 + </div> + </div> + <div class="test"> + <div> + LINE 6 + <div class="float">FLT</div> + </div> + LINE 7 + </div> +</div> + +<div class="pager"> + <div class="test"> + <span class="label">BASELINE</span> + <div class="margin"> + <div class="large"></div> + </div> + </div> + <div class="test"> + <div class="margin"> + <div class="large"></div> + </div> + LINE 1<br>LINE 2 + </div> + <div class="test"> + <div class="float">FLT</div> + LINE 3 + <hr> + <div> + LINE 4<br>LINE 5 + </div> + </div> + <div class="test"> + <div> + LINE 6 + <div class="float">FLT</div> + </div> + LINE 7 + </div> +</div> + +<div class="pager"> + <div class="test"> + <span class="label">LAST BASELINE</span> + <div class="margin"> + <div class="large"></div> + </div> + </div> + <div class="test"> + <div class="margin"> + <div class="large"></div> + </div> + LINE 1<br>LINE 2 + </div> + <div class="test"> + <div class="float">FLT</div> + LINE 3 + <hr> + <div> + LINE 4<br>LINE 5 + </div> + </div> + <div class="test"> + <div> + LINE 6 + <div class="float">FLT</div> + </div> + LINE 7 + </div> +</div> + +<div class="pager center"> + <div class="test"> + <span class="label">UNSAFE CENTER</span> + <div class="margin"> + <div class="large"></div> + </div> + </div> + <div class="test"> + <div class="margin"> + <div class="large"></div> + </div> + LINE 1<br>LINE 2 + </div> + <div class="test"> + <div class="float">FLT</div> + LINE 3 + <hr> + <div> + LINE 4<br>LINE 5 + </div> + </div> + <div class="test"> + <div> + LINE 6 + <div class="float">FLT</div> + </div> + LINE 7 + </div> +</div> + +<div class="pager end"> + <div class="test"> + <span class="label">UNSAFE END</span> + <div class="margin"> + <div class="large"></div> + </div> + </div> + <div class="test"> + <div class="margin"> + <div class="large"></div> + </div> + LINE 1<br>LINE 2 + </div> + <div class="test"> + <div class="float">FLT</div> + LINE 3 + <hr> + <div> + LINE 4<br>LINE 5 + </div> + </div> + <div class="test"> + <div> + LINE 6 + <div class="float">FLT</div> + </div> + LINE 7 + </div> +</div> diff --git a/testing/web-platform/tests/css/css-align/blocks/align-content-block-break-content-020-unaligned-ref.html b/testing/web-platform/tests/css/css-align/blocks/align-content-block-break-content-020-unaligned-ref.html new file mode 100644 index 0000000000..730c8741d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/blocks/align-content-block-break-content-020-unaligned-ref.html @@ -0,0 +1,174 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: align-content block fragmentation: complex block content</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block"> + +<style title="Needed for automation; delete to review/debug"> + @import "/fonts/ahem.css"; + html { font: 10px/1 Ahem; max-width: 800px; } +</style> + +<style> + .pager { + column-fill: auto; + column-width: 15em; + height: 5em; + } + .test { + height: 19.5em; + /* show bounds of test box without interfering with margin-collapsing */ + border-inline: solid black 1em; + } + .large, .float { + height: 2.5em; + break-inside: avoid; + background: orange; + } + .float { + float: right; + } + .margin { + padding: 0.2em; /* using padding because of margin handling bugs + margin-block: 0.5em; + } + .margin > * { + margin-block: -0.3em; +switch back once fixed */ + } + hr { + border: solid 1px; margin: 0.5em; + } + + /* readability */ + .pager { border: solid 2px gray; margin: 0.5em 0; } + .test { color: #8888; text-align: center; } + .label { color: black; font-weight: bold; } +</style> + +<!-- + This test creates breaks: + * between two blocks with collapsing negative margins + * through the middle of a float + * through some nested text + * after a nested float +--> + +<div class="pager"> + <div class="test"> + <span class="label">CENTER</span> + <div class="margin"> + <div class="large"></div> + <div class="large"></div> + </div> + LINE 1<br> + <div class="float">FLT</div> + LINE 2<br>LINE 3 + <hr> + <div> + LINE 4<br>LINE 5<br>LINE 6 + <div class="float">FLT</div> + </div> + LINE 7 + </div> + </div> +</div> + +<div class="pager"> + <div class="test"> + <span class="label">END</span> + <div class="margin"> + <div class="large"></div> + <div class="large"></div> + </div> + LINE 1<br> + <div class="float">FLT</div> + LINE 2<br>LINE 3 + <hr> + <div> + LINE 4<br>LINE 5<br>LINE 6 + <div class="float">FLT</div> + </div> + LINE 7 + </div> + </div> +</div> + +<div class="pager"> + <div class="test"> + <span class="label">BASELINE</span> + <div class="margin"> + <div class="large"></div> + <div class="large"></div> + </div> + LINE 1<br> + <div class="float">FLT</div> + LINE 2<br>LINE 3 + <hr> + <div> + LINE 4<br>LINE 5<br>LINE 6 + <div class="float">FLT</div> + </div> + LINE 7 + </div> + </div> +</div> + +<div class="pager"> + <div class="test"> + <span class="label">LAST BASELINE</span> + <div class="margin"> + <div class="large"></div> + <div class="large"></div> + </div> + LINE 1<br> + <div class="float">FLT</div> + LINE 2<br>LINE 3 + <hr> + <div> + LINE 4<br>LINE 5<br>LINE 6 + <div class="float">FLT</div> + </div> + LINE 7 + </div> + </div> +</div> + +<div class="pager"> + <div class="test"> + <span class="label">UNSAFE CENTER</span> + <div class="margin"> + <div class="large"></div> + <div class="large"></div> + </div> + LINE 1<br> + <div class="float">FLT</div> + LINE 2<br>LINE 3 + <hr> + <div> + LINE 4<br>LINE 5<br>LINE 6 + <div class="float">FLT</div> + </div> + LINE 7 + </div> + </div> +</div> + +<div class="pager"> + <div class="test"> + <span class="label">UNSAFE END</span> + <div class="margin"> + <div class="large"></div> + <div class="large"></div> + </div> + LINE 1<br> + <div class="float">FLT</div> + LINE 2<br>LINE 3 + <hr> + <div> + LINE 4<br>LINE 5<br>LINE 6 + <div class="float">FLT</div> + </div> + LINE 7 + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-align/blocks/align-content-block-break-content-020.html b/testing/web-platform/tests/css/css-align/blocks/align-content-block-break-content-020.html new file mode 100644 index 0000000000..83267301b4 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/blocks/align-content-block-break-content-020.html @@ -0,0 +1,177 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: align-content block fragmentation: complex block content</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block"> +<meta name="flags" content="may"> +<!-- fragmented alignment is underdefined; these are two possibilities --> +<link rel="match" href="align-content-block-break-content-010-aligned-ref.html"> +<link rel="match" href="align-content-block-break-content-010-unaligned-ref.html"> + +<style title="Needed for automation; delete to review/debug"> + @import "/fonts/ahem.css"; + html { font: 10px/1 Ahem; max-width: 800px; } +</style> + +<style> + .pager { + column-fill: auto; + column-width: 15em; + height: 5em; + } + .test { + height: 19.5em; + /* show bounds of test box without interfering with margin-collapsing */ + border-inline: solid black 1em; + } + .large, .float { + height: 2.5em; + break-inside: avoid; + background: orange; + } + .float { + float: right; + } + .margin { + padding: 0.2em; /* using padding because of margin handling bugs + margin-block: 0.5em; + } + .margin > * { + margin-block: -0.3em; +switch back once fixed */ + } + hr { + border: solid 1px; margin: 0.5em; } + + /* readability */ + .pager { border: solid 2px gray; margin: 0.5em 0; } + .test { color: #8888; text-align: center; } + .label { color: black; font-weight: bold; } +</style> + +<!-- + This test creates breaks: + * between two blocks with collapsing negative margins + * through the middle of a float + * through some nested text + * after a nested float +--> + +<div class="pager"> + <div class="test" style="align-content: center"> + <span class="label">CENTER</span> + <div class="margin"> + <div class="large"></div> + <div class="large"></div> + </div> + LINE 1<br> + <div class="float">FLT</div> + LINE 2<br>LINE 3 + <hr> + <div> + LINE 4<br>LINE 5<br>LINE 6 + <div class="float">FLT</div> + </div> + LINE 7 + </div> + </div> +</div> + +<div class="pager"> + <div class="test" style="align-content: end"> + <span class="label">END</span> + <div class="margin"> + <div class="large"></div> + <div class="large"></div> + </div> + LINE 1<br> + <div class="float">FLT</div> + LINE 2<br>LINE 3 + <hr> + <div> + LINE 4<br>LINE 5<br>LINE 6 + <div class="float">FLT</div> + </div> + LINE 7 + </div> + </div> +</div> + +<div class="pager"> + <div class="test" style="align-content: baseline"> + <span class="label">BASELINE</span> + <div class="margin"> + <div class="large"></div> + <div class="large"></div> + </div> + LINE 1<br> + <div class="float">FLT</div> + LINE 2<br>LINE 3 + <hr> + <div> + LINE 4<br>LINE 5<br>LINE 6 + <div class="float">FLT</div> + </div> + LINE 7 + </div> + </div> +</div> + +<div class="pager"> + <div class="test" style="align-content: last baseline"> + <span class="label">LAST BASELINE</span> + <div class="margin"> + <div class="large"></div> + <div class="large"></div> + </div> + LINE 1<br> + <div class="float">FLT</div> + LINE 2<br>LINE 3 + <hr> + <div> + LINE 4<br>LINE 5<br>LINE 6 + <div class="float">FLT</div> + </div> + LINE 7 + </div> + </div> +</div> + +<div class="pager"> + <div class="test" style="align-content: unsafe center"> + <span class="label">UNSAFE CENTER</span> + <div class="margin"> + <div class="large"></div> + <div class="large"></div> + </div> + LINE 1<br> + <div class="float">FLT</div> + LINE 2<br>LINE 3 + <hr> + <div> + LINE 4<br>LINE 5<br>LINE 6 + <div class="float">FLT</div> + </div> + LINE 7 + </div> + </div> +</div> + +<div class="pager"> + <div class="test" style="align-content: unsafe end"> + <span class="label">UNSAFE END</span> + <div class="margin"> + <div class="large"></div> + <div class="large"></div> + </div> + LINE 1<br> + <div class="float">FLT</div> + LINE 2<br>LINE 3 + <hr> + <div> + LINE 4<br>LINE 5<br>LINE 6 + <div class="float">FLT</div> + </div> + LINE 7 + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-align/blocks/align-content-block-break-overflow-010-ref.html b/testing/web-platform/tests/css/css-align/blocks/align-content-block-break-overflow-010-ref.html new file mode 100644 index 0000000000..68af3244e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/blocks/align-content-block-break-overflow-010-ref.html @@ -0,0 +1,162 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: align-content fragmentation: simple block content</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block"> + +<style title="Needed for automation; delete to review/debug"> + @import "/fonts/ahem.css"; + html { font: 10px/1 Ahem; max-width: 780px; } +</style> + +<style> + .pager { + column-fill: auto; + column-width: 15em; + height: 5em; + } + .test { + height: 5em; + break-inside: avoid; + /* show bounds of test box without interfering with margin-collapsing */ + border-inline: solid black 1em; + } + .test:last-child { + height: 4em; + } + .large, .float { + height: 2.5em; + break-inside: avoid; + padding: 2px; /* using padding because of margin handling bugs + margin: 2px; +switch back once fixed */ + background: orange; + } + .float { + float: right; + } + .nobr { + break-inside: avoid; + } + + /* readability */ + .pager { border: solid 2px gray; margin: 0.5em 0; } + .test { color: #8888; text-align: center; } + .label { color: black; font-weight: bold; } +</style> + +<!-- + This test creates breaks in overflow: + * after some directly-contained text + * after a fixed-height block + * through some nested text + * after a block containing text +--> + +<div class="pager"> + <div class="test"> + <span class="label">CENTER</span> + <br>LINE 2<br>LINE 3 + </div> + <div class="test"> + <div class="large"></div> + </div> + <div class="test"> + <div class="large"></div> + LINE 4 + </div> + <div class="test"> + <div class="nobr">LINE 5<br>LINE 6</div> + </div> + </div> +</div> + + +<div class="pager"> + <div class="test"> + <span class="label">END</span> + <br>LINE 2<br>LINE 3 + </div> + <div class="test"> + <div class="large"></div> + </div> + <div class="test"> + <div class="large"></div> + LINE 4 + </div> + <div class="test"> + <div class="nobr">LINE 5<br>LINE 6</div> + </div> + </div> +</div> + +<div class="pager"> + <div class="test"> + <span class="label">BASELINE</span> + <br>LINE 2<br>LINE 3 + </div> + <div class="test"> + <div class="large"></div> + </div> + <div class="test"> + <div class="large"></div> + LINE 4 + </div> + <div class="test"> + <div class="nobr">LINE 5<br>LINE 6</div> + </div> + </div> +</div> + +<div class="pager"> + <div class="test"> + <span class="label">LAST BASELINE</span> + <br>LINE 2<br>LINE 3 + </div> + <div class="test"> + <div class="large"></div> + </div> + <div class="test"> + <div class="large"></div> + LINE 4 + </div> + <div class="test"> + <div class="nobr">LINE 5<br>LINE 6</div> + </div> + </div> +</div> + +<div class="pager"> + <div class="test"> + <span class="label">UNSAFE CENTER</span> + <br>LINE 2<br>LINE 3 + </div> + <div class="test"> + <div class="large"></div> + </div> + <div class="test"> + <div class="large"></div> + LINE 4 + </div> + <div class="test"> + <div class="nobr">LINE 5<br>LINE 6</div> + </div> + </div> +</div> + +<div class="pager"> + <div class="test"> + <span class="label">UNSAFE END</span> + <br>LINE 2<br>LINE 3 + </div> + <div class="test"> + <div class="large"></div> + </div> + <div class="test"> + <div class="large"></div> + LINE 4 + </div> + <div class="test"> + <div class="nobr">LINE 5<br>LINE 6</div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-align/blocks/align-content-block-break-overflow-010.html b/testing/web-platform/tests/css/css-align/blocks/align-content-block-break-overflow-010.html new file mode 100644 index 0000000000..cde57ad7a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/blocks/align-content-block-break-overflow-010.html @@ -0,0 +1,154 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: align-content fragmentation: simple block content</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block"> +<meta name="flags" content="may"> +<!-- fragmented alignment is underdefined; this is one possibility --> +<link rel="match" href="align-content-block-break-overflow-010-ref.html"> + +<style title="Needed for automation; delete to review/debug"> + @import "/fonts/ahem.css"; + html { font: 10px/1 Ahem; max-width: 780px; } +</style> + +<style> + .pager { + column-fill: auto; + column-width: 15em; + height: 5em; + } + .test { + height: 19em; + /* show bounds of test box without interfering with margin-collapsing */ + border-inline: solid black 1em; + } + .overflow { + height: 0; + /* show bounds of overflow box without interfering with margin-collapsing */ + background: red; + } + .large, .float { + height: 2.5em; + break-inside: avoid; + padding: 2px; /* using padding because of margin handling bugs + margin: 2px; +switch back once fixed */ + background: orange; + } + .float { + float: right; + } + .nobr { + break-inside: avoid; + } + + /* readability */ + .pager { border: solid 2px gray; margin: 0.5em 0; } + .test { color: #8888; text-align: center; } + .label { color: black; font-weight: bold; } +</style> + +<!-- + This test creates breaks in overflow: + * after some directly-contained text + * after a fixed-height block + * through some nested text + * after a block containing text +--> + +<div class="pager"> + <div class="test" style="align-content: center"> + <span class="label">CENTER</span> + <div class="overflow"> + LINE 2<br>LINE 3 + <div class="large"></div> + <div class="large"></div> + <div> + LINE 4 + <div class="nobr">LINE 5<br>LINE 6</div> + </div> + </div> + </div> + </div> +</div> + + +<div class="pager"> + <div class="test" style="align-content: end"> + <span class="label">END</span> + <div class="overflow"> + LINE 2<br>LINE 3 + <div class="large"></div> + <div class="large"></div> + <div> + LINE 4 + <div class="nobr">LINE 5<br>LINE 6</div> + </div> + </div> + </div> + </div> +</div> + +<div class="pager"> + <div class="test" style="align-content: baseline"> + <span class="label">BASELINE</span> + <div class="overflow"> + LINE 2<br>LINE 3 + <div class="large"></div> + <div class="large"></div> + <div> + LINE 4 + <div class="nobr">LINE 5<br>LINE 6</div> + </div> + </div> + </div> + </div> +</div> + +<div class="pager"> + <div class="test" style="align-content: last baseline"> + <span class="label">LAST BASELINE</span> + <div class="overflow"> + LINE 2<br>LINE 3 + <div class="large"></div> + <div class="large"></div> + <div> + LINE 4 + <div class="nobr">LINE 5<br>LINE 6</div> + </div> + </div> + </div> + </div> +</div> + +<div class="pager"> + <div class="test" style="align-content: unsafe center"> + <span class="label">UNSAFE CENTER</span> + <div class="overflow"> + LINE 2<br>LINE 3 + <div class="large"></div> + <div class="large"></div> + <div> + LINE 4 + <div class="nobr">LINE 5<br>LINE 6</div> + </div> + </div> + </div> + </div> +</div> + +<div class="pager"> + <div class="test" style="align-content: unsafe end"> + <span class="label">UNSAFE END</span> + <div class="overflow"> + LINE 2<br>LINE 3 + <div class="large"></div> + <div class="large"></div> + <div> + LINE 4 + <div class="nobr">LINE 5<br>LINE 6</div> + </div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-align/blocks/align-content-block-break-overflow-020-ref.html b/testing/web-platform/tests/css/css-align/blocks/align-content-block-break-overflow-020-ref.html new file mode 100644 index 0000000000..7b27284cdf --- /dev/null +++ b/testing/web-platform/tests/css/css-align/blocks/align-content-block-break-overflow-020-ref.html @@ -0,0 +1,215 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: align-content block fragmentation: complex block content</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block"> + +<style title="Needed for automation; delete to review/debug"> + @import "/fonts/ahem.css"; + html { font: 10px/1 Ahem; max-width: 800px; } +</style> + +<style> + .pager { + column-fill: auto; + column-width: 15em; + height: 5em; + } + .test { + height: 5em; + break-inside: avoid; + /* show bounds of test box without interfering with margin-collapsing */ + border-left: solid black 1em; + } + .test:last-child { + height: 4.5em; + } + .large, .float { + height: 2.5em; + break-inside: avoid; + background: orange; + } + .float { + float: right; + } + .margin { + padding: 0.2em; /* using padding because of margin handling bugs + margin-block: 0.5em; + } + .margin > * { + margin-block: -0.3em; +switch back once fixed */ + } + hr { + border: solid 1px; + margin: 0.5em; + } + + /* readability */ + .pager { border: solid 2px gray; margin: 0.5em 0; } + .test { color: #8888; text-align: center; } + .label { color: black; font-weight: bold; } + + /* reference */ + /* margins are truncated by unforced breaks, so mimic that */ + .margin:first-child { margin-top: 0; padding-top: 0; } + .margin:last-child { margin-bottom: 0; padding-bottom: 0; } + +</style> + +<!-- + This test creates breaks in overflow: + * between two blocks with collapsing negative margins + * through the middle of a float + * through some nested text + * after a nested float +--> + +<div class="pager"> + <div class="test"> + <span class="label">CENTER</span> + <div class="margin"> + <div class="large"></div> + </div> + </div> + <div class="test"> + <div class="margin"> + <div class="large"></div> + </div> + LINE 1<br>LINE 2 + </div> + <div class="test"> + <div class="float">FLT</div> + LINE 3 + <hr> + LINE 4<br>LINE 5 + </div> + <div class="test"> + <div class="float">FLT</div> + LINE 6<br>LINE 7 + </div> +</div> + +<div class="pager"> + <div class="test"> + <span class="label">END</span> + <div class="margin"> + <div class="large"></div> + </div> + </div> + <div class="test"> + <div class="margin"> + <div class="large"></div> + </div> + LINE 1<br>LINE 2 + </div> + <div class="test"> + <div class="float">FLT</div> + LINE 3 + <hr> + LINE 4<br>LINE 5 + </div> + <div class="test"> + <div class="float">FLT</div> + LINE 6<br>LINE 7 + </div> +</div> + +<div class="pager"> + <div class="test"> + <span class="label">BASELINE</span> + <div class="margin"> + <div class="large"></div> + </div> + </div> + <div class="test"> + <div class="margin"> + <div class="large"></div> + </div> + LINE 1<br>LINE 2 + </div> + <div class="test"> + <div class="float">FLT</div> + LINE 3 + <hr> + LINE 4<br>LINE 5 + </div> + <div class="test"> + <div class="float">FLT</div> + LINE 6<br>LINE 7 + </div> +</div> + +<div class="pager"> + <div class="test"> + <span class="label">LAST BASELINE</span> + <div class="margin"> + <div class="large"></div> + </div> + </div> + <div class="test"> + <div class="margin"> + <div class="large"></div> + </div> + LINE 1<br>LINE 2 + </div> + <div class="test"> + <div class="float">FLT</div> + LINE 3 + <hr> + LINE 4<br>LINE 5 + </div> + <div class="test"> + <div class="float">FLT</div> + LINE 6<br>LINE 7 + </div> +</div> + +<div class="pager"> + <div class="test"> + <span class="label">UNSAFE CENTER</span> + <div class="margin"> + <div class="large"></div> + </div> + </div> + <div class="test"> + <div class="margin"> + <div class="large"></div> + </div> + LINE 1<br>LINE 2 + </div> + <div class="test"> + <div class="float">FLT</div> + LINE 3 + <hr> + LINE 4<br>LINE 5 + </div> + <div class="test"> + <div class="float">FLT</div> + LINE 6<br>LINE 7 + </div> +</div> + +<div class="pager"> + <div class="test"> + <span class="label">UNSAFE END</span> + <div class="margin"> + <div class="large"></div> + </div> + </div> + <div class="test"> + <div class="margin"> + <div class="large"></div> + </div> + LINE 1<br>LINE 2 + </div> + <div class="test"> + <div class="float">FLT</div> + LINE 3 + <hr> + LINE 4<br>LINE 5 + </div> + <div class="test"> + <div class="float">FLT</div> + LINE 6<br>LINE 7 + </div> +</div> diff --git a/testing/web-platform/tests/css/css-align/blocks/align-content-block-break-overflow-020.html b/testing/web-platform/tests/css/css-align/blocks/align-content-block-break-overflow-020.html new file mode 100644 index 0000000000..5f4b3d9555 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/blocks/align-content-block-break-overflow-020.html @@ -0,0 +1,195 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: align-content block fragmentation: complex block content</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block"> +<meta name="flags" content="may"> +<!-- fragmented alignment is underdefined; this is one possibility --> +<link rel="match" href="align-content-block-break-overflow-010-ref.html"> + +<style title="Needed for automation; delete to review/debug"> + @import "/fonts/ahem.css"; + html { font: 10px/1 Ahem; max-width: 800px; } +</style> + +<style> + .pager { + column-fill: auto; + column-width: 15em; + height: 5em; + } + .test { + height: 19.5em; + /* show bounds of test box without interfering with margin-collapsing */ + border-left: solid black 1em; + } + .overflow { + height: 0; + /* show bounds of overflow box without interfering with margin-collapsing */ + background: red; + } + .large, .float { + height: 2.5em; + break-inside: avoid; + background: orange; + } + .float { + float: right; + } + .margin { + padding: 0.2em; /* using padding because of margin handling bugs + margin-block: 0.5em; + } + .margin > * { + margin-block: -0.3em; +switch back once fixed */ + } + hr { + border: solid 1px; + margin: 0.5em; + } + + /* readability */ + .pager { border: solid 2px gray; margin: 0.5em 0; } + .test { color: #8888; text-align: center; } + .label { color: black; font-weight: bold; } +</style> + +<!-- + This test creates breaks in overflow: + * between two blocks with collapsing negative margins + * through the middle of a float + * through some nested text + * after a nested float +--> + +<div class="pager"> + <div class="test" style="align-content: center"> + <span class="label">CENTER</span> + <div class="overflow"> + <div class="margin"> + <div class="large"></div> + <div class="large"></div> + </div> + LINE 1<br> + <div class="float">FLT</div> + LINE 2<br>LINE 3 + <hr> + <div> + LINE 4<br>LINE 5<br>LINE 6 + <div class="float">FLT</div> + </div> + LINE 7 + </div> + </div> + </div> +</div> + +<div class="pager"> + <div class="test" style="align-content: end"> + <span class="label">END</span> + <div class="overflow"> + <div class="margin"> + <div class="large"></div> + <div class="large"></div> + </div> + LINE 1<br> + <div class="float">FLT</div> + LINE 2<br>LINE 3 + <hr> + <div> + LINE 4<br>LINE 5<br>LINE 6 + <div class="float">FLT</div> + </div> + LINE 7 + </div> + </div> + </div> +</div> + +<div class="pager"> + <div class="test" style="align-content: baseline"> + <span class="label">BASELINE</span> + <div class="overflow"> + <div class="margin"> + <div class="large"></div> + <div class="large"></div> + </div> + LINE 1<br> + <div class="float">FLT</div> + LINE 2<br>LINE 3 + <hr> + <div> + LINE 4<br>LINE 5<br>LINE 6 + <div class="float">FLT</div> + </div> + LINE 7 + </div> + </div> + </div> +</div> + +<div class="pager"> + <div class="test" style="align-content: last baseline"> + <span class="label">LAST BASELINE</span> + <div class="overflow"> + <div class="margin"> + <div class="large"></div> + <div class="large"></div> + </div> + LINE 1<br> + <div class="float">FLT</div> + LINE 2<br>LINE 3 + <hr> + <div> + LINE 4<br>LINE 5<br>LINE 6 + <div class="float">FLT</div> + </div> + LINE 7 + </div> + </div> + </div> +</div> + +<div class="pager"> + <div class="test" style="align-content: unsafe center"> + <span class="label">UNSAFE CENTER</span> + <div class="overflow"> + <div class="margin"> + <div class="large"></div> + <div class="large"></div> + </div> + LINE 1<br> + <div class="float">FLT</div> + LINE 2<br>LINE 3 + <hr> + <div> + LINE 4<br>LINE 5<br>LINE 6 + <div class="float">FLT</div> + </div> + LINE 7 + </div> + </div> + </div> +</div> + +<div class="pager"> + <div class="test" style="align-content: unsafe end"> + <span class="label">UNSAFE END</span> + <div class="overflow"> + <div class="margin"> + <div class="large"></div> + <div class="large"></div> + </div> + LINE 1<br> + <div class="float">FLT</div> + LINE 2<br>LINE 3 + <hr> + <div> + LINE 4<br>LINE 5<br>LINE 6 + <div class="float">FLT</div> + </div> + LINE 7 + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-align/blocks/align-content-block-display-coverage.html b/testing/web-platform/tests/css/css-align/blocks/align-content-block-display-coverage.html new file mode 100644 index 0000000000..3d581be28c --- /dev/null +++ b/testing/web-platform/tests/css/css-align/blocks/align-content-block-display-coverage.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align/#distribution-block"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<style> +@import "/fonts/ahem.css"; +body { + font: 10px/1 Ahem; + margin: 0; +} +.target { + height: 50px; + align-content: unsafe center; +} +</style> + +<div class="target"> + <div class="content">foo</div> +</div> + +<script> +const supportedValues = ['block', 'flow', 'flow-root', 'inline-block', + 'list-item', 'flow-root list-item', 'table-caption']; +const unsupportedValues = ['ruby-text']; + +const target = document.querySelector('.target'); +const content = document.querySelector('.content'); +for (let value of supportedValues) { + test(() => { + target.style.display = value; + assert_equals(content.offsetTop, 20); + }, `display:${value} should support align-content`); +} + +for (let value of unsupportedValues) { + test(() => { + target.style.display = value; + assert_not_equals(content.offsetTop, 20); + }, `display:${value} should not support align-content`); +} +</script> diff --git a/testing/web-platform/tests/css/css-align/blocks/align-content-block-overflow-000-ref.html b/testing/web-platform/tests/css/css-align/blocks/align-content-block-overflow-000-ref.html new file mode 100644 index 0000000000..8ca5407e4c --- /dev/null +++ b/testing/web-platform/tests/css/css-align/blocks/align-content-block-overflow-000-ref.html @@ -0,0 +1,261 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: align-content on small block container with floats</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> + +<style title="Needed for automation; delete to review/debug"> + @import "/fonts/ahem.css"; + html { font: 10px/1 Ahem; max-width: 800px; } + .label { display: none; } +</style> + +<style> + html, body { margin: 0; padding: 0; } + + .test { height: 1.8em; margin: 0.5em 2em; overflow: hidden; + /* show bounds of test box without interfering with margin-collapsing */ + background: black; padding-right: 2px; } + /* ensure float is contained */ + .float { float: right; background: orange; height: 2em } + /* ensure margin is contained */ + .in-flow { margin-top: 1em; background: orange } + /* ensure relpos is ignored */ + .relpos { position: relative; top: -1.5em; } + /* ensure abspos static position follows alignment */ + .wrapper { position: relative; } + .abspos { position: absolute; right: 0; margin-top: -1.5em; } + /* ensure overflow is not counted */ + .overflow { height: 0; } + + /* cram into 800x600 */ + html { max-height: 600px; columns: 3 } + .wrapper { break-inside: avoid; border: solid 2px gray; padding: 3em 0; } + + /* readability */ + .test > * { color: #8888; } + .label { color: black; font-weight: bold; } +</style> + +<div class="wrapper"> + <div class="test"> + <div class="float">FLT</div> + <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test"> + <div class="float">FLT</div> + <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">CENTER</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test"> + <div class="float">FLT</div> + <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test"> + <div class="float">FLT</div> + <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">BASELINE</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test"> + <div class="float">FLT</div> + <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">LAST BASELINE</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test"> + <div class="float">FLT</div> + <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">FLEX-START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test"> + <div class="float">FLT</div> + <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">FLEX-END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test"> + <div class="float">FLT</div> + <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">UNSAFE START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test"> + <div class="float" style="margin-top: -0.6em">FLT</div> + <div style="margin-bottom: -0.6em"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">UNSAFE CENTER</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test"> + <div style="margin-bottom: -1.2em"></div> + <div class="in-flow"> + <div class="float" style="margin-top: -1em">FLT</div> + <div class="float">FLT</div> + <span class="label">UNSAFE END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test"> + <div class="float">FLT</div> + <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">SAFE START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test"> + <div class="float">FLT</div> + <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">SAFE CENTER</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test"> + <div class="float">FLT</div> + <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">SAFE END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test"> + <div class="float">FLT</div> + <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">SPACE-EVENLY</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test"> + <div class="float">FLT</div> + <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">SPACE-BETWEEN</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test"> + <div class="float">FLT</div> + <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">SPACE-AROUND</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test"> + <div class="float">FLT</div> + <div></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">NORMAL</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> + +<p> + <button onclick="document.querySelector('style[title]').textContent = 'html { font: 10px/1 sans-serif; }'">Show Text</button> diff --git a/testing/web-platform/tests/css/css-align/blocks/align-content-block-overflow-000.html b/testing/web-platform/tests/css/css-align/blocks/align-content-block-overflow-000.html new file mode 100644 index 0000000000..c53606a058 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/blocks/align-content-block-overflow-000.html @@ -0,0 +1,264 @@ +<!DOCTYPE html> +<html> +<title>CSS Box Alignment: align-content + overflow:hidden on small block container with floats</title> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block"> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<link rel="match" href="align-content-block-overflow-000-ref.html"> + +<style title="Needed for automation; delete to review/debug"> + @import "/fonts/ahem.css"; + html { font: 10px/1 Ahem; max-width: 800px; } + .label { display: none; } +</style> + +<style> + html, body { margin: 0; padding: 0; } + + .test { height: 1.8em; margin: 0.5em 2em; overflow: hidden; + /* show bounds of test box without interfering with margin-collapsing */ + background: black; padding-right: 2px; } + /* ensure float is contained */ + .float { float: right; background: orange; height: 2em } + /* ensure margin is contained */ + .in-flow { margin-top: 1em; background: orange } + /* ensure relpos is ignored */ + .relpos { position: relative; top: -1.5em; } + /* ensure abspos static position follows alignment */ + .wrapper { position: relative; } + .abspos { position: absolute; right: 0; margin-top: -1.5em; } + /* ensure overflow is not counted */ + .overflow { height: 0; } + + /* cram into 800x600 */ + html { max-height: 600px; columns: 3 } + .wrapper { break-inside: avoid; border: solid 2px gray; padding: 3em 0; } + + /* readability */ + .test > * { color: #8888; } + .label { color: black; font-weight: bold; } +</style> + +<div class="wrapper"> + <div class="test" style="align-content: start"> + <div class="float">FLT</div> + <div class="in-flow"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: center"> + <div class="float">FLT</div> + <div class="in-flow"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">CENTER</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: end"> + <div class="float">FLT</div> + <div class="in-flow"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: baseline"> + <div class="float">FLT</div> + <div class="in-flow"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">BASELINE</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: last baseline"> + <div class="float">FLT</div> + <div class="in-flow"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">LAST BASELINE</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: flex-start"> + <div class="float">FLT</div> + <div class="in-flow"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">FLEX-START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: flex-end"> + <div class="float">FLT</div> + <div class="in-flow"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">FLEX-END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: unsafe start"> + <div class="float">FLT</div> + <div class="in-flow"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">UNSAFE START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: unsafe center"> + <div class="float">FLT</div> + <div class="in-flow"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">UNSAFE CENTER</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: unsafe end"> + <div class="float">FLT</div> + <div class="in-flow"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">UNSAFE END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: safe start"> + <div class="float">FLT</div> + <div class="in-flow"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">SAFE START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: safe center"> + <div class="float">FLT</div> + <div class="in-flow"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">SAFE CENTER</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: safe end"> + <div class="float">FLT</div> + <div class="in-flow"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">SAFE END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: space-evenly"> + <div class="float">FLT</div> + <div class="in-flow"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">SPACE-EVENLY</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: space-between"> + <div class="float">FLT</div> + <div class="in-flow"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">SPACE-BETWEEN</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: space-around"> + <div class="float">FLT</div> + <div class="in-flow"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">SPACE-AROUND</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test" style="align-content: normal"> + <div class="float">FLT</div> + <div class="in-flow"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">NORMAL</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> + +<p> + <button onclick="document.querySelector('style[title]').textContent = 'html { font: 10px/1 sans-serif; }'">Show Text</button> diff --git a/testing/web-platform/tests/css/css-align/blocks/align-content-block-simple-height-change.html b/testing/web-platform/tests/css/css-align/blocks/align-content-block-simple-height-change.html new file mode 100644 index 0000000000..21eecb6539 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/blocks/align-content-block-simple-height-change.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align/#distribution-block"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +body { + margin: 0; +} +</style> + +<div id="target" style="height: 200px;"> + <div style="align-content: center; height: 100%;"> + <div style="height: 60px;" id="content"></div> + </div> +</div> + +<script> +// Blink has an optimization that it skips child layout if only the container +// height is changed. This test ensures the opmiziation is not used for +// a non-normal align-content value. +test(() => { + document.body.offsetTop; + assert_equals(content.offsetTop, (200 - 60) / 2); + target.style.height = '100px'; + assert_equals(content.offsetTop, (100 - 60) / 2); +}, 'Updating a container height should align the content again'); +</script> diff --git a/testing/web-platform/tests/css/css-align/blocks/align-content-table-cell.html b/testing/web-platform/tests/css/css-align/blocks/align-content-table-cell.html new file mode 100644 index 0000000000..9544118548 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/blocks/align-content-table-cell.html @@ -0,0 +1,174 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align/#distribution-block"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<style> +@import "/fonts/ahem.css"; +body { + font: 10px/1 Ahem; +} + +td { + padding: 0; + height: 50px; +} + +td:nth-child(2) { + font-size: 20px; +} + +.valign-top td { + vertical-align: top; +} +.valign-middle td { + vertical-align: middle; +} +.valign-bottom td { + vertical-align: bottom; +} +.valign-middle-short td { + vertical-align: middle; + height: 10px; +} +.valign-bottom-short td { + vertical-align: bottom; + height: 10px; +} +.valign-baseline td { + vertical-align: baseline; +} + +.alignc-start td { + align-content: start; +} +.alignc-center td { + align-content: unsafe center; +} +.alignc-end td { + align-content: unsafe end; +} +.alignc-center-short td { + align-content: unsafe center; + height: 10px; +} +.alignc-end-short td { + align-content: unsafe end; + height: 10px; +} +.alignc-baseline td { + align-content: baseline; +} + +.alignc-safe-center td { + align-content: safe center; +} +.alignc-safe-end td { + align-content: safe end; +} +.alignc-safe-center-short td { + align-content: safe center; + height: 10px; +} +.alignc-safe-end-short td { + align-content: safe end; + height: 10px; +} +</style> + +<table border="0" id="ref" class="valign-baseline"> +<tr> +<td><div class="content1">first<br>second</div></td> +<td><div class="content2">first<br>second</div></td> +<td><div class="content3">first<br>second<br>third</div></td> +</tr> +</table> + +<table border="0" id="target" class="alignc-baseline"> +<tr> +<td><div class="content1">first<br>second</div></td> +<td><div class="content2">first<br>second</div></td> +<td><div class="content3">first<br>second<br>third</div></td> +</tr> +</table> + +<script> +function testEquivalence(target, ref) { + assert_equals(target.querySelector('.content1').offsetTop, + ref.querySelector('.content1').offsetTop, 'The first cell content top'); + assert_equals(target.querySelector('.content2').offsetTop, + ref.querySelector('.content2').offsetTop, 'The second cell content top'); + assert_equals(target.querySelector('.content3').offsetTop, + ref.querySelector('.content3').offsetTop, 'The third cell conten topt'); +} + +const ref = document.querySelector('#ref'); +const target = document.querySelector('#target'); +const TALL = 50; +// *-short specifies `height: 10px`, but cells ignore it, and the actual height +// is the maximum content height in the row. +const SHORT = 40; +const C1HEIGHT = 10 * 2; + +test(() => { + ref.className = 'valign-top'; + target.className = 'alignc-start'; + testEquivalence(target, ref); + assert_equals(target.querySelector('.content1').offsetTop, 0); +}, 'vertical-align:top and align-content:start are equivalent'); + +test(() => { + ref.className = 'valign-middle'; + target.className = 'alignc-center'; + testEquivalence(target, ref); + assert_equals(target.querySelector('.content1').offsetTop, (TALL - C1HEIGHT) / 2); + + ref.className = 'valign-middle-short'; + target.className = 'alignc-center-short'; + testEquivalence(target, ref); + assert_equals(target.querySelector('.content1').offsetTop, (SHORT - C1HEIGHT) / 2); +}, 'vertical-align:middle and `align-content:unsafe center` are equivalent'); + +test(() => { + ref.className = 'valign-bottom'; + target.className = 'alignc-end'; + testEquivalence(target, ref); + assert_equals(target.querySelector('.content1').offsetTop, TALL - C1HEIGHT); + + ref.className = 'valign-bottom-short'; + target.className = 'alignc-end-short'; + testEquivalence(target, ref); + assert_equals(target.querySelector('.content1').offsetTop, SHORT - C1HEIGHT); +}, 'vertical-align:bottom and `align-content:unsafe end` are equivalent'); + +test(() => { + ref.className = 'valign-baseline'; + target.className = 'alignc-baseline'; + testEquivalence(target, ref); +}, 'vertical-align:baseline and align-content:baseline are equivalent'); + +test(() => { + ref.className = 'valign-middle'; + target.className = 'alignc-safe-center'; + testEquivalence(target, ref); + assert_equals(target.querySelector('.content1').offsetTop, (TALL - C1HEIGHT) / 2); +}, 'vertical-align:middle and `align-content:safe center` are equivalent if the container is tall'); + +test(() => { + ref.className = 'valign-bottom'; + target.className = 'alignc-safe-end'; + testEquivalence(target, ref); + assert_equals(target.querySelector('.content1').offsetTop, TALL - C1HEIGHT); +}, 'vertical-align:bottom and `align-content:safe end` are equivalent if the container is tall'); + +test(() => { + ref.className = 'alignc-center-short'; + target.className = 'alignc-safe-center-short'; + testEquivalence(target, ref); +}, '`align-content:safe center` is equivalent to `unsafe center` even if the specified `height` is short'); + +test(() => { + ref.className = 'alignc-end-short'; + target.className = 'alignc-safe-end-short'; +}, '`align-content:safe end` is equivalent to `unsafe end` even if the specified `height` is short'); +</script> diff --git a/testing/web-platform/tests/css/css-align/content-distribution/parse-align-content-001.html b/testing/web-platform/tests/css/css-align/content-distribution/parse-align-content-001.html new file mode 100644 index 0000000000..c5cd4254f7 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/content-distribution/parse-align-content-001.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Content Distribution: align-content - setting values via CSS</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-content-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-content-distribution" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-overflow-position" /> +<link rel="stylesheet" href="../../support/alignment.css" > +<meta name="assert" content="Check that the computed value is the specified value and the JS value is empty."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + let classes = Object.assign({"Normal":"normal"}, contentPositionClasses, distributionClasses, + baselineClasses, overflowClasses); + + for (var key in classes) { + let specifiedValue = classes[key]; + element = document.createElement("div"); + element.className = "alignContent" + key; + document.body.appendChild(element); + test(function() { + if (specifiedValue === "first baseline") + checkValues(element, "alignContent", "align-content", "", "baseline"); + else + checkValues(element, "alignContent", "align-content", "", specifiedValue); + }, "Checking align-content: " + specifiedValue); + } +</script> diff --git a/testing/web-platform/tests/css/css-align/content-distribution/parse-align-content-002.html b/testing/web-platform/tests/css/css-align/content-distribution/parse-align-content-002.html new file mode 100644 index 0000000000..5d20062074 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/content-distribution/parse-align-content-002.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Content Distribution: align-content - 'initial' value</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content" /> +<link rel="help" href="https://drafts.csswg.org/css-cascade/#initial-values" /> +<meta name="assert" content="Check the 'initial' value in diferent scenarios."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> +container = document.createElement("div"); +element = document.createElement("div"); +container.appendChild(element); +document.body.appendChild(container); + +test(function() { + element = document.createElement("div"); + document.body.appendChild(element); + checkValues(element, "alignContent", "align-content", "", "normal"); +}, "Test 'initial' value when nothing is specified"); + +test(function() { + container.style.display = ""; + checkInitialValues(element, "alignContent", "align-content", "center", "normal"); +}, "Test align-content: 'initial'"); + +test(function() { + container.style.display = "grid"; + checkInitialValues(element, "alignContent", "align-content", "safe start", "normal"); +}, "Test grid items align-content: 'initial'"); + +test(function() { + container.style.display = "flex"; + checkInitialValues(element, "alignContent", "align-content", "unsafe end", "normal"); +}, "Test flex items align-content: 'initial'"); + +test(function() { + container.style.display = ""; + element.style.position = "absolute"; + checkInitialValues(element, "alignContent", "align-content", "start", "normal"); +}, "Test absolute positioned elements align-content: 'initial'"); + +test(function() { + container.style.display = "grid"; + element.style.position = "absolute"; + checkInitialValues(element, "alignContent", "align-content", "end", "normal"); +}, "Test absolute positioned grid items align-content: 'initial'"); + +test(function() { + container.style.display = "flex"; + element.style.position = "absolute"; + checkInitialValues(element, "alignContent", "align-content", "end", "normal"); +}, "Test absolute positioned flex items align-content: 'initial'"); +</script> diff --git a/testing/web-platform/tests/css/css-align/content-distribution/parse-align-content-003.html b/testing/web-platform/tests/css/css-align/content-distribution/parse-align-content-003.html new file mode 100644 index 0000000000..b0da3588bf --- /dev/null +++ b/testing/web-platform/tests/css/css-align/content-distribution/parse-align-content-003.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Content Disrtribution: align-content - setting values via JS</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-content-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-content-distribution" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-overflow-position" /> +<meta name="assert" content="Check that the computed value is the specified value and the same than the JS value."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + element = document.createElement("div"); + document.body.appendChild(element); + + let classes = Object.assign({"Normal":"normal"}, contentPositionClasses, distributionClasses, + baselineClasses, overflowClasses); + + for (var key in classes) { + let specifiedValue = classes[key]; + test(function() { + element.style.alignContent = ""; + element.style.alignContent = specifiedValue; + if (specifiedValue === "first baseline") + checkValues(element, "alignContent", "align-content", "baseline", "baseline"); + else + checkValues(element, "alignContent", "align-content", specifiedValue, specifiedValue); + }, "Checking align-content: " + specifiedValue); + } +</script> diff --git a/testing/web-platform/tests/css/css-align/content-distribution/parse-align-content-004.html b/testing/web-platform/tests/css/css-align/content-distribution/parse-align-content-004.html new file mode 100644 index 0000000000..6a6f5b9c76 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/content-distribution/parse-align-content-004.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Content Distribution: align-content - invalid values</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content" /> +<meta name="assert" content="Check bad combinations of specified values."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + element = document.createElement("div"); + document.body.appendChild(element); + + let values = ["auto", "legacy", "self-start", "left", "safe right"].concat(invalidPositionValues, invalidDistributionValues); + + values.forEach(function(value) { + test(function() { + checkBadValues(element, "alignContent", "align-content", value); + }, "Checking invalid combination - align-content: " + value); + }); +</script> diff --git a/testing/web-platform/tests/css/css-align/content-distribution/parse-align-content-005.html b/testing/web-platform/tests/css/css-align/content-distribution/parse-align-content-005.html new file mode 100644 index 0000000000..fd4fa3c452 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/content-distribution/parse-align-content-005.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Content Distibution: align-content - inherit value</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content" /> +<meta name="assert" content="Check bad cobinations of specified values."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> +test(function() { + checkInheritValues("alignContent", "align-content", "end"); +}, "Test the value 'inherit' overrides current value ('end')"); +test(function() { + checkInheritValues("alignContent", "align-content", "safe start"); +}, "Test the value 'inherit' overrides current value ('safe start')"); +test(function() { + checkInheritValues("alignContent", "align-content", "unsafe center"); +}, "Test the value 'inherit' overrides current value ('unsafe center')"); +</script> diff --git a/testing/web-platform/tests/css/css-align/content-distribution/parse-justify-content-001.html b/testing/web-platform/tests/css/css-align/content-distribution/parse-justify-content-001.html new file mode 100644 index 0000000000..df06ca920b --- /dev/null +++ b/testing/web-platform/tests/css/css-align/content-distribution/parse-justify-content-001.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Content Distribution: justify-content - setting values via CSS</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-content-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-content-distribution" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-overflow-position" /> +<link rel="stylesheet" href="../../support/alignment.css" > +<meta name="assert" content="Check that the computed value is the specified value and the JS value is empty."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + let classes = Object.assign({"Normal":"normal", "Left":"left", "Right":"right"}, contentPositionClasses, + distributionClasses, overflowClasses); + + for (var key in classes) { + let specifiedValue = classes[key]; + element = document.createElement("div"); + element.className = "justifyContent" + key; + document.body.appendChild(element); + test(function() { + checkValues(element, "justifyContent", "justify-content", "", specifiedValue); + }, "Checking justify-content: " + specifiedValue); + } +</script> diff --git a/testing/web-platform/tests/css/css-align/content-distribution/parse-justify-content-002.html b/testing/web-platform/tests/css/css-align/content-distribution/parse-justify-content-002.html new file mode 100644 index 0000000000..3f48a2ac0c --- /dev/null +++ b/testing/web-platform/tests/css/css-align/content-distribution/parse-justify-content-002.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Content Distribution: justify-content - 'initial' value</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content" /> +<link rel="help" href="https://drafts.csswg.org/css-cascade/#initial-values" /> +<meta name="assert" content="Check the 'initial' value in diferent scenarios."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> +container = document.createElement("div"); +element = document.createElement("div"); +container.appendChild(element); +document.body.appendChild(container); + +test(function() { + element = document.createElement("div"); + document.body.appendChild(element); + checkValues(element, "justifyContent", "justify-content", "", "normal"); +}, "Test 'initial' value when nothing is specified"); + +test(function() { + container.style.display = ""; + checkInitialValues(element, "justifyContent", "justify-content", "center", "normal"); +}, "Test justify-content: 'initial'"); + +test(function() { + container.style.display = "grid"; + checkInitialValues(element, "justifyContent", "justify-content", "safe start", "normal"); +}, "Test grid items justify-content: 'initial'"); + +test(function() { + container.style.display = "flex"; + checkInitialValues(element, "justifyContent", "justify-content", "unsafe end", "normal"); +}, "Test flex items justify-content: 'initial'"); + +test(function() { + container.style.display = ""; + element.style.position = "absolute"; + checkInitialValues(element, "justifyContent", "justify-content", "start", "normal"); +}, "Test absolute positioned elements justify-content: 'initial'"); + +test(function() { + container.style.display = "grid"; + element.style.position = "absolute"; + checkInitialValues(element, "justifyContent", "justify-content", "end", "normal"); +}, "Test absolute positioned grid items justify-content: 'initial'"); + +test(function() { + container.style.display = "flex"; + element.style.position = "absolute"; + checkInitialValues(element, "justifyContent", "justify-content", "end", "normal"); +}, "Test absolute positioned flex items justify-content: 'initial'"); +</script> diff --git a/testing/web-platform/tests/css/css-align/content-distribution/parse-justify-content-003.html b/testing/web-platform/tests/css/css-align/content-distribution/parse-justify-content-003.html new file mode 100644 index 0000000000..0dea6e55f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/content-distribution/parse-justify-content-003.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Content Disrtribution: justify-content - setting values via JS</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-content-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-content-distribution" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-overflow-position" /> +<meta name="assert" content="Check that the computed value is the specified value and the same than the JS value."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + element = document.createElement("div"); + document.body.appendChild(element); + + let classes = Object.assign({"Normal":"normal", "Left":"left", "Right":"right"}, contentPositionClasses, + distributionClasses, overflowClasses); + + for (var key in classes) { + let specifiedValue = classes[key]; + test(function() { + element.style.justifyContent = ""; + element.style.justifyContent = specifiedValue; + checkValues(element, "justifyContent", "justify-content", specifiedValue, specifiedValue); + }, "Checking justify-content: " + specifiedValue); + } +</script> diff --git a/testing/web-platform/tests/css/css-align/content-distribution/parse-justify-content-004.html b/testing/web-platform/tests/css/css-align/content-distribution/parse-justify-content-004.html new file mode 100644 index 0000000000..22e78f84ae --- /dev/null +++ b/testing/web-platform/tests/css/css-align/content-distribution/parse-justify-content-004.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Content Distribution: justify-content - invalid values</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content" /> +<meta name="assert" content="Check bad combinations of specified values."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + element = document.createElement("div"); + document.body.appendChild(element); + + let values = ["auto", "legacy", "self-start", "baseline", "first baseline", "last baseline"].concat(invalidPositionValues, invalidDistributionValues); + + values.forEach(function(value) { + test(function() { + checkBadValues(element, "justifyContent", "justify-content", value); + }, "Checking invalid combination - justify-content: " + value); + }); +</script> diff --git a/testing/web-platform/tests/css/css-align/content-distribution/parse-justify-content-005.html b/testing/web-platform/tests/css/css-align/content-distribution/parse-justify-content-005.html new file mode 100644 index 0000000000..32949e88a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/content-distribution/parse-justify-content-005.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Content Distibution: justify-content - inherit value</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content" /> +<meta name="assert" content="Check bad cobinations of specified values."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> +test(function() { + checkInheritValues("justifyContent", "justify-content", "end"); +}, "Test the value 'inherit' overrides current value ('end')"); +test(function() { + checkInheritValues("justifyContent", "justify-content", "safe left"); +}, "Test the value 'inherit' overrides current value ('safe left')"); +test(function() { + checkInheritValues("justifyContent", "justify-content", "unsafe center"); +}, "Test the value 'inherit' overrides current value ('unsafe center')"); +</script> diff --git a/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-001.html b/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-001.html new file mode 100644 index 0000000000..150633360d --- /dev/null +++ b/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-001.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: place-content shorthand - single values specified</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="http://www.w3.org/TR/css3-align/#propdef-place-content" /> +<meta name="assert" content="Check that setting a single value to place-content expands to such value set in both 'align-content' and 'justify-content'." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + let classes = Object.assign({"Normal":"normal"}, contentPositionClasses, distributionClasses, overflowClasses); + for (var key in classes) { + let value = classes[key]; + test(function() { + checkPlaceShorhandLonghands("place-content", "align-content", "justify-content", value); + }, "Checking place-content: " + value); + } +</script> diff --git a/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-002.html b/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-002.html new file mode 100644 index 0000000000..589feff0c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-002.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: place-content shorthand - multiple values specified</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="http://www.w3.org/TR/css3-align/#propdef-place-content" /> +<meta name="assert" content="Check that setting two values to place-content sets the first one to 'align-content' and the second one to 'justify-content'." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + let classes = Object.assign({"Normal":"normal"}, contentPositionClasses, distributionClasses, baselineClasses, + overflowClasses); + for (var key1 in classes) { + let alignValue = classes[key1]; + let classes2 = Object.assign({"Normal":"normal", "Left":"left", "Right":"right"}, contentPositionClasses, + distributionClasses); + for (var key2 in classes2) { + let justifyValue = classes2[key2]; + test(function() { + checkPlaceShorhandLonghands("place-content", "align-content", "justify-content", alignValue, justifyValue); + }, "Checking place-content: " + alignValue + " " + justifyValue); + } + } +</script> diff --git a/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-003.html b/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-003.html new file mode 100644 index 0000000000..137094eb2a --- /dev/null +++ b/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-003.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: place-content shorthand - initial value</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="http://www.w3.org/TR/css3-align/#propdef-place-content" /> +<meta name="assert" content="Check that place-content's 'initial' value expands to 'align-content' and 'justify-content'." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="log"></div> +<script> + var div = document.createElement("div"); + document.body.appendChild(div); + div.style["align-content"] = "start"; + div.style["justify-content"] = "end"; + div.setAttribute("style", "place-content: initial"); + + test(function() { + assert_equals(div.style["align-content"], + "initial", "place-content specified value for align-content"); + }, "Check place-content: initial - align-content expanded value"); + + test(function() { + assert_equals(div.style["justify-content"], + "initial", "place-content specified value for justify-content"); + }, "Check place-content: initial - justify-content expanded value"); +</script> diff --git a/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-004.html b/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-004.html new file mode 100644 index 0000000000..f43741035a --- /dev/null +++ b/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-004.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: place-content shorthand - invalid values</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="http://www.w3.org/TR/css3-align/#propdef-place-content" /> +<meta name="assert" content="Check that place-content's invalid values are properly detected at parsing time." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + function checkInvalidValues(value) + { + checkPlaceShorthandInvalidValues("place-content", "align-content", "justify-content", value); + } + + test(function() { + checkInvalidValues("center space-between start") + }, "Verify fallback values are invalid"); + + test(function() { + checkInvalidValues("left") + checkInvalidValues("left start") + checkInvalidValues("right center") + }, "Verify 'left' and 'right' values are invalid for block/cross axis alignment"); + + test(function() { + checkInvalidValues("start baseline") + checkInvalidValues("end last baseline") + }, "Verify <baseline-position> values are invalid for the justify-content property"); + + test(function() { + checkInvalidValues("10px end") + checkInvalidValues("start 10%") + }, "Verify numeric values are invalid"); + + test(function() { + checkInvalidValues("auto") + checkInvalidValues("auto right") + checkInvalidValues("auto auto") + checkInvalidValues("start auto") + }, "Verify 'auto' values are invalid"); + + test(function() { + checkInvalidValues("self-start") + checkInvalidValues("center self-end") + checkInvalidValues("self-end start") + }, "Verify self-position values are invalid"); + + test(function() { + checkInvalidValues("") + }, "Verify empty declaration is invalid"); +</script> diff --git a/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-005.html b/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-005.html new file mode 100644 index 0000000000..d683ce4aaa --- /dev/null +++ b/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-005.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: place-content shorthand - inherit value</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="http://www.w3.org/TR/css3-align/#propdef-place-content" /> +<meta name="assert" content="Check that place-content's 'inherit' value expands to 'align-content' and 'justify-content'." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #test { + place-content: start end; + } +</style> +<div id="log"></div> +<div id="test"></div> +<script> + var child = document.createElement("div"); + document.getElementById("test").appendChild(child); + child.setAttribute("style", "place-content: inherit"); + var style = getComputedStyle(child); + + test(function() { + assert_equals(style.getPropertyValue("align-content"), + "start", "place-content resolved value for align-content"); + }, "Check place-content: inherit - align-content resolved value"); + + test(function() { + assert_equals(style.getPropertyValue("justify-content"), + "end", "place-content resolved value for justify-content"); + }, "Check place-content: inherit - justify-content resolved value"); +</script> diff --git a/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-006.html b/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-006.html new file mode 100644 index 0000000000..2a5056d413 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-006.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: place-content shorthand - Shorthand 'specified' and 'resolved' value</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="http://www.w3.org/TR/css3-align/#propdef-place-content" /> +<meta name="assert" content="Check the place-content's 'specified' and 'resolved' values serialization." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<div id="test"></div> +<script> + let classes = Object.assign({"Normal":"normal"}, contentPositionClasses, distributionClasses, baselineClasses); + for (var key1 in classes) { + let alignValue = classes[key1]; + let classes2 = Object.assign({"Normal":"normal", "Left":"left", "Right":"right"}, contentPositionClasses, distributionClasses); + for (var key2 in classes2) { + let justifyValue = classes2[key2]; + var value = (alignValue + " " + justifyValue).trim(); + test(function() { + checkPlaceShorhand("place-content", value, alignValue, justifyValue) + }, "Checking place-content: " + value); + } + } +</script> diff --git a/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-007-ref.html b/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-007-ref.html new file mode 100644 index 0000000000..67727f4fd2 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-007-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<style> +div { + width: 400px; + height: 400px; + background: blue; + position: relative; +} +span { + background: green; + width: 200px; + height: 200px; + position: absolute; + bottom: 0; + left: 100px; +} +</style> +Should see a green square centered and at the bottom of the blue square. +<div><span></span></div> diff --git a/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-007.html b/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-007.html new file mode 100644 index 0000000000..be954c9712 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-007.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment: place-content shorthand with fallback</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="help" href="https://drafts.csswg.org/css-align/#propdef-place-content"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1430622"> +<link rel="match" href="place-content-shorthand-007-ref.html"> +<style> +div { + display: grid; + grid: 200px / 200px; + width: 400px; + height: 400px; + background: blue; + place-content: end space-evenly; +} +span { + background: green; +} +</style> +Should see a green square centered and at the bottom of the blue square. +<div><span></span></div> diff --git a/testing/web-platform/tests/css/css-align/default-alignment/justify-items-legacy-001.html b/testing/web-platform/tests/css/css-align/default-alignment/justify-items-legacy-001.html new file mode 100644 index 0000000000..c4164d2b25 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/default-alignment/justify-items-legacy-001.html @@ -0,0 +1,26 @@ +<!doctype html> +<meta charset=utf-8> +<title>CSS Box Alignment: legacy value for justify-items</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="help" href="https://drafts.csswg.org/css-align/#justify-items-property"> +<meta name="assert" content="Tests that legacy justify-items values are correctly inherited."> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> +#container { + justify-items: legacy center; +} +</style> +<div id="container"><span id="child"></span></div> +<script> + test(function() { + assert_equals(getComputedStyle(child).justifyItems, "legacy center", + "default justify-items resolves to the parent justify-items value if legacy") + container.style.justifyItems = "legacy left"; + assert_equals(getComputedStyle(child).justifyItems, "legacy left", + "dynamic changes to justify-items propagate to children if needed (legacy)") + container.style.justifyItems = "left"; + assert_equals(getComputedStyle(child).justifyItems, "normal", + "dynamic changes to justify-items propagate to children if needed (left)") + }, "legacy value for justify-items") +</script> diff --git a/testing/web-platform/tests/css/css-align/default-alignment/parse-align-items-001.html b/testing/web-platform/tests/css/css-align/default-alignment/parse-align-items-001.html new file mode 100644 index 0000000000..4a7d1b816c --- /dev/null +++ b/testing/web-platform/tests/css/css-align/default-alignment/parse-align-items-001.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Default-Alignment: align-items - setting values via CSS</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#default-alignment" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-self-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-overflow-position" /> +<link rel="stylesheet" href="../../support/alignment.css" > +<meta name="assert" content="Check that the computed value is the specified value and the JS value is empty."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + let classes = Object.assign({"Normal":"normal", "Stretch":"stretch"}, selfPositionClasses, + baselineClasses, overflowClasses); + + for (var key in classes) { + let specifiedValue = classes[key]; + element = document.createElement("div"); + element.className = "alignItems" + key; + document.body.appendChild(element); + test(function() { + if (specifiedValue === "first baseline") + checkValues(element, "alignItems", "align-items", "", "baseline"); + else + checkValues(element, "alignItems", "align-items", "", specifiedValue); + }, "Checking align-items: " + specifiedValue); + } +</script> diff --git a/testing/web-platform/tests/css/css-align/default-alignment/parse-align-items-002.html b/testing/web-platform/tests/css/css-align/default-alignment/parse-align-items-002.html new file mode 100644 index 0000000000..79b1d60b2f --- /dev/null +++ b/testing/web-platform/tests/css/css-align/default-alignment/parse-align-items-002.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Default-Alignment: align-items - 'initial' value</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#default-alignment" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items" /> +<link rel="help" href="https://drafts.csswg.org/css-cascade/#initial-values" /> +<meta name="assert" content="Check the 'initial' value in diferent scenarios."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> +container = document.createElement("div"); +element = document.createElement("div"); +container.appendChild(element); +document.body.appendChild(container); + +test(function() { + element = document.createElement("div"); + document.body.appendChild(element); + checkValues(element, "alignItems", "align-items", "", "normal"); +}, "Test 'initial' value when nothing is specified"); + +test(function() { + container.style.display = ""; + checkInitialValues(element, "alignItems", "align-items", "center", "normal"); +}, "Test align-items: 'initial'"); + +test(function() { + container.style.display = "grid"; + checkInitialValues(element, "alignItems", "align-items", "safe start", "normal"); +}, "Test grid items align-items: 'initial'"); + +test(function() { + container.style.display = "flex"; + checkInitialValues(element, "alignItems", "align-items", "unsafe end", "normal"); +}, "Test flex items align-items: 'initial'"); + +test(function() { + container.style.display = ""; + element.style.position = "absolute"; + checkInitialValues(element, "alignItems", "align-items", "start", "normal"); +}, "Test absolute positioned elements align-items: 'initial'"); + +test(function() { + container.style.display = "grid"; + element.style.position = "absolute"; + checkInitialValues(element, "alignItems", "align-items", "end", "normal"); +}, "Test absolute positioned grid items align-items: 'initial'"); + +test(function() { + container.style.display = "flex"; + element.style.position = "absolute"; + checkInitialValues(element, "alignItems", "align-items", "end", "normal"); +}, "Test absolute positioned flex items align-items: 'initial'"); +</script> diff --git a/testing/web-platform/tests/css/css-align/default-alignment/parse-align-items-003.html b/testing/web-platform/tests/css/css-align/default-alignment/parse-align-items-003.html new file mode 100644 index 0000000000..aa6b295dc2 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/default-alignment/parse-align-items-003.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Default-Alignment: align-items - setting values via JS</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#default-alignment" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-self-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-overflow-position" /> +<meta name="assert" content="Check that the computed value is the specified value and the same than the JS value."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + element = document.createElement("div"); + document.body.appendChild(element); + + let classes = Object.assign({"Normal":"normal", "Stretch":"stretch"}, selfPositionClasses, + baselineClasses, overflowClasses); + + for (var key in classes) { + let specifiedValue = classes[key]; + test(function() { + element.style.alignItems = ""; + element.style.alignItems = specifiedValue; + if (specifiedValue === "first baseline") + checkValues(element, "alignItems", "align-items", "baseline", "baseline"); + else + checkValues(element, "alignItems", "align-items", specifiedValue, specifiedValue); + }, "Checking align-items: " + specifiedValue); + } +</script> diff --git a/testing/web-platform/tests/css/css-align/default-alignment/parse-align-items-004.html b/testing/web-platform/tests/css/css-align/default-alignment/parse-align-items-004.html new file mode 100644 index 0000000000..2cd306a759 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/default-alignment/parse-align-items-004.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Default-Alignment: align-items - invalid values</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#default-alignment" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items" /> +<meta name="assert" content="Check bad combinations of specified values."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + element = document.createElement("div"); + document.body.appendChild(element); + + let values = ["auto", "legacy", "space-around", "left", "safe right"].concat(invalidPositionValues); + + values.forEach(function(value) { + test(function() { + checkBadValues(element, "alignItems", "align-items", value); + }, "Checking invalid combination - align-items: " + value); + }); +</script> diff --git a/testing/web-platform/tests/css/css-align/default-alignment/parse-align-items-005.html b/testing/web-platform/tests/css/css-align/default-alignment/parse-align-items-005.html new file mode 100644 index 0000000000..6dc0ad684f --- /dev/null +++ b/testing/web-platform/tests/css/css-align/default-alignment/parse-align-items-005.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Default-Alignment: align-items - inherit value</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#default-alignment" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items" /> +<meta name="assert" content="Check bad cobinations of specified values."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> +test(function() { + checkInheritValues("alignItems", "align-items", "end"); +}, "Test the value 'inherit' overrides current value ('end')"); +test(function() { + checkInheritValues("alignItems", "align-items", "safe start"); +}, "Test the value 'inherit' overrides current value ('safe start')"); +test(function() { + checkInheritValues("alignItems", "align-items", "unsafe center"); +}, "Test the value 'inherit' overrides current value ('unsafe center')"); +</script> diff --git a/testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-001.html b/testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-001.html new file mode 100644 index 0000000000..b2edd2affc --- /dev/null +++ b/testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-001.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Default-Alignment: justify-items - setting values via CSS</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#default-alignment" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-self-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-overflow-position" /> +<link rel="stylesheet" href="../../support/alignment.css" > +<meta name="assert" content="Check that the computed value is the specified value and the JS value is empty."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + let classes = Object.assign({"Normal":"normal", "Stretch":"stretch", "Left":"left", "Right":"right"}, + selfPositionClasses, baselineClasses, overflowClasses, legacyClasses); + + for (var key in classes) { + let specifiedValue = classes[key]; + element = document.createElement("div"); + element.className = "justifyItems" + key; + document.body.appendChild(element); + test(function() { + if (specifiedValue === "first baseline") + checkValues(element, "justifyItems", "justify-items", "", "baseline"); + else + checkValues(element, "justifyItems", "justify-items", "", specifiedValue); + }, "Checking justify-items: " + specifiedValue); + } +</script> diff --git a/testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-002.html b/testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-002.html new file mode 100644 index 0000000000..1806fa2c72 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-002.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Default-Alignment: justify-items - 'initial' value</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#default-alignment" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items" /> +<link rel="help" href="https://drafts.csswg.org/css-cascade/#initial-values" /> +<meta name="assert" content="Check the 'initial' value in diferent scenarios."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> +container = document.createElement("div"); +element = document.createElement("div"); +container.appendChild(element); +document.body.appendChild(container); + +test(function() { + element = document.createElement("div"); + document.body.appendChild(element); + checkValues(element, "justifyItems", "justify-items", "", "normal"); +}, "Test 'initial' value when nothing is specified"); + +test(function() { + container.style.display = ""; + checkInitialValues(element, "justifyItems", "justify-items", "center", "normal"); +}, "Test justify-items: 'initial'"); + +test(function() { + container.style.display = "grid"; + checkInitialValues(element, "justifyItems", "justify-items", "safe start", "normal"); +}, "Test grid items justify-items: 'initial'"); + +test(function() { + container.style.display = "flex"; + checkInitialValues(element, "justifyItems", "justify-items", "unsafe end", "normal"); +}, "Test flex items justify-items: 'initial'"); + +test(function() { + container.style.display = ""; + element.style.position = "absolute"; + checkInitialValues(element, "justifyItems", "justify-items", "start", "normal"); +}, "Test absolute positioned elements justify-items: 'initial'"); + +test(function() { + container.style.display = "grid"; + element.style.position = "absolute"; + checkInitialValues(element, "justifyItems", "justify-items", "end", "normal"); +}, "Test absolute positioned grid items justify-items: 'initial'"); + +test(function() { + container.style.display = "flex"; + element.style.position = "absolute"; + checkInitialValues(element, "justifyItems", "justify-items", "end", "normal"); +}, "Test absolute positioned flex items justify-items: 'initial'"); +</script> diff --git a/testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-003.html b/testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-003.html new file mode 100644 index 0000000000..6da7d7677a --- /dev/null +++ b/testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-003.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Default-Alignment: justify-items - setting values via JS</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#default-alignment" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-self-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-overflow-position" /> +<meta name="assert" content="Check that the computed value is the specified value and the same than the JS value."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + element = document.createElement("div"); + document.body.appendChild(element); + + let classes = Object.assign({"Normal":"normal", "Stretch":"stretch", "Left":"left", "Right":"right"}, + selfPositionClasses, baselineClasses, overflowClasses, legacyClasses); + + for (var key in classes) { + let specifiedValue = classes[key]; + test(function() { + element.style.justifyItems = ""; + element.style.justifyItems = specifiedValue; + if (specifiedValue === "first baseline") + checkValues(element, "justifyItems", "justify-items", "baseline", "baseline"); + else + checkValues(element, "justifyItems", "justify-items", specifiedValue, specifiedValue); + }, "Checking justify-items: " + specifiedValue); + } +</script> diff --git a/testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-004.html b/testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-004.html new file mode 100644 index 0000000000..70e80b2a42 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-004.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Default-Alignment: justify-items - invalid values</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#default-alignment" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items" /> +<meta name="assert" content="Check bad combinations of specified values."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + element = document.createElement("div"); + document.body.appendChild(element); + + let values = ["auto", "space-around"].concat(invalidPositionValues, invalidLegacyValues); + + values.forEach(function(value) { + test(function() { + checkBadValues(element, "justifyItems", "justify-items", value); + }, "Checking invalid combination - justify-items: " + value); + }); + +</script> diff --git a/testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-005.html b/testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-005.html new file mode 100644 index 0000000000..b4814da1aa --- /dev/null +++ b/testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-005.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Default-Alignment: justify-items - inherit value</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#default-alignment" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items" /> +<meta name="assert" content="Check the 'inherit' value in different scenarios."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> +test(function() { + checkInheritValues("justifyItems", "justify-items", "end"); +}, "Test the value 'inherit' overrides current value ('end')"); +test(function() { + checkInheritValues("justifyItems", "justify-items", "safe left"); +}, "Test the value 'inherit' overrides current value ('safe left')"); +test(function() { + checkInheritValues("justifyItems", "justify-items", "unsafe center"); +}, "Test the value 'inherit' overrides current value ('unsafe center')"); +</script> diff --git a/testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-006.html b/testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-006.html new file mode 100644 index 0000000000..f64b52e0f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-006.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Default-Alignment: justify-items - use of the 'legacy' keyword</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#default-alignment" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items" /> +<meta name="assert" content="Check the use of the 'legacy' keyword in different scenarios."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> +test(function() { + checkLegacyValues("justifyItems", "justify-items", "legacy left"); +}, "Test the value justify-items: legacy left"); +test(function() { + checkLegacyValues("justifyItems", "justify-items", "legacy center"); +}, "Test the value justify-items: legacy center"); +test(function() { + checkLegacyValues("justifyItems", "justify-items", "legacy right"); +}, "Test the value justify-items: legacy right"); +</script> diff --git a/testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-001.html b/testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-001.html new file mode 100644 index 0000000000..5b63c87812 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-001.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: place-items shorthand - single values specified</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="http://www.w3.org/TR/css3-align/#place-items-property" /> +<meta name="assert" content="Check that setting a single value to place-items expands to such value set in both 'align-items' and 'justify-items'." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + let classes = Object.assign({"Normal":"normal", "Stretch":"stretch"}, selfPositionClasses, baselineClasses, + overflowClasses); + for (var key in classes) { + let value = classes[key]; + test(function() { + checkPlaceShorhandLonghands("place-items", "align-items", "justify-items", value); + }, "Checking place-items: " + value); + } +</script> diff --git a/testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-002.html b/testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-002.html new file mode 100644 index 0000000000..3a075b20d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-002.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: place-items shorthand - multiple values specified</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="http://www.w3.org/TR/css3-align/#place-items-property" /> +<meta name="assert" content="Check that setting two values to place-items sets the first one to 'align-items' and the second one to 'justify-items'." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + let classes = Object.assign({"Normal":"normal", "Stretch":"stretch"}, selfPositionClasses, baselineClasses, + overflowClasses); + for (var key1 in classes) { + let alignValue = classes[key1]; + let classes2 = Object.assign({"Left":"left", "Right":"right"}, legacyClasses, classes); + for (var key2 in classes2) { + let justifyValue = classes2[key2]; + test(function() { + checkPlaceShorhandLonghands("place-items", "align-items", "justify-items", alignValue, justifyValue); + }, "Checking place-items: " + alignValue + " " + justifyValue); + } + } +</script> diff --git a/testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-003.html b/testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-003.html new file mode 100644 index 0000000000..00ef149cef --- /dev/null +++ b/testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-003.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: place-items shorthand - initial value</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="http://www.w3.org/TR/css3-align/#place-items-property" /> +<meta name="assert" content="Check that place-items's 'initial' value expands to 'align-items' and 'justify-items'." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="log"></div> +<script> + var div = document.createElement("div"); + document.body.appendChild(div); + div.style["align-items"] = "start"; + div.style["justify-items"] = "end"; + div.setAttribute("style", "place-items: initial"); + + test(function() { + assert_equals(div.style["align-items"], + "initial", "place-items expanded value for align-items"); + }, "Check place-items: initial - align-items expanded value"); + + test(function() { + assert_equals(div.style["justify-items"], + "initial", "place-items expanded value for justify-items"); + }, "Check place-items: initial - justify-items expanded value"); +</script> diff --git a/testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-004.html b/testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-004.html new file mode 100644 index 0000000000..f0d245c041 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-004.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: place-items shorthand - invalid values</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="http://www.w3.org/TR/css3-align/#place-items-property" /> +<meta name="assert" content="Check that place-items's invalid values are properly detected at parsing time." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + function checkInvalidValues(value) + { + checkPlaceShorthandInvalidValues("place-items", "align-items", "justify-items", value); + } + + test(function() { + checkInvalidValues("center end start") + }, "Verify fallback values are invalid"); + + test(function() { + checkInvalidValues("left") + checkInvalidValues("left start") + checkInvalidValues("right center") + }, "Verify 'left' and 'right' values are invalid for block/cross axis alignment"); + + test(function() { + checkInvalidValues("10px left") + checkInvalidValues("right 10%") + }, "Verify numeric values are invalid"); + + test(function() { + checkInvalidValues("") + }, "Verify empty declaration is invalid"); +</script> diff --git a/testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-005.html b/testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-005.html new file mode 100644 index 0000000000..b4f47c75e3 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-005.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: place-items shorthand - inherit value</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="http://www.w3.org/TR/css3-align/#place-items-property" /> +<meta name="assert" content="Check that place-items's 'inherit' value expands to 'align-items' and 'justify-items'." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #test { + place-items: start end; + } +</style> +<div id="log"></div> +<div id="test"></div> +<script> + var child = document.createElement("div"); + document.getElementById("test").appendChild(child); + child.setAttribute("style", "place-items: inherit"); + var style = getComputedStyle(child); + + test(function() { + assert_equals(style.getPropertyValue("align-items"), + "start", "place-items resolved value for align-items"); + }, "Check place-items: inherit - align-items resolved value"); + + test(function() { + assert_equals(style.getPropertyValue("justify-items"), + "end", "place-items resolved value for justify-items"); + }, "Check place-items: inherit - justify-items resolved value"); +</script> diff --git a/testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-006.html b/testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-006.html new file mode 100644 index 0000000000..4c55b1058d --- /dev/null +++ b/testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-006.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: place-items shorthand - Shorthand 'specified' and 'resolved' value</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="http://www.w3.org/TR/css3-align/#place-items-property" /> +<meta name="assert" content="Check the place-items's 'specified' and 'resolved' values serialization." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + let classes = Object.assign({"Normal":"normal", "Stretch":"stretch"}, selfPositionClasses, baselineClasses); + for (var key1 in classes) { + let alignValue = classes[key1]; + let classes2 = Object.assign({"Left":"left", "Right":"right"}, classes); + for (var key2 in classes2) { + let justifyValue = classes2[key2]; + var value = (alignValue + " " + justifyValue).trim(); + test(function() { + checkPlaceShorhand("place-items", value, alignValue, justifyValue) + }, "Checking place-items: " + value); + } + } +</script> diff --git a/testing/web-platform/tests/css/css-align/default-alignment/shorthand-serialization-001.html b/testing/web-platform/tests/css/css-align/default-alignment/shorthand-serialization-001.html new file mode 100644 index 0000000000..eeff8af4b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/default-alignment/shorthand-serialization-001.html @@ -0,0 +1,131 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset=utf-8> + <title>Test serialization of CSS Align shorthand properties</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align/"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> +</head> +<body> + +<script> + +var initial_values = { + alignContent: "normal", + alignItems: "normal", + alignSelf: "auto", + justifyContent: "normal", + justifyItems: "legacy", + justifySelf: "auto", +}; + +var place_content_test_cases = [ + { + alignContent: "center", + shorthand: "center normal", + }, + { + alignContent: "baseline safe right", + shorthand: "", + }, + { + justifyContent: "safe start", + shorthand: "normal safe start", + }, + { + justifyContent: "unsafe start", + shorthand: ["normal unsafe start"], + }, + { + justifyContent: "space-evenly start", + shorthand: "", + }, + { + alignContent: "start", + justifyContent: "end", + shorthand: "start end", + }, +]; + +var place_items_test_cases = [ + { + alignItems: "center", + shorthand: "center legacy", + }, + { + alignItems: "baseline", + shorthand: "baseline legacy", + }, + { + justifyItems: "safe start", + shorthand: "normal safe start", + }, + { + justifyItems: "unsafe start", + shorthand: ["normal unsafe start"], + }, + { + justifyItems: "stretch", + shorthand: "normal stretch", + }, + { + justifyItems: "left legacy", + shorthand: "normal legacy left", + }, + { + alignItems: "stretch", + justifyItems: "end", + shorthand: "stretch end", + }, +]; + +var place_self_test_cases = [ + { + alignSelf: "self-end safe", + shorthand: "", + }, + { + justifySelf: "unsafe start", + shorthand: ["auto start", "auto unsafe start"], + }, + { + justifySelf: "last baseline start", + shorthand: "", + }, + { + alignSelf: "baseline", + justifySelf: "last baseline", + shorthand: "baseline last baseline", + }, +]; + +function run_tests(test_cases, shorthand, subproperties) { + test_cases.forEach(function(test_case) { + test(function() { + var element = document.createElement('div'); + document.body.appendChild(element); + subproperties.forEach(function(longhand) { + element.style[longhand] = test_case[longhand] || + initial_values[longhand]; + }); + if (Array.isArray(test_case.shorthand)) { + assert_in_array(element.style[shorthand], test_case.shorthand); + } else { + assert_equals(element.style[shorthand], test_case.shorthand); + } + }, "test shorthand serialization " + JSON.stringify(test_case)); + }); +} + +run_tests(place_content_test_cases, "placeContent", [ + "alignContent", "justifyContent"]); +run_tests(place_items_test_cases, "placeItems", [ + "alignItems", "justifyItems"]); +run_tests(place_self_test_cases, "placeSelf", [ + "alignSelf", "justifySelf"]); + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/distribution-values/space-evenly-001.html b/testing/web-platform/tests/css/css-align/distribution-values/space-evenly-001.html new file mode 100644 index 0000000000..fd16f33b5e --- /dev/null +++ b/testing/web-platform/tests/css/css-align/distribution-values/space-evenly-001.html @@ -0,0 +1,36 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <title>CSS Box Alignment: space-evenly & flexbox with single item</title> + <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> + <meta name=flags content=""> + <meta name=assert content="justify-content: space-evenly with flexbox and a single item must center it"> + <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> + <link rel=help href="https://drafts.csswg.org/css-align/#distribution-values"> + <link rel=help href="https://drafts.csswg.org/css-align/#fallback-alignment"> + <link rel=help href="https://drafts.csswg.org/css-flexbox-1/#justify-content-property"> +<style> +.red { + position: absolute; + z-index: -1; + width: 100px; + height: 100px; + background: red; +} +.container { + margin-left: -100px; + width: 300px; + display: flex; + justify-content: space-evenly; +} +.container div { + width: 100px; + height: 100px; + background: green; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class=red></div> +<div class=container><div></div></div> + diff --git a/testing/web-platform/tests/css/css-align/gaps/column-gap-animation-001.html b/testing/web-platform/tests/css/css-align/gaps/column-gap-animation-001.html new file mode 100644 index 0000000000..03c06249cc --- /dev/null +++ b/testing/web-platform/tests/css/css-align/gaps/column-gap-animation-001.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: column-gap test animation</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes"> +<meta name="assert" content="This test checks that column-gap property is interpolable."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @keyframes column-gap-0-to-100 { + from { column-gap: 0px; } + to { column-gap: 100px; } + } + + #target { + animation-name: column-gap-0-to-100; + animation-timing-function: linear; + animation-duration: 2s; + animation-delay: -1s; + animation-play-state: paused; + } +</style> +<body> + <div id="target"></div> + <div id="log"></div> + + <script> + test( + function(){ + var target = document.getElementById("target"); + assert_equals(getComputedStyle(target).columnGap, "50px"); + }, "column-gap is interpolable"); + </script> +</body> + diff --git a/testing/web-platform/tests/css/css-align/gaps/column-gap-animation-002.html b/testing/web-platform/tests/css/css-align/gaps/column-gap-animation-002.html new file mode 100644 index 0000000000..133b98a31c --- /dev/null +++ b/testing/web-platform/tests/css/css-align/gaps/column-gap-animation-002.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: column-gap normal test animation</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes"> +<meta name="assert" content="This test checks that 'normal' value for column-gap property is not interpolable."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @keyframes column-gap-normal-to-100 { + from { column-gap: normal; } + to { column-gap: 100px; } + } + + #target { + animation-name: column-gap-normal-to-100; + animation-duration: 2s; + animation-delay: -1s; + animation-play-state: paused; + } +</style> +<body> + <div id="target"></div> + <div id="log"></div> + + <script> + test( + function(){ + var target = document.getElementById("target"); + assert_equals(getComputedStyle(target).columnGap, "100px"); + }, "column-gap: normal is not interpolable"); + </script> +</body> diff --git a/testing/web-platform/tests/css/css-align/gaps/column-gap-animation-003.html b/testing/web-platform/tests/css/css-align/gaps/column-gap-animation-003.html new file mode 100644 index 0000000000..ef8f0e52e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/gaps/column-gap-animation-003.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: Default column-gap test animation</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes"> +<meta name="assert" content="This test checks that the default value for column-gap property, which is 'normal', is not interpolable."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @keyframes column-gap-to-100 { + to { column-gap: 100px; } + } + + #target { + animation-name: column-gap-to-100; + animation-duration: 2s; + animation-delay: -1s; + animation-play-state: paused; + } +</style> +<body> + <div id="target"></div> + <div id="log"></div> + + <script> + test( + function(){ + var target = document.getElementById("target"); + assert_equals(getComputedStyle(target).columnGap, "100px"); + }, "Default column-gap is not interpolable"); + </script> +</body> diff --git a/testing/web-platform/tests/css/css-align/gaps/column-gap-parsing-001.html b/testing/web-platform/tests/css/css-align/gaps/column-gap-parsing-001.html new file mode 100644 index 0000000000..7feeddf851 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/gaps/column-gap-parsing-001.html @@ -0,0 +1,151 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: column-gap parsing</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + .columnGapPx { column-gap: 12px; } + #columnGapEm { column-gap: 2em; font: 10px/1 Monospace; } + #columnGapVw { column-gap: 2vw; } + #columnGapPercent { column-gap: 15%; } + #columnGapCalc { column-gap: calc(10px + 4px); } + #columnGapCalcFixedPercent { column-gap: calc(5px + 10%); } + .columnGapInitial { column-gap: initial; } + .columnGapInherit { column-gap: inherit; } + + #invalidColumnGapNegative { column-gap: -10px; } + #invalidColumnGapMaxContent { column-gap: max-content; } + #invalidColumnGapNone { column-gap: none; } + #invalidColumnGapMultiple { column-gap: 10px 1px; } + #invalidColumnGapAngle { column-gap: 3rad; } + #invalidColumnGapResolution { column-gap: 2dpi; } + #invalidColumnGapTime { column-gap: 200ms; } +</style> +<body> + <div id="log"></div> + + <div id="default"></div> + <div id="columnGapPx" class="columnGapPx"></div> + <div id="columnGapEm"></div> + <div id="columnGapVw"></div> + <div id="columnGapPercent"></div> + <div id="columnGapCalc"></div> + <div id="columnGapCalcFixedPercent"></div> + <div id="columnGapInitial" class="columnGapInitial"></div> + <div class="columnGapPx"> + <div id="columnGapInitialPx" class="columnGapInitial"></div> + </div> + <div id="columnGapInherit" class="columnGapInherit"></div> + <div class="columnGapPx"> + <div id="columnGapInheritPx" class="columnGapInherit"></div> + </div> + + <div id="invalidColumnGapNegative"></div> + <div id="invalidColumnGapMaxContent"></div> + <div id="invalidColumnGapNone"></div> + <div id="invalidColumnGapMultiple"></div> + <div id="invalidColumnGapAngle"></div> + <div id="invalidColumnGapResolution"></div> + <div id="invalidColumnGapTime"></div> + + <script> + test( + function(){ + var target = document.getElementById("default"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Default column-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("columnGapPx"); + assert_equals(getComputedStyle(target).columnGap, "12px"); + }, "column-gap accepts pixels"); + test( + function(){ + var target = document.getElementById("columnGapEm"); + assert_equals(getComputedStyle(target).columnGap, "20px"); + }, "column-gap accepts em"); + test( + function(){ + var target = document.getElementById("columnGapVw"); + // The columnGap size would depend on the viewport width, so to make the test pass + // in any window size we just check it's not "normal". + assert_not_equals(getComputedStyle(target).columnGap, "normal"); + }, "column-gap accepts vw"); + test( + function(){ + var target = document.getElementById("columnGapPercent"); + assert_equals(getComputedStyle(target).columnGap, "15%"); + }, "column-gap accepts percentage"); + test( + function(){ + var target = document.getElementById("columnGapCalc"); + assert_equals(getComputedStyle(target).columnGap, "14px"); + }, "column-gap accepts calc()"); + test( + function(){ + var target = document.getElementById("columnGapCalcFixedPercent"); + assert_equals(getComputedStyle(target).columnGap, "calc(10% + 5px)"); + }, "column-gap accepts calc() mixing fixed and percentage values"); + test( + function(){ + var target = document.getElementById("columnGapInitial"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Initial column-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("columnGapInitialPx"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Initial column-gap is 'normal' 2"); + test( + function(){ + var target = document.getElementById("columnGapInherit"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Initial inherited column-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("columnGapInheritPx"); + assert_equals(getComputedStyle(target).columnGap, "12px"); + }, "column-gap is inheritable"); + + + test( + function(){ + var target = document.getElementById("invalidColumnGapNegative"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Negative column-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidColumnGapMaxContent"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "'max-content' column-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidColumnGapNone"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "'none' column-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidColumnGapMultiple"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "column-gap with multiple values is invalid"); + test( + function(){ + var target = document.getElementById("invalidColumnGapAngle"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Angle column-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidColumnGapResolution"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Resolution column-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidColumnGapTime"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Time column-gap is invalid"); + </script> +</body> + + diff --git a/testing/web-platform/tests/css/css-align/gaps/gap-animation-001.html b/testing/web-platform/tests/css/css-align/gaps/gap-animation-001.html new file mode 100644 index 0000000000..7ce3b69f6b --- /dev/null +++ b/testing/web-platform/tests/css/css-align/gaps/gap-animation-001.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: gap test animation</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes"> +<meta name="assert" content="This test checks that gap property is interpolable."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @keyframes gap-0-to-100 { + from { gap: 0px; } + to { gap: 100px; } + } + + #target { + animation-name: gap-0-to-100; + animation-timing-function: linear; + animation-duration: 2s; + animation-delay: -1s; + animation-play-state: paused; + } +</style> +<body> + <div id="target"></div> + <div id="log"></div> + + <script> + test( + function(){ + var target = document.getElementById("target"); + assert_equals(getComputedStyle(target).gap, "50px"); + assert_equals(getComputedStyle(target).rowGap, "50px"); + assert_equals(getComputedStyle(target).columnGap, "50px"); + }, "gap is interpolable"); + </script> +</body> + diff --git a/testing/web-platform/tests/css/css-align/gaps/gap-animation-002.html b/testing/web-platform/tests/css/css-align/gaps/gap-animation-002.html new file mode 100644 index 0000000000..6056aad674 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/gaps/gap-animation-002.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: gap normal test animation</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes"> +<meta name="assert" content="This test checks that 'normal' value for gap property is not interpolable."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @keyframes gap-normal-to-100 { + from { gap: normal; } + to { gap: 100px; } + } + + #target { + animation-name: gap-normal-to-100; + animation-duration: 2s; + animation-delay: -1s; + animation-play-state: paused; + } +</style> +<body> + <div id="target"></div> + <div id="log"></div> + + <script> + test( + function(){ + var target = document.getElementById("target"); + assert_equals(getComputedStyle(target).gap, "100px"); + assert_equals(getComputedStyle(target).rowGap, "100px"); + assert_equals(getComputedStyle(target).columnGap, "100px"); + }, "gap: normal is not interpolable"); + </script> +</body> diff --git a/testing/web-platform/tests/css/css-align/gaps/gap-animation-003.html b/testing/web-platform/tests/css/css-align/gaps/gap-animation-003.html new file mode 100644 index 0000000000..2ec4551acb --- /dev/null +++ b/testing/web-platform/tests/css/css-align/gaps/gap-animation-003.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: Default gap test animation</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes"> +<meta name="assert" content="This test checks that the default value for gap property, which is 'normal', is not interpolable."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @keyframes gap-to-100 { + to { gap: 100px; } + } + + #target { + animation-name: gap-to-100; + animation-duration: 2s; + animation-delay: -1s; + animation-play-state: paused; + } +</style> +<body> + <div id="target"></div> + <div id="log"></div> + + <script> + test( + function(){ + var target = document.getElementById("target"); + assert_equals(getComputedStyle(target).gap, "100px"); + assert_equals(getComputedStyle(target).rowGap, "100px"); + assert_equals(getComputedStyle(target).columnGap, "100px"); + }, "Default gap is not interpolable"); + </script> +</body> diff --git a/testing/web-platform/tests/css/css-align/gaps/gap-animation-004.html b/testing/web-platform/tests/css/css-align/gaps/gap-animation-004.html new file mode 100644 index 0000000000..8b6fbe440f --- /dev/null +++ b/testing/web-platform/tests/css/css-align/gaps/gap-animation-004.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: gap test animation</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes"> +<meta name="assert" content="This test checks that gap property is interpolable for each longhand (row-gap and column-gap) independently."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @keyframes gap-100-200-to-200-400 { + from { gap: 100px 200px; } + to { gap: 200px 400px; } + } + + #target { + animation-name: gap-100-200-to-200-400; + animation-timing-function: linear; + animation-duration: 2s; + animation-delay: -1s; + animation-play-state: paused; + } +</style> +<body> + <div id="target"></div> + <div id="log"></div> + + <script> + test( + function(){ + var target = document.getElementById("target"); + assert_equals(getComputedStyle(target).gap, "150px 300px"); + assert_equals(getComputedStyle(target).rowGap, "150px"); + assert_equals(getComputedStyle(target).columnGap, "300px"); + }, "gap is interpolable"); + </script> +</body> diff --git a/testing/web-platform/tests/css/css-align/gaps/gap-normal-computed-001.html b/testing/web-platform/tests/css/css-align/gaps/gap-normal-computed-001.html new file mode 100644 index 0000000000..45b82ac27a --- /dev/null +++ b/testing/web-platform/tests/css/css-align/gaps/gap-normal-computed-001.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: computed value of normal on *-gap properties</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<meta assert="The computed value of [row-|column-]?gap is normal for all elements it applies to. Checking explicitely because earlier version of the spec called for 0px in some cases."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +#col, +#grid, +#flex { + /* Not using the shorthand because that's not what we're interested in, + and there are implementations that support column-gap without supporting the shorthand */ + colum-gap: normal; + row-gap: normal; + float: right; /* for shrinkwrap*/ +} +#col { + column-count: 2; + column-width: 50px; +} +#grid { + display: grid; + grid-template-columns: 50px 50px; + grid-template-rows: 50px 50px; +} +#flex { + display: flex; +} +#flex * { width: 50px; height: 50px;} +</style> +<body> + <div id="log"></div> + + <div id=col></div> + <div id=grid></div> + <div id=flex><span></span><span></span></div> + + <script> + test( + function(){ + var target = document.getElementById("col"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "colum-gap:normal computes to normal on multicol elements"); + test( + function(){ + var target = document.getElementById("col"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "row-gap:normal computes to normal on multicol elements"); + test( + function(){ + var target = document.getElementById("grid"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "colum-gap:normal computes to normal on grid"); + test( + function(){ + var target = document.getElementById("grid"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "row-gap:normal computes to normal on grid"); + test( + function(){ + var target = document.getElementById("flex"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "colum-gap:normal (main axis) computes to normal on flexbox"); + test( + function(){ + var target = document.getElementById("flex"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "row-gap:normal (cross axis) computes to normal on flexbox"); + </script> +</body> diff --git a/testing/web-platform/tests/css/css-align/gaps/gap-normal-used-001.html b/testing/web-platform/tests/css/css-align/gaps/gap-normal-used-001.html new file mode 100644 index 0000000000..3d7ab10b8c --- /dev/null +++ b/testing/web-platform/tests/css/css-align/gaps/gap-normal-used-001.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: used value of *-gap:normal on grid</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<meta assert="The used value of row-gap and column-gap normal for grids is 0"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> +#grid { + colum-gap: normal; + row-gap: normal; + display: grid; + grid-template-columns: 50px 50px; + grid-template-rows: 50px 50px; + + position: absolute; +} +#grid * { background: green; } +#red { + width: 100px; + height: 100px; + background: red; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id=grid><span></span><span></span><span></span><span></span></div> +<div id=red></div> diff --git a/testing/web-platform/tests/css/css-align/gaps/gap-normal-used-002.html b/testing/web-platform/tests/css/css-align/gaps/gap-normal-used-002.html new file mode 100644 index 0000000000..0b40646e7c --- /dev/null +++ b/testing/web-platform/tests/css/css-align/gaps/gap-normal-used-002.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: used value of *-gap:normal on flexbox</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<meta assert="The used value row-gap:normal and column:normal normal is 0px in flexbox"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> +#flex { + colum-gap: normal; + row-gap: normal; + display: flex; + flex-flow: wrap; + max-width: 145px; /* more than 100, less than 150, to force wrapping and get 2 items per line*/ + + position: absolute; +} +#flex * { + width: 50px; + height: 50px; + background: green +} +#red { + width: 100px; + height: 100px; + background: red; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id=flex><span></span><span></span><span></span><span></span></div> +<div id=red></div> diff --git a/testing/web-platform/tests/css/css-align/gaps/gap-parsing-001.html b/testing/web-platform/tests/css/css-align/gaps/gap-parsing-001.html new file mode 100644 index 0000000000..9ff3872114 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/gaps/gap-parsing-001.html @@ -0,0 +1,234 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: gap shorthand parsing</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#row-row-gap"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + .gapPx { gap: 12px; } + #gapPxTwo { gap: 12px 8px; } + #gapPxPercent { gap: 12px 10%; } + #gapEm { gap: 2em; font: 10px/1 Monospace; } + #gapEmTwo { gap: 2em 4em; font: 10px/1 Monospace; } + #gapVw { gap: 2vw; } + #gapVwTwo { gap: 2vw 1vh; } + #gapPercent { gap: 15%; } + #gapPercentTwo { gap: 15% 10%; } + #gapCalc { gap: calc(10px + 4px); } + #gapCalcFixedPercent { gap: calc(5px + 10%); } + #gapCalcTwo { gap: calc(10px + 4px) calc(20px - 8px); } + .gapInitial { gap: initial; } + .gapInherit { gap: inherit; } + + #invalidGapNegative { gap: -10px; } + #invalidGapMaxContent { gap: max-content; } + #invalidGapNone { gap: none; } + #invalidGapAngle { gap: 3rad; } + #invalidGapResolution { gap: 2dpi; } + #invalidGapTime { gap: 200ms; } + #invalidGapThree { gap: 10px 1px 5px; } + #invalidGapSlash { gap: 10px / 5px; } + #invalidGapOneWrong { gap: 10px -5px; } +</style> +<body> + <div id="log"></div> + + <div id="default"></div> + <div id="gapPx" class="gapPx"></div> + <div id="gapPxTwo"></div> + <div id="gapPxPercent"></div> + <div id="gapEm"></div> + <div id="gapEmTwo"></div> + <div id="gapVw"></div> + <div id="gapVwTwo"></div> + <div id="gapPercent"></div> + <div id="gapPercentTwo"></div> + <div id="gapCalc"></div> + <div id="gapCalcFixedPercent"></div> + <div id="gapCalcTwo"></div> + <div id="gapInitial" class="gapInitial"></div> + <div class="gapPx"> + <div id="gapInitialPx" class="gapInitial"></div> + </div> + <div id="gapInherit" class="gapInherit"></div> + <div class="gapPx"> + <div id="gapInheritPx" class="gapInherit"></div> + </div> + + <div id="invalidGapNegative"></div> + <div id="invalidGapMaxContent"></div> + <div id="invalidGapNone"></div> + <div id="invalidGapAngle"></div> + <div id="invalidGapResolution"></div> + <div id="invalidGapTime"></div> + <div id="invalidGapThree"></div> + <div id="invalidGapSlash"></div> + <div id="invalidGapOneWrong"></div> + + <script> + test( + function(){ + var target = document.getElementById("default"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Default gap is 'normal'"); + test( + function(){ + var target = document.getElementById("gapPx"); + assert_equals(getComputedStyle(target).rowGap, "12px"); + assert_equals(getComputedStyle(target).columnGap, "12px"); + }, "gap accepts pixels"); + test( + function(){ + var target = document.getElementById("gapPxTwo"); + assert_equals(getComputedStyle(target).rowGap, "12px"); + assert_equals(getComputedStyle(target).columnGap, "8px"); + }, "gap accepts pixels 2"); + test( + function(){ + var target = document.getElementById("gapPxPercent"); + assert_equals(getComputedStyle(target).rowGap, "12px"); + assert_equals(getComputedStyle(target).columnGap, "10%"); + }, "gap accepts pixels combined with percentage"); + test( + function(){ + var target = document.getElementById("gapEm"); + assert_equals(getComputedStyle(target).rowGap, "20px"); + assert_equals(getComputedStyle(target).columnGap, "20px"); + }, "gap accepts em"); + test( + function(){ + var target = document.getElementById("gapEmTwo"); + assert_equals(getComputedStyle(target).rowGap, "20px"); + assert_equals(getComputedStyle(target).columnGap, "40px"); + }, "gap accepts em 2"); + test( + function(){ + var target = document.getElementById("gapVw"); + // The gap size would depend on the viewport width, so to make the test pass + // in any window size we just check it's not "normal". + assert_not_equals(getComputedStyle(target).rowGap, "normal"); + assert_not_equals(getComputedStyle(target).columnGap, "normal"); + }, "gap accepts vw"); + test( + function(){ + var target = document.getElementById("gapVwTwo"); + // The gap size would depend on the viewport width, so to make the test pass + // in any window size we just check it's not "normal". + assert_not_equals(getComputedStyle(target).rowGap, "normal"); + assert_not_equals(getComputedStyle(target).columnGap, "normal"); + }, "gap accepts vw and vh"); + test( + function(){ + var target = document.getElementById("gapPercent"); + assert_equals(getComputedStyle(target).rowGap, "15%"); + assert_equals(getComputedStyle(target).columnGap, "15%"); + }, "gap accepts percentage"); + test( + function(){ + var target = document.getElementById("gapPercentTwo"); + assert_equals(getComputedStyle(target).rowGap, "15%"); + assert_equals(getComputedStyle(target).columnGap, "10%"); + }, "gap accepts percentage 2"); + test( + function(){ + var target = document.getElementById("gapCalc"); + assert_equals(getComputedStyle(target).rowGap, "14px"); + assert_equals(getComputedStyle(target).columnGap, "14px"); + }, "gap accepts calc()"); + test( + function(){ + var target = document.getElementById("gapCalcFixedPercent"); + assert_equals(getComputedStyle(target).rowGap, "calc(10% + 5px)"); + assert_equals(getComputedStyle(target).columnGap, "calc(10% + 5px)"); + }, "gap accepts calc() mixing fixed and percentage values"); + test( + function(){ + var target = document.getElementById("gapCalcTwo"); + assert_equals(getComputedStyle(target).rowGap, "14px"); + assert_equals(getComputedStyle(target).columnGap, "12px"); + }, "gap accepts calc() 2"); + test( + function(){ + var target = document.getElementById("gapInitial"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Initial gap is 'normal'"); + test( + function(){ + var target = document.getElementById("gapInitialPx"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Initial gap is 'normal' 2"); + test( + function(){ + var target = document.getElementById("gapInherit"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Initial inherited gap is 'normal'"); + test( + function(){ + var target = document.getElementById("gapInheritPx"); + assert_equals(getComputedStyle(target).rowGap, "12px"); + assert_equals(getComputedStyle(target).columnGap, "12px"); + }, "gap is inheritable"); + + test( + function(){ + var target = document.getElementById("invalidGapNegative"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Negative gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidGapMaxContent"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "'max-content' gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidGapNone"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "'none' gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidGapAngle"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Angle gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidGapResolution"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Resolution gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidGapTime"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Time gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidGapThree"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "gap with three values is invalid"); + test( + function(){ + var target = document.getElementById("invalidGapSlash"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "gap with slash is invalid"); + test( + function(){ + var target = document.getElementById("invalidGapOneWrong"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "gap with one wrong value is invalid"); + </script> +</body> + + diff --git a/testing/web-platform/tests/css/css-align/gaps/grid-column-gap-parsing-001.html b/testing/web-platform/tests/css/css-align/gaps/grid-column-gap-parsing-001.html new file mode 100644 index 0000000000..baec0641cd --- /dev/null +++ b/testing/web-platform/tests/css/css-align/gaps/grid-column-gap-parsing-001.html @@ -0,0 +1,151 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: grid-column-gap parsing</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + .columnGapPx { grid-column-gap: 12px; } + #columnGapEm { grid-column-gap: 2em; font: 10px/1 Monospace; } + #columnGapVw { grid-column-gap: 2vw; } + #columnGapPercent { grid-column-gap: 15%; } + #columnGapCalc { grid-column-gap: calc(10px + 4px); } + #columnGapCalcFixedPercent { grid-column-gap: calc(5px + 10%); } + .columnGapInitial { grid-column-gap: initial; } + .columnGapInherit { grid-column-gap: inherit; } + + #invalidColumnGapNegative { grid-column-gap: -10px; } + #invalidColumnGapMaxContent { grid-column-gap: max-content; } + #invalidColumnGapNone { grid-column-gap: none; } + #invalidColumnGapMultiple { grid-column-gap: 10px 1px; } + #invalidColumnGapAngle { grid-column-gap: 3rad; } + #invalidColumnGapResolution { grid-column-gap: 2dpi; } + #invalidColumnGapTime { grid-column-gap: 200ms; } +</style> +<body> + <div id="log"></div> + + <div id="default"></div> + <div id="columnGapPx" class="columnGapPx"></div> + <div id="columnGapEm"></div> + <div id="columnGapVw"></div> + <div id="columnGapPercent"></div> + <div id="columnGapCalc"></div> + <div id="columnGapCalcFixedPercent"></div> + <div id="columnGapInitial" class="columnGapInitial"></div> + <div class="columnGapPx"> + <div id="columnGapInitialPx" class="columnGapInitial"></div> + </div> + <div id="columnGapInherit" class="columnGapInherit"></div> + <div class="columnGapPx"> + <div id="columnGapInheritPx" class="columnGapInherit"></div> + </div> + + <div id="invalidColumnGapNegative"></div> + <div id="invalidColumnGapMaxContent"></div> + <div id="invalidColumnGapNone"></div> + <div id="invalidColumnGapMultiple"></div> + <div id="invalidColumnGapAngle"></div> + <div id="invalidColumnGapResolution"></div> + <div id="invalidColumnGapTime"></div> + + <script> + test( + function(){ + var target = document.getElementById("default"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Default grid-column-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("columnGapPx"); + assert_equals(getComputedStyle(target).columnGap, "12px"); + }, "grid-column-gap accepts pixels"); + test( + function(){ + var target = document.getElementById("columnGapEm"); + assert_equals(getComputedStyle(target).columnGap, "20px"); + }, "grid-column-gap accepts em"); + test( + function(){ + var target = document.getElementById("columnGapVw"); + // The columnGap size would depend on the viewport width, so to make the test pass + // in any window size we just check it's not "normal". + assert_not_equals(getComputedStyle(target).columnGap, "normal"); + }, "grid-column-gap accepts vw"); + test( + function(){ + var target = document.getElementById("columnGapPercent"); + assert_equals(getComputedStyle(target).columnGap, "15%"); + }, "grid-column-gap accepts percentage"); + test( + function(){ + var target = document.getElementById("columnGapCalc"); + assert_equals(getComputedStyle(target).columnGap, "14px"); + }, "grid-column-gap accepts calc()"); + test( + function(){ + var target = document.getElementById("columnGapCalcFixedPercent"); + assert_equals(getComputedStyle(target).columnGap, "calc(10% + 5px)"); + }, "grid-column-gap accepts calc() mixing fixed and percentage values"); + test( + function(){ + var target = document.getElementById("columnGapInitial"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Initial grid-column-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("columnGapInitialPx"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Initial grid-column-gap is 'normal' 2"); + test( + function(){ + var target = document.getElementById("columnGapInherit"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Initial inherited grid-column-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("columnGapInheritPx"); + assert_equals(getComputedStyle(target).columnGap, "12px"); + }, "grid-column-gap is inheritable"); + + + test( + function(){ + var target = document.getElementById("invalidColumnGapNegative"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Negative grid-column-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidColumnGapMaxContent"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "'max-content' grid-column-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidColumnGapNone"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "'none' grid-column-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidColumnGapMultiple"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "grid-column-gap with multiple values is invalid"); + test( + function(){ + var target = document.getElementById("invalidColumnGapAngle"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Angle grid-column-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidColumnGapResolution"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Resolution grid-column-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidColumnGapTime"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Time grid-column-gap is invalid"); + </script> +</body> + + diff --git a/testing/web-platform/tests/css/css-align/gaps/grid-gap-parsing-001.html b/testing/web-platform/tests/css/css-align/gaps/grid-gap-parsing-001.html new file mode 100644 index 0000000000..fc10b620f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/gaps/grid-gap-parsing-001.html @@ -0,0 +1,234 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: gap shorthand parsing</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + .gapPx { grid-gap: 12px; } + #gapPxTwo { grid-gap: 12px 8px; } + #gapPxPercent { grid-gap: 12px 10%; } + #gapEm { grid-gap: 2em; font: 10px/1 Monospace; } + #gapEmTwo { grid-gap: 2em 4em; font: 10px/1 Monospace; } + #gapVw { grid-gap: 2vw; } + #gapVwTwo { grid-gap: 2vw 1vh; } + #gapPercent { grid-gap: 15%; } + #gapPercentTwo { grid-gap: 15% 10%; } + #gapCalc { grid-gap: calc(10px + 4px); } + #gapCalcFixedPercent { grid-gap: calc(5px + 10%); } + #gapCalcTwo { grid-gap: calc(10px + 4px) calc(20px - 8px); } + .gapInitial { grid-gap: initial; } + .gapInherit { grid-gap: inherit; } + + #invalidGridGapNegative { grid-gap: -10px; } + #invalidGridGapMaxContent { grid-gap: max-content; } + #invalidGridGapNone { grid-gap: none; } + #invalidGridGapAngle { grid-gap: 3rad; } + #invalidGridGapResolution { grid-gap: 2dpi; } + #invalidGridGapTime { grid-gap: 200ms; } + #invalidGridGapThree { grid-gap: 10px 1px 5px; } + #invalidGridGapSlash { grid-gap: 10px / 5px; } + #invalidGridGapOneWrong { grid-gap: 10px -5px; } +</style> +<body> + <div id="log"></div> + + <div id="default"></div> + <div id="gapPx" class="gapPx"></div> + <div id="gapPxTwo"></div> + <div id="gapPxPercent"></div> + <div id="gapEm"></div> + <div id="gapEmTwo"></div> + <div id="gapVw"></div> + <div id="gapVwTwo"></div> + <div id="gapPercent"></div> + <div id="gapPercentTwo"></div> + <div id="gapCalc"></div> + <div id="gapCalcFixedPercent"></div> + <div id="gapCalcTwo"></div> + <div id="gapInitial" class="gapInitial"></div> + <div class="gapPx"> + <div id="gapInitialPx" class="gapInitial"></div> + </div> + <div id="gapInherit" class="gapInherit"></div> + <div class="gapPx"> + <div id="gapInheritPx" class="gapInherit"></div> + </div> + + <div id="invalidGridGapNegative"></div> + <div id="invalidGridGapMaxContent"></div> + <div id="invalidGridGapNone"></div> + <div id="invalidGridGapAngle"></div> + <div id="invalidGridGapResolution"></div> + <div id="invalidGridGapTime"></div> + <div id="invalidGridGapThree"></div> + <div id="invalidGridGapSlash"></div> + <div id="invalidGridGapOneWrong"></div> + + <script> + test( + function(){ + var target = document.getElementById("default"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Default grid-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("gapPx"); + assert_equals(getComputedStyle(target).rowGap, "12px"); + assert_equals(getComputedStyle(target).columnGap, "12px"); + }, "grid-gap accepts pixels"); + test( + function(){ + var target = document.getElementById("gapPxTwo"); + assert_equals(getComputedStyle(target).rowGap, "12px"); + assert_equals(getComputedStyle(target).columnGap, "8px"); + }, "grid-gap accepts pixels 2"); + test( + function(){ + var target = document.getElementById("gapPxPercent"); + assert_equals(getComputedStyle(target).rowGap, "12px"); + assert_equals(getComputedStyle(target).columnGap, "10%"); + }, "grid-gap accepts pixels combined with percentage"); + test( + function(){ + var target = document.getElementById("gapEm"); + assert_equals(getComputedStyle(target).rowGap, "20px"); + assert_equals(getComputedStyle(target).columnGap, "20px"); + }, "grid-gap accepts em"); + test( + function(){ + var target = document.getElementById("gapEmTwo"); + assert_equals(getComputedStyle(target).rowGap, "20px"); + assert_equals(getComputedStyle(target).columnGap, "40px"); + }, "grid-gap accepts em 2"); + test( + function(){ + var target = document.getElementById("gapVw"); + // The gap size would depend on the viewport width, so to make the test pass + // in any window size we just check it's not "normal". + assert_not_equals(getComputedStyle(target).rowGap, "normal"); + assert_not_equals(getComputedStyle(target).columnGap, "normal"); + }, "grid-gap accepts vw"); + test( + function(){ + var target = document.getElementById("gapVwTwo"); + // The gap size would depend on the viewport width, so to make the test pass + // in any window size we just check it's not "normal". + assert_not_equals(getComputedStyle(target).rowGap, "normal"); + assert_not_equals(getComputedStyle(target).columnGap, "normal"); + }, "grid-gap accepts vw and vh"); + test( + function(){ + var target = document.getElementById("gapPercent"); + assert_equals(getComputedStyle(target).rowGap, "15%"); + assert_equals(getComputedStyle(target).columnGap, "15%"); + }, "grid-gap accepts percentage"); + test( + function(){ + var target = document.getElementById("gapPercentTwo"); + assert_equals(getComputedStyle(target).rowGap, "15%"); + assert_equals(getComputedStyle(target).columnGap, "10%"); + }, "grid-gap accepts percentage 2"); + test( + function(){ + var target = document.getElementById("gapCalc"); + assert_equals(getComputedStyle(target).rowGap, "14px"); + assert_equals(getComputedStyle(target).columnGap, "14px"); + }, "grid-gap accepts calc()"); + test( + function(){ + var target = document.getElementById("gapCalcFixedPercent"); + assert_equals(getComputedStyle(target).rowGap, "calc(10% + 5px)"); + assert_equals(getComputedStyle(target).columnGap, "calc(10% + 5px)"); + }, "grid-gap accepts calc() mixing fixed and percentage values"); + test( + function(){ + var target = document.getElementById("gapCalcTwo"); + assert_equals(getComputedStyle(target).rowGap, "14px"); + assert_equals(getComputedStyle(target).columnGap, "12px"); + }, "grid-gap accepts calc() 2"); + test( + function(){ + var target = document.getElementById("gapInitial"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Initial grid-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("gapInitialPx"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Initial grid-gap is 'normal' 2"); + test( + function(){ + var target = document.getElementById("gapInherit"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Initial inherited grid-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("gapInheritPx"); + assert_equals(getComputedStyle(target).rowGap, "12px"); + assert_equals(getComputedStyle(target).columnGap, "12px"); + }, "grid-gap is inheritable"); + + test( + function(){ + var target = document.getElementById("invalidGridGapNegative"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Negative grid-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidGridGapMaxContent"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "'max-content' grid-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidGridGapNone"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "'none' grid-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidGridGapAngle"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Angle grid-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidGridGapResolution"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Resolution grid-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidGridGapTime"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Time grid-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidGridGapThree"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "grid-gap with three values is invalid"); + test( + function(){ + var target = document.getElementById("invalidGridGapSlash"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "grid-gap with slash is invalid"); + test( + function(){ + var target = document.getElementById("invalidGridGapOneWrong"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "grid-gap with one wrong value is invalid"); + </script> +</body> + + diff --git a/testing/web-platform/tests/css/css-align/gaps/grid-row-gap-parsing-001.html b/testing/web-platform/tests/css/css-align/gaps/grid-row-gap-parsing-001.html new file mode 100644 index 0000000000..d3b44f4bd7 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/gaps/grid-row-gap-parsing-001.html @@ -0,0 +1,151 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: grid-row-gap parsing</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + .rowGapPx { grid-row-gap: 12px; } + #rowGapEm { grid-row-gap: 2em; font: 10px/1 Monospace; } + #rowGapVw { grid-row-gap: 2vw; } + #rowGapPercent { grid-row-gap: 15%; } + #rowGapCalc { grid-row-gap: calc(10px + 4px); } + #rowGapCalcFixedPercent { grid-row-gap: calc(5px + 10%); } + .rowGapInitial { grid-row-gap: initial; } + .rowGapInherit { grid-row-gap: inherit; } + + #invalidRowGapNegative { grid-row-gap: -10px; } + #invalidRowGapMaxContent { grid-row-gap: max-content; } + #invalidRowGapNone { grid-row-gap: none; } + #invalidRowGapMultiple { grid-row-gap: 10px 1px; } + #invalidRowGapAngle { grid-row-gap: 3rad; } + #invalidRowGapResolution { grid-row-gap: 2dpi; } + #invalidRowGapTime { grid-row-gap: 200ms; } +</style> +<body> + <div id="log"></div> + + <div id="default"></div> + <div id="rowGapPx" class="rowGapPx"></div> + <div id="rowGapEm"></div> + <div id="rowGapVw"></div> + <div id="rowGapPercent"></div> + <div id="rowGapCalc"></div> + <div id="rowGapCalcFixedPercent"></div> + <div id="rowGapInitial" class="rowGapInitial"></div> + <div class="rowGapPx"> + <div id="rowGapInitialPx" class="rowGapInitial"></div> + </div> + <div id="rowGapInherit" class="rowGapInherit"></div> + <div class="rowGapPx"> + <div id="rowGapInheritPx" class="rowGapInherit"></div> + </div> + + <div id="invalidRowGapNegative"></div> + <div id="invalidRowGapMaxContent"></div> + <div id="invalidRowGapNone"></div> + <div id="invalidRowGapMultiple"></div> + <div id="invalidRowGapAngle"></div> + <div id="invalidRowGapResolution"></div> + <div id="invalidRowGapTime"></div> + + <script> + test( + function(){ + var target = document.getElementById("default"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Default grid-row-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("rowGapPx"); + assert_equals(getComputedStyle(target).rowGap, "12px"); + }, "grid-row-gap accepts pixels"); + test( + function(){ + var target = document.getElementById("rowGapEm"); + assert_equals(getComputedStyle(target).rowGap, "20px"); + }, "grid-row-gap accepts em"); + test( + function(){ + var target = document.getElementById("rowGapVw"); + // The rowGap size would depend on the viewport width, so to make the test pass + // in any window size we just check it's not "normal". + assert_not_equals(getComputedStyle(target).rowGap, "normal"); + }, "grid-row-gap accepts vw"); + test( + function(){ + var target = document.getElementById("rowGapPercent"); + assert_equals(getComputedStyle(target).rowGap, "15%"); + }, "grid-row-gap accepts percentage"); + test( + function(){ + var target = document.getElementById("rowGapCalc"); + assert_equals(getComputedStyle(target).rowGap, "14px"); + }, "grid-row-gap accepts calc()"); + test( + function(){ + var target = document.getElementById("rowGapCalcFixedPercent"); + assert_equals(getComputedStyle(target).rowGap, "calc(10% + 5px)"); + }, "grid-row-gap accepts calc() mixing fixed and percentage values"); + test( + function(){ + var target = document.getElementById("rowGapInitial"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Initial grid-row-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("rowGapInitialPx"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Initial grid-row-gap is 'normal' 2"); + test( + function(){ + var target = document.getElementById("rowGapInherit"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Initial inherited grid-row-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("rowGapInheritPx"); + assert_equals(getComputedStyle(target).rowGap, "12px"); + }, "grid-row-gap is inheritable"); + + + test( + function(){ + var target = document.getElementById("invalidRowGapNegative"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Negative grid-row-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidRowGapMaxContent"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "'max-content' grid-row-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidRowGapNone"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "'none' grid-row-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidRowGapMultiple"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "grid-row-gap with multiple values is invalid"); + test( + function(){ + var target = document.getElementById("invalidRowGapAngle"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Angle grid-row-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidRowGapResolution"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Resolution grid-row-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidRowGapTime"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Time grid-row-gap is invalid"); + </script> +</body> + + diff --git a/testing/web-platform/tests/css/css-align/gaps/row-gap-animation-001.html b/testing/web-platform/tests/css/css-align/gaps/row-gap-animation-001.html new file mode 100644 index 0000000000..da4a235ded --- /dev/null +++ b/testing/web-platform/tests/css/css-align/gaps/row-gap-animation-001.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: row-gap test animation</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes"> +<meta name="assert" content="This test checks that row-gap property is interpolable."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @keyframes row-gap-0-to-100 { + from { row-gap: 0px; } + to { row-gap: 100px; } + } + + #target { + animation-name: row-gap-0-to-100; + animation-timing-function: linear; + animation-duration: 2s; + animation-delay: -1s; + animation-play-state: paused; + } +</style> +<body> + <div id="target"></div> + <div id="log"></div> + + <script> + test( + function(){ + var target = document.getElementById("target"); + assert_equals(getComputedStyle(target).rowGap, "50px"); + }, "row-gap is interpolable"); + </script> +</body> + diff --git a/testing/web-platform/tests/css/css-align/gaps/row-gap-animation-002.html b/testing/web-platform/tests/css/css-align/gaps/row-gap-animation-002.html new file mode 100644 index 0000000000..330e1054f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/gaps/row-gap-animation-002.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: row-gap normal test animation</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes"> +<meta name="assert" content="This test checks that 'normal' value for row-gap property is not interpolable."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @keyframes row-gap-normal-to-100 { + from { row-gap: normal; } + to { row-gap: 100px; } + } + + #target { + animation-name: row-gap-normal-to-100; + animation-duration: 2s; + animation-delay: -1s; + animation-play-state: paused; + } +</style> +<body> + <div id="target"></div> + <div id="log"></div> + + <script> + test( + function(){ + var target = document.getElementById("target"); + assert_equals(getComputedStyle(target).rowGap, "100px"); + }, "row-gap: normal is not interpolable"); + </script> +</body> diff --git a/testing/web-platform/tests/css/css-align/gaps/row-gap-animation-003.html b/testing/web-platform/tests/css/css-align/gaps/row-gap-animation-003.html new file mode 100644 index 0000000000..574e3ff7c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/gaps/row-gap-animation-003.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: Default row-gap test animation</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes"> +<meta name="assert" content="This test checks that the default value for row-gap property, which is 'normal', is not interpolable."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @keyframes row-gap-to-100 { + to { row-gap: 100px; } + } + + #target { + animation-name: row-gap-to-100; + animation-duration: 2s; + animation-delay: -1s; + animation-play-state: paused; + } +</style> +<body> + <div id="target"></div> + <div id="log"></div> + + <script> + test( + function(){ + var target = document.getElementById("target"); + assert_equals(getComputedStyle(target).rowGap, "100px"); + }, "Default row-gap is not interpolable"); + </script> +</body> diff --git a/testing/web-platform/tests/css/css-align/gaps/row-gap-parsing-001.html b/testing/web-platform/tests/css/css-align/gaps/row-gap-parsing-001.html new file mode 100644 index 0000000000..59be718cee --- /dev/null +++ b/testing/web-platform/tests/css/css-align/gaps/row-gap-parsing-001.html @@ -0,0 +1,151 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: row-gap parsing</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + .rowGapPx { row-gap: 12px; } + #rowGapEm { row-gap: 2em; font: 10px/1 Monospace; } + #rowGapVw { row-gap: 2vw; } + #rowGapPercent { row-gap: 15%; } + #rowGapCalc { row-gap: calc(10px + 4px); } + #rowGapCalcFixedPercent { row-gap: calc(5px + 10%); } + .rowGapInitial { row-gap: initial; } + .rowGapInherit { row-gap: inherit; } + + #invalidRowGapNegative { row-gap: -10px; } + #invalidRowGapMaxContent { row-gap: max-content; } + #invalidRowGapNone { row-gap: none; } + #invalidRowGapMultiple { row-gap: 10px 1px; } + #invalidRowGapAngle { row-gap: 3rad; } + #invalidRowGapResolution { row-gap: 2dpi; } + #invalidRowGapTime { row-gap: 200ms; } +</style> +<body> + <div id="log"></div> + + <div id="default"></div> + <div id="rowGapPx" class="rowGapPx"></div> + <div id="rowGapEm"></div> + <div id="rowGapVw"></div> + <div id="rowGapPercent"></div> + <div id="rowGapCalc"></div> + <div id="rowGapCalcFixedPercent"></div> + <div id="rowGapInitial" class="rowGapInitial"></div> + <div class="rowGapPx"> + <div id="rowGapInitialPx" class="rowGapInitial"></div> + </div> + <div id="rowGapInherit" class="rowGapInherit"></div> + <div class="rowGapPx"> + <div id="rowGapInheritPx" class="rowGapInherit"></div> + </div> + + <div id="invalidRowGapNegative"></div> + <div id="invalidRowGapMaxContent"></div> + <div id="invalidRowGapNone"></div> + <div id="invalidRowGapMultiple"></div> + <div id="invalidRowGapAngle"></div> + <div id="invalidRowGapResolution"></div> + <div id="invalidRowGapTime"></div> + + <script> + test( + function(){ + var target = document.getElementById("default"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Default row-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("rowGapPx"); + assert_equals(getComputedStyle(target).rowGap, "12px"); + }, "row-gap accepts pixels"); + test( + function(){ + var target = document.getElementById("rowGapEm"); + assert_equals(getComputedStyle(target).rowGap, "20px"); + }, "row-gap accepts em"); + test( + function(){ + var target = document.getElementById("rowGapVw"); + // The rowGap size would depend on the viewport width, so to make the test pass + // in any window size we just check it's not "normal". + assert_not_equals(getComputedStyle(target).rowGap, "normal"); + }, "row-gap accepts vw"); + test( + function(){ + var target = document.getElementById("rowGapPercent"); + assert_equals(getComputedStyle(target).rowGap, "15%"); + }, "row-gap accepts percentage"); + test( + function(){ + var target = document.getElementById("rowGapCalc"); + assert_equals(getComputedStyle(target).rowGap, "14px"); + }, "row-gap accepts calc()"); + test( + function(){ + var target = document.getElementById("rowGapCalcFixedPercent"); + assert_equals(getComputedStyle(target).rowGap, "calc(10% + 5px)"); + }, "row-gap accepts calc() mixing fixed and percentage values"); + test( + function(){ + var target = document.getElementById("rowGapInitial"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Initial row-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("rowGapInitialPx"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Initial row-gap is 'normal' 2"); + test( + function(){ + var target = document.getElementById("rowGapInherit"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Initial inherited row-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("rowGapInheritPx"); + assert_equals(getComputedStyle(target).rowGap, "12px"); + }, "row-gap is inheritable"); + + + test( + function(){ + var target = document.getElementById("invalidRowGapNegative"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Negative row-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidRowGapMaxContent"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "'max-content' row-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidRowGapNone"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "'none' row-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidRowGapMultiple"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "row-gap with multiple values is invalid"); + test( + function(){ + var target = document.getElementById("invalidRowGapAngle"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Angle row-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidRowGapResolution"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Resolution row-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidRowGapTime"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Time row-gap is invalid"); + </script> +</body> + + diff --git a/testing/web-platform/tests/css/css-align/inheritance.html b/testing/web-platform/tests/css/css-align/inheritance.html new file mode 100644 index 0000000000..7e2fa130be --- /dev/null +++ b/testing/web-platform/tests/css/css-align/inheritance.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Inheritance of CSS Box Alignment properties</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#property-index"> +<meta name="assert" content="Properties inherit or not according to the spec."> +<meta name="assert" content="Properties have initial values according to the spec."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/inheritance-testcommon.js"></script> +</head> +<body> +<div id="container"> +<div id="target"></div> +</div> +<style> +#container { + justify-items: legacy center; +} +</style> +<script> +assert_not_inherited('align-content', 'normal', 'last baseline'); +assert_not_inherited('align-items', 'normal', 'last baseline'); +assert_not_inherited('align-self', 'auto', 'last baseline'); +assert_not_inherited('column-gap', 'normal', '10px'); +assert_not_inherited('justify-content', 'normal', 'space-evenly'); +assert_not_inherited('justify-items', 'legacy center', 'last baseline'); +assert_not_inherited('justify-self', 'auto', 'last baseline'); +assert_not_inherited('row-gap', 'normal', '10px'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/multicol/align-content-multicol.html b/testing/web-platform/tests/css/css-align/multicol/align-content-multicol.html new file mode 100644 index 0000000000..d14815930a --- /dev/null +++ b/testing/web-platform/tests/css/css-align/multicol/align-content-multicol.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align/#distribution-multicol"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<style> +@import "/fonts/ahem.css"; +body { + font: 10px/1 Ahem; + margin: 0; +} + +#container { + width: 400px; + height: 90px; + columns: 2; + widows: 1; + orphans: 1; +} +</style> + +<div id="container" style="align-content: end;"> + <div>text<br>text</div> + <div style="column-span:all">span</div> + <div>text<br>text</div> +</div> + +<script> +const LINE_HEIGHT = 10; +const Result = { + START: 0, + CENTER: (90 - LINE_HEIGHT * 3) / 2, + END: 90 - LINE_HEIGHT * 3, +}; +const data = [ + ['normal', Result.START], + ['start', Result.START], + ['unsafe start', Result.START], + ['safe start', Result.START], + ['flex-start', Result.START], + ['space-between', Result.START], + ['stretch', Result.START], + ['center', Result.CENTER], + ['unsafe center', Result.CENTER], + ['safe center', Result.CENTER], + ['space-around', Result.CENTER], + ['space-evenly', Result.CENTER], + ['end', Result.END], + ['unsafe end', Result.END], + ['safe end', Result.END], + ['flex-end', Result.END] +]; + +for (let d of data) { + for (let c of ['none', 'size']) { + test(() => { + container.style.alignContent = d[0]; + container.style.contain = c; + const children = container.querySelectorAll('div'); + assert_equals(children[0].offsetTop, d[1]); + assert_equals(children[1].offsetTop, d[1] + LINE_HEIGHT); + assert_equals(children[2].offsetTop, d[1] + LINE_HEIGHT * 2); + }, `align-content: ${d[0]}` + (c == 'none' ? `` : `; contain: ${c}`)); + } +} +</script> diff --git a/testing/web-platform/tests/css/css-align/parsing/align-content-computed.html b/testing/web-platform/tests/css/css-align/parsing/align-content-computed.html new file mode 100644 index 0000000000..8b5465c6b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/align-content-computed.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: getComputedStyle().alignContent</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content"> +<meta name="assert" content="align-content computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("align-content", "normal"); + +test_computed_value("align-content", "baseline"); +test_computed_value("align-content", "last baseline"); + +test_computed_value("align-content", "space-between"); +test_computed_value("align-content", "space-around"); +test_computed_value("align-content", "space-evenly"); +test_computed_value("align-content", "stretch"); + +test_computed_value("align-content", "center"); +test_computed_value("align-content", "start"); +test_computed_value("align-content", "end"); +test_computed_value("align-content", "flex-start"); +test_computed_value("align-content", "flex-end"); +test_computed_value("align-content", "unsafe end"); +test_computed_value("align-content", "safe flex-start"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/align-content-invalid.html b/testing/web-platform/tests/css/css-align/parsing/align-content-invalid.html new file mode 100644 index 0000000000..ae244389bf --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/align-content-invalid.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing align-content with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content"> +<meta name="assert" content="align-content supports only the grammar 'normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("align-content", "auto"); +test_invalid_value("align-content", "baseline last"); +test_invalid_value("align-content", "center baseline"); +test_invalid_value("align-content", "first"); +test_invalid_value("align-content", "flex-start flex-end"); +test_invalid_value("align-content", "last"); +test_invalid_value("align-content", "left"); +test_invalid_value("align-content", "legacy center"); +test_invalid_value("align-content", "legacy left"); +test_invalid_value("align-content", "legacy"); +test_invalid_value("align-content", "normal baseline"); +test_invalid_value("align-content", "right legacy"); +test_invalid_value("align-content", "safe self-end"); +test_invalid_value("align-content", "safe"); +test_invalid_value("align-content", "self-end unsafe"); +test_invalid_value("align-content", "self-start"); +test_invalid_value("align-content", "start safe"); +test_invalid_value("align-content", "unsafe right"); +test_invalid_value("align-content", "unsafe"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/align-content-valid.html b/testing/web-platform/tests/css/css-align/parsing/align-content-valid.html new file mode 100644 index 0000000000..46c4724516 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/align-content-valid.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing align-content with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content"> +<meta name="assert" content="align-content supports the full grammar 'normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("align-content", "normal"); + +// <baseline-position> = [ first | last ]? baseline +test_valid_value("align-content", "baseline"); +test_valid_value("align-content", "first baseline", "baseline"); +test_valid_value("align-content", "last baseline"); + +// <content-distribution> = space-between | space-around | space-evenly | stretch +test_valid_value("align-content", "space-between"); +test_valid_value("align-content", "space-around"); +test_valid_value("align-content", "space-evenly"); +test_valid_value("align-content", "stretch"); + +// <overflow-position>? <content-position> +// <overflow-position> = unsafe | safe +// <content-position> = center | start | end | flex-start | flex-end +test_valid_value("align-content", "center"); +test_valid_value("align-content", "start"); +test_valid_value("align-content", "end"); +test_valid_value("align-content", "flex-start"); +test_valid_value("align-content", "flex-end"); +test_valid_value("align-content", "unsafe end"); +test_valid_value("align-content", "safe flex-start"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/align-items-computed.html b/testing/web-platform/tests/css/css-align/parsing/align-items-computed.html new file mode 100644 index 0000000000..23d4c2fd0d --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/align-items-computed.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: getComputedStyle().alignItems</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items"> +<meta name="assert" content="align-items computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("align-items", "normal"); +test_computed_value("align-items", "stretch"); + +test_computed_value("align-items", "baseline"); +test_computed_value("align-items", "last baseline"); + +test_computed_value("align-items", "center"); +test_computed_value("align-items", "start"); +test_computed_value("align-items", "end"); +test_computed_value("align-items", "self-start"); +test_computed_value("align-items", "self-end"); +test_computed_value("align-items", "flex-start"); +test_computed_value("align-items", "flex-end"); +test_computed_value("align-items", "unsafe center"); +test_computed_value("align-items", "safe self-end"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/align-items-invalid.html b/testing/web-platform/tests/css/css-align/parsing/align-items-invalid.html new file mode 100644 index 0000000000..8e329d50e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/align-items-invalid.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing align-items with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items"> +<meta name="assert" content="align-items supports only the grammar 'normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ]'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("align-items", "auto"); +test_invalid_value("align-items", "baseline last"); +test_invalid_value("align-items", "center baseline"); +test_invalid_value("align-items", "first"); +test_invalid_value("align-items", "flex-start flex-end"); +test_invalid_value("align-items", "last"); +test_invalid_value("align-items", "left"); +test_invalid_value("align-items", "legacy center"); +test_invalid_value("align-items", "legacy left"); +test_invalid_value("align-items", "legacy"); +test_invalid_value("align-items", "normal baseline"); +test_invalid_value("align-items", "right legacy"); +test_invalid_value("align-items", "safe"); +test_invalid_value("align-items", "self-end unsafe"); +test_invalid_value("align-items", "space-around"); +test_invalid_value("align-items", "space-between"); +test_invalid_value("align-items", "space-evenly"); +test_invalid_value("align-items", "start safe"); +test_invalid_value("align-items", "unsafe right"); +test_invalid_value("align-items", "unsafe"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/align-items-valid.html b/testing/web-platform/tests/css/css-align/parsing/align-items-valid.html new file mode 100644 index 0000000000..e88845b962 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/align-items-valid.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing align-items with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items"> +<meta name="assert" content="align-items supports the full grammar 'normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ]'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("align-items", "normal"); +test_valid_value("align-items", "stretch"); + +// <baseline-position> = [ first | last ]? baseline +test_valid_value("align-items", "baseline"); +test_valid_value("align-items", "first baseline", "baseline"); +test_valid_value("align-items", "last baseline"); + +// <overflow-position>? <self-position> +// <overflow-position> = unsafe | safe +// <self-position> = center | start | end | self-start | self-end | flex-start | flex-end +test_valid_value("align-items", "center"); +test_valid_value("align-items", "start"); +test_valid_value("align-items", "end"); +test_valid_value("align-items", "self-start"); +test_valid_value("align-items", "self-end"); +test_valid_value("align-items", "flex-start"); +test_valid_value("align-items", "flex-end"); +test_valid_value("align-items", "unsafe center"); +test_valid_value("align-items", "safe self-end"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/align-self-computed.html b/testing/web-platform/tests/css/css-align/parsing/align-self-computed.html new file mode 100644 index 0000000000..e61a88a72e --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/align-self-computed.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: getComputedStyle().alignSelf</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<meta name="assert" content="align-self computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("align-self", "auto"); +test_computed_value("align-self", "normal"); +test_computed_value("align-self", "stretch"); + +test_computed_value("align-self", "baseline"); +test_computed_value("align-self", "last baseline"); + +test_computed_value("align-self", "center"); +test_computed_value("align-self", "start"); +test_computed_value("align-self", "end"); +test_computed_value("align-self", "self-start"); +test_computed_value("align-self", "self-end"); +test_computed_value("align-self", "flex-start"); +test_computed_value("align-self", "flex-end"); +test_computed_value("align-self", "unsafe center"); +test_computed_value("align-self", "safe self-end"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/align-self-invalid.html b/testing/web-platform/tests/css/css-align/parsing/align-self-invalid.html new file mode 100644 index 0000000000..27b0250026 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/align-self-invalid.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing align-self with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<meta name="assert" content="align-self supports only the grammar 'auto | normal | stretch | <baseline-position> | <overflow-position>? <self-position>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("align-self", "baseline last"); +test_invalid_value("align-self", "center baseline"); +test_invalid_value("align-self", "first"); +test_invalid_value("align-self", "flex-start flex-end"); +test_invalid_value("align-self", "last"); +test_invalid_value("align-self", "left"); +test_invalid_value("align-self", "legacy center"); +test_invalid_value("align-self", "legacy left"); +test_invalid_value("align-self", "legacy"); +test_invalid_value("align-self", "normal baseline"); +test_invalid_value("align-self", "right legacy"); +test_invalid_value("align-self", "safe"); +test_invalid_value("align-self", "self-end unsafe"); +test_invalid_value("align-self", "space-around"); +test_invalid_value("align-self", "space-between"); +test_invalid_value("align-self", "space-evenly"); +test_invalid_value("align-self", "start safe"); +test_invalid_value("align-self", "unsafe right"); +test_invalid_value("align-self", "unsafe"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/align-self-valid.html b/testing/web-platform/tests/css/css-align/parsing/align-self-valid.html new file mode 100644 index 0000000000..25ea093b20 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/align-self-valid.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing align-self with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<meta name="assert" content="align-self supports the full grammar 'auto | normal | stretch | <baseline-position> | <overflow-position>? <self-position>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("align-self", "auto"); +test_valid_value("align-self", "normal"); +test_valid_value("align-self", "stretch"); + +// <baseline-position> = [ first | last ]? baseline +test_valid_value("align-self", "baseline"); +test_valid_value("align-self", "first baseline", "baseline"); +test_valid_value("align-self", "last baseline"); + +// <overflow-position>? <self-position> +// <overflow-position> = unsafe | safe +// <self-position> = center | start | end | self-start | self-end | flex-start | flex-end +test_valid_value("align-self", "center"); +test_valid_value("align-self", "start"); +test_valid_value("align-self", "end"); +test_valid_value("align-self", "self-start"); +test_valid_value("align-self", "self-end"); +test_valid_value("align-self", "flex-start"); +test_valid_value("align-self", "flex-end"); +test_valid_value("align-self", "unsafe center"); +test_valid_value("align-self", "safe self-end"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/column-gap-computed.html b/testing/web-platform/tests/css/css-align/parsing/column-gap-computed.html new file mode 100644 index 0000000000..01e04b0499 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/column-gap-computed.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: getComputedStyle().columnGap</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-column-gap"> +<meta name="assert" content="column-gap computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<style> + #target { + font-size: 40px; + } +</style> +<script> +test_computed_value("column-gap", "normal"); + +test_computed_value("column-gap", "calc(10px + 0.5em)", "30px"); +test_computed_value("column-gap", "calc(10px - 0.5em)", "0px"); +test_computed_value("column-gap", "40%"); +test_computed_value("column-gap", "calc(50% + 60px)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/column-gap-invalid.html b/testing/web-platform/tests/css/css-align/parsing/column-gap-invalid.html new file mode 100644 index 0000000000..181e004e7c --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/column-gap-invalid.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing column-gap with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-column-gap"> +<meta name="assert" content="column-gap supports only the grammar '<length-percentage> | normal'."> +<meta name="assert" content="column-gap rejects negative <length-percentage>."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("column-gap", "auto"); + +test_invalid_value("column-gap", "10"); +test_invalid_value("column-gap", "10px 20px"); +test_invalid_value("column-gap", "-1px"); +test_invalid_value("column-gap", "-10%"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/column-gap-valid.html b/testing/web-platform/tests/css/css-align/parsing/column-gap-valid.html new file mode 100644 index 0000000000..4be3b50989 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/column-gap-valid.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing column-gap with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-column-gap"> +<meta name="assert" content="column-gap supports the full grammar '<length-percentage> | normal'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("column-gap", "normal"); + +test_valid_value("column-gap", "0", "0px"); +test_valid_value("column-gap", "1px"); +test_valid_value("column-gap", "calc(2em + 3ex)"); +test_valid_value("column-gap", "4%"); +test_valid_value("column-gap", "5vmin"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/gap-computed.html b/testing/web-platform/tests/css/css-align/parsing/gap-computed.html new file mode 100644 index 0000000000..b93b237813 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/gap-computed.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: getComputedStyle().gap</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-gap"> +<meta name="assert" content="gap computed value is a pair of keyword or <length-percentage> values."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("gap", "normal"); +test_computed_value("gap", "10px"); +test_computed_value("gap", "20%"); +test_computed_value("gap", "calc(20% + 10px)"); +test_computed_value("gap", "calc(-0.5em + 10px)", "0px"); +test_computed_value("gap", "calc(0.5em + 10px)", "30px"); + +test_computed_value("gap", "normal 10px"); +test_computed_value("gap", "10px 20%"); +test_computed_value("gap", "20% calc(20% + 10px)"); +test_computed_value("gap", "calc(20% + 10px) normal"); + +test_computed_value("gap", "calc(-0.5em + 10px) calc(0.5em + 10px)", "0px 30px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/gap-invalid.html b/testing/web-platform/tests/css/css-align/parsing/gap-invalid.html new file mode 100644 index 0000000000..c2eae8f7aa --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/gap-invalid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing gap with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-gap"> +<meta name="assert" content="gap supports only the grammar '<row-gap> <column-gap>?'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("gap", "auto"); +test_invalid_value("gap", "-10px"); + +test_invalid_value("gap", "10px 20% 30px"); +test_invalid_value("gap", "normal 10px normal"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/gap-shorthand.html b/testing/web-platform/tests/css/css-align/parsing/gap-shorthand.html new file mode 100644 index 0000000000..52397fb744 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/gap-shorthand.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: gap sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-gap"> +<meta name="assert" content="row-gap supports the full grammar '<row-gap> <column-gap>?'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +test_shorthand_value('gap', 'normal', { + 'row-gap': 'normal', + 'column-gap': 'normal' +}); + +test_shorthand_value('gap', '10px 20%', { + 'row-gap': '10px', + 'column-gap': '20%' +}); + +test_shorthand_value('gap', '10px normal', { + 'row-gap': '10px', + 'column-gap': 'normal' +}); + +test_shorthand_value('gap', 'normal calc(20% + 10px)', { + 'row-gap': 'normal', + 'column-gap': 'calc(20% + 10px)' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/gap-valid.html b/testing/web-platform/tests/css/css-align/parsing/gap-valid.html new file mode 100644 index 0000000000..3104e3fbbd --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/gap-valid.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing gap with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-gap"> +<meta name="assert" content="row-gap supports the full grammar '<row-gap> <column-gap>?'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("gap", "normal normal", "normal"); +test_valid_value("gap", "10px 10px", "10px"); +test_valid_value("gap", "20% 20%", "20%"); +test_valid_value("gap", "calc(20% + 10px) calc(20% + 10px)", "calc(20% + 10px)"); + +test_valid_value("gap", "normal 10px"); +test_valid_value("gap", "10px 20%"); +test_valid_value("gap", "20% calc(20% + 10px)"); +test_valid_value("gap", "calc(20% + 10px) 0px"); +test_valid_value("gap", "0px normal"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/justify-content-computed.html b/testing/web-platform/tests/css/css-align/parsing/justify-content-computed.html new file mode 100644 index 0000000000..b04d2db142 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/justify-content-computed.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: getComputedStyle().justifyContent</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content"> +<meta name="assert" content="justify-content computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("justify-content", "normal"); + +test_computed_value("justify-content", "space-between"); +test_computed_value("justify-content", "space-around"); +test_computed_value("justify-content", "space-evenly"); +test_computed_value("justify-content", "stretch"); + +test_computed_value("justify-content", "center"); +test_computed_value("justify-content", "start"); +test_computed_value("justify-content", "end"); +test_computed_value("justify-content", "flex-start"); +test_computed_value("justify-content", "flex-end"); +test_computed_value("justify-content", "unsafe end"); +test_computed_value("justify-content", "safe flex-start"); +test_computed_value("justify-content", "left"); +test_computed_value("justify-content", "unsafe right"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/justify-content-invalid.html b/testing/web-platform/tests/css/css-align/parsing/justify-content-invalid.html new file mode 100644 index 0000000000..47f3a59a7d --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/justify-content-invalid.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing justify-content with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content"> +<meta name="assert" content="justify-content supports only the grammar 'normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("justify-content", "auto"); +test_invalid_value("justify-content", "baseline last"); +test_invalid_value("justify-content", "baseline"); +test_invalid_value("justify-content", "center baseline"); +test_invalid_value("justify-content", "first baseline"); +test_invalid_value("justify-content", "first"); +test_invalid_value("justify-content", "flex-start flex-end"); +test_invalid_value("justify-content", "last baseline"); +test_invalid_value("justify-content", "last"); +test_invalid_value("justify-content", "legacy center"); +test_invalid_value("justify-content", "legacy left"); +test_invalid_value("justify-content", "legacy"); +test_invalid_value("justify-content", "normal baseline"); +test_invalid_value("justify-content", "right legacy"); +test_invalid_value("justify-content", "safe self-end"); +test_invalid_value("justify-content", "safe"); +test_invalid_value("justify-content", "self-end unsafe"); +test_invalid_value("justify-content", "self-start"); +test_invalid_value("justify-content", "start safe"); +test_invalid_value("justify-content", "unsafe"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/justify-content-valid.html b/testing/web-platform/tests/css/css-align/parsing/justify-content-valid.html new file mode 100644 index 0000000000..4372f6fdc3 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/justify-content-valid.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing justify-content with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content"> +<meta name="assert" content="justify-content supports the full grammar 'normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("justify-content", "normal"); + +// <content-distribution> = space-between | space-around | space-evenly | stretch +test_valid_value("justify-content", "space-between"); +test_valid_value("justify-content", "space-around"); +test_valid_value("justify-content", "space-evenly"); +test_valid_value("justify-content", "stretch"); + +// <overflow-position>? [ <content-position> | left | right ] +// <overflow-position> = unsafe | safe +// <content-position> = center | start | end | flex-start | flex-end +test_valid_value("justify-content", "center"); +test_valid_value("justify-content", "start"); +test_valid_value("justify-content", "end"); +test_valid_value("justify-content", "flex-start"); +test_valid_value("justify-content", "flex-end"); +test_valid_value("justify-content", "unsafe end"); +test_valid_value("justify-content", "safe flex-start"); +test_valid_value("justify-content", "left"); +test_valid_value("justify-content", "unsafe right"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/justify-items-computed.html b/testing/web-platform/tests/css/css-align/parsing/justify-items-computed.html new file mode 100644 index 0000000000..b93f2a381b --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/justify-items-computed.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: getComputedStyle().justifyItems</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items"> +<meta name="assert" content="justify-items computed value is as specified."> +<meta name="assert" content="justify-items legacy depends on inherited value."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="container"> + <div id="target"></div> +</div> +<script> +test_computed_value("justify-items", "normal"); +test_computed_value("justify-items", "stretch"); + +test_computed_value("justify-items", "baseline"); +test_computed_value("justify-items", "last baseline"); + +test_computed_value("justify-items", "center"); +test_computed_value("justify-items", "start"); +test_computed_value("justify-items", "end"); +test_computed_value("justify-items", "self-start"); +test_computed_value("justify-items", "self-end"); +test_computed_value("justify-items", "flex-start"); +test_computed_value("justify-items", "flex-end"); +test_computed_value("justify-items", "unsafe center"); +test_computed_value("justify-items", "safe self-end"); +test_computed_value("justify-items", "right"); +test_computed_value("justify-items", "safe left"); + +test_computed_value("justify-items", "legacy", "normal"); +test_computed_value("justify-items", "legacy left"); +test_computed_value("justify-items", "legacy right"); +test_computed_value("justify-items", "legacy center"); + +test(() => { + const container = document.getElementById('container'); + const target = document.getElementById('target'); + target.style.justifyItems = 'legacy'; + container.style.justifyItems = 'legacy left'; + assert_equals(getComputedStyle(target).justifyItems, 'legacy left'); + container.style.justifyItems = 'legacy right'; + assert_equals(getComputedStyle(target).justifyItems, 'legacy right'); + container.style.justifyItems = 'legacy center'; + assert_equals(getComputedStyle(target).justifyItems, 'legacy center'); + container.style.justifyItems = 'flex-end'; + assert_equals(getComputedStyle(target).justifyItems, 'normal'); +}, 'justify-items legacy depends on inherited value'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/justify-items-invalid.html b/testing/web-platform/tests/css/css-align/parsing/justify-items-invalid.html new file mode 100644 index 0000000000..87d03cb3d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/justify-items-invalid.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing justify-items with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items"> +<meta name="assert" content="justify-items supports only the grammar 'normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | legacy | legacy && [ left | right | center ]'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("justify-items", "auto"); +test_invalid_value("justify-items", "baseline last"); +test_invalid_value("justify-items", "center baseline"); +test_invalid_value("justify-items", "first"); +test_invalid_value("justify-items", "flex-start flex-end"); +test_invalid_value("justify-items", "last"); +test_invalid_value("justify-items", "normal baseline"); +test_invalid_value("justify-items", "safe"); +test_invalid_value("justify-items", "self-end unsafe"); +test_invalid_value("justify-items", "space-around"); +test_invalid_value("justify-items", "space-between"); +test_invalid_value("justify-items", "space-evenly"); +test_invalid_value("justify-items", "start safe"); +test_invalid_value("justify-items", "unsafe"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/justify-items-valid.html b/testing/web-platform/tests/css/css-align/parsing/justify-items-valid.html new file mode 100644 index 0000000000..51496554cb --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/justify-items-valid.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing justify-items with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items"> +<meta name="assert" content="justify-items supports the full grammar 'normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | legacy | legacy && [ left | right | center ]'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("justify-items", "normal"); +test_valid_value("justify-items", "stretch"); + +// <baseline-position> = [ first | last ]? baseline +test_valid_value("justify-items", "baseline"); +test_valid_value("justify-items", "first baseline", "baseline"); +test_valid_value("justify-items", "last baseline"); + +// <overflow-position>? [ <self-position> | left | right ] +// <overflow-position> = unsafe | safe +// <self-position> = center | start | end | self-start | self-end | flex-start | flex-end +test_valid_value("justify-items", "center"); +test_valid_value("justify-items", "start"); +test_valid_value("justify-items", "end"); +test_valid_value("justify-items", "self-start"); +test_valid_value("justify-items", "self-end"); +test_valid_value("justify-items", "flex-start"); +test_valid_value("justify-items", "flex-end"); +test_valid_value("justify-items", "unsafe center"); +test_valid_value("justify-items", "safe self-end"); +test_valid_value("justify-items", "right"); +test_valid_value("justify-items", "safe left"); + +// legacy | legacy && [ left | right | center ] +test_valid_value("justify-items", "legacy"); +test_valid_value("justify-items", "left legacy", "legacy left"); +test_valid_value("justify-items", "right legacy", "legacy right"); +test_valid_value("justify-items", "center legacy", "legacy center"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/justify-self-computed.html b/testing/web-platform/tests/css/css-align/parsing/justify-self-computed.html new file mode 100644 index 0000000000..f560d23d7b --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/justify-self-computed.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: getComputedStyle().justifySelf</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<meta name="assert" content="justify-self computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("justify-self", "auto"); +test_computed_value("justify-self", "normal"); +test_computed_value("justify-self", "stretch"); + +test_computed_value("justify-self", "baseline"); +test_computed_value("justify-self", "last baseline"); + +test_computed_value("justify-self", "center"); +test_computed_value("justify-self", "start"); +test_computed_value("justify-self", "end"); +test_computed_value("justify-self", "self-start"); +test_computed_value("justify-self", "self-end"); +test_computed_value("justify-self", "flex-start"); +test_computed_value("justify-self", "flex-end"); +test_computed_value("justify-self", "unsafe center"); +test_computed_value("justify-self", "safe self-end"); +test_computed_value("justify-self", "left"); +test_computed_value("justify-self", "unsafe right"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/justify-self-invalid.html b/testing/web-platform/tests/css/css-align/parsing/justify-self-invalid.html new file mode 100644 index 0000000000..7823c0aa58 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/justify-self-invalid.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing justify-self with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<meta name="assert" content="justify-self supports only the grammar 'auto | normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ]'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("justify-self", "baseline last"); +test_invalid_value("justify-self", "center baseline"); +test_invalid_value("justify-self", "first"); +test_invalid_value("justify-self", "flex-start flex-end"); +test_invalid_value("justify-self", "last"); +test_invalid_value("justify-self", "legacy center"); +test_invalid_value("justify-self", "legacy left"); +test_invalid_value("justify-self", "legacy"); +test_invalid_value("justify-self", "normal baseline"); +test_invalid_value("justify-self", "right legacy"); +test_invalid_value("justify-self", "safe"); +test_invalid_value("justify-self", "self-end unsafe"); +test_invalid_value("justify-self", "space-around"); +test_invalid_value("justify-self", "space-between"); +test_invalid_value("justify-self", "space-evenly"); +test_invalid_value("justify-self", "start safe"); +test_invalid_value("justify-self", "unsafe"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/justify-self-valid.html b/testing/web-platform/tests/css/css-align/parsing/justify-self-valid.html new file mode 100644 index 0000000000..4cca080995 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/justify-self-valid.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing justify-self with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<meta name="assert" content="justify-self supports the full grammar 'auto | normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ]'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("justify-self", "auto"); +test_valid_value("justify-self", "normal"); +test_valid_value("justify-self", "stretch"); + +// <baseline-position> = [ first | last ]? baseline +test_valid_value("justify-self", "baseline"); +test_valid_value("justify-self", "first baseline", "baseline"); +test_valid_value("justify-self", "last baseline"); + +// <overflow-position>? [ <self-position> | left | right ] +// <overflow-position> = unsafe | safe +// <self-position> = center | start | end | self-start | self-end | flex-start | flex-end +test_valid_value("justify-self", "center"); +test_valid_value("justify-self", "start"); +test_valid_value("justify-self", "end"); +test_valid_value("justify-self", "self-start"); +test_valid_value("justify-self", "self-end"); +test_valid_value("justify-self", "flex-start"); +test_valid_value("justify-self", "flex-end"); +test_valid_value("justify-self", "unsafe center"); +test_valid_value("justify-self", "safe self-end"); +test_valid_value("justify-self", "left"); +test_valid_value("justify-self", "unsafe right"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/place-content-computed.html b/testing/web-platform/tests/css/css-align/parsing/place-content-computed.html new file mode 100644 index 0000000000..1fc152c231 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/place-content-computed.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: getComputedStyle().placeContent</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-place-content"> +<meta name="assert" content="place-content computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("place-content", "normal normal", "normal"); + +test_computed_value("place-content", "first baseline", "baseline start"); +test_computed_value("place-content", "baseline", "baseline start"); +test_computed_value("place-content", "first baseline start", "baseline start"); +test_computed_value("place-content", "last baseline", "last baseline start"); +test_computed_value("place-content", "first baseline stretch", "baseline stretch"); +test_computed_value("place-content", "last baseline flex-start"); + +test_computed_value("place-content", "baseline stretch"); + +test_computed_value("place-content", "space-between"); +test_computed_value("place-content", "space-around"); +test_computed_value("place-content", "space-evenly"); +test_computed_value("place-content", "stretch"); + +test_computed_value("place-content", "center"); +test_computed_value("place-content", "end"); +test_computed_value("place-content", "flex-start flex-start", "flex-start"); +test_computed_value("place-content", "unsafe end unsafe end", "unsafe end"); +test_computed_value("place-content", "safe flex-start"); + +test_computed_value("place-content", "normal stretch"); +test_computed_value("place-content", "baseline space-around"); +test_computed_value("place-content", "space-evenly unsafe end"); +test_computed_value("place-content", "center normal"); + +test_computed_value("place-content", "normal right"); +test_computed_value("place-content", "baseline unsafe left"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/place-content-invalid.html b/testing/web-platform/tests/css/css-align/parsing/place-content-invalid.html new file mode 100644 index 0000000000..3fcd9a8dbe --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/place-content-invalid.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing place-content with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-place-content"> +<meta name="assert" content="place-content supports only the grammar '<align-content> <justify-content>?'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("place-content", "auto"); + +test_invalid_value("place-content", "self-end unsafe"); +test_invalid_value("place-content", "self-start"); + +test_invalid_value("place-content", "left"); +test_invalid_value("place-content", "unsafe right"); +test_invalid_value("place-content", "left normal"); +test_invalid_value("place-content", "unsafe right stretch"); + +test_invalid_value("place-content", "normal flex-start baseline"); +test_invalid_value("place-content", "first baseline first baseline"); + +test_invalid_value("place-content", "baseline safe"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/place-content-shorthand.html b/testing/web-platform/tests/css/css-align/parsing/place-content-shorthand.html new file mode 100644 index 0000000000..a46c58a29b --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/place-content-shorthand.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: place-content sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-place-content"> +<meta name="assert" content="place-content supports the full grammar '<align-content> <justify-content>?'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +test_shorthand_value('place-content', 'normal', { + 'align-content': 'normal', + 'justify-content': 'normal' +}); + +test_shorthand_value('place-content', 'first baseline', { + 'align-content': 'baseline', + 'justify-content': 'start' +}); + +test_shorthand_value('place-content', 'last baseline flex-start', { + 'align-content': 'last baseline', + 'justify-content': 'flex-start' +}); + +test_shorthand_value('place-content', 'space-around', { + 'align-content': 'space-around', + 'justify-content': 'space-around' +}); + +test_shorthand_value('place-content', 'space-evenly unsafe end', { + 'align-content': 'space-evenly', + 'justify-content': 'unsafe end' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/place-content-valid.html b/testing/web-platform/tests/css/css-align/parsing/place-content-valid.html new file mode 100644 index 0000000000..a83aa4cec8 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/place-content-valid.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing place-content with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-place-content"> +<meta name="assert" content="place-content supports the full grammar '<align-content> <justify-content>?'."> +<meta name="assert" content="<baseline-position> and <baseline-position> start are equivalent."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("place-content", "normal normal", "normal"); + +test_valid_value("place-content", "first baseline", "baseline start"); +test_valid_value("place-content", "baseline", "baseline start"); +test_valid_value("place-content", "first baseline start", "baseline start"); +test_valid_value("place-content", "last baseline", "last baseline start"); +test_valid_value("place-content", "first baseline stretch", "baseline stretch"); +test_valid_value("place-content", "last baseline flex-start"); + +test_valid_value("place-content", "baseline stretch"); + +test_valid_value("place-content", "space-between"); +test_valid_value("place-content", "space-around"); +test_valid_value("place-content", "space-evenly"); +test_valid_value("place-content", "stretch"); + +test_valid_value("place-content", "center"); +test_valid_value("place-content", "end"); +test_valid_value("place-content", "flex-start flex-start", "flex-start"); +test_valid_value("place-content", "unsafe end unsafe end", "unsafe end"); +test_valid_value("place-content", "safe flex-start"); + +test_valid_value("place-content", "normal stretch"); +test_valid_value("place-content", "baseline space-around"); +test_valid_value("place-content", "space-evenly unsafe end"); +test_valid_value("place-content", "center normal"); + +test_valid_value("place-content", "normal right"); +test_valid_value("place-content", "baseline unsafe left"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/place-items-computed.html b/testing/web-platform/tests/css/css-align/parsing/place-items-computed.html new file mode 100644 index 0000000000..24a0fa32f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/place-items-computed.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: getComputedStyle().placeItems</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-place-items"> +<meta name="assert" content="place-items computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #grandparent { + justify-items: legacy center; + } + #parent { + justify-items: legacy; + } +</style> +</head> +<body> +<div id="grandparent"> + <div id="parent"> + <div id="target"></div> + </div> +<script> +test_computed_value("place-items", "normal"); +test_computed_value("place-items", "stretch stretch", "stretch"); + +test_computed_value("place-items", "first baseline", "baseline"); +test_computed_value("place-items", "last baseline last baseline", "last baseline"); + +test_computed_value("place-items", "center"); +test_computed_value("place-items", "end end", "end"); +test_computed_value("place-items", "self-start"); +test_computed_value("place-items", "flex-end"); +test_computed_value("place-items", "unsafe center unsafe center", "unsafe center"); +test_computed_value("place-items", "safe self-end"); + +test_computed_value("place-items", "stretch baseline"); +test_computed_value("place-items", "last baseline center"); +test_computed_value("place-items", "safe self-end normal"); + +test_computed_value("place-items", "normal right"); +test_computed_value("place-items", "baseline unsafe left"); + +// When specified justify-items is legacy, computed value depends on inherited value. +test_computed_value("place-items", "flex-end legacy", "flex-end legacy center"); +test_computed_value("place-items", "stretch legacy left"); +test_computed_value("place-items", "first baseline right legacy", "baseline legacy right"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/place-items-invalid.html b/testing/web-platform/tests/css/css-align/parsing/place-items-invalid.html new file mode 100644 index 0000000000..9468d30e2e --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/place-items-invalid.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing place-items with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-place-items"> +<meta name="assert" content="place-items supports only the grammar '<align-items> <justify-items>?'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("place-items", "auto"); + +test_invalid_value("place-items", "space-around"); +test_invalid_value("place-items", "space-between"); +test_invalid_value("place-items", "space-evenly"); + +test_invalid_value("place-items", "left"); +test_invalid_value("place-items", "unsafe right"); +test_invalid_value("place-items", "left baseline"); +test_invalid_value("place-items", "unsafe right flex-end"); + +test_invalid_value("place-items", "legacy center"); +test_invalid_value("place-items", "legacy left"); +test_invalid_value("place-items", "legacy"); +test_invalid_value("place-items", "legacy right flex-start"); +test_invalid_value("place-items", "legacy normal"); + +test_invalid_value("place-items", "normal flex-start baseline"); + +test_invalid_value("place-items", "baseline safe"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/place-items-shorthand.html b/testing/web-platform/tests/css/css-align/parsing/place-items-shorthand.html new file mode 100644 index 0000000000..991510b5b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/place-items-shorthand.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: place-items sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-place-items"> +<meta name="assert" content="place-items supports the full grammar '<align-items> <justify-items>?'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +test_shorthand_value('place-items', 'normal', { + 'align-items': 'normal', + 'justify-items': 'normal' +}); + +test_shorthand_value('place-items', 'first baseline', { + 'align-items': 'baseline', + 'justify-items': 'baseline' +}); + +test_shorthand_value('place-items', 'last baseline flex-start', { + 'align-items': 'last baseline', + 'justify-items': 'flex-start' +}); + +test_shorthand_value('place-items', 'stretch right legacy', { + 'align-items': 'stretch', + 'justify-items': 'legacy right' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/place-items-valid.html b/testing/web-platform/tests/css/css-align/parsing/place-items-valid.html new file mode 100644 index 0000000000..72179bf2db --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/place-items-valid.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing place-items with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-place-items"> +<meta name="assert" content="place-items supports the full grammar '<align-items> <justify-items>?'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("place-items", "normal"); +test_valid_value("place-items", "stretch stretch", "stretch"); + +test_valid_value("place-items", "first baseline", "baseline"); +test_valid_value("place-items", "last baseline last baseline", "last baseline"); + +test_valid_value("place-items", "center"); +test_valid_value("place-items", "end end", "end"); +test_valid_value("place-items", "self-start"); +test_valid_value("place-items", "flex-end"); +test_valid_value("place-items", "unsafe center unsafe center", "unsafe center"); +test_valid_value("place-items", "safe self-end"); + +test_valid_value("place-items", "stretch baseline"); +test_valid_value("place-items", "last baseline center"); +test_valid_value("place-items", "safe self-end normal"); + +test_valid_value("place-items", "normal right"); +test_valid_value("place-items", "baseline unsafe left"); + +test_valid_value("place-items", "flex-end legacy"); +test_valid_value("place-items", "stretch legacy left"); +test_valid_value("place-items", "first baseline right legacy", "baseline legacy right"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/place-self-computed.html b/testing/web-platform/tests/css/css-align/parsing/place-self-computed.html new file mode 100644 index 0000000000..9fa4dbea5f --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/place-self-computed.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: getComputedStyle().placeSelf</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-place-self"> +<meta name="assert" content="place-self computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("place-self", "auto auto", "auto"); +test_computed_value("place-self", "normal"); +test_computed_value("place-self", "stretch"); + +test_computed_value("place-self", "first baseline", "baseline"); +test_computed_value("place-self", "last baseline last baseline", "last baseline"); + +test_computed_value("place-self", "center center", "center"); +test_computed_value("place-self", "start"); +test_computed_value("place-self", "self-start"); +test_computed_value("place-self", "flex-end"); +test_computed_value("place-self", "unsafe center"); +test_computed_value("place-self", "safe self-end safe self-end", "safe self-end"); + +test_computed_value("place-self", "auto last baseline"); +test_computed_value("place-self", "baseline flex-end"); +test_computed_value("place-self", "unsafe center stretch"); + +test_computed_value("place-self", "normal right"); +test_computed_value("place-self", "baseline unsafe left"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/place-self-invalid.html b/testing/web-platform/tests/css/css-align/parsing/place-self-invalid.html new file mode 100644 index 0000000000..8a7a2ab187 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/place-self-invalid.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing place-self with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-place-self"> +<meta name="assert" content="place-self supports only the grammar '<align-self> <justify-self>?'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("place-self", "space-around"); +test_invalid_value("place-self", "space-between"); +test_invalid_value("place-self", "space-evenly"); + +test_invalid_value("place-self", "right"); +test_invalid_value("place-self", "unsafe left"); +test_invalid_value("place-self", "right start"); +test_invalid_value("place-self", "unsafe left stretch"); + +test_invalid_value("place-self", "normal flex-start baseline"); + +test_invalid_value("place-self", "baseline safe"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/place-self-shorthand.html b/testing/web-platform/tests/css/css-align/parsing/place-self-shorthand.html new file mode 100644 index 0000000000..52afa92b40 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/place-self-shorthand.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: place-self sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-place-self"> +<meta name="assert" content="place-self supports the full grammar '<align-self> <justify-self>?'."> +<meta name="assert" content="<baseline-position> and <baseline-position> start are equivalent."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +test_shorthand_value('place-self', 'normal', { + 'align-self': 'normal', + 'justify-self': 'normal' +}); + +test_shorthand_value('place-self', 'first baseline', { + 'align-self': 'baseline', + 'justify-self': 'baseline' +}); + +test_shorthand_value('place-self', 'last baseline flex-start', { + 'align-self': 'last baseline', + 'justify-self': 'flex-start' +}); + +test_shorthand_value('place-self', 'unsafe self-start stretch', { + 'align-self': 'unsafe self-start', + 'justify-self': 'stretch' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/place-self-valid.html b/testing/web-platform/tests/css/css-align/parsing/place-self-valid.html new file mode 100644 index 0000000000..36a8bd5026 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/place-self-valid.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing place-self with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-place-self"> +<meta name="assert" content="place-self supports the full grammar '<align-self> <justify-self>?'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("place-self", "auto auto", "auto"); +test_valid_value("place-self", "normal"); +test_valid_value("place-self", "stretch"); + +test_valid_value("place-self", "first baseline", "baseline"); +test_valid_value("place-self", "last baseline last baseline", "last baseline"); + +test_valid_value("place-self", "center center", "center"); +test_valid_value("place-self", "start"); +test_valid_value("place-self", "self-start"); +test_valid_value("place-self", "flex-end"); +test_valid_value("place-self", "unsafe center"); +test_valid_value("place-self", "safe self-end safe self-end", "safe self-end"); + +test_valid_value("place-self", "auto last baseline"); +test_valid_value("place-self", "baseline flex-end"); +test_valid_value("place-self", "unsafe center stretch"); + +test_valid_value("place-self", "normal right"); +test_valid_value("place-self", "baseline unsafe left"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/row-gap-computed.html b/testing/web-platform/tests/css/css-align/parsing/row-gap-computed.html new file mode 100644 index 0000000000..8108dcc63a --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/row-gap-computed.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: getComputedStyle().rowGap</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-row-gap"> +<meta name="assert" content="row-gap computed value is a specified keyword or a computed <length-percentage>."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("row-gap", "normal"); + +test_computed_value("row-gap", "10px"); +test_computed_value("row-gap", "20%"); +test_computed_value("row-gap", "calc(20% + 10px)"); + +test_computed_value("row-gap", "calc(-0.5em + 10px)", "0px"); +test_computed_value("row-gap", "calc(0.5em + 10px)", "30px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/row-gap-invalid.html b/testing/web-platform/tests/css/css-align/parsing/row-gap-invalid.html new file mode 100644 index 0000000000..a51ab7425c --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/row-gap-invalid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing row-gap with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-row-gap"> +<meta name="assert" content="row-gap supports only the grammar 'normal | <length-percentage>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("row-gap", "auto"); +test_invalid_value("row-gap", "-10px"); + +test_invalid_value("row-gap", "10px 20%"); +test_invalid_value("row-gap", "normal 10px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/row-gap-valid.html b/testing/web-platform/tests/css/css-align/parsing/row-gap-valid.html new file mode 100644 index 0000000000..dacdd38254 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/row-gap-valid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing row-gap with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-row-gap"> +<meta name="assert" content="row-gap supports the full grammar 'normal | <length-percentage>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("row-gap", "normal"); + +test_valid_value("row-gap", "10px"); +test_valid_value("row-gap", "20%"); +test_valid_value("row-gap", "calc(20% + 10px)"); +test_valid_value("row-gap", "0", "0px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/reference/baseline-of-scrollable-1-ref.html b/testing/web-platform/tests/css/css-align/reference/baseline-of-scrollable-1-ref.html new file mode 100644 index 0000000000..422660aff6 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/reference/baseline-of-scrollable-1-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="UTF-8"> + <title> + CSS Reference Case + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://drafts.csswg.org/css-align/#baseline-export"> + <style> + .container { + /* In this reference case, we leave 'overflow' at its initial value. */ + height: 50px; + width: 100px; + border-style: solid; + border-width: 2px 3px 4px 5px; + padding: 4px 5px 7px 8px; + margin: 1px 2px 3px 4px; + } + .inline-block { + display: inline-block; + } + .inline-flex { + display: inline-flex; + } + .inline-grid { + display: inline-grid; + } +</style> +</head> +<body> + Test passes if the a/b text aligns with the bottom margin-edge of the "block" + rect and baseline-aligns with the "flex" and "grid" text. + <br><br> + + <!-- Note: for this first "inline-block" case, we take the inner text out of + flow, to force the inline-block to synthesize its baseline from its + margin box. (This is how the corresponding piece of the testcase is + supposed to render). --> + a + <div class="container inline-block"> + <div style="position: absolute">block</div> + </div> + b + <br> + + a + <div class="container inline-flex">flex</div> + b + <br> + + a + <div class="container inline-grid">grid</div> + b + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/reference/baseline-of-scrollable-2-ref.html b/testing/web-platform/tests/css/css-align/reference/baseline-of-scrollable-2-ref.html new file mode 100644 index 0000000000..dde2909948 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/reference/baseline-of-scrollable-2-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="UTF-8"> + <title> + CSS Reference Case + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style> + /* For this reference case, we use an empty block in place of the testcase's + "details" element, because empty blocks derive their baseline from their + margin-box (and that's the behavior that we're expecting from the + "details" elements in our testcase). */ + .details-ref { + display: inline-block; + height: 40px; + width: 100px; + border-color: gray; + border-style: solid; + border-width: 2px 3px 4px 5px; + padding: 4px 5px 7px 8px; + margin: 1px 2px 3px 4px; + } +</style> +</head> +<body> + Test passes if the a/b text aligns with the bottom margin-edge of the + gray rects. + <br><br> + + a + <div class="details-ref"></div> + b + <br> + + a + <div class="details-ref"></div> + b + <br> + + a + <div class="details-ref"></div> + b + <br> + + a + <div class="details-ref"></div> + b + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/reference/ttwf-reftest-alignContent-ref.html b/testing/web-platform/tests/css/css-align/reference/ttwf-reftest-alignContent-ref.html new file mode 100644 index 0000000000..e020cfc3e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/reference/ttwf-reftest-alignContent-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> + <title>ttwf-reftest-alignContent-ref</title> + <link rel="author" title="Heechang Kang" href="mailto:hckang80@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css3-align/#align-content"> + <style type="text/css"> + #main{ + display:table; + position:relative; + font-size:0; + width:70px; + border:1px solid #c3c3c3; + } + #main .sample{ + position:absolute; + left:0; + top:50%; + z-index:-1; + margin:-35px 0 0; + } + #main > span{ + display:inline-block; + width:70px; + height:70px; + margin:50px 0; + } + </style> +</head> +<body> +<p>PASS if there is no red box.</p> +<div id="main"> + <span class="sample" style="background-color:red;"></span> + <span style="background-color:green;"></span> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/resources/alignment-parsing-utils.js b/testing/web-platform/tests/css/css-align/resources/alignment-parsing-utils.js new file mode 100644 index 0000000000..2a77b4d79b --- /dev/null +++ b/testing/web-platform/tests/css/css-align/resources/alignment-parsing-utils.js @@ -0,0 +1,132 @@ +var selfPositionClasses = {"Start":"start", "End":"end", "SelfStart":"self-start", "SelfEnd":"self-end", "Center":"center", "FlexStart":"flex-start", "FlexEnd":"flex-end"}; +var contentPositionClasses = {"Start":"start", "End":"end", "Center":"center", "FlexStart":"flex-start", "FlexEnd":"flex-end"}; +var distributionClasses = {"Stretch":"stretch", "SpaceAround":"space-around", "SpaceBetween":"space-between", "SpaceEvenly":"space-evenly"}; +var baselineClasses = {"Baseline":"baseline", "FirstBaseline":"first baseline", "LastBaseline":"last baseline"}; +var overflowClasses = {"SafeFlexEnd":"safe flex-end", "UnsafeEnd":"unsafe end", "SafeEnd":"safe end", "UnsafeFlexStart":"unsafe flex-start", "SafeCenter":"safe center"}; +var legacyClasses = {"LegacyLeft":"legacy left", "LegacyCenter":"legacy center", "LegacyRight":"legacy right"}; + +var invalidPositionValues = ["auto safe", "auto left", "normal unsafe", "normal stretch", "baseline normal", + "baseline center", "first baseline center", "last baseline center", "baseline last", + "baseline first", "stretch unsafe", "stretch right", "unsafe unsafe", "unsafe safe", + "center start", "unsafe stretch", "safe stretch", "baseline safe", "unsafe baseline", + "unsafe safe left", "unsafe left safe", "left safe unsafe safe", "start safe", "safe"]; +var invalidLegacyValues = ["legacy start", "legacy end", "legacy right unsafe", "legacy auto", "legacy stretch", + "legacy left right"]; +var invalidDistributionValues = ["space-between left", "space-around center", "space-evenly right", + "stretch safe start", "space-around unsafe", "space-evenly safe flex-start", + "space-between safe", "space-between stretch", "stretch start", + "stretch baseline", "first baseline space-around"]; + +function checkPlaceShorhand(shorthand, shorthandValue, alignValue, justifyValue) +{ + var div = document.createElement("div"); + div.style[shorthand] = shorthandValue; + document.body.appendChild(div); + + if (alignValue === "first baseline") + alignValue = "baseline"; + if (justifyValue === "first baseline") + justifyValue = "baseline"; + if (justifyValue === "") + justifyValue = alignValue; + + let specifiedValue = (alignValue + " " + justifyValue).trim(); + if (alignValue === justifyValue) + specifiedValue = alignValue; + + var resolvedValue = getComputedStyle(div).getPropertyValue(shorthand); + var expectedResolvedValue = (alignValue + " " + justifyValue).trim(); + if (alignValue === justifyValue) + expectedResolvedValue = alignValue; + + assert_equals(div.style[shorthand], specifiedValue, shorthandValue + " specified value"); + // FIXME: We need https://github.com/w3c/csswg-drafts/issues/1041 to clarify which + // value is expected for the shorthand's 'resolved value". + assert_in_array(resolvedValue, ["", expectedResolvedValue], shorthand + " resolved value"); +} + +function checkPlaceShorhandLonghands(shorthand, alignLonghand, justifyLonghand, alignValue, justifyValue = "") +{ + var div = document.createElement("div"); + div.setAttribute("style", shorthand + ": " + alignValue + " " + justifyValue); + document.body.appendChild(div); + if (alignValue === "first baseline") + alignValue = "baseline"; + if (justifyValue === "first baseline") + justifyValue = "baseline"; + if (justifyValue === "") + justifyValue = alignValue; + assert_equals(div.style[alignLonghand], + alignValue, alignLonghand + " expanded value"); + assert_equals(div.style[justifyLonghand], + justifyValue, justifyLonghand + " expanded value"); +} + +function checkPlaceShorthandInvalidValues(shorthand, alignLonghand, justifyLonghand, value) +{ + var div = document.createElement("div"); + var css = alignLonghand + ": start; " + justifyLonghand + ": end;" + shorthand + ": " + value; + div.setAttribute("style", css); + document.body.appendChild(div); + assert_equals(div.style[alignLonghand], + "start", alignLonghand + " expanded value"); + assert_equals(div.style[justifyLonghand], + "end", justifyLonghand + " expanded value"); +} + +function checkValues(element, property, propertyID, value, computedValue) +{ + window.element = element; + var elementID = element.id || "element"; + assert_equals(eval('element.style.' + property), value, propertyID + ' specified value is not what it should.'); + assert_equals(eval("window.getComputedStyle(" + elementID + ", '').getPropertyValue('" + propertyID + "')"), computedValue, propertyID + " computed style is not what is should."); +} + +function checkBadValues(element, property, propertyID, value) +{ + var elementID = element.id || "element"; + element.style[property] = ""; + var initialValue = eval("window.getComputedStyle(" + elementID + " , '').getPropertyValue('" + propertyID + "')"); + element.style[property] = value; + checkValues(element, property, propertyID, "", initialValue); +} + +function checkInitialValues(element, property, propertyID, value, initial) +{ + element.style[property] = value; + checkValues(element, property, propertyID, value, value); + element.style[property] = "initial"; + checkValues(element, property, propertyID, "initial", initial); +} + +function checkInheritValues(property, propertyID, value) +{ + var parentElement = document.createElement("div"); + document.body.appendChild(parentElement); + parentElement.style[property] = value; + checkValues(parentElement, property, propertyID, value, value); + + var element = document.createElement("div"); + parentElement.appendChild(element); + element.style[property] = "inherit"; + checkValues(element, property, propertyID, "inherit", value); +} + +function checkLegacyValues(property, propertyID, value) +{ + var parentElement = document.createElement("div"); + document.body.appendChild(parentElement); + parentElement.style[property] = value; + checkValues(parentElement, property, propertyID, value, value); + + var element = document.createElement("div"); + parentElement.appendChild(element); + checkValues(element, property, propertyID, "", value); +} + +function checkSupportedValues(elementID, property) +{ + var value = eval("window.getComputedStyle(" + elementID + " , '').getPropertyValue('" + property + "')"); + var value1 = eval("window.getComputedStyle(" + elementID + " , '')"); + shouldBeTrue("CSS.supports('" + property + "', '" + value + "')"); +} diff --git a/testing/web-platform/tests/css/css-align/self-alignment/parse-align-self-001.html b/testing/web-platform/tests/css/css-align/self-alignment/parse-align-self-001.html new file mode 100644 index 0000000000..b19372d503 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/parse-align-self-001.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Self-Alignment: align-self - setting values via CSS</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-self-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-overflow-position" /> +<link rel="stylesheet" href="../../support/alignment.css" > +<meta name="assert" content="Check that the computed value is the specified value and the JS value is empty."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + let classes = Object.assign({"Auto":"auto", "Normal":"normal", "Stretch":"stretch"}, selfPositionClasses, + baselineClasses, overflowClasses); + + for (var key in classes) { + let specifiedValue = classes[key]; + element = document.createElement("div"); + element.className = "alignSelf" + key; + document.body.appendChild(element); + test(function() { + if (specifiedValue === "first baseline") + checkValues(element, "alignSelf", "align-self", "", "baseline"); + else + checkValues(element, "alignSelf", "align-self", "", specifiedValue); + }, "Checking align-self: " + specifiedValue); + } +</script> diff --git a/testing/web-platform/tests/css/css-align/self-alignment/parse-align-self-002.html b/testing/web-platform/tests/css/css-align/self-alignment/parse-align-self-002.html new file mode 100644 index 0000000000..31af7806e0 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/parse-align-self-002.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Self-Alignment: align-self - 'initial' value</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self" /> +<link rel="help" href="https://drafts.csswg.org/css-cascade/#initial-values" /> +<meta name="assert" content="Check the 'initial' value in diferent scenarios."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> +container = document.createElement("div"); +element = document.createElement("div"); +container.appendChild(element); +document.body.appendChild(container); + +test(function() { + element = document.createElement("div"); + document.body.appendChild(element); + checkValues(element, "alignSelf", "align-self", "", "auto"); +}, "Test 'initial' value when nothing is specified"); + +test(function() { + container.style.display = ""; + checkInitialValues(element, "alignSelf", "align-self", "center", "auto"); +}, "Test align-self: 'initial'"); + +test(function() { + container.style.display = "grid"; + checkInitialValues(element, "alignSelf", "align-self", "safe start", "auto"); +}, "Test grid items align-self: 'initial'"); + +test(function() { + container.style.display = "flex"; + checkInitialValues(element, "alignSelf", "align-self", "unsafe end", "auto"); +}, "Test flex items align-self: 'initial'"); + +test(function() { + container.style.display = ""; + element.style.position = "absolute"; + checkInitialValues(element, "alignSelf", "align-self", "start", "auto"); +}, "Test absolute positioned elements align-self: 'initial'"); + +test(function() { + container.style.display = "grid"; + element.style.position = "absolute"; + checkInitialValues(element, "alignSelf", "align-self", "end", "auto"); +}, "Test absolute positioned grid items align-self: 'initial'"); + +test(function() { + container.style.display = "flex"; + element.style.position = "absolute"; + checkInitialValues(element, "alignSelf", "align-self", "end", "auto"); +}, "Test absolute positioned flex items align-self: 'initial'"); +</script> diff --git a/testing/web-platform/tests/css/css-align/self-alignment/parse-align-self-003.html b/testing/web-platform/tests/css/css-align/self-alignment/parse-align-self-003.html new file mode 100644 index 0000000000..a2f3351fe2 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/parse-align-self-003.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Self-Alignment: align-self - setting values via JS</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-self-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-overflow-position" /> +<meta name="assert" content="Check that the computed value is the specified value and the same than the JS value."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + element = document.createElement("div"); + document.body.appendChild(element); + + let classes = Object.assign({"Auto":"auto", "Normal":"normal", "Stretch":"stretch"}, selfPositionClasses, + baselineClasses, overflowClasses); + + for (var key in classes) { + let specifiedValue = classes[key]; + test(function() { + element.style.alignSelf = ""; + element.style.alignSelf = specifiedValue; + if (specifiedValue === "first baseline") + checkValues(element, "alignSelf", "align-self", "baseline", "baseline"); + else + checkValues(element, "alignSelf", "align-self", specifiedValue, specifiedValue); + }, "Checking align-self: " + specifiedValue); + } +</script> diff --git a/testing/web-platform/tests/css/css-align/self-alignment/parse-align-self-004.html b/testing/web-platform/tests/css/css-align/self-alignment/parse-align-self-004.html new file mode 100644 index 0000000000..354994704e --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/parse-align-self-004.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Self-Alignment: align-self - invalid values</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self" /> +<meta name="assert" content="Check bad combinations of specified values."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + element = document.createElement("div"); + document.body.appendChild(element); + + let values = ["legacy", "space-around", "left", "safe right"].concat(invalidPositionValues); + + values.forEach(function(value) { + test(function() { + checkBadValues(element, "alignSelf", "align-self", value); + }, "Checking invalid combination - align-self: " + value); + }); +</script> diff --git a/testing/web-platform/tests/css/css-align/self-alignment/parse-align-self-005.html b/testing/web-platform/tests/css/css-align/self-alignment/parse-align-self-005.html new file mode 100644 index 0000000000..37e15f85e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/parse-align-self-005.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Self-Alignment: align-self - inherit value</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self" /> +<meta name="assert" content="Check bad cobinations of specified values."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> +test(function() { + checkInheritValues("alignSelf", "align-self", "end"); +}, "Test the value 'inherit' overrides current value ('end')"); +test(function() { + checkInheritValues("alignSelf", "align-self", "safe start"); +}, "Test the value 'inherit' overrides current value ('safe start')"); +test(function() { + checkInheritValues("alignSelf", "align-self", "unsafe center"); +}, "Test the value 'inherit' overrides current value ('unsafe center')"); +</script> diff --git a/testing/web-platform/tests/css/css-align/self-alignment/parse-justify-self-001.html b/testing/web-platform/tests/css/css-align/self-alignment/parse-justify-self-001.html new file mode 100644 index 0000000000..4b321d5985 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/parse-justify-self-001.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Self-Alignment: justify-self - setting values via CSS</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-self-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-overflow-position" /> +<link rel="stylesheet" href="../../support/alignment.css" > +<meta name="assert" content="Check that the computed value is the specified value and the JS value is empty."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + let classes = Object.assign({"Auto":"auto", "Normal":"normal", "Stretch":"stretch", "Left":"left", + "Right":"right"}, selfPositionClasses, baselineClasses, overflowClasses); + + for (var key in classes) { + let specifiedValue = classes[key]; + element = document.createElement("div"); + element.className = "justifySelf" + key; + document.body.appendChild(element); + test(function() { + let value = specifiedValue; + if (specifiedValue === "first baseline") + checkValues(element, "justifySelf", "justify-self", "", "baseline"); + else + checkValues(element, "justifySelf", "justify-self", "", value); + }, "Checking justify-self: " + specifiedValue); + } +</script> diff --git a/testing/web-platform/tests/css/css-align/self-alignment/parse-justify-self-002.html b/testing/web-platform/tests/css/css-align/self-alignment/parse-justify-self-002.html new file mode 100644 index 0000000000..45403c7a0d --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/parse-justify-self-002.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Self-Alignment: justify-self - 'initial' value</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self" /> +<link rel="help" href="https://drafts.csswg.org/css-cascade/#initial-values" /> +<meta name="assert" content="Check the 'initial' value in diferent scenarios."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> +container = document.createElement("div"); +element = document.createElement("div"); +container.appendChild(element); +document.body.appendChild(container); + +test(function() { + element = document.createElement("div"); + document.body.appendChild(element); + checkValues(element, "justifySelf", "justify-self", "", "auto"); +}, "Test 'initial' value when nothing is specified"); + +test(function() { + container.style.display = ""; + checkInitialValues(element, "justifySelf", "justify-self", "center", "auto"); +}, "Test justify-self: 'initial'"); + +test(function() { + container.style.display = "grid"; + checkInitialValues(element, "justifySelf", "justify-self", "safe start", "auto"); +}, "Test grid items justify-self: 'initial'"); + +test(function() { + container.style.display = "flex"; + checkInitialValues(element, "justifySelf", "justify-self", "unsafe end", "auto"); +}, "Test flex items justify-self: 'initial'"); + +test(function() { + container.style.display = ""; + element.style.position = "absolute"; + checkInitialValues(element, "justifySelf", "justify-self", "start", "auto"); +}, "Test absolute positioned elements justify-self: 'initial'"); + +test(function() { + container.style.display = "grid"; + element.style.position = "absolute"; + checkInitialValues(element, "justifySelf", "justify-self", "end", "auto"); +}, "Test absolute positioned grid items justify-self: 'initial'"); + +test(function() { + container.style.display = "flex"; + element.style.position = "absolute"; + checkInitialValues(element, "justifySelf", "justify-self", "end", "auto"); +}, "Test absolute positioned flex items justify-self: 'initial'"); +</script> diff --git a/testing/web-platform/tests/css/css-align/self-alignment/parse-justify-self-003.html b/testing/web-platform/tests/css/css-align/self-alignment/parse-justify-self-003.html new file mode 100644 index 0000000000..96729166f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/parse-justify-self-003.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Self-Alignment: justify-self - setting values via JS</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-self-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-overflow-position" /> +<meta name="assert" content="Check that the computed value is the specified value and the same than the JS value."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + element = document.createElement("div"); + document.body.appendChild(element); + + let classes = Object.assign({"Auto":"auto", "Normal":"normal", "Stretch":"stretch", "Left":"left", + "Right":"right"}, selfPositionClasses, baselineClasses, overflowClasses); + + for (var key in classes) { + let specifiedValue = classes[key]; + test(function() { + element.style.justifySelf = ""; + element.style.justifySelf = specifiedValue; + if (specifiedValue === "first baseline") + checkValues(element, "justifySelf", "justify-self", "baseline", "baseline"); + else + checkValues(element, "justifySelf", "justify-self", specifiedValue, specifiedValue); + }, "Checking justify-self: " + specifiedValue); + } +</script> diff --git a/testing/web-platform/tests/css/css-align/self-alignment/parse-justify-self-004.html b/testing/web-platform/tests/css/css-align/self-alignment/parse-justify-self-004.html new file mode 100644 index 0000000000..ab81bf954d --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/parse-justify-self-004.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Self-Alignment: justify-self - invalid values</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self" /> +<meta name="assert" content="Check bad combinations of specified values."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + element = document.createElement("div"); + document.body.appendChild(element); + + let values = ["legacy", "space-around"].concat(invalidPositionValues); + + values.forEach(function(value) { + test(function() { + checkBadValues(element, "justifySelf", "justify-self", value); + }, "Checking invalid combination - justify-self: " + value); + }); +</script> diff --git a/testing/web-platform/tests/css/css-align/self-alignment/parse-justify-self-005.html b/testing/web-platform/tests/css/css-align/self-alignment/parse-justify-self-005.html new file mode 100644 index 0000000000..61b44be359 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/parse-justify-self-005.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Self-Alignment: justify-self - inherit value</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self" /> +<meta name="assert" content="Check bad cobinations of specified values."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> +test(function() { + checkInheritValues("justifySelf", "justify-self", "end"); +}, "Test the value 'inherit' overrides current value ('end')"); +test(function() { + checkInheritValues("justifySelf", "justify-self", "safe left"); +}, "Test the value 'inherit' overrides current value ('safe left')"); +test(function() { + checkInheritValues("justifySelf", "justify-self", "unsafe center"); +}, "Test the value 'inherit' overrides current value ('unsafe center')"); +</script> diff --git a/testing/web-platform/tests/css/css-align/self-alignment/place-self-shorthand-001.html b/testing/web-platform/tests/css/css-align/self-alignment/place-self-shorthand-001.html new file mode 100644 index 0000000000..bd95302c3f --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/place-self-shorthand-001.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: place-self shorthand - single values specified</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="http://www.w3.org/TR/css3-align/#place-self-property" /> +<meta name="assert" content="Check that setting a single value to place-self expands to such value set in both 'align-self' and 'justify-self'." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + let classes = Object.assign({"Auto":"auto", "Normal":"normal", "Stretch":"stretch"}, selfPositionClasses, + baselineClasses, overflowClasses); + for (var key in classes) { + let value = classes[key]; + test(function() { + checkPlaceShorhandLonghands("place-self", "align-self", "justify-self", value); + }, "Checking place-self: " + value); + } +</script> diff --git a/testing/web-platform/tests/css/css-align/self-alignment/place-self-shorthand-002.html b/testing/web-platform/tests/css/css-align/self-alignment/place-self-shorthand-002.html new file mode 100644 index 0000000000..47bb78e3b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/place-self-shorthand-002.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: place-self shorthand - multiple values specified</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="http://www.w3.org/TR/css3-align/#place-self-property" /> +<meta name="assert" content="Check that setting two values to place-self sets the first one to 'align-self' and the second one to 'justify-self'." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + let classes = Object.assign({"Auto":"auto", "Normal":"normal", "Stretch":"stretch"}, selfPositionClasses, + baselineClasses, overflowClasses); + for (var key1 in classes) { + let alignValue = classes[key1]; + let classes2 = Object.assign({"Left":"left", "Right":"right"}, classes); + for (var key2 in classes2) { + let justifyValue = classes2[key2]; + test(function() { + checkPlaceShorhandLonghands("place-self", "align-self", "justify-self", alignValue, justifyValue); + }, "Checking place-self: " + alignValue + " " + justifyValue); + } + } +</script> diff --git a/testing/web-platform/tests/css/css-align/self-alignment/place-self-shorthand-003.html b/testing/web-platform/tests/css/css-align/self-alignment/place-self-shorthand-003.html new file mode 100644 index 0000000000..a946ef3ed6 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/place-self-shorthand-003.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: place-self shorthand - initial value</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="http://www.w3.org/TR/css3-align/#place-self-property" /> +<meta name="assert" content="Check that place-self's 'initial' value expands to 'align-self' and 'justify-self'." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="log"></div> +<script> + var div = document.createElement("div"); + document.body.appendChild(div); + div.style["align-self"] = "start"; + div.style["justify-self"] = "end"; + div.setAttribute("style", "place-self: initial"); + + test(function() { + assert_equals(div.style["align-self"], + "initial", "place-self specified value for align-self"); + }, "Check place-self: initial - align-self expanded value"); + + test(function() { + assert_equals(div.style["justify-self"], + "initial", "place-self specified value for justify-self"); + }, "Check place-self: initial - justify-self expanded value"); +</script> diff --git a/testing/web-platform/tests/css/css-align/self-alignment/place-self-shorthand-004.html b/testing/web-platform/tests/css/css-align/self-alignment/place-self-shorthand-004.html new file mode 100644 index 0000000000..b7c9d80e71 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/place-self-shorthand-004.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: place-self shorthand - invalid values</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="http://www.w3.org/TR/css3-align/#place-self-property" /> +<meta name="assert" content="Check that place-self's invalid values are properly detected at parsing time." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + function checkInvalidValues(value) + { + checkPlaceShorthandInvalidValues("place-self", "align-self", "justify-self", value); + } + + test(function() { + checkInvalidValues("center end start") + }, "Verify fallback values are invalid"); + + test(function() { + checkInvalidValues("left") + checkInvalidValues("left start") + checkInvalidValues("right center") + }, "Verify 'left' and 'right' values are invalid for block/cross axis alignment"); + + test(function() { + checkInvalidValues("10px left") + checkInvalidValues("right 10%") + }, "Verify numeric values are invalid"); + + test(function() { + checkInvalidValues("") + }, "Verify empty declaration is invalid"); +</script> diff --git a/testing/web-platform/tests/css/css-align/self-alignment/place-self-shorthand-005.html b/testing/web-platform/tests/css/css-align/self-alignment/place-self-shorthand-005.html new file mode 100644 index 0000000000..d74f03993c --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/place-self-shorthand-005.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: place-self shorthand - inherit value</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="http://www.w3.org/TR/css3-align/#place-self-property" /> +<meta name="assert" content="Check that place-self's 'inherit' value expands to 'align-self' and 'justify-self'." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #test { + place-self: start end; + } +</style> +<div id="log"></div> +<div id="test"></div> +<script> + var child = document.createElement("div"); + document.getElementById("test").appendChild(child); + child.setAttribute("style", "place-self: inherit"); + var style = getComputedStyle(child); + + test(function() { + assert_equals(style.getPropertyValue("align-self"), + "start", "place-self resolved value for align-self"); + }, "Check place-self: inherit - align-self resolved value"); + + test(function() { + assert_equals(style.getPropertyValue("justify-self"), + "end", "place-self resolved value for justify-self"); + }, "Check place-self: inherit - justify-self resolved value"); +</script> diff --git a/testing/web-platform/tests/css/css-align/self-alignment/place-self-shorthand-006.html b/testing/web-platform/tests/css/css-align/self-alignment/place-self-shorthand-006.html new file mode 100644 index 0000000000..fb5dce1b13 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/place-self-shorthand-006.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: place-self shorthand - Shorthand 'specified' and 'resolved' value</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="http://www.w3.org/TR/css3-align/#place-self-property" /> +<meta name="assert" content="Check the place-self's 'specified' and 'resolved' values serialization." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + let classes = Object.assign({"Auto":"auto", "Normal":"normal", "Stretch":"stretch"}, selfPositionClasses, + baselineClasses); + for (var key1 in classes) { + let alignValue = classes[key1]; + let classes2 = Object.assign({"Left":"left", "Right":"right"}, classes); + for (var key2 in classes2) { + let justifyValue = classes2[key2]; + var value = (alignValue + " " + justifyValue).trim(); + test(function() { + checkPlaceShorhand("place-self", value, alignValue, justifyValue) + }, "Checking place-self: " + value); + } + } +</script> diff --git a/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-flex-001-ref.html b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-flex-001-ref.html new file mode 100644 index 0000000000..69d7f34708 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-flex-001-ref.html @@ -0,0 +1,160 @@ +<!DOCTYPE html> +<title>Reftest Reference</title> +<style> + /* Label things */ + body > div { + display: flow-root; + } + body > div::before { + display: block; + content: attr(class); + font-size: 10px; + margin-top: 10px; + } + + /* Test Framework */ + .container { + border: solid aqua; + margin: 10px; + float: left; + width: 30px; + height: 30px; + } + + .item { + background: orange; + width: 100%; + } + + /* Test */ + .small .item { + height: 20px; + } + .large .item { + height: 40px; + } + + .small .center + { margin-top: 5px } + .small .end, + .small .self-end, + .small .flex-end + { margin-top: 10px } + .large .center + { margin-top: -5px; } + .large .end, + .large .self-end, + .large .flex-end + { margin-top: -10px; } + .safe .item + { margin-top: 0; } +</style> + +<div class="default small"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="default large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="unsafe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="safe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-flex-001.html b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-flex-001.html new file mode 100644 index 0000000000..bb933b99d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-flex-001.html @@ -0,0 +1,174 @@ +<!DOCTYPE html> +<title>Safe vs Unsafe align-self in Row Flex Layout</title> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#overflow-values"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#align-items-property"> +<link rel="match" href="self-align-safe-unsafe-flex-001-ref.html"> +<style> + /* Label things */ + body > div { + display: flow-root; + } + body > div::before { + display: block; + content: attr(class); + font-size: 10px; + margin-top: 10px; + } + + /* Test Framework */ + .container { + border: solid aqua; + margin: 10px; + float: left; + width: 30px; + height: 30px; + display: flex; + } + + .item { + background: orange; + flex: none; + width: 100%; + } + + /* Test */ + .small .item { + height: 20px; + } + .large .item { + height: 40px; + } + + .center { align-self: center; } + .start { align-self: start; } + .end { align-self: end; } + .self-start { align-self: self-start; } + .self-end { align-self: self-end; } + .flex-start { align-self: flex-start; } + .flex-end { align-self: flex-end; } + + .safe .center { align-self: safe center; } + .safe .start { align-self: safe start; } + .safe .end { align-self: safe end; } + .safe .self-start { align-self: safe self-start; } + .safe .self-end { align-self: safe self-end; } + .safe .flex-start { align-self: safe flex-start; } + .safe .flex-end { align-self: safe flex-end; } + + .safe .center { align-self: safe center; } + .safe .start { align-self: safe start; } + .safe .end { align-self: safe end; } + .safe .self-start { align-self: safe self-start; } + .safe .self-end { align-self: safe self-end; } + .safe .flex-start { align-self: safe flex-start; } + .safe .flex-end { align-self: safe flex-end; } +</style> + +<div class="default small"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="default large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="unsafe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="safe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-flex-002-ref.html b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-flex-002-ref.html new file mode 100644 index 0000000000..92893d25da --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-flex-002-ref.html @@ -0,0 +1,160 @@ +<!DOCTYPE html> +<title>Reftest Reference</title> +<style> + /* Label things */ + body > div { + display: flow-root; + } + body > div::before { + display: block; + content: attr(class); + font-size: 10px; + margin-top: 10px; + } + + /* Test Framework */ + .container { + border: solid aqua; + margin: 10px; + float: left; + width: 30px; + height: 30px; + } + + .item { + background: orange; + height: 100%; + } + + /* Test */ + .small .item { + width: 20px; + } + .large .item { + width: 40px; + } + + .small .center + { margin-left: 5px } + .small .end, + .small .self-end, + .small .flex-end + { margin-left: 10px } + .large .center + { margin-left: -5px; } + .large .end, + .large .self-end, + .large .flex-end + { margin-left: -10px; } + .safe .item + { margin-left: 0; } +</style> + +<div class="default small"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="default large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="unsafe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="safe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-flex-002.html b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-flex-002.html new file mode 100644 index 0000000000..c7dc1c1aea --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-flex-002.html @@ -0,0 +1,175 @@ +<!DOCTYPE html> +<title>Safe vs Unsafe align-self in Column Flex Layout</title> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#overflow-values"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#align-items-property"> +<link rel="match" href="self-align-safe-unsafe-flex-002-ref.html"> +<style> + /* Label things */ + body > div { + display: flow-root; + } + body > div::before { + display: block; + content: attr(class); + font-size: 10px; + margin-top: 10px; + } + + /* Test Framework */ + .container { + border: solid aqua; + margin: 10px; + float: left; + width: 30px; + height: 30px; + display: flex; + flex-flow: column; + } + + .item { + background: orange; + flex: none; + height: 100%; + } + + /* Test */ + .small .item { + width: 20px; + } + .large .item { + width: 40px; + } + + .center { align-self: center; } + .start { align-self: start; } + .end { align-self: end; } + .self-start { align-self: self-start; } + .self-end { align-self: self-end; } + .flex-start { align-self: flex-start; } + .flex-end { align-self: flex-end; } + + .safe .center { align-self: safe center; } + .safe .start { align-self: safe start; } + .safe .end { align-self: safe end; } + .safe .self-start { align-self: safe self-start; } + .safe .self-end { align-self: safe self-end; } + .safe .flex-start { align-self: safe flex-start; } + .safe .flex-end { align-self: safe flex-end; } + + .safe .center { align-self: safe center; } + .safe .start { align-self: safe start; } + .safe .end { align-self: safe end; } + .safe .self-start { align-self: safe self-start; } + .safe .self-end { align-self: safe self-end; } + .safe .flex-start { align-self: safe flex-start; } + .safe .flex-end { align-self: safe flex-end; } +</style> + +<div class="default small"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="default large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="unsafe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="safe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-flex-003-ref.html b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-flex-003-ref.html new file mode 100644 index 0000000000..279ec4bb0b --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-flex-003-ref.html @@ -0,0 +1,161 @@ +<!DOCTYPE html> +<html dir=rtl> +<title>Reftest Reference</title> +<style> + /* Label things */ + body > div { + display: flow-root; + } + body > div::before { + display: block; + content: attr(class); + font-size: 10px; + margin-top: 10px; + } + + /* Test Framework */ + .container { + border: solid aqua; + margin: 10px; + float: right; + width: 30px; + height: 30px; + } + + .item { + background: orange; + height: 100%; + } + + /* Test */ + .small .item { + width: 20px; + } + .large .item { + width: 40px; + } + + .small .center + { margin-right: 5px } + .small .end, + .small .self-end, + .small .flex-end + { margin-right: 10px } + .large .center + { margin-right: -5px; } + .large .end, + .large .self-end, + .large .flex-end + { margin-right: -10px; } + .safe .item + { margin-right: 0; } +</style> + +<div class="default small"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="default large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="unsafe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="safe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-flex-003.html b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-flex-003.html new file mode 100644 index 0000000000..41829f7729 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-flex-003.html @@ -0,0 +1,176 @@ +<!DOCTYPE html> +<html dir=rtl> +<title>Safe vs Unsafe align-self in RTL Column Flex Layout</title> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#overflow-values"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#align-items-property"> +<link rel="match" href="self-align-safe-unsafe-flex-003-ref.html"> +<style> + /* Label things */ + body > div { + display: flow-root; + } + body > div::before { + display: block; + content: attr(class); + font-size: 10px; + margin-top: 10px; + } + + /* Test Framework */ + .container { + border: solid aqua; + margin: 10px; + float: right; + width: 30px; + height: 30px; + display: flex; + flex-flow: column; + } + + .item { + background: orange; + flex: none; + height: 100%; + } + + /* Test */ + .small .item { + width: 20px; + } + .large .item { + width: 40px; + } + + .center { align-self: center; } + .start { align-self: start; } + .end { align-self: end; } + .self-start { align-self: self-start; } + .self-end { align-self: self-end; } + .flex-start { align-self: flex-start; } + .flex-end { align-self: flex-end; } + + .safe .center { align-self: safe center; } + .safe .start { align-self: safe start; } + .safe .end { align-self: safe end; } + .safe .self-start { align-self: safe self-start; } + .safe .self-end { align-self: safe self-end; } + .safe .flex-start { align-self: safe flex-start; } + .safe .flex-end { align-self: safe flex-end; } + + .safe .center { align-self: safe center; } + .safe .start { align-self: safe start; } + .safe .end { align-self: safe end; } + .safe .self-start { align-self: safe self-start; } + .safe .self-end { align-self: safe self-end; } + .safe .flex-start { align-self: safe flex-start; } + .safe .flex-end { align-self: safe flex-end; } +</style> + +<div class="default small"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="default large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="unsafe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="safe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-grid-001-ref.html b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-grid-001-ref.html new file mode 100644 index 0000000000..f644611795 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-grid-001-ref.html @@ -0,0 +1,160 @@ +<!DOCTYPE html> +<title>Reftest Reference</title> +<style> + /* Label things */ + body > div { + display: flow-root; + } + body > div::before { + display: block; + content: attr(class); + font-size: 10px; + margin-top: 10px; + } + + /* Test Framework */ + .container { + border: solid aqua; + margin: 10px; + float: left; + width: 30px; + height: 30px; + } + + .item { + background: orange; + width: 100%; + } + + /* Test */ + .small .item { + height: 20px; + } + .large .item { + height: 40px; + } + + .small .center + { margin-top: 5px } + .small .end, + .small .self-end, + .small .flex-end + { margin-top: 10px } + .large .center + { margin-top: -5px; } + .large .end, + .large .self-end, + .large .flex-end + { margin-top: -10px; } + .large.safe .item + { margin-top: 0; } +</style> + +<div class="default small"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="default large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="unsafe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="safe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-grid-001.html b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-grid-001.html new file mode 100644 index 0000000000..0c50934627 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-grid-001.html @@ -0,0 +1,174 @@ +<!DOCTYPE html> +<title>Safe vs Unsafe align-self in Grid Layout</title> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#overflow-values"> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#column-align"> +<link rel="match" href="self-align-safe-unsafe-grid-001-ref.html"> +<style> + /* Label things */ + body > div { + display: flow-root; + } + body > div::before { + display: block; + content: attr(class); + font-size: 10px; + margin-top: 10px; + } + + /* Test Framework */ + .container { + border: solid aqua; + margin: 10px; + float: left; + width: 30px; + height: 30px; + display: grid; + grid: 100% / 100%; + } + + .item { + background: orange; + width: 100%; + } + + /* Test */ + .small .item { + height: 20px; + } + .large .item { + height: 40px; + } + + .center { align-self: center; } + .start { align-self: start; } + .end { align-self: end; } + .self-start { align-self: self-start; } + .self-end { align-self: self-end; } + .flex-start { align-self: flex-start; } + .flex-end { align-self: flex-end; } + + .safe .center { align-self: safe center; } + .safe .start { align-self: safe start; } + .safe .end { align-self: safe end; } + .safe .self-start { align-self: safe self-start; } + .safe .self-end { align-self: safe self-end; } + .safe .flex-start { align-self: safe flex-start; } + .safe .flex-end { align-self: safe flex-end; } + + .safe .center { align-self: safe center; } + .safe .start { align-self: safe start; } + .safe .end { align-self: safe end; } + .safe .self-start { align-self: safe self-start; } + .safe .self-end { align-self: safe self-end; } + .safe .flex-start { align-self: safe flex-start; } + .safe .flex-end { align-self: safe flex-end; } +</style> + +<div class="default small"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="default large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="unsafe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="safe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-grid-002-ref.html b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-grid-002-ref.html new file mode 100644 index 0000000000..a86c7e4ae0 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-grid-002-ref.html @@ -0,0 +1,160 @@ +<!DOCTYPE html> +<title>Reftest Reference</title> +<style> + /* Label things */ + body > div { + display: flow-root; + } + body > div::before { + display: block; + content: attr(class); + font-size: 10px; + margin-top: 10px; + } + + /* Test Framework */ + .container { + border: solid aqua; + margin: 10px; + float: left; + width: 30px; + height: 30px; + } + + .item { + background: orange; + height: 100%; + } + + /* Test */ + .small .item { + width: 20px; + } + .large .item { + width: 40px; + } + + .small .center + { margin-left: 5px } + .small .end, + .small .self-end, + .small .flex-end + { margin-left: 10px } + .large .center + { margin-left: -5px; } + .large .end, + .large .self-end, + .large .flex-end + { margin-left: -10px; } + .large.safe .item + { margin-left: 0; } +</style> + +<div class="default small"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="default large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="unsafe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="safe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-grid-002.html b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-grid-002.html new file mode 100644 index 0000000000..ce6688ed1e --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-grid-002.html @@ -0,0 +1,174 @@ +<!DOCTYPE html> +<title>Safe vs Unsafe justify-self in Grid Layout</title> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#overflow-values"> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/row-align"> +<link rel="match" href="self-align-safe-unsafe-grid-002-ref.html"> +<style> + /* Label things */ + body > div { + display: flow-root; + } + body > div::before { + display: block; + content: attr(class); + font-size: 10px; + margin-top: 10px; + } + + /* Test Framework */ + .container { + border: solid aqua; + margin: 10px; + float: left; + width: 30px; + height: 30px; + display: grid; + grid: 100% / 100%; + } + + .item { + background: orange; + height: 100%; + } + + /* Test */ + .small .item { + width: 20px; + } + .large .item { + width: 40px; + } + + .center { justify-self: center; } + .start { justify-self: start; } + .end { justify-self: end; } + .self-start { justify-self: self-start; } + .self-end { justify-self: self-end; } + .flex-start { justify-self: flex-start; } + .flex-end { justify-self: flex-end; } + + .safe .center { justify-self: safe center; } + .safe .start { justify-self: safe start; } + .safe .end { justify-self: safe end; } + .safe .self-start { justify-self: safe self-start; } + .safe .self-end { justify-self: safe self-end; } + .safe .flex-start { justify-self: safe flex-start; } + .safe .flex-end { justify-self: safe flex-end; } + + .safe .center { justify-self: safe center; } + .safe .start { justify-self: safe start; } + .safe .end { justify-self: safe end; } + .safe .self-start { justify-self: safe self-start; } + .safe .self-end { justify-self: safe self-end; } + .safe .flex-start { justify-self: safe flex-start; } + .safe .flex-end { justify-self: safe flex-end; } +</style> + +<div class="default small"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="default large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="unsafe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="safe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-grid-003-ref.html b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-grid-003-ref.html new file mode 100644 index 0000000000..0d0b17977d --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-grid-003-ref.html @@ -0,0 +1,161 @@ +<!DOCTYPE html> +<html dir=rtl> +<title>Reftest Reference</title> +<style> + /* Label things */ + body > div { + display: flow-root; + } + body > div::before { + display: block; + content: attr(class); + font-size: 10px; + margin-top: 10px; + } + + /* Test Framework */ + .container { + border: solid aqua; + margin: 10px; + float: right; + width: 30px; + height: 30px; + } + + .item { + background: orange; + height: 100%; + } + + /* Test */ + .small .item { + width: 20px; + } + .large .item { + width: 40px; + } + + .small .center + { margin-right: 5px } + .small .end, + .small .self-end, + .small .flex-end + { margin-right: 10px } + .large .center + { margin-right: -5px; } + .large .end, + .large .self-end, + .large .flex-end + { margin-right: -10px; } + .large.safe .item + { margin-right: 0; } +</style> + +<div class="default small"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="default large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="unsafe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="safe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-grid-003.html b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-grid-003.html new file mode 100644 index 0000000000..9695f0a2f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-grid-003.html @@ -0,0 +1,175 @@ +<!DOCTYPE html> +<html dir=rtl> +<title>Safe vs Unsafe justify-self in RTL Grid Layout</title> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#overflow-values"> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#row-align"> +<link rel="match" href="self-align-safe-unsafe-grid-003-ref.html"> +<style> + /* Label things */ + body > div { + display: flow-root; + } + body > div::before { + display: block; + content: attr(class); + font-size: 10px; + margin-top: 10px; + } + + /* Test Framework */ + .container { + border: solid aqua; + margin: 10px; + float: right; + width: 30px; + height: 30px; + display: grid; + grid: 100% / 100%; + } + + .item { + background: orange; + height: 100%; + } + + /* Test */ + .small .item { + width: 20px; + } + .large .item { + width: 40px; + } + + .center { justify-self: center; } + .start { justify-self: start; } + .end { justify-self: end; } + .self-start { justify-self: self-start; } + .self-end { justify-self: self-end; } + .flex-start { justify-self: flex-start; } + .flex-end { justify-self: flex-end; } + + .safe .center { justify-self: safe center; } + .safe .start { justify-self: safe start; } + .safe .end { justify-self: safe end; } + .safe .self-start { justify-self: safe self-start; } + .safe .self-end { justify-self: safe self-end; } + .safe .flex-start { justify-self: safe flex-start; } + .safe .flex-end { justify-self: safe flex-end; } + + .safe .center { justify-self: safe center; } + .safe .start { justify-self: safe start; } + .safe .end { justify-self: safe end; } + .safe .self-start { justify-self: safe self-start; } + .safe .self-end { justify-self: safe self-end; } + .safe .flex-start { justify-self: safe flex-start; } + .safe .flex-end { justify-self: safe flex-end; } +</style> + +<div class="default small"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="default large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="unsafe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="safe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/ttwf-reftest-alignContent.html b/testing/web-platform/tests/css/css-align/ttwf-reftest-alignContent.html new file mode 100644 index 0000000000..18c838e90d --- /dev/null +++ b/testing/web-platform/tests/css/css-align/ttwf-reftest-alignContent.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <title>ttwf-reftest-alignContent-ref</title> + <link rel="author" title="Heechang Kang" href="mailto:hckang80@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css3-align/#content-distribution"> + <style type="text/css"> + #main{ + display:flex; + flex-flow:row wrap; + align-content:space-around; + position:relative; + width:70px; + height:170px; + border:1px solid #c3c3c3; + } + #main .sample{ + position:absolute; + left:0; + top:50%; + z-index:-1; + margin:-35px 0 0; + } + #main > span{ + display:inline-block; + width:70px; + height:70px; + vertical-align:middle; + } + </style> +</head> +<body> +<p>PASS if there is no red box.</p> +<div id="main"> + <span class="sample" style="background-color:red;"></span> + <span style="background-color:green;"></span> +</div> +</body> +</html> |