Blitz - WPT: abs-pos-border-offset-003.html

wpt / css / css-writing-modes / abs-pos-border-offset-003.html

/css/css-writing-modes/abs-pos-border-offset-003.html

<!DOCTYPE html>
<meta charset="utf-8">
<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 positioned correctly across various writing modes when their static position is used" />
<link rel="match" href="abs-pos-border-offset-003-ref.html">
<style>
.htb {
  writing-mode: horizontal-tb;
}
.vrl {
  writing-mode: vertical-rl;
}
.vlr {
  writing-mode: vertical-lr;
}
.srl {
  writing-mode: sideways-rl;
}
.slr {
  writing-mode: sideways-lr;
}
.ltr {
  direction: ltr;
}
.rtl {
  direction: rtl;
}

.container {
  position: relative;
  width: 80px;
  height: 100px;
  background-color: green;
  margin-bottom: 10px;
}

.parent {
  border: solid transparent;
  border-width: 10px 15px 20px 25px;
}

.sibling {
  width: 10px;
  height: 20px;
}

.item {
  position: absolute;
  width: 30px;
  height: 35px;
  background-color: blue;
}
</style>
<div class="container vrl">
  <div class="parent vlr">
    <div class="sibling"></div>
    <div class="item vlr"></div>
  </div>
</div>
<div class="container vrl">
  <div class="parent htb">
    <div class="sibling"></div>
    <div class="item vrl"></div>
  </div>
</div>
<div class="container vrl">
  <div class="parent htb">
    <div class="sibling"></div>
    <div class="item vlr"></div>
  </div>
</div>
<div class="container vrl">
  <div class="parent htb">
    <div class="sibling"></div>
    <div class="item vrl rtl"></div>
  </div>
</div>
<div class="container vrl">
  <div class="parent vlr rtl">
    <div class="sibling"></div>
    <div class="item vrl"></div>
  </div>
</div>
<div class="container vrl rtl">
  <div class="parent vlr ltr">
    <div class="sibling"></div>
    <div class="item vrl"></div>
  </div>
</div>

/css/css-writing-modes/abs-pos-border-offset-003-ref.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.container {
  width: 80px;
  height: 100px;
  background-color: green;
  margin-bottom: 10px;
  position: relative;
}

.item {
  position: absolute;
  width: 30px;
  height: 35px;
  background-color: blue;
}
</style>
<div class="container">
  <div class="item" style="left: 65px; top: 10px;"></div>
</div>
<div class="container">
  <div class="item" style="left: 55px; top: 30px;"></div>
</div>
<div class="container">
  <div class="item" style="left: 55px; top: 30px;"></div>
</div>
<div class="container">
  <div class="item" style="left: 55px; top: 30px;"></div>
</div>
<div class="container">
  <div class="item" style="left: 65px; top: 45px;"></div>
</div>
<div class="container">
  <div class="item" style="left: 65px; top: 10px;"></div>
</div>