third_party/WebKit/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           display: block;
  18           width: 350px;
  19           height: 250px;
  20           margin: 10px 20px 30px 40px;
  21           outline: black dotted thin;
  22           overflow: hidden;
  23       }
  24
  25       #testBeforeAfter::after {
  26           content: " and this should be blue";
  27           color: blue;
  28           display: block;
  29           width: 300px;
  30           height: 200px;
  31           padding: 10px 20px 30px 40px;
  32           outline: red solid thick;
  33       }
  34
  35       #testBeforeAfterTable::before {
  36           content: "This should be brown ";
  37           color: brown;
  38           display: table;
  39           width: 350px;
  40           height: 250px;
  41           margin: 10px 20px 30px 40px;
  42           border: 5px solid red;
  43       }
  44
  45       #testBeforeAfterTable::after {
  46           content: " and this should be blue";
  47           color: blue;
  48           display: table;
  49           width: 300px;
  50           height: 200px;
  51           padding: 10px 20px 30px 40px;
  52           border: 10px dotted blue;
  53       }
  54
  55       #testBeforeAfterInline::before {
  56           content: "This should be brown ";
  57           color: brown;
  58           display: inline;
  59           width: 350px;
  60           height: 250px;
  61           margin: 10px 20px 30px 40px;
  62       }
  63
  64       #testBeforeAfterInline::after {
  65           content: " and this should be blue";
  66           color: blue;
  67           display: inline;
  68           width: 300px;
  69           height: 200px;
  70           padding: 10px 20px 30px 40px;
  71       }
  72
  73       #testNoPseudoElement {
  74           color: brown;
  75           width: 100px;
  76           height: 100px;
  77       }
  78
  79       #testBeforeAfterDisplayNone {
  80           content: "and this should show nothing";
  81           display: none;
  82           width: 100px;
  83           height: 100px;
  84       }
  85
  86       #testBeforeAfterDisplayNone::after {
  87           content: "and this should show nothing";
  88           display: none;
  89           width: 100px;
  90           height: 100px;
  91       }
  92
  93       #testBeforeAfterDisplayNone::before {
  94           content: " and this should show nothing";
  95           display: none;
  96           width: 100px;
  97           height: 100px;
  98       }
  99
 100       #testHardwareAcceleratedCompositing {
 101           width: 100px;
 102           height: 100px;
 103           opacity: 1.0;
 104           background-color: green;
 105           -webkit-animation: move 300ms linear;
 106           -webkit-transform-style: preserve-3d;
 107           transform: trasnlate3d(10px, 0, 0);
 108       }
 109
 110      #testHardwareAcceleratedCompositing:before {
 111          content: "This should have lower opacity.";
 112          opacity: 0.5;
 113      }
 114
 115       @-webkit-keyframes move {
 116           from { transform: translate3d(10px, 0, 0); }
 117           to   { transform: translate3d(300px, 0, 0); }
 118       }
 119
 120       .pass {
 121           color: green;
 122       }
 123
 124       .fail {
 125           color: red;
 126       }
 127
 128     </style>
 129     <script type="text/javascript">
 130       if (window.testRunner)
 131           testRunner.dumpAsText();
 132
 133       var tests = [
 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' }
 186       ];
 187
 188       function setupAndRunTests()
 189       {
 190         if (window.testRunner)
 191             testRunner.waitUntilDone();
 192
 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);
 195       }
 196
 197       function runTests()
 198       {
 199         var resultsElement = document.getElementById('results');
 200
 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 + "'";
 209           else
 210               msg.innerHTML = "<span class='fail'>FAIL</span>" + mainMessage + " but instead got '" + value + "'";
 211           resultsElement.appendChild(msg);
 212         });
 213
 214         if (window.testRunner)
 215             testRunner.notifyDone();
 216       }
 217     </script>
 218   </head>
 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>
 221     <br />
 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>
 223     <br />
 224     <div id="testBeforeAfter">Middle</div>
 225     <br />
 226     <div id="testBeforeAfterTable">div with :before and :after display:table</div>
 227     <br />
 228     <div id="testBeforeAfterInline">div with :before and :after display:inline</div>
 229     <br />
 230     <div id="testBeforeAfterDisplayNone">div with :before and :after display:none</div>
 231     <br />
 232     <div id="testNoPseudoElement">There are no pseudo elements defined on this div.</div>
 233     <br />
 234     <div id="testHardwareAcceleratedCompositing">This should be at full opacity.</div>
 235     <br />
 236     <div id="results"></div>
 237   </body>
 238 </html>