4 <title>Test for WebKit bug
24021: pseudo-element styles not accessible / retrievable via DOM methods
</title>
5 <style type=
"text/css">
6 #testFirsts:first-line
{
10 #testFirsts:first-letter
{
14 #testBeforeAfter::before
{
15 content: "This should be brown ";
20 margin: 10px 20px 30px 40px;
21 outline: black dotted thin
;
25 #testBeforeAfter::after
{
26 content: " and this should be blue";
31 padding: 10px 20px 30px 40px;
32 outline: red solid thick
;
35 #testBeforeAfterTable::before
{
36 content: "This should be brown ";
41 margin: 10px 20px 30px 40px;
42 border: 5px solid red
;
45 #testBeforeAfterTable::after
{
46 content: " and this should be blue";
51 padding: 10px 20px 30px 40px;
52 border: 10px dotted blue
;
55 #testBeforeAfterInline::before
{
56 content: "This should be brown ";
61 margin: 10px 20px 30px 40px;
64 #testBeforeAfterInline::after
{
65 content: " and this should be blue";
70 padding: 10px 20px 30px 40px;
73 #testNoPseudoElement {
79 #testBeforeAfterDisplayNone {
80 content: "and this should show nothing";
86 #testBeforeAfterDisplayNone::after
{
87 content: "and this should show nothing";
93 #testBeforeAfterDisplayNone::before
{
94 content: " and this should show nothing";
100 #testHardwareAcceleratedCompositing {
104 background-color: green
;
105 -webkit-animation: move
300ms linear
;
106 -webkit-transform-style: preserve-3d
;
107 transform: trasnlate3d
(10px, 0, 0);
110 #testHardwareAcceleratedCompositing:before
{
111 content: "This should have lower opacity.";
115 @
-webkit-keyframes move
{
116 from
{ transform: translate3d
(10px, 0, 0); }
117 to
{ transform: translate3d
(300px, 0, 0); }
129 <script type=
"text/javascript">
130 if (window
.testRunner
)
131 testRunner
.dumpAsText();
134 { 'elementId' : 'testFirsts', 'pseudoElement' : ':first-line', 'property' : 'color', 'expectedValue' : 'rgb(165, 42, 42)' },
135 { 'elementId' : 'testFirsts', 'pseudoElement' : ':first-letter', 'property' : 'color', 'expectedValue' : 'rgb(0, 0, 255)' },
136 { 'elementId' : 'testFirsts', 'pseudoElement' : '::first-letter', 'property' : 'color', 'expectedValue' : 'rgb(0, 0, 255)' },
137 { 'elementId' : 'testFirsts', 'pseudoElement' : 'first-letter', 'property' : 'color', 'expectedValue' : 'rgb(0, 0, 255)' },
138 { 'elementId' : 'testFirsts', 'pseudoElement' : null, 'property' : 'color', 'expectedValue' : 'rgb(0, 0, 0)' },
139 { 'elementId' : 'testBeforeAfter', 'pseudoElement' : ':before', 'property' : 'color', 'expectedValue' : 'rgb(165, 42, 42)' },
140 { 'elementId' : 'testBeforeAfter', 'pseudoElement' : ':after', 'property' : 'color', 'expectedValue' : 'rgb(0, 0, 255)' },
141 { 'elementId' : 'testBeforeAfter', 'pseudoElement' : ':before', 'property' : 'outline', 'expectedValue' : 'rgb(0, 0, 0) dotted 1px' },
142 { 'elementId' : 'testBeforeAfter', 'pseudoElement' : ':after', 'property' : 'outline', 'expectedValue' : 'rgb(255, 0, 0) solid 5px' },
143 { 'elementId' : 'testBeforeAfter', 'pseudoElement' : ':before', 'property' : 'overflow', 'expectedValue' : 'hidden' },
144 { 'elementId' : 'testBeforeAfter', 'pseudoElement' : ':after', 'property' : 'overflow', 'expectedValue' : 'visible' },
145 { 'elementId' : 'testBeforeAfter', 'pseudoElement' : ':before', 'property' : 'height', 'expectedValue' : '250px' },
146 { 'elementId' : 'testBeforeAfter', 'pseudoElement' : ':before', 'property' : 'width', 'expectedValue' : '350px' },
147 { 'elementId' : 'testBeforeAfter', 'pseudoElement' : ':after', 'property' : 'height', 'expectedValue' : '200px' },
148 { 'elementId' : 'testBeforeAfter', 'pseudoElement' : ':after', 'property' : 'width', 'expectedValue' : '300px' },
149 { 'elementId' : 'testBeforeAfter', 'pseudoElement' : ':before', 'property' : 'margin', 'expectedValue' : '10px 20px 30px 40px' },
150 { 'elementId' : 'testBeforeAfter', 'pseudoElement' : ':before', 'property' : 'padding', 'expectedValue' : '0px' },
151 { 'elementId' : 'testBeforeAfter', 'pseudoElement' : ':after', 'property' : 'margin', 'expectedValue' : '0px' },
152 { 'elementId' : 'testBeforeAfter', 'pseudoElement' : ':after', 'property' : 'padding', 'expectedValue' : '10px 20px 30px 40px' },
153 { 'elementId' : 'testBeforeAfterTable', 'pseudoElement' : ':before', 'property' : 'height', 'expectedValue' : '250px' },
154 { 'elementId' : 'testBeforeAfterTable', 'pseudoElement' : ':before', 'property' : 'width', 'expectedValue' : '350px' },
155 { 'elementId' : 'testBeforeAfterTable', 'pseudoElement' : ':after', 'property' : 'height', 'expectedValue' : '200px' },
156 { 'elementId' : 'testBeforeAfterTable', 'pseudoElement' : ':after', 'property' : 'width', 'expectedValue' : '300px' },
157 { 'elementId' : 'testBeforeAfterTable', 'pseudoElement' : ':before', 'property' : 'margin', 'expectedValue' : '10px 20px 30px 40px' },
158 { 'elementId' : 'testBeforeAfterTable', 'pseudoElement' : ':before', 'property' : 'padding', 'expectedValue' : '0px' },
159 { 'elementId' : 'testBeforeAfterTable', 'pseudoElement' : ':after', 'property' : 'margin', 'expectedValue' : '0px' },
160 { 'elementId' : 'testBeforeAfterTable', 'pseudoElement' : ':after', 'property' : 'padding', 'expectedValue' : '10px 20px 30px 40px' },
161 { 'elementId' : 'testBeforeAfterTable', 'pseudoElement' : ':before', 'property' : 'border', 'expectedValue' : '5px solid rgb(255, 0, 0)' },
162 { 'elementId' : 'testBeforeAfterTable', 'pseudoElement' : ':after', 'property' : 'border', 'expectedValue' : '10px dotted rgb(0, 0, 255)' },
163 { 'elementId' : 'testBeforeAfterInline', 'pseudoElement' : ':before', 'property' : 'height', 'expectedValue' : 'auto' },
164 { 'elementId' : 'testBeforeAfterInline', 'pseudoElement' : ':before', 'property' : 'width', 'expectedValue' : 'auto' },
165 { 'elementId' : 'testBeforeAfterInline', 'pseudoElement' : ':after', 'property' : 'height', 'expectedValue' : 'auto' },
166 { 'elementId' : 'testBeforeAfterInline', 'pseudoElement' : ':after', 'property' : 'width', 'expectedValue' : 'auto' },
167 { 'elementId' : 'testBeforeAfterInline', 'pseudoElement' : ':before', 'property' : 'margin', 'expectedValue' : '10px 20px 30px 40px' },
168 { 'elementId' : 'testBeforeAfterInline', 'pseudoElement' : ':before', 'property' : 'padding', 'expectedValue' : '0px' },
169 { 'elementId' : 'testBeforeAfterInline', 'pseudoElement' : ':after', 'property' : 'margin', 'expectedValue' : '0px' },
170 { 'elementId' : 'testBeforeAfterInline', 'pseudoElement' : ':after', 'property' : 'padding', 'expectedValue' : '10px 20px 30px 40px' },
171 { 'elementId' : 'testBeforeAfterDisplayNone', 'pseudoElement' : ':after', 'property' : 'width', 'expectedValue' : '100px' },
172 { 'elementId' : 'testBeforeAfterDisplayNone', 'pseudoElement' : ':after', 'property' : 'height', 'expectedValue' : '100px' },
173 { 'elementId' : 'testBeforeAfterDisplayNone', 'pseudoElement' : ':before', 'property' : 'width', 'expectedValue' : '100px' },
174 { 'elementId' : 'testBeforeAfterDisplayNone', 'pseudoElement' : ':before', 'property' : 'height', 'expectedValue' : '100px' },
175 { 'elementId' : 'testNoPseudoElement', 'pseudoElement' : null, 'property' : 'color', 'expectedValue' : 'rgb(165, 42, 42)' },
176 { 'elementId' : 'testNoPseudoElement', 'pseudoElement' : ':first-line', 'property' : 'color', 'expectedValue' : 'rgb(165, 42, 42)' },
177 { 'elementId' : 'testNoPseudoElement', 'pseudoElement' : ':first-letter', 'property' : 'color', 'expectedValue' : 'rgb(165, 42, 42)' },
178 { 'elementId' : 'testNoPseudoElement', 'pseudoElement' : ':before', 'property' : 'color', 'expectedValue' : 'rgb(165, 42, 42)' },
179 { 'elementId' : 'testNoPseudoElement', 'pseudoElement' : ':after', 'property' : 'color', 'expectedValue' : 'rgb(165, 42, 42)' },
180 { 'elementId' : 'testNoPseudoElement', 'pseudoElement' : ':garbage', 'property' : 'color', 'expectedValue' : 'rgb(165, 42, 42)' },
181 { 'elementId' : 'testNoPseudoElement', 'pseudoElement' : null, 'property' : 'height', 'expectedValue' : '100px' },
182 { 'elementId' : 'testNoPseudoElement', 'pseudoElement' : null, 'property' : 'width', 'expectedValue' : '100px' },
183 { 'elementId' : 'testNoPseudoElement', 'pseudoElement' : ':after', 'property' : 'height', 'expectedValue' : '100px' },
184 { 'elementId' : 'testNoPseudoElement', 'pseudoElement' : ':after', 'property' : 'width', 'expectedValue' : '100px' },
185 { 'elementId' : 'testHardwareAcceleratedCompositing', 'pseudoElement' : ':before', 'property' : 'opacity', 'expectedValue' : '0.5' }
188 function setupAndRunTests()
190 if (window
.testRunner
)
191 testRunner
.waitUntilDone();
193 // FIXME: It is currently necessary to run the animation at least once before querying for the style on the pseudo-element will work.
194 document
.getElementById("testHardwareAcceleratedCompositing").addEventListener('webkitAnimationEnd', runTests
, false);
199 var resultsElement
= document
.getElementById('results');
201 tests
.forEach(function(curTest
) {
202 var computedStyle
= window
.getComputedStyle(document
.getElementById(curTest
.elementId
), curTest
.pseudoElement
);
203 var value
= computedStyle
[curTest
.property
];
204 var msg
= document
.createElement('div');
205 var mainMessage
= " Expected '" + curTest
.expectedValue
+ "' for " + curTest
.property
+
206 " in the computed style for element with id " + curTest
.elementId
+ " and pseudo-element " + curTest
.pseudoElement
;
207 if (value
== curTest
.expectedValue
)
208 msg
.innerHTML
= "<span class='pass'>PASS</span>" + mainMessage
+ " and got '" + value
+ "'";
210 msg
.innerHTML
= "<span class='fail'>FAIL</span>" + mainMessage
+ " but instead got '" + value
+ "'";
211 resultsElement
.appendChild(msg
);
214 if (window
.testRunner
)
215 testRunner
.notifyDone();
219 <body onload=
"setupAndRunTests();">
220 <h3>Test for
<a href=
"https://bugs.webkit.org/show_bug.cgi?id=24021">WebKit bug
24021</a>: pseudo-element styles not accessible / retrievable via DOM methods
</h3>
222 <div id=
"testFirsts">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
224 <div id=
"testBeforeAfter">Middle
</div>
226 <div id=
"testBeforeAfterTable">div with :before and :after display:table
</div>
228 <div id=
"testBeforeAfterInline">div with :before and :after display:inline
</div>
230 <div id=
"testBeforeAfterDisplayNone">div with :before and :after display:none
</div>
232 <div id=
"testNoPseudoElement">There are no pseudo elements defined on this div.
</div>
234 <div id=
"testHardwareAcceleratedCompositing">This should be at full opacity.
</div>
236 <div id=
"results"></div>