src/third_party/WebKit/LayoutTests/imported/web-platform-tests/shadow-dom/styles/shadow-pseudoelement/shadow-pseudoelement-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: ::shadow pseudo element</title>
  14 <link rel="author" title="Kenji Baheux" href="mailto:kenjibaheux@google.com">
  15 <link rel="help" href="http://dev.w3.org/csswg/css-scoping/#shadow-pseudoelement">
  16 <meta name="assert" content="::shadow should match a shadow root">
  17 <script src="../../../../../resources/testharness.js"></script>
  18 <script src="../../../../../resources/testharnessreport.js"></script>
  19 <script src="../../testcommon.js"></script>
  20 <link rel="stylesheet" href="../../../../../resources/testharness.css">
  21 </head>
  22 <body>
  23 <div id="log"></div>
  24 <script>
  25 test(unit(function (ctx) {
  26     var d = newRenderedHTMLDocument(ctx);
  27
  28     var outerhost = d.createElement('div');
  29     outerhost.setAttribute('id', 'foo-host');
  30     var span0 = d.createElement('span');
  31     span0.setAttribute('id', 'outer-host');
  32     outerhost.appendChild(span0);
  33
  34     var s1 = outerhost.createShadowRoot();
  35
  36     var div1 = d.createElement('div');
  37     var span1 = d.createElement('span');
  38     span1.setAttribute('id', 'not-top');
  39     div1.appendChild(span1);
  40     s1.appendChild(div1);
  41
  42     var span2 = d.createElement('span');
  43     span2.setAttribute('id', 'top');
  44     s1.appendChild(span2);
  45
  46
  47     var innerhost = d.createElement('div');
  48     innerhost.setAttribute('id', 'bar-host');
  49     var span3 = d.createElement('span');
  50     span3.setAttribute('id', 'inner-host');
  51     innerhost.appendChild(span3);
  52
  53     var s2 = innerhost.createShadowRoot();
  54
  55     var span4 = d.createElement('span');
  56     span4.setAttribute('id', 'nested');
  57     s2.appendChild(span4);
  58     s1.appendChild(innerhost);
  59
  60     d.body.appendChild(outerhost);
  61
  62     assert_equals(d.querySelectorAll('#foo-host::shadow span').length, 3, 'Point 1: match only direct children of the outer shadow tree');
  63     assert_equals(d.querySelectorAll('#foo-host::shadow span')[0], span1, 'Point 2: incorrect match');
  64     assert_equals(d.querySelectorAll('#foo-host::shadow span')[1], span2, 'Point 3: incorrect match');
  65     assert_equals(d.querySelectorAll('#foo-host::shadow span')[2], span3, 'Point 4: incorrect match');
  66  }), 'SD_SHADOW_PSEUDOELEMENT_QUERYSELECTOR_T1');
  67
  68 test(unit(function (ctx) {
  69     var d = newRenderedHTMLDocument(ctx);
  70
  71     var outerhost = d.createElement('div');
  72     outerhost.setAttribute('id', 'foo-host');
  73     var span0 = d.createElement('span');
  74     span0.setAttribute('id', 'outer-host');
  75     outerhost.appendChild(span0);
  76
  77     var s1 = outerhost.createShadowRoot();
  78
  79     var div1 = d.createElement('div');
  80     var span1 = d.createElement('span');
  81     span1.setAttribute('id', 'not-top');
  82     div1.appendChild(span1);
  83     s1.appendChild(div1);
  84
  85     var span2 = d.createElement('span');
  86     span2.setAttribute('id', 'top');
  87     s1.appendChild(span2);
  88
  89
  90     var innerhost = d.createElement('div');
  91     innerhost.setAttribute('id', 'bar-host');
  92     var span3 = d.createElement('span');
  93     span3.setAttribute('id', 'inner-host');
  94     innerhost.appendChild(span3);
  95
  96     var s2 = innerhost.createShadowRoot();
  97
  98     var span4 = d.createElement('span');
  99     span4.setAttribute('id', 'nested');
 100     s2.appendChild(span4);
 101     s1.appendChild(innerhost);
 102
 103     d.body.appendChild(outerhost);
 104
 105     assert_equals(s1.querySelectorAll('*::shadow span').length, 1, 'Point 1: match only in the inner shadow tree');
 106     assert_equals(s1.querySelectorAll('*::shadow span')[0], span4, 'Point 2: incorrect match');
 107  }), 'SD_SHADOW_PSEUDOELEMENT_QUERYSELECTOR_T2');
 108
 109 test(unit(function (ctx) {
 110     var d = newRenderedHTMLDocument(ctx);
 111
 112     var outerhost = d.createElement('div');
 113     outerhost.setAttribute('id', 'foo-host');
 114     var span0 = d.createElement('span');
 115     span0.setAttribute('id', 'outer-host');
 116     outerhost.appendChild(span0);
 117
 118     var s1 = outerhost.createShadowRoot();
 119
 120     var div1 = d.createElement('div');
 121     var span1 = d.createElement('span');
 122     span1.setAttribute('id', 'not-top');
 123     div1.appendChild(span1);
 124     s1.appendChild(div1);
 125
 126     var span2 = d.createElement('span');
 127     span2.setAttribute('id', 'top');
 128     s1.appendChild(span2);
 129
 130
 131     var innerhost = d.createElement('div');
 132     innerhost.setAttribute('id', 'bar-host');
 133     var span3 = d.createElement('span');
 134     span3.setAttribute('id', 'inner-host');
 135     innerhost.appendChild(span3);
 136
 137     var s2 = innerhost.createShadowRoot();
 138
 139     var span4 = d.createElement('span');
 140     span4.setAttribute('id', 'nested');
 141     s2.appendChild(span4);
 142     s1.appendChild(innerhost);
 143
 144     d.body.appendChild(outerhost);
 145
 146     assert_equals(s2.querySelectorAll('*::shadow span').length, 0, 'Point 1: no match');
 147  }), 'SD_SHADOW_PSEUDOELEMENT_QUERYSELECTOR_T3');
 148
 149 </script>
 150 </body>
 151 </html>