src/third_party/WebKit/LayoutTests/imported/web-platform-tests/shadow-dom/shadow-trees/lower-boundary-encapsulation/distribution-002.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: Ordered list</title>
  14 <link rel="match" href="distribution-002-ref.html">
  15 <link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru">
  16 <link rel="author" title="Yuta Kitamura" href="mailto:yutak@google.com">
  17 <link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#shadow-trees">
  18 <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.">
  19 <script src="../../testcommon.js"></script>
  20 <style>
  21 ol {
  22     list-style-type: decimal;
  23 }
  24 </style>
  25 </head>
  26 <body>
  27 <p>
  28 You should see an ordered list below, consisting of ten elements numbered
  29 from 1 through 10, and each line should contain a capital letter ranging from
  30 "A" to "J", in alphabetical order.
  31 </p>
  32 <ol id="list">
  33 <li>H</li>
  34 <li class="first">B</li>
  35 <li class="second">E</li>
  36 <li>I</li>
  37 <li class="first">C</li>
  38 </ol>
  39 <script>
  40 var shadowRoot = document.getElementById('list').createShadowRoot();
  41 shadowRoot.innerHTML =
  42     '<li>A</li>' +
  43     '<content select=".first"></content>' +
  44     '<li>D</li>' +
  45     '<content select=".second"></content>' +
  46     '<li>F</li>' +
  47     '<content select="img"></content>' +
  48     '<li>G</li>' +
  49     '<content></content>' +
  50     '<li>J</li>';
  51 </script>
  52 </body>
  53 </html>