<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=858038
-->
<head>
  <meta charset="utf-8">
  <title>Test for Bug 858038</title>
  <style>
    #test::before {
      content: 'This should not be draggable';
    }
  </style>
</head>
<body>
  <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=858038">Mozilla Bug 858038</a>
  <p id="display"></p>
  <div id="content" style="display: none">
  </div>
  <input id="anonymousParent" /><span id="before">Before<!-- Force not-inline --></span>
  <pre id="test"><span id="firstChild">First</span><span id="middleChild">Middle</span><span id="lastChild">Last</span></pre>  <span id="after">After</span>

  <test-component class="test-component">
    <div slot="slot1" class="slotted1">slot1-1</div>
    <div slot="slot1" class="slotted2">slot1-2</div>
  </test-component>

  <ol>
    <li id="list"><span id="first-list-child"
      >List item start</span><span id="last-list-child"
      >List item end</span></li>
  </ol>

  <script>
    "use strict";
    customElements.define("test-component", class extends HTMLElement {
      constructor() {
        super();
        const shadowRoot = this.attachShadow({mode: "open"});
        shadowRoot.innerHTML = '<slot class="slot1" name="slot1"></slot>';
      }
    });
  </script>
</body>
</html>
