OLD | NEW |
(Empty) | |
| 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: A_04_06_01</title> |
| 14 <link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> |
| 15 <link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#reproje
ction"> |
| 16 <meta name="assert" content="Reprojection: The nodes distributed into that inser
tion point must appear as if they were child nodes of the shadow host in the con
text of distribution within the shadow DOM subtree, hosted by said shadow host"> |
| 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 var A_04_06_01_T01 = async_test('A_04_06_01_T01'); |
| 26 |
| 27 A_04_06_01_T01.step(function () { |
| 28 var iframe = document.createElement('iframe'); |
| 29 iframe.src = '../../resources/blank.html'; |
| 30 document.body.appendChild(iframe); |
| 31 |
| 32 iframe.onload = A_04_06_01_T01.step_func(function () { |
| 33 try { |
| 34 var d = iframe.contentDocument; |
| 35 |
| 36 var div = d.createElement('div'); |
| 37 div.innerHTML = '' + |
| 38 '<ul id="host">' + |
| 39 '<li id="li1" class="shadow">' + |
| 40 '<a id="a11" class="cl1" href="#">Link11 Shadow<
/a>' + |
| 41 '<a id="a12" class="cl2" href="#">Link12 Shadow<
/a>' + |
| 42 '<a id="a13" class="cl1" href="#">Link13 Shadow<
/a>' + |
| 43 '</li>' + |
| 44 '<li id="li2">' + |
| 45 '<a id="a21" href="#">Link21</a><a id="a
22" href="#">Link22</a>' + |
| 46 '</li>' + |
| 47 '<li id="li3" class="shadow">' + |
| 48 '<a id="a31" href="#">Link31 Shadow</a><
a id="a32" href="#">Link32 Shadow</a>' + |
| 49 '</li>' + |
| 50 '<li id="li4" class="shadow2">' + |
| 51 '<a id="a41" href="#">Link41 Shadow 2</a
><a id="a42" href="#">Link22 Shadow 2</a>' + |
| 52 '</li>' + |
| 53 '<li id="li5" class="shadow2">' + |
| 54 '<a id="a51" href="#">Link51 Shadow</a><
a id="a52" href="#">Link52 Shadow 2</a>' + |
| 55 '</li>' + |
| 56 '</ul>'; |
| 57 |
| 58 d.body.appendChild(div); |
| 59 |
| 60 var li1 = d.querySelector('#li1'); |
| 61 var s = li1.createShadowRoot(); |
| 62 //make shadow subtree |
| 63 var shadowLI1 = document.createElement('li'); |
| 64 shadowLI1.innerHTML = '<li><content select=".cl1"></content></li>'; |
| 65 s.appendChild(shadowLI1); |
| 66 |
| 67 var ul = d.querySelector('#host'); |
| 68 var s2 = ul.createShadowRoot(); |
| 69 var div2 = document.createElement('div'); |
| 70 div2.innerHTML = '<ul><content select=".shadow"></content></ul>'; |
| 71 s2.appendChild(div2); |
| 72 |
| 73 |
| 74 assert_true(d.querySelector('#li1').offsetTop > 0, 'Point 1: Node th
at match insertion ' + |
| 75 'point criteria should be rendered'); |
| 76 assert_true(d.querySelector('#li3').offsetTop > 0, 'Point 2: Node th
at match insertion ' + |
| 77 'point criteria should be rendered'); |
| 78 assert_equals(d.querySelector('#li2').offsetTop, 0, 'Point 3: Node t
hat doen\'t match ' + |
| 79 'insertion point criteria shouldn\'t be rendered'); |
| 80 assert_equals(d.querySelector('#li4').offsetTop, 0, 'Point 4: Node t
hat doen\'t match ' + |
| 81 'insertion point criteria shouldn\'t be rendered'); |
| 82 assert_equals(d.querySelector('#li5').offsetTop, 0, 'Point 5: Node t
hat doen\'t match ' + |
| 83 'insertion point criteria shouldn\'t be rendered'); |
| 84 |
| 85 //check the nested tree |
| 86 assert_true(d.querySelector('#a11').offsetTop > 0, |
| 87 'Point 6: Aleady distributed nodes should behave like a shadow h
ost child nodes'); |
| 88 assert_true(d.querySelector('#a13').offsetTop > 0, |
| 89 'Point 7: Aleady distributed nodes should behave like a shadow h
ost child nodes'); |
| 90 assert_equals(d.querySelector('#a12').offsetTop, 0, |
| 91 'Point 8: Aleady distributed nodes should behave like a shadow h
ost child nodes'); |
| 92 } finally { |
| 93 iframe.parentNode.removeChild(iframe); |
| 94 } |
| 95 A_04_06_01_T01.done(); |
| 96 }); |
| 97 }); |
| 98 |
| 99 |
| 100 |
| 101 var A_04_06_01_T02 = async_test('A_04_06_01_T02'); |
| 102 |
| 103 A_04_06_01_T02.step(function () { |
| 104 var iframe = document.createElement('iframe'); |
| 105 iframe.src = '../../resources/blank.html'; |
| 106 document.body.appendChild(iframe); |
| 107 |
| 108 iframe.onload = A_04_06_01_T02.step_func(function () { |
| 109 try { |
| 110 var d = iframe.contentDocument; |
| 111 |
| 112 var div = d.createElement('div'); |
| 113 div.innerHTML = '' + |
| 114 '<ul id="host">' + |
| 115 '<li id="li1" class="shadow">' + |
| 116 '<a id="a11" class="cl1" href="#">Link11 Shadow<
/a>' + |
| 117 '<a id="a12" class="cl2" href="#">Link12 Shadow<
/a>' + |
| 118 '<a id="a13" class="cl1" href="#">Link13 Shadow<
/a>' + |
| 119 '</li>' + |
| 120 '<li id="li2">' + |
| 121 '<a id="a21" href="#">Link21</a><a id="a
22" href="#">Link22</a>' + |
| 122 '</li>' + |
| 123 '<li id="li3" class="shadow">' + |
| 124 '<a id="a31" href="#">Link31 Shadow</a><
a id="a32" href="#">Link32 Shadow</a>' + |
| 125 '</li>' + |
| 126 '<li id="li4" class="shadow2">' + |
| 127 '<a id="a41" href="#">Link41 Shadow 2</a
><a id="a42" href="#">Link22 Shadow 2</a>' + |
| 128 '</li>' + |
| 129 '<li id="li5" class="shadow2">' + |
| 130 '<a class="cl1" id="a51" href="#">Link51
Shadow</a><a id="a52" href="#">Link52 Shadow 2</a>' + |
| 131 '</li>' + |
| 132 '</ul>'; |
| 133 |
| 134 d.body.appendChild(div); |
| 135 |
| 136 var li1 = d.querySelector('#li1'); |
| 137 var s = li1.createShadowRoot(); |
| 138 //make shadow subtree |
| 139 var shadowLI1 = document.createElement('li'); |
| 140 shadowLI1.innerHTML = '<li><content select=".cl1"></content></li>'; |
| 141 s.appendChild(shadowLI1); |
| 142 |
| 143 var ul = d.querySelector('#host'); |
| 144 var s2 = ul.createShadowRoot(); |
| 145 var div2 = document.createElement('div'); |
| 146 div2.innerHTML = '<li><content select=".cl1"></content></li>'; |
| 147 s2.appendChild(div2); |
| 148 |
| 149 // The second distribution shouldn't render anything |
| 150 assert_equals(d.querySelector('#li1').offsetTop, 0, 'Point 1: Node t
hat doen\'t match ' + |
| 151 'insertion point criteria shouldn\'t be rendered'); |
| 152 assert_equals(d.querySelector('#li2').offsetTop, 0, 'Point 2: Node t
hat doen\'t match ' + |
| 153 'insertion point criteria shouldn\'t be rendered'); |
| 154 assert_equals(d.querySelector('#li3').offsetTop, 0, 'Point 3: Node t
hat doen\'t match ' + |
| 155 'insertion point criteria shouldn\'t be rendered'); |
| 156 assert_equals(d.querySelector('#li4').offsetTop, 0, 'Point 4: Node t
hat doen\'t match ' + |
| 157 'insertion point criteria shouldn\'t be rendered'); |
| 158 assert_equals(d.querySelector('#li5').offsetTop, 0, 'Point 5: Node t
hat doen\'t match ' + |
| 159 'insertion point criteria shouldn\'t be rendered'); |
| 160 |
| 161 //check the nested tree |
| 162 assert_equals(d.querySelector('#a11').offsetTop, 0, |
| 163 'Point 6: Aleady distributed nodes should behave like a shadow h
ost child nodes'); |
| 164 assert_equals(d.querySelector('#a13').offsetTop, 0, |
| 165 'Point 7: Aleady distributed nodes should behave like a shadow h
ost child nodes'); |
| 166 assert_equals(d.querySelector('#a12').offsetTop, 0, |
| 167 'Point 8: Aleady distributed nodes should behave like a shadow h
ost child nodes'); |
| 168 } finally { |
| 169 iframe.parentNode.removeChild(iframe); |
| 170 } |
| 171 A_04_06_01_T02.done(); |
| 172 }); |
| 173 }); |
| 174 </script> |
| 175 </body> |
| 176 </html> |
OLD | NEW |