horok/firefox
1
0
Fork 0
Code Activity
firefox/testing/web-platform/tests/css/css-writing-modes/abs-pos-border-offset-002.html
Daniel Baumann 5e9a113729
Adding upstream version 140.0. 
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
2025-06-25 09:37:52 +02:00

401 lines
8.6 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE html>
<meta charset="utf-8">
<link rel="author" title="David Shin" href="mailto:dshin@mozilla.com">
<link rel="author" href="https://mozilla.org" title="Mozilla">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow">
<meta name="assert" content="This test checks that absolutely positioned elements are offset correctly in a bordered containing block, in different combinations of sideways writing modes and directions." />
<link rel="match" href="abs-pos-border-offset-002-ref.html">
<style>
body { margin: 0; }
.cb {
position: relative;
inline-size: 45px;
block-size: 40px;
background: lightblue;
border: solid gray;
border-width: 1px 2px 3px 4px;
float: left;
margin-right: 5px;
}
.parent {
inline-size: 35px;
block-size: 30px;
background: orange;
}
.abspos {
position: absolute;
inline-size: 20px;
block-size: 15px;
background: pink;
}
.srl {
writing-mode: sideways-rl;
}
.slr {
writing-mode: sideways-lr;
}
.vrl {
writing-mode: vertical-rl;
}
.vlr {
writing-mode: vertical-lr;
}
.htb {
writing-mode: horizontal-tb;
}
.ltr {
direction: ltr;
}
.rtl {
direction: rtl;
}
.sep {
clear: both;
display: block;
height: 5px;
}
</style>
<body>
<div class="cb htb ltr">
<div class="parent slr ltr">
<div class="abspos"></div>
</div>
</div>
<div class="cb htb ltr">
<div class="parent slr rtl">
<div class="abspos"></div>
</div>
</div>
<div class="cb htb ltr">
<div class="parent srl ltr">
<div class="abspos"></div>
</div>
</div>
<div class="cb htb ltr">
<div class="parent srl rtl">
<div class="abspos"></div>
</div>
</div>
<div class="sep"></div>
<div class="cb htb rtl">
<div class="parent slr ltr">
<div class="abspos"></div>
</div>
</div>
<div class="cb htb rtl">
<div class="parent slr rtl">
<div class="abspos"></div>
</div>
</div>
<div class="cb htb rtl">
<div class="parent srl ltr">
<div class="abspos"></div>
</div>
</div>
<div class="cb htb rtl">
<div class="parent srl rtl">
<div class="abspos"></div>
</div>
</div>
<div class="sep"></div>
<div class="cb vlr ltr">
<div class="parent slr ltr">
<div class="abspos"></div>
</div>
</div>
<div class="cb vlr ltr">
<div class="parent slr rtl">
<div class="abspos"></div>
</div>
</div>
<div class="cb vlr ltr">
<div class="parent srl ltr">
<div class="abspos"></div>
</div>
</div>
<div class="cb vlr ltr">
<div class="parent srl rtl">
<div class="abspos"></div>
</div>
</div>
<div class="sep"></div>
<div class="cb vlr rtl">
<div class="parent slr ltr">
<div class="abspos"></div>
</div>
</div>
<div class="cb vlr rtl">
<div class="parent slr rtl">
<div class="abspos"></div>
</div>
</div>
<div class="cb vlr rtl">
<div class="parent srl ltr">
<div class="abspos"></div>
</div>
</div>
<div class="cb vlr rtl">
<div class="parent srl rtl">
<div class="abspos"></div>
</div>
</div>
<div class="sep"></div>
<div class="cb vrl ltr">
<div class="parent slr ltr">
<div class="abspos"></div>
</div>
</div>
<div class="cb vrl ltr">
<div class="parent slr rtl">
<div class="abspos"></div>
</div>
</div>
<div class="cb vrl ltr">
<div class="parent srl ltr">
<div class="abspos"></div>
</div>
</div>
<div class="cb vrl ltr">
<div class="parent srl rtl">
<div class="abspos"></div>
</div>
</div>
<div class="sep"></div>
<div class="cb vrl rtl">
<div class="parent slr ltr">
<div class="abspos"></div>
</div>
</div>
<div class="cb vrl rtl">
<div class="parent slr rtl">
<div class="abspos"></div>
</div>
</div>
<div class="cb vrl rtl">
<div class="parent srl ltr">
<div class="abspos"></div>
</div>
</div>
<div class="cb vrl rtl">
<div class="parent srl rtl">
<div class="abspos"></div>
</div>
</div>
<div class="sep"></div>
<div class="cb slr ltr">
<div class="parent htb ltr">
<div class="abspos"></div>
</div>
</div>
<div class="cb slr ltr">
<div class="parent htb rtl">
<div class="abspos"></div>
</div>
</div>
<div class="cb slr ltr">
<div class="parent vlr ltr">
<div class="abspos"></div>
</div>
</div>
<div class="cb slr ltr">
<div class="parent vlr rtl">
<div class="abspos"></div>
</div>
</div>
<div class="cb slr ltr">
<div class="parent vrl ltr">
<div class="abspos"></div>
</div>
</div>
<div class="cb slr ltr">
<div class="parent vrl rtl">
<div class="abspos"></div>
</div>
</div>
<div class="cb slr ltr">
<div class="parent slr ltr">
<div class="abspos"></div>
</div>
</div>
<div class="cb slr ltr">
<div class="parent slr rtl">
<div class="abspos"></div>
</div>
</div>
<div class="cb slr ltr">
<div class="parent srl ltr">
<div class="abspos"></div>
</div>
</div>
<div class="cb slr ltr">
<div class="parent srl rtl">
<div class="abspos"></div>
</div>
</div>
<div class="sep"></div>
<div class="cb slr rtl">
<div class="parent htb ltr">
<div class="abspos"></div>
</div>
</div>
<div class="cb slr rtl">
<div class="parent htb rtl">
<div class="abspos"></div>
</div>
</div>
<div class="cb slr rtl">
<div class="parent vlr ltr">
<div class="abspos"></div>
</div>
</div>
<div class="cb slr rtl">
<div class="parent vlr rtl">
<div class="abspos"></div>
</div>
</div>
<div class="cb slr rtl">
<div class="parent vrl ltr">
<div class="abspos"></div>
</div>
</div>
<div class="cb slr rtl">
<div class="parent vrl rtl">
<div class="abspos"></div>
</div>
</div>
<div class="cb slr rtl">
<div class="parent slr ltr">
<div class="abspos"></div>
</div>
</div>
<div class="cb slr rtl">
<div class="parent slr rtl">
<div class="abspos"></div>
</div>
</div>
<div class="cb slr rtl">
<div class="parent srl ltr">
<div class="abspos"></div>
</div>
</div>
<div class="cb slr rtl">
<div class="parent srl rtl">
<div class="abspos"></div>
</div>
</div>
<div class="sep"></div>
<div class="cb srl ltr">
<div class="parent htb ltr">
<div class="abspos"></div>
</div>
</div>
<div class="cb srl ltr">
<div class="parent htb rtl">
<div class="abspos"></div>
</div>
</div>
<div class="cb srl ltr">
<div class="parent vlr ltr">
<div class="abspos"></div>
</div>
</div>
<div class="cb srl ltr">
<div class="parent vlr rtl">
<div class="abspos"></div>
</div>
</div>
<div class="cb srl ltr">
<div class="parent vrl ltr">
<div class="abspos"></div>
</div>
</div>
<div class="cb srl ltr">
<div class="parent vrl rtl">
<div class="abspos"></div>
</div>
</div>
<div class="cb srl ltr">
<div class="parent slr ltr">
<div class="abspos"></div>
</div>
</div>
<div class="cb srl ltr">
<div class="parent slr rtl">
<div class="abspos"></div>
</div>
</div>
<div class="cb srl ltr">
<div class="parent srl ltr">
<div class="abspos"></div>
</div>
</div>
<div class="cb srl ltr">
<div class="parent srl rtl">
<div class="abspos"></div>
</div>
</div>
<div class="sep"></div>
<div class="cb srl rtl">
<div class="parent htb ltr">
<div class="abspos"></div>
</div>
</div>
<div class="cb srl rtl">
<div class="parent htb rtl">
<div class="abspos"></div>
</div>
</div>
<div class="cb srl rtl">
<div class="parent vlr ltr">
<div class="abspos"></div>
</div>
</div>
<div class="cb srl rtl">
<div class="parent vlr rtl">
<div class="abspos"></div>
</div>
</div>
<div class="cb srl rtl">
<div class="parent vrl ltr">
<div class="abspos"></div>
</div>
</div>
<div class="cb srl rtl">
<div class="parent vrl rtl">
<div class="abspos"></div>
</div>
</div>
<div class="cb srl rtl">
<div class="parent slr ltr">
<div class="abspos"></div>
</div>
</div>
<div class="cb srl rtl">
<div class="parent slr rtl">
<div class="abspos"></div>
</div>
</div>
<div class="cb srl rtl">
<div class="parent srl ltr">
<div class="abspos"></div>
</div>
</div>
<div class="cb srl rtl">
<div class="parent srl rtl">
<div class="abspos"></div>
</div>
</div>
<div class="sep"></div>
</body>
View git blame Copy permalink