Blitz - WPT: relpos-inline.html

wpt / css / css-break / relpos-inline.html

<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#transforms">
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#relative-positioning">
<link rel="match" href="relpos-inline-ref.html">
<div style="columns:4; column-gap:0; column-fill:auto; line-height:30px; width:600px; height:60px; orphans:1; widows:1;">
  <br><br><br>
  <span style="position:relative; left:-100px; top:100px; border:1px solid; background:hotpink;">
    line1<br>
    line2<br>
    line3<br>
    line4<br>
  </span>
</div>

/css/css-break/relpos-inline-ref.html

<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<style>
  span {
      position: relative;
      left: -100px;
      top: 100px;
      border: 1px solid;
      background:hotpink;
  }
  .fakecol {
      float: left;
      width: 150px;
      height: 100%;
  }
</style>
<div style="line-height:30px; height:60px;">
  <div class="fakecol"></div>
  <div class="fakecol">
    <br>
    <span style="border-right:none;">
      line1<br>
    </span>
  </div>
  <div class="fakecol">
    <span style="border-left:none; border-right:none;">
      line2<br>
      line3<br>
    </span>
  </div>
  <div class="fakecol">
    <span style="border-left:none;">
      line4<br>
    </span>
  </div>
</div>