Blitz - WPT: position-absolute-in-inline-012.html

wpt / css / css-position / position-absolute-in-inline-012.html

/css/css-position/position-absolute-in-inline-012.html

<!DOCTYPE html>
<title>CSS Positioned Test: Test the inline containing block rectangle for a fragmented inline element in multicol balancing and vertical writing mode</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-position-3/#absolute-cb">
<link rel="match" href="position-absolute-in-inline-012-ref.html">
<link rel="stylesheet" href="/fonts/ahem.css">

<style>
:root {
  writing-mode: vertical-rl;
}
.container {
  font: 20px/1 Ahem;
  border: 5px solid gold;
  inline-size: 24em;
  block-size: 3em;
  columns: 3;
  column-gap: 0;
  margin-block-end: 1em;
}
.container.rtl {
  direction: rtl;
}
.rel {
  position: relative;
}
.cb-rect {
  position: absolute;
  inset: 0;
  background: green;
}
</style>

<div class="container">
  XX
  <span class="rel">
    XXXX<br>
    XXXXXXXX<br>
    XXXXX<br>
    XXXXXXXX<br>
    XXXXX<br>
    XXXXX
    <div class="cb-rect"></div>
  </span>
</div>

<div class="container rtl">
  XX
  <span class="rel">
    XXXX<br>
    XXXXXXXX<br>
    XXXXX<br>
    XXXXXXXX<br>
    XXXXX<br>
    XXXXX
    <div class="cb-rect"></div>
  </span>
</div>

/css/css-position/position-absolute-in-inline-012-ref.html

<!DOCTYPE html>
<title>CSS Positioned Reference: Test the inline containing block rectangle for a fragmented inline element in multicol balancing and vertical writing mode</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="stylesheet" href="/fonts/ahem.css">

<style>
:root {
  writing-mode: vertical-rl;
}
.container {
  font: 20px/1 Ahem;
  border: 5px solid gold;
  inline-size: 24em;
  block-size: 3em;
  columns: 3;
  column-gap: 0;
  margin-block-end: 1em;
}
.container.rtl {
  direction: rtl;
}
.cb-rect {
  color: green;
}
</style>

<div class="container">
  XX <span class="cb-rect">XX</span>XX<br>
  XXX<span class="cb-rect">XX</span>XXX<br>
  XXX<span class="cb-rect">XX</span>
  XXX<span class="cb-rect">XX</span>XXX<br>
  XXX<span class="cb-rect">XX</span><br>
  XXX<span class="cb-rect">XX</span>
</div>

<div class="container rtl">
  XX<span class="cb-rect">XXXXX</span><br>
  XXX<span class="cb-rect">XXXXX</span><br>
  <span class="cb-rect">XXXXX</span>
  XXX<span class="cb-rect">XXXXX</span><br>
  <span class="cb-rect">XXXXX</span>
  <span class="cb-rect">XXXXX</span>
</div>