src/third_party/WebKit/LayoutTests/imported/web-platform-tests/shadow-dom/shadow-trees/lower-boundary-encapsulation/distribution-001.html

   1 <!DOCTYPE html>
   2 <!--
   3 Distributed under both the W3C Test Suite License [1] and the W3C
   4 3-clause BSD License [2]. To contribute to a W3C Test Suite, see the
   5 policies and contribution forms [3].
   6
   7 [1] http://www.w3.org/Consortium/Legal/2008/04-testsuite-license
   8 [2] http://www.w3.org/Consortium/Legal/2008/03-bsd-license
   9 [3] http://www.w3.org/2004/10/27-testcases
  10  -->
  11 <html>
  12 <head>
  13 <title>Shadow DOM Test: Distribution: Unordered list</title>
  14 <link rel="match" href="distribution-001-ref.html">
  15 <link rel="author" title="Yuta Kitamura" href="mailto:yutak@google.com">
  16 <link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#shadow-trees">
  17 <meta name="assert" content="Lower-boundary Encapsulation: Each insertion point participates in distribution by providing a matching criteria for the child nodes. The matching criteria determines whether a given node could be distributed to a given insertion point.">
  18 <script src="../../testcommon.js"></script>
  19 </head>
  20 <body>
  21 <p>
  22 You should see an unordered list below, consisting of ten elements
  23 each of which contains a capital letter ranging from "A" to "J",
  24 in alphabetical order.
  25 </p>
  26 <ul id="list">
  27 <li>H</li>
  28 <li class="first">B</li>
  29 <li class="second">E</li>
  30 <li>I</li>
  31 <li class="first">C</li>
  32 </ul>
  33 <script>
  34 var shadowRoot = document.getElementById('list').createShadowRoot();
  35 shadowRoot.innerHTML =
  36     '<li>A</li>' +
  37     '<content select=".first"></content>' +
  38     '<li>D</li>' +
  39     '<content select=".second"></content>' +
  40     '<li>F</li>' +
  41     '<content select="img"></content>' +
  42     '<li>G</li>' +
  43     '<content></content>' +
  44     '<li>J</li>';
  45 </script>
  46 </body>
  47 </html>