Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-writing-modes/abs-pos-border-offset-002.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="author" title="David Shin" href="mailto:dshin@mozilla.com">
<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>