diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-align/abspos/justify-self-vrl-ltr-vlr.html')
-rw-r--r-- | testing/web-platform/tests/css/css-align/abspos/justify-self-vrl-ltr-vlr.html | 126 |
1 files changed, 126 insertions, 0 deletions
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> + |