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