| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <title>Test for WebKit bug 24021: pseudo-element styles not accessible / ret
rievable via DOM methods</title> | 4 <title>Test for WebKit bug 24021: pseudo-element styles not accessible / ret
rievable via DOM methods</title> |
| 5 <style type="text/css"> | 5 <style type="text/css"> |
| 6 #testFirsts:first-line { | 6 #testFirsts:first-line { |
| 7 color: brown; | 7 color: brown; |
| 8 } | 8 } |
| 9 | 9 |
| 10 #testFirsts:first-letter { | 10 #testFirsts:first-letter { |
| (...skipping 84 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 95 display: none; | 95 display: none; |
| 96 width: 100px; | 96 width: 100px; |
| 97 height: 100px; | 97 height: 100px; |
| 98 } | 98 } |
| 99 | 99 |
| 100 #testHardwareAcceleratedCompositing { | 100 #testHardwareAcceleratedCompositing { |
| 101 width: 100px; | 101 width: 100px; |
| 102 height: 100px; | 102 height: 100px; |
| 103 opacity: 1.0; | 103 opacity: 1.0; |
| 104 background-color: green; | 104 background-color: green; |
| 105 -webkit-animation: move 300ms linear; | 105 animation: move 300ms linear; |
| 106 -webkit-transform-style: preserve-3d; | 106 transform-style: preserve-3d; |
| 107 transform: trasnlate3d(10px, 0, 0); | 107 transform: trasnlate3d(10px, 0, 0); |
| 108 } | 108 } |
| 109 | 109 |
| 110 #testHardwareAcceleratedCompositing:before { | 110 #testHardwareAcceleratedCompositing:before { |
| 111 content: "This should have lower opacity."; | 111 content: "This should have lower opacity."; |
| 112 opacity: 0.5; | 112 opacity: 0.5; |
| 113 } | 113 } |
| 114 | 114 |
| 115 @-webkit-keyframes move { | 115 @keyframes move { |
| 116 from { transform: translate3d(10px, 0, 0); } | 116 from { transform: translate3d(10px, 0, 0); } |
| 117 to { transform: translate3d(300px, 0, 0); } | 117 to { transform: translate3d(300px, 0, 0); } |
| 118 } | 118 } |
| 119 | 119 |
| 120 .pass { | 120 .pass { |
| 121 color: green; | 121 color: green; |
| 122 } | 122 } |
| 123 | 123 |
| 124 .fail { | 124 .fail { |
| 125 color: red; | 125 color: red; |
| (...skipping 58 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 184 { 'elementId' : 'testNoPseudoElement', 'pseudoElement' : ':after', 'prop
erty' : 'width', 'expectedValue' : '100px' }, | 184 { 'elementId' : 'testNoPseudoElement', 'pseudoElement' : ':after', 'prop
erty' : 'width', 'expectedValue' : '100px' }, |
| 185 { 'elementId' : 'testHardwareAcceleratedCompositing', 'pseudoElement' :
':before', 'property' : 'opacity', 'expectedValue' : '0.5' } | 185 { 'elementId' : 'testHardwareAcceleratedCompositing', 'pseudoElement' :
':before', 'property' : 'opacity', 'expectedValue' : '0.5' } |
| 186 ]; | 186 ]; |
| 187 | 187 |
| 188 function setupAndRunTests() | 188 function setupAndRunTests() |
| 189 { | 189 { |
| 190 if (window.testRunner) | 190 if (window.testRunner) |
| 191 testRunner.waitUntilDone(); | 191 testRunner.waitUntilDone(); |
| 192 | 192 |
| 193 // FIXME: It is currently necessary to run the animation at least once b
efore querying for the style on the pseudo-element will work. | 193 // FIXME: It is currently necessary to run the animation at least once b
efore querying for the style on the pseudo-element will work. |
| 194 document.getElementById("testHardwareAcceleratedCompositing").addEventLi
stener('webkitAnimationEnd', runTests, false); | 194 document.getElementById("testHardwareAcceleratedCompositing").addEventLi
stener('animationend', runTests, false); |
| 195 } | 195 } |
| 196 | 196 |
| 197 function runTests() | 197 function runTests() |
| 198 { | 198 { |
| 199 var resultsElement = document.getElementById('results'); | 199 var resultsElement = document.getElementById('results'); |
| 200 | 200 |
| 201 tests.forEach(function(curTest) { | 201 tests.forEach(function(curTest) { |
| 202 var computedStyle = window.getComputedStyle(document.getElementById(cu
rTest.elementId), curTest.pseudoElement); | 202 var computedStyle = window.getComputedStyle(document.getElementById(cu
rTest.elementId), curTest.pseudoElement); |
| 203 var value = computedStyle[curTest.property]; | 203 var value = computedStyle[curTest.property]; |
| 204 var msg = document.createElement('div'); | 204 var msg = document.createElement('div'); |
| (...skipping 24 matching lines...) Expand all Loading... |
| 229 <br /> | 229 <br /> |
| 230 <div id="testBeforeAfterDisplayNone">div with :before and :after display:non
e</div> | 230 <div id="testBeforeAfterDisplayNone">div with :before and :after display:non
e</div> |
| 231 <br /> | 231 <br /> |
| 232 <div id="testNoPseudoElement">There are no pseudo elements defined on this d
iv.</div> | 232 <div id="testNoPseudoElement">There are no pseudo elements defined on this d
iv.</div> |
| 233 <br /> | 233 <br /> |
| 234 <div id="testHardwareAcceleratedCompositing">This should be at full opacity.
</div> | 234 <div id="testHardwareAcceleratedCompositing">This should be at full opacity.
</div> |
| 235 <br /> | 235 <br /> |
| 236 <div id="results"></div> | 236 <div id="results"></div> |
| 237 </body> | 237 </body> |
| 238 </html> | 238 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2513413007:
CSS Animations: Reduce usage of webkit prefix in layout tests (Closed)
