OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 <style> | |
5 span { | |
6 background-color: #eef; | |
7 border: solid; | |
8 color: #fee; | |
9 display: boxed-inline; | |
10 font-size: 24px; | |
11 margin: 2px; | |
12 outline-color: #f00; | |
13 padding-left: 5px; | |
14 text-align: start; | |
15 text-decoration: underline; | |
16 } | |
17 input[type="file"] { | |
18 text-align: end; | |
19 } | |
20 </style> | |
21 </head> | |
22 <body> | |
23 <div id="apply-author-style"></div> | |
24 <div id="no-apply-author-style"></div> | |
25 <div id="with-inline-style-declaration"></div> | |
26 <div id="try-to-override-important"></div> | |
27 <div id="change-apply-author-style-from-true-to-false"></div> | |
28 <div id="change-apply-author-style-from-false-to-true"></div> | |
29 | |
30 <script> | |
31 function shouldBe(a, b) | |
32 { | |
33 if (a != b) { | |
34 throw "failure:" + a + ": should be " + b; | |
35 } | |
36 } | |
37 | |
38 function shouldNotBe(a, b) | |
39 { | |
40 if (a == b) { | |
41 throw "failure:" + a + ": should not be " + b; | |
42 } | |
43 } | |
44 | |
45 function assertTrue(id, actual) { | |
46 if (!actual) { | |
47 throw "failure:" + id + ": assertTrue failed"; | |
48 } | |
49 } | |
50 | |
51 function assertFalse(id, actual) { | |
52 if (actual) { | |
53 throw "failure:" + id + ": assertFalse failed"; | |
54 } | |
55 } | |
56 | |
57 function renderApplyAuthorStyleCase() { | |
58 var div = document.createElement('div'); | |
59 document.getElementById('apply-author-style').appendChild(div); | |
60 | |
61 var shadowRoot = div.createShadowRoot(); | |
62 assertFalse('default applyAuthorStyles', shadowRoot.applyAuthorStyles); | |
63 shadowRoot.applyAuthorStyles = true; | |
64 assertTrue('applyAuthorStyles should be true', shadowRoot.applyAuthorStyles)
; | |
65 shadowRoot.innerHTML = '<span></span>'; | |
66 } | |
67 | |
68 function renderNoApplyAuthorStyleCase() { | |
69 var div = document.createElement('div'); | |
70 document.getElementById('no-apply-author-style').appendChild(div); | |
71 | |
72 var shadowRoot = div.createShadowRoot(); | |
73 assertFalse('default applyAuthorStyles', shadowRoot.applyAuthorStyles); | |
74 shadowRoot.applyAuthorStyles = false; | |
75 assertFalse('applyAuthorStyles should be false', shadowRoot.applyAuthorStyle
s); | |
76 shadowRoot.innerHTML = '<span></span>'; | |
77 } | |
78 | |
79 function renderApplyAuthorStyleWithInlineStyleDeclarationCase() { | |
80 var div = document.createElement('div'); | |
81 document.getElementById('with-inline-style-declaration').appendChild(div); | |
82 | |
83 var shadowRoot = div.createShadowRoot(); | |
84 assertFalse('default applyAuthorStyles', shadowRoot.applyAuthorStyles); | |
85 shadowRoot.applyAuthorStyles = true; | |
86 assertTrue('applyAuthorStyles should be true', shadowRoot.applyAuthorStyles)
; | |
87 shadowRoot.innerHTML = '<span style="border:none; color:#daa; font-size:18px
; text-decoration:none"></span>'; | |
88 } | |
89 | |
90 function renderApplyAuthorStyleWithOverridingImportantPropertyCase() { | |
91 var div = document.createElement('div'); | |
92 document.getElementById('try-to-override-important').appendChild(div); | |
93 | |
94 var shadowRoot = div.createShadowRoot(); | |
95 assertFalse('default applyAuthorStyles', shadowRoot.applyAuthorStyles); | |
96 shadowRoot.applyAuthorStyles = true; | |
97 assertTrue('applyAuthorStyles should be true', shadowRoot.applyAuthorStyles)
; | |
98 shadowRoot.innerHTML = '<input type="file" />'; | |
99 } | |
100 | |
101 function testChangingApplyAuthorStyleFromTrueToFalse() { | |
102 var div = document.createElement('div'); | |
103 document.getElementById('change-apply-author-style-from-true-to-false').appe
ndChild(div); | |
104 | |
105 var shadowRoot = div.createShadowRoot(); | |
106 assertFalse('default applyAuthorStyles', shadowRoot.applyAuthorStyles); | |
107 shadowRoot.applyAuthorStyles = true; | |
108 assertTrue('applyAuthorStyles should be true', shadowRoot.applyAuthorStyles)
; | |
109 shadowRoot.innerHTML = '<div><span id="test1"></span></div>'; | |
110 div.offsetLeft; | |
111 var target = shadowRoot.getElementById('test1'); | |
112 shouldBe(window.getComputedStyle(target).getPropertyValue('font-size'), "24p
x"); | |
113 shouldBe(window.getComputedStyle(target).getPropertyValue('text-decoration')
, "underline"); | |
114 | |
115 shadowRoot.applyAuthorStyles = false; | |
116 assertFalse('applyAuthorStyles should be false', shadowRoot.applyAuthorStyle
s); | |
117 div.offsetLeft; | |
118 shouldNotBe(window.getComputedStyle(target).getPropertyValue('font-size'), "
24px"); | |
119 shouldNotBe(window.getComputedStyle(target).getPropertyValue('text-decoratio
n'), "underline"); | |
120 } | |
121 | |
122 function testChangingApplyAuthorStyleFromFalseToTrue() { | |
123 var div = document.createElement('div'); | |
124 document.getElementById('change-apply-author-style-from-false-to-true').appe
ndChild(div); | |
125 | |
126 var shadowRoot = div.createShadowRoot(); | |
127 shadowRoot.applyAuthorStyles = false; | |
128 assertFalse('applyAuthorStyles should be false', shadowRoot.applyAuthorStyle
s); | |
129 shadowRoot.innerHTML = '<div><span id="test2"></span></div>'; | |
130 div.offsetLeft; | |
131 var target = shadowRoot.getElementById('test2'); | |
132 shouldNotBe(window.getComputedStyle(target).getPropertyValue('font-size'), "
24px"); | |
133 shouldNotBe(window.getComputedStyle(target).getPropertyValue('text-decoratio
n'), "underline"); | |
134 | |
135 shadowRoot.applyAuthorStyles = true; | |
136 assertTrue('applyAuthorStyles should be true', shadowRoot.applyAuthorStyles)
; | |
137 div.offsetLeft; | |
138 shouldBe(window.getComputedStyle(target).getPropertyValue('font-size'), "24p
x"); | |
139 shouldBe(window.getComputedStyle(target).getPropertyValue('text-decoration')
, "underline"); | |
140 } | |
141 | |
142 renderApplyAuthorStyleCase(); | |
143 // Looks: regression. | |
144 // renderNoApplyAuthorStyleCase(); | |
145 renderApplyAuthorStyleWithInlineStyleDeclarationCase(); | |
146 renderApplyAuthorStyleWithOverridingImportantPropertyCase(); | |
147 testChangingApplyAuthorStyleFromTrueToFalse(); | |
148 testChangingApplyAuthorStyleFromFalseToTrue(); | |
149 </script> | |
150 </body> | |
151 </html> | |
OLD | NEW |