<!DOCTYPE html>
<html>
  <head>
    <title>Test for WebKit bug 24021: pseudo-element styles not accessible / retrievable via DOM methods</title>
    <style type="text/css">
      #testFirsts:first-line {
          color: brown;
      }

      #testFirsts:first-letter {
          color: blue;
      }

      #testBeforeAfter::before {
          content: "This should be brown ";
          color: brown;
          display: block;
          width: 350px;
          height: 250px;
          margin: 10px 20px 30px 40px;
          outline: black dotted thin;
          overflow: hidden;
      }

      #testBeforeAfter::after {
          content: " and this should be blue";
          color: blue;
          display: block;
          width: 300px;
          height: 200px;
          padding: 10px 20px 30px 40px;
          outline: red solid thick;
      }

      #testBeforeAfterTable::before {
          content: "This should be brown ";
          color: brown;
          display: table;
          width: 350px;
          height: 250px;
          margin: 10px 20px 30px 40px;
          border: 5px solid red;
      }

      #testBeforeAfterTable::after {
          content: " and this should be blue";
          color: blue;
          display: table;
          width: 300px;
          height: 200px;
          padding: 10px 20px 30px 40px;
          border: 10px dotted blue;
      }

      #testBeforeAfterInline::before {
          content: "This should be brown ";
          color: brown;
          display: inline;
          width: 350px;
          height: 250px;
          margin: 10px 20px 30px 40px;
      }

      #testBeforeAfterInline::after {
          content: " and this should be blue";
          color: blue;
          display: inline;
          width: 300px;
          height: 200px;
          padding: 10px 20px 30px 40px;
      }

      #testNoPseudoElement {
          color: brown;
          width: 100px;
          height: 100px;
      }

      #testBeforeAfterDisplayNone {
          content: "and this should show nothing";
          display: none;
          width: 100px;
          height: 100px;
      }

      #testBeforeAfterDisplayNone::after {
          content: "and this should show nothing";
          display: none;
          width: 100px;
          height: 100px;
      }

      #testBeforeAfterDisplayNone::before {
          content: " and this should show nothing";
          display: none;
          width: 100px;
          height: 100px;
      }

      #testHardwareAcceleratedCompositing {
          width: 100px;
          height: 100px;
          opacity: 1.0;
          background-color: green;
          animation: move 300ms linear;
          transform-style: preserve-3d;
          transform: trasnlate3d(10px, 0, 0);
      }

     #testHardwareAcceleratedCompositing:before {
         content: "This should have lower opacity.";
         opacity: 0.5;
     }

      @keyframes move {
          from { transform: translate3d(10px, 0, 0); }
          to   { transform: translate3d(300px, 0, 0); }
      }

      .pass {
          color: green;
      }

      .fail {
          color: red;
      }

    </style>
    <script type="text/javascript">
      if (window.testRunner)
          testRunner.dumpAsText();

      var tests = [
        { 'elementId' : 'testFirsts', 'pseudoElement' : ':first-line', 'property' : 'color', 'expectedValue' : 'rgb(165, 42, 42)' },
        { 'elementId' : 'testFirsts', 'pseudoElement' : ':first-letter', 'property' : 'color', 'expectedValue' : 'rgb(0, 0, 255)' },
        { 'elementId' : 'testFirsts', 'pseudoElement' : '::first-letter', 'property' : 'color', 'expectedValue' : 'rgb(0, 0, 255)' },
        { 'elementId' : 'testFirsts', 'pseudoElement' : 'first-letter', 'property' : 'color', 'expectedValue' : 'rgb(0, 0, 255)' },
        { 'elementId' : 'testFirsts', 'pseudoElement' : null, 'property' : 'color', 'expectedValue' : 'rgb(0, 0, 0)' },
        { 'elementId' : 'testBeforeAfter', 'pseudoElement' : ':before', 'property' : 'color', 'expectedValue' : 'rgb(165, 42, 42)' },
        { 'elementId' : 'testBeforeAfter', 'pseudoElement' : ':after', 'property' : 'color', 'expectedValue' : 'rgb(0, 0, 255)' },
        { 'elementId' : 'testBeforeAfter', 'pseudoElement' : ':before', 'property' : 'outline', 'expectedValue' : 'rgb(0, 0, 0) dotted 1px' },
        { 'elementId' : 'testBeforeAfter', 'pseudoElement' : ':after', 'property' : 'outline', 'expectedValue' : 'rgb(255, 0, 0) solid 5px' },
        { 'elementId' : 'testBeforeAfter', 'pseudoElement' : ':before', 'property' : 'overflow', 'expectedValue' : 'hidden' },
        { 'elementId' : 'testBeforeAfter', 'pseudoElement' : ':after', 'property' : 'overflow', 'expectedValue' : 'visible' },
        { 'elementId' : 'testBeforeAfter', 'pseudoElement' : ':before', 'property' : 'height', 'expectedValue' : '250px' },
        { 'elementId' : 'testBeforeAfter', 'pseudoElement' : ':before', 'property' : 'width', 'expectedValue' : '350px' },
        { 'elementId' : 'testBeforeAfter', 'pseudoElement' : ':after', 'property' : 'height', 'expectedValue' : '200px' },
        { 'elementId' : 'testBeforeAfter', 'pseudoElement' : ':after', 'property' : 'width', 'expectedValue' : '300px' },
        { 'elementId' : 'testBeforeAfter', 'pseudoElement' : ':before', 'property' : 'margin', 'expectedValue' : '10px 20px 30px 40px' },
        { 'elementId' : 'testBeforeAfter', 'pseudoElement' : ':before', 'property' : 'padding', 'expectedValue' : '0px' },
        { 'elementId' : 'testBeforeAfter', 'pseudoElement' : ':after', 'property' : 'margin', 'expectedValue' : '0px' },
        { 'elementId' : 'testBeforeAfter', 'pseudoElement' : ':after', 'property' : 'padding', 'expectedValue' : '10px 20px 30px 40px' },
        { 'elementId' : 'testBeforeAfterTable', 'pseudoElement' : ':before', 'property' : 'height', 'expectedValue' : '250px' },
        { 'elementId' : 'testBeforeAfterTable', 'pseudoElement' : ':before', 'property' : 'width', 'expectedValue' : '350px' },
        { 'elementId' : 'testBeforeAfterTable', 'pseudoElement' : ':after', 'property' : 'height', 'expectedValue' : '200px' },
        { 'elementId' : 'testBeforeAfterTable', 'pseudoElement' : ':after', 'property' : 'width', 'expectedValue' : '300px' },
        { 'elementId' : 'testBeforeAfterTable', 'pseudoElement' : ':before', 'property' : 'margin', 'expectedValue' : '10px 20px 30px 40px' },
        { 'elementId' : 'testBeforeAfterTable', 'pseudoElement' : ':before', 'property' : 'padding', 'expectedValue' : '0px' },
        { 'elementId' : 'testBeforeAfterTable', 'pseudoElement' : ':after', 'property' : 'margin', 'expectedValue' : '0px' },
        { 'elementId' : 'testBeforeAfterTable', 'pseudoElement' : ':after', 'property' : 'padding', 'expectedValue' : '10px 20px 30px 40px' },
        { 'elementId' : 'testBeforeAfterTable', 'pseudoElement' : ':before', 'property' : 'border', 'expectedValue' : '5px solid rgb(255, 0, 0)' },
        { 'elementId' : 'testBeforeAfterTable', 'pseudoElement' : ':after', 'property' : 'border', 'expectedValue' : '10px dotted rgb(0, 0, 255)' },
        { 'elementId' : 'testBeforeAfterInline', 'pseudoElement' : ':before', 'property' : 'height', 'expectedValue' : '250px' },
        { 'elementId' : 'testBeforeAfterInline', 'pseudoElement' : ':before', 'property' : 'width', 'expectedValue' : '350px' },
        { 'elementId' : 'testBeforeAfterInline', 'pseudoElement' : ':after', 'property' : 'height', 'expectedValue' : '200px' },
        { 'elementId' : 'testBeforeAfterInline', 'pseudoElement' : ':after', 'property' : 'width', 'expectedValue' : '300px' },
        { 'elementId' : 'testBeforeAfterInline', 'pseudoElement' : ':before', 'property' : 'margin', 'expectedValue' : '10px 20px 30px 40px' },
        { 'elementId' : 'testBeforeAfterInline', 'pseudoElement' : ':before', 'property' : 'padding', 'expectedValue' : '0px' },
        { 'elementId' : 'testBeforeAfterInline', 'pseudoElement' : ':after', 'property' : 'margin', 'expectedValue' : '0px' },
        { 'elementId' : 'testBeforeAfterInline', 'pseudoElement' : ':after', 'property' : 'padding', 'expectedValue' : '10px 20px 30px 40px' },
        { 'elementId' : 'testBeforeAfterDisplayNone', 'pseudoElement' : ':after', 'property' : 'width', 'expectedValue' : '100px' },
        { 'elementId' : 'testBeforeAfterDisplayNone', 'pseudoElement' : ':after', 'property' : 'height', 'expectedValue' : '100px' },
        { 'elementId' : 'testBeforeAfterDisplayNone', 'pseudoElement' : ':before', 'property' : 'width', 'expectedValue' : '100px' },
        { 'elementId' : 'testBeforeAfterDisplayNone', 'pseudoElement' : ':before', 'property' : 'height', 'expectedValue' : '100px' },
        { 'elementId' : 'testNoPseudoElement', 'pseudoElement' : null, 'property' : 'color', 'expectedValue' : 'rgb(165, 42, 42)' },
        { 'elementId' : 'testNoPseudoElement', 'pseudoElement' : ':first-line', 'property' : 'color', 'expectedValue' : 'rgb(165, 42, 42)' },
        { 'elementId' : 'testNoPseudoElement', 'pseudoElement' : ':first-letter', 'property' : 'color', 'expectedValue' : 'rgb(165, 42, 42)' },
        { 'elementId' : 'testNoPseudoElement', 'pseudoElement' : ':before', 'property' : 'color', 'expectedValue' : 'rgb(165, 42, 42)' },
        { 'elementId' : 'testNoPseudoElement', 'pseudoElement' : ':after', 'property' : 'color', 'expectedValue' : 'rgb(165, 42, 42)' },
        { 'elementId' : 'testNoPseudoElement', 'pseudoElement' : ':garbage', 'property' : 'color', 'expectedValue' : 'rgb(165, 42, 42)' },
        { 'elementId' : 'testNoPseudoElement', 'pseudoElement' : null, 'property' : 'height', 'expectedValue' : '100px' },
        { 'elementId' : 'testNoPseudoElement', 'pseudoElement' : null, 'property' : 'width', 'expectedValue' : '100px' },
        { 'elementId' : 'testNoPseudoElement', 'pseudoElement' : ':after', 'property' : 'height', 'expectedValue' : 'auto' },
        { 'elementId' : 'testNoPseudoElement', 'pseudoElement' : ':after', 'property' : 'width', 'expectedValue' : 'auto' },
        { 'elementId' : 'testHardwareAcceleratedCompositing', 'pseudoElement' : ':before', 'property' : 'opacity', 'expectedValue' : '0.5' }
      ];

      function setupAndRunTests()
      {
        if (window.testRunner)
            testRunner.waitUntilDone();

        // FIXME: It is currently necessary to run the animation at least once before querying for the style on the pseudo-element will work.
        document.getElementById("testHardwareAcceleratedCompositing").addEventListener('animationend', runTests, false);
      }

      function runTests()
      {
        var resultsElement = document.getElementById('results');

        tests.forEach(function(curTest) {
          var computedStyle = window.getComputedStyle(document.getElementById(curTest.elementId), curTest.pseudoElement);
          var value = computedStyle[curTest.property];
          var msg = document.createElement('div');
          var mainMessage = " Expected '" + curTest.expectedValue + "' for " + curTest.property +
              " in the computed style for element with id " + curTest.elementId + " and pseudo-element " + curTest.pseudoElement;
          if (value == curTest.expectedValue)
              msg.innerHTML = "<span class='pass'>PASS</span>" + mainMessage + " and got '" + value + "'";
          else
              msg.innerHTML = "<span class='fail'>FAIL</span>" + mainMessage + " but instead got '" + value + "'";
          resultsElement.appendChild(msg);
        });

        if (window.testRunner)
            testRunner.notifyDone();
      }
    </script>
  </head>
  <body onload="setupAndRunTests();">
    <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>
    <br />
    <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>
    <br />
    <div id="testBeforeAfter">Middle</div>
    <br />
    <div id="testBeforeAfterTable">div with :before and :after display:table</div>
    <br />
    <div id="testBeforeAfterInline">div with :before and :after display:inline</div>
    <br />
    <div id="testBeforeAfterDisplayNone">div with :before and :after display:none</div>
    <br />
    <div id="testNoPseudoElement">There are no pseudo elements defined on this div.</div>
    <br />
    <div id="testHardwareAcceleratedCompositing">This should be at full opacity.</div>
    <br />
    <div id="results"></div>
  </body>
</html>