wpt / css / css-pseudo / first-line-on-list-item-with-block-children.html

Status: PASS | Duration: 7ms | Subtests: 1/1 | Open test on wpt.live | Open ref on wpt.live | wpt.fyi

/css/css-pseudo/first-line-on-list-item-with-block-children.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test: ::first-line on list item with block children</title>
<link rel="author" title="Minseong Kim" href="mailto:jja08111@gmail.com">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-text-line">
<link rel="match" href="first-line-on-list-item-with-block-children-ref.html">
<meta name=assert content="For a block container containing block-level children, the ::first-line pseudo-element applies to the first formatted line of its first in-flow block-level child">
<style>
li::first-line {
  background: yellow;
}
</style>
<body>
  <ol>
    <li>
      <div>First line</div>
      <div>Second line</div>
    </li>
  </ol>
</body>

/css/css-pseudo/first-line-on-list-item-with-block-children-ref.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reference: ::first-line on list item with block children</title>
<link rel="author" title="Minseong Kim" href="mailto:jja08111@gmail.com">
<style>
#test::first-line {
  background: yellow;
}
</style>
<body>
  <ol>
    <li>
      <div id="test">First line</div>
      <div>Second line</div>
    </li>
  </ol>
</body>