Blitz - WPT: inline-block-baseline-015.html

wpt / css / CSS2 / visudet / inline-block-baseline-015.html

/css/CSS2/visudet/inline-block-baseline-015.html

<!DOCTYPE html>
<title>Vertical-align: baseline of inline-block with phantom line box</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css2/#leading">
<link rel="help" href="https://drafts.csswg.org/css2/#inline-formatting">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="
  From https://drafts.csswg.org/css2/#leading
  > The baseline of an inline-block is the baseline of its last line box in the normal flow,
  > unless it has either no in-flow line boxes or if its overflow property has a computed
  > value other than visible, in which case the baseline is the bottom margin edge.

  Here we have 2 inline-blocks. The 1st one is completely empty, so it baseline is its
  bottom margin edge. The 2nd one has an empty span followed by a block.

  The span would typically be placed in a line box. However, it's a phantom line box.
  From https://drafts.csswg.org/css2/#inline-formatting
  > Line boxes that contain no text, no preserved white space, no inline elements with
  > non-zero margins, padding, or borders, and no other in-flow content (such as images,
  > inline blocks or inline tables), and do not end with a preserved newline must be
  > treated as zero-height line boxes for the purposes of determining the positions of
  > any elements inside of them, and must be treated as not existing for any other purpose.

  So for the purpose of finding the baseline of the 2nd inline-block we ignore the phantom
  line box, and thus the baseline is also the bottom margin edge.

  Therefore, the inline-blocks should have their bottom margin edges aligned.
">

<style>
.wrapper {
  width: 200px;
  background: red;
  line-height: 0;
  font-size: 0;
}
.green {
  width: 100px;
  height: 200px;
  background: green;
}
.inline-block {
  display: inline-block;
}
</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div class="wrapper">
  <div class="inline-block green"></div>
  <div class="inline-block">
    <span></span>
    <div class="green"></div>
  </div>
</div>

/css/reference/ref-filled-green-200px-square.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="jfernandez@igalia.com" />
<style>
div {
  background-color: green;
  height: 200px;
  width: 200px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>