Blitz - WPT: scope-pseudo-element.html

wpt / css / css-cascade / scope-pseudo-element.html

/css/css-cascade/scope-pseudo-element.html

<!DOCTYPE html>
<title>@scope - pseudo-elements</title>
<link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scoped-styles">
<link rel="help" href="https://drafts.csswg.org/selectors-4/#link">
<link rel="match" href="scope-pseudo-element-ref.html">

<!-- Cosmetic -->
<style>
  body > div {
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    vertical-align:top;
  }
</style>

<!-- ::before -->
<style>
  @scope (#before_test > main) {
    :scope {
      background-color: skyblue;
    }
    :scope::before {
      content: "B";
      width: 20px;
      height: 20px;
      display: inline-block;
      background-color: tomato;
    }
  }
</style>
<div id=before_test>
  <main>
    Foo
  </main>
</div>

<!-- ::after -->
<style>
  @scope (#after_test > main) {
    :scope {
      background-color: skyblue;
    }
    :scope::after {
      content: "A";
      width: 20px;
      height: 20px;
      display: inline-block;
      background-color: tomato;
    }
  }
</style>
<div id=after_test>
  <main>
    Foo
  </main>
</div>

<!-- ::marker -->
<style>
  @scope (#marker_test li) {
    :scope {
      background-color: skyblue;
    }
    :scope::marker {
      content: "M";
    }
  }
</style>
<div id=marker_test>
  <ul>
    <li>One</li>
    <li>Two</li>
  </ul>
</div>

/css/css-cascade/scope-pseudo-element-ref.html

<!DOCTYPE html>
<title>@scope - pseudo-elements (ref)</title>
<link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scoped-styles">
<link rel="help" href="https://drafts.csswg.org/selectors-4/#link">

<!-- Cosmetic -->
<style>
  body > div {
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    vertical-align:top;
  }
</style>

<!-- ::before -->
<style>
  #before_test > main {
    background-color: skyblue;
  }
  #before_test > main::before {
    content: "B";
    width: 20px;
    height: 20px;
    display: inline-block;
    background-color: tomato;
  }
</style>
<div id=before_test>
  <main>
    Foo
  </main>
</div>

<!-- ::after -->
<style>
  #after_test > main {
    background-color: skyblue;
  }
  #after_test > main::after {
    content: "A";
    width: 20px;
    height: 20px;
    display: inline-block;
    background-color: tomato;
  }
</style>
<div id=after_test>
  <main>
    Foo
  </main>
</div>

<!-- ::marker -->
<style>
  #marker_test li {
    background-color: skyblue;
  }
  #marker_test li::marker {
    content: "M";
  }
</style>
<div id=marker_test>
  <ul>
    <li>One</li>
    <li>Two</li>
  </ul>
</div>