01f709bd10d0919d3ed53e3ff2833576be835afa
[WebKit-https.git] / LayoutTests / fast / css / getComputedStyle / getComputedStyle-with-pseudo-element.html
1 <!DOCTYPE html>
2 <html>
3   <head>
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 {
7           color: brown;
8       }
9
10       #testFirsts:first-letter {
11           color: blue;
12       }
13
14       #testBeforeAfter::before {
15           content: "This should be brown ";
16           color: brown;
17       }
18
19       #testBeforeAfter::after {
20           content: " and this should be blue";
21           color: blue;
22       }
23
24       #testNoPseudoElement {
25           color: brown;
26       }
27
28       #testHardwareAcceleratedCompositing {
29           width: 100px;
30           height: 100px;
31           opacity: 1.0;
32           background-color: green;
33           -webkit-animation: move 300ms linear;
34           -webkit-transform-style: preserve-3d;
35           -webkit-transform: trasnlate3d(10px, 0, 0);
36       }
37
38      #testHardwareAcceleratedCompositing:before {
39          content: "This should have lower opacity.";
40          opacity: 0.5;
41      }
42
43       @-webkit-keyframes move {
44           from { -webkit-transform: translate3d(10px, 0, 0); }
45           to   { -webkit-transform: translate3d(300px, 0, 0); }
46       }
47
48       .pass {
49           color: green;
50       }
51
52       .fail {
53           color: red;
54       }
55
56     </style>
57     <script type="text/javascript">
58       if (window.layoutTestController)
59           layoutTestController.dumpAsText();
60
61       var tests = [
62         { 'elementId' : 'testFirsts', 'pseudoElement' : ':first-line', 'property' : 'color', 'expectedValue' : 'rgb(165, 42, 42)' },
63         { 'elementId' : 'testFirsts', 'pseudoElement' : ':first-letter', 'property' : 'color', 'expectedValue' : 'rgb(0, 0, 255)' },
64         { 'elementId' : 'testFirsts', 'pseudoElement' : '::first-letter', 'property' : 'color', 'expectedValue' : 'rgb(0, 0, 255)' },
65         { 'elementId' : 'testFirsts', 'pseudoElement' : 'first-letter', 'property' : 'color', 'expectedValue' : 'rgb(0, 0, 255)' },
66         { 'elementId' : 'testFirsts', 'pseudoElement' : null, 'property' : 'color', 'expectedValue' : 'rgb(0, 0, 0)' },
67         { 'elementId' : 'testBeforeAfter', 'pseudoElement' : ':before', 'property' : 'color', 'expectedValue' : 'rgb(165, 42, 42)' },
68         { 'elementId' : 'testBeforeAfter', 'pseudoElement' : ':after', 'property' : 'color', 'expectedValue' : 'rgb(0, 0, 255)' },
69         { 'elementId' : 'testNoPseudoElement', 'pseudoElement' : null, 'property' : 'color', 'expectedValue' : 'rgb(165, 42, 42)' },
70         { 'elementId' : 'testNoPseudoElement', 'pseudoElement' : ':first-line', 'property' : 'color', 'expectedValue' : '' },
71         { 'elementId' : 'testNoPseudoElement', 'pseudoElement' : ':garbage', 'property' : 'color', 'expectedValue' : 'rgb(165, 42, 42)' },
72         { 'elementId' : 'testHardwareAcceleratedCompositing', 'pseudoElement' : ':before', 'property' : 'opacity', 'expectedValue' : '0.5' }
73       ];
74
75       function setupAndRunTests()
76       {
77         if (window.layoutTestController)
78             layoutTestController.waitUntilDone();
79
80         // FIXME: It is currently necessary to run the animation at least once before querying for the style on the pseudo-element will work.
81         document.getElementById("testHardwareAcceleratedCompositing").addEventListener('webkitAnimationEnd', runTests, false);
82       }
83
84       function runTests()
85       {
86         var resultsElement = document.getElementById('results');
87
88         tests.forEach(function(curTest) {
89           var computedStyle = window.getComputedStyle(document.getElementById(curTest.elementId), curTest.pseudoElement);
90           var value = computedStyle[curTest.property];
91           var msg = document.createElement('div');
92           var mainMessage = " Expected '" + curTest.expectedValue + "' for " + curTest.property +
93               " in the computed style for element with id " + curTest.elementId + " and pseudo-element " + curTest.pseudoElement;
94           if (value == curTest.expectedValue)
95               msg.innerHTML = "<span class='pass'>PASS</span>" + mainMessage + " and got '" + value + "'";
96           else
97               msg.innerHTML = "<span class='fail'>FAIL</span>" + mainMessage + " but instead got '" + value + "'";
98           resultsElement.appendChild(msg);
99         });
100
101         if (window.layoutTestController)
102             layoutTestController.notifyDone();
103       }
104     </script>
105   </head>
106   <body onload="setupAndRunTests();">
107     <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>
108     <br />
109     <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>
110     <br />
111     <div id="testBeforeAfter">Middle</div>
112     <br />
113     <div id="testNoPseudoElement">There are no pseudo elements defined on this div.</div>
114     <br />
115     <div id="testHardwareAcceleratedCompositing"> This should be at full opacity.</div>
116     <br />
117     <div id="results"></div>
118   </body>
119 </html>