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].
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
13 <title>Shadow DOM Test: A_06_00_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/#styles">
16 <meta name="assert" content="Styles: CSS rules declared in an enclosing tree must not apply in a shadow tree if apply-author-styles flag is set to false for this tree">
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">
25 //test apply-author-styles flag of ShadowRoot object (default value)
26 test(unit(function (ctx) {
28 var d = newRenderedHTMLDocument(ctx);
30 d.head.innerHTML = '<style>' +
36 var host = d.createElement('div');
37 d.body.appendChild(host);
39 //Shadow root to play with
40 var s = host.createShadowRoot();
42 var div1 = d.createElement('div');
43 div1.innerHTML ='<span id="shd" class="invis">This is the shadow tree</span>';
46 //apply-author-styles flag is false by default. Invisible style shouldn't be applied
47 assert_true(s.querySelector('#shd').offsetTop > 0,
48 'CSS styles declared in enclosing tree must not be applied in a shadow tree ' +
49 'if the apply-author-styles flag is set to false');
52 }), 'A_06_00_01_T01');
55 //test apply-author-styles flag of ShadowRoot object (set it)
56 test(unit(function (ctx) {
58 var d = newRenderedHTMLDocument(ctx);
60 d.head.innerHTML = '<style>' +
66 var host = d.createElement('div');
67 d.body.appendChild(host);
69 //Shadow root to play with
70 var s = host.createShadowRoot();
71 s.applyAuthorStyles = false;
73 var div1 = d.createElement('div');
74 div1.innerHTML ='<span id="shd" class="invis">This is the shadow tree</span>';
77 //apply-author-styles flag is set to false. Invisible style shouldn't be applied
78 assert_true(s.querySelector('#shd').offsetTop > 0,
79 'CSS styles declared in enclosing tree must not be applied in a shadow tree ' +
80 'if the apply-author-styles flag is set to false');
83 }), 'A_06_00_01_T02');
85 //test apply-author-styles flag in a nested tree (default value)
86 test(unit(function (ctx) {
88 var d = newRenderedHTMLDocument(ctx);
90 d.head.innerHTML = '<style>' +
96 var host = d.createElement('div');
97 d.body.appendChild(host);
99 //Shadow root to play with
100 var s1 = host.createShadowRoot();
102 var div1 = d.createElement('div');
103 div1.innerHTML = '<span id="shd1" class="invis">This is an old shadow tree</span>';
104 s1.appendChild(div1);
107 var s2 = host.createShadowRoot();
108 var div1 = d.createElement('div');
109 div1.innerHTML = '<span id="shd2" class="invis">This is a young shadow tree</span>' +
110 '<shadow><span id="shd3" class="invis">This is the shadow tree fallback content</span></shadow>';
111 s2.appendChild(div1);
114 //apply-author-styles flag is false by default. Invisible style shouldn't be applied
115 //shd1 and shd2 should be visible. sh3 not because the tree should be active
116 assert_true(s1.querySelector('#shd1').offsetTop > 0,
117 'Point 1: CSS styles declared in enclosing tree must not be applied in a shadow tree ' +
118 'if the apply-author-styles flag is set to false');
119 assert_true(s2.querySelector('#shd2').offsetTop > 0,
120 'Point 2: CSS styles declared in enclosing tree must not be applied in a shadow tree ' +
121 'if the apply-author-styles flag is set to false');
122 assert_equals(s2.querySelector('#shd3').offsetTop, 0,
123 'Fallback content shouldn\'t be rendered for active tree');
126 }), 'A_06_00_01_T03');
129 //test apply-author-styles flag in a nested tree (set it)
130 test(unit(function (ctx) {
132 var d = newRenderedHTMLDocument(ctx);
134 d.head.innerHTML = '<style>' +
140 var host = d.createElement('div');
141 d.body.appendChild(host);
143 //Shadow root to play with
144 var s1 = host.createShadowRoot();
145 s1.applyAuthorStyles = false;
147 var div1 = d.createElement('div');
148 div1.innerHTML = '<span id="shd1" class="invis">This is an old shadow tree</span>';
149 s1.appendChild(div1);
152 var s2 = host.createShadowRoot();
153 var div1 = d.createElement('div');
154 div1.innerHTML = '<span id="shd2" class="invis">This is a young shadow tree</span>' +
155 '<shadow><span id="shd3" class="invis">This is the shadow tree fallback content</span></shadow>';
156 s2.appendChild(div1);
159 //apply-author-styles flag is set to false. Invisible style shouldn't be applied
160 //shd1 and shd2 should be visible. sh3 not because the tree should be active
161 assert_true(s1.querySelector('#shd1').offsetTop > 0,
162 'Point 1: CSS styles declared in enclosing tree must not be applied in a shadow tree ' +
163 'if the apply-author-styles flag is set to false');
164 assert_true(s2.querySelector('#shd2').offsetTop > 0,
165 'Point 2: CSS styles declared in enclosing tree must not be applied in a shadow tree ' +
166 'if the apply-author-styles flag is set to false');
167 assert_equals(s2.querySelector('#shd3').offsetTop, 0,
168 'Fallback content shouldn\'t be rendered for active tree');
171 }), 'A_06_00_01_T04');