<!DOCTYPE html>
<html>
  <head>
    <title>Test inheritance through first-letter</title>
    <style>
      .f2 > * { color: blue }
      .f2::first-letter { color: green }
    </style>
    <script>
      function make(str) {
        return document.createElement(str);
      }
      
      window.onload = function() {
        var x = document.getElementById("d1");
        var y = make("span");
        y.appendChild(document.createTextNode("ABC"));
        x.appendChild(y);

        x = document.getElementById("d2");
        y = make("span");
        x.appendChild(y);
        y.appendChild(document.createTextNode("ABC"));
      }
    </script>
  <body>
    <div class="f2"><span>ABC</span></div>
    <div class="f2" id="d1"></div>
    <div class="f2" id="d2"></div>
  </body>
</html>