getComputedStyle returns incorrect values for the width and height of…

… pseudo-elements https://bugs.webkit.org/show_bug.cgi?id=37835 Reviewed by Tony Chang. Source/WebCore: In case we are querying the computed style of an element with a pseudo-element we can't use the renderer of the element as this one is not the one used to render the pseudo-element. We need to use the one created to render the pseudo-element. No new tests : Extend the existing getComputedStyle-with-pseudo-element. * css/CSSComputedStyleDeclaration.cpp: (WebCore::CSSComputedStyleDeclaration::getPropertyCSSValue): LayoutTests: Extend existing test to cover the bug. * fast/css/getComputedStyle/getComputedStyle-with-pseudo-element-expected.txt: * fast/css/getComputedStyle/getComputedStyle-with-pseudo-element.html: Canonical link: https://commits.webkit.org/97599@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@109968 268f45cc-cd09-0410-ab3c-d52691b4dbfc
WebKit · Mar 6, 2012 · 50c254c · 50c254c
1 parent 9156cd6
commit 50c254c
Show file tree

Hide file tree

Showing 5 changed files with 194 additions and 0 deletions.
diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
@@ -1,3 +1,15 @@
+2012-03-06  Alexis Menard  <alexis.menard@openbossa.org>
+
+        getComputedStyle returns incorrect values for the width and height of pseudo-elements
+        https://bugs.webkit.org/show_bug.cgi?id=37835
+
+        Reviewed by Tony Chang.
+
+        Extend existing test to cover the bug.
+
+        * fast/css/getComputedStyle/getComputedStyle-with-pseudo-element-expected.txt:
+        * fast/css/getComputedStyle/getComputedStyle-with-pseudo-element.html:
+
 2012-03-06  Dimitri Glazkov  <dglazkov@chromium.org>
 
         REGRESSION(r109191): Shadow DOM tests stopped running on ports that do not have SHADOW_DOM flag enabled.

diff --git a/LayoutTests/fast/css/getComputedStyle/getComputedStyle-with-pseudo-element-expected.txt b/LayoutTests/fast/css/getComputedStyle/getComputedStyle-with-pseudo-element-expected.txt
@@ -5,6 +5,11 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
 
 Middle
 
+div with :before and :after display:table
+
+div with :before and :after display:inline
+
+
 There are no pseudo elements defined on this div.
 
 This should be at full opacity.
@@ -16,10 +21,48 @@ PASS Expected 'rgb(0, 0, 255)' for color in the computed style for element with
 PASS Expected 'rgb(0, 0, 0)' for color in the computed style for element with id testFirsts and pseudo-element null and got 'rgb(0, 0, 0)'
 PASS Expected 'rgb(165, 42, 42)' for color in the computed style for element with id testBeforeAfter and pseudo-element :before and got 'rgb(165, 42, 42)'
 PASS Expected 'rgb(0, 0, 255)' for color in the computed style for element with id testBeforeAfter and pseudo-element :after and got 'rgb(0, 0, 255)'
+PASS Expected 'rgb(0, 0, 0) dotted 1px' for outline in the computed style for element with id testBeforeAfter and pseudo-element :before and got 'rgb(0, 0, 0) dotted 1px'
+PASS Expected 'rgb(255, 0, 0) solid 5px' for outline in the computed style for element with id testBeforeAfter and pseudo-element :after and got 'rgb(255, 0, 0) solid 5px'
+PASS Expected 'hidden' for overflow in the computed style for element with id testBeforeAfter and pseudo-element :before and got 'hidden'
+PASS Expected 'visible' for overflow in the computed style for element with id testBeforeAfter and pseudo-element :after and got 'visible'
+PASS Expected '250px' for height in the computed style for element with id testBeforeAfter and pseudo-element :before and got '250px'
+PASS Expected '350px' for width in the computed style for element with id testBeforeAfter and pseudo-element :before and got '350px'
+PASS Expected '200px' for height in the computed style for element with id testBeforeAfter and pseudo-element :after and got '200px'
+PASS Expected '300px' for width in the computed style for element with id testBeforeAfter and pseudo-element :after and got '300px'
+PASS Expected '10px 20px 30px 40px' for margin in the computed style for element with id testBeforeAfter and pseudo-element :before and got '10px 20px 30px 40px'
+PASS Expected '0px' for padding in the computed style for element with id testBeforeAfter and pseudo-element :before and got '0px'
+PASS Expected '0px' for margin in the computed style for element with id testBeforeAfter and pseudo-element :after and got '0px'
+PASS Expected '10px 20px 30px 40px' for padding in the computed style for element with id testBeforeAfter and pseudo-element :after and got '10px 20px 30px 40px'
+PASS Expected '250px' for height in the computed style for element with id testBeforeAfterTable and pseudo-element :before and got '250px'
+PASS Expected '350px' for width in the computed style for element with id testBeforeAfterTable and pseudo-element :before and got '350px'
+PASS Expected '200px' for height in the computed style for element with id testBeforeAfterTable and pseudo-element :after and got '200px'
+PASS Expected '300px' for width in the computed style for element with id testBeforeAfterTable and pseudo-element :after and got '300px'
+PASS Expected '10px 20px 30px 40px' for margin in the computed style for element with id testBeforeAfterTable and pseudo-element :before and got '10px 20px 30px 40px'
+PASS Expected '0px' for padding in the computed style for element with id testBeforeAfterTable and pseudo-element :before and got '0px'
+PASS Expected '0px' for margin in the computed style for element with id testBeforeAfterTable and pseudo-element :after and got '0px'
+PASS Expected '10px 20px 30px 40px' for padding in the computed style for element with id testBeforeAfterTable and pseudo-element :after and got '10px 20px 30px 40px'
+PASS Expected '5px solid rgb(255, 0, 0)' for border in the computed style for element with id testBeforeAfterTable and pseudo-element :before and got '5px solid rgb(255, 0, 0)'
+PASS Expected '10px dotted rgb(0, 0, 255)' for border in the computed style for element with id testBeforeAfterTable and pseudo-element :after and got '10px dotted rgb(0, 0, 255)'
+PASS Expected 'auto' for height in the computed style for element with id testBeforeAfterInline and pseudo-element :before and got 'auto'
+PASS Expected 'auto' for width in the computed style for element with id testBeforeAfterInline and pseudo-element :before and got 'auto'
+PASS Expected 'auto' for height in the computed style for element with id testBeforeAfterInline and pseudo-element :after and got 'auto'
+PASS Expected 'auto' for width in the computed style for element with id testBeforeAfterInline and pseudo-element :after and got 'auto'
+PASS Expected '10px 20px 30px 40px' for margin in the computed style for element with id testBeforeAfterInline and pseudo-element :before and got '10px 20px 30px 40px'
+PASS Expected '0px' for padding in the computed style for element with id testBeforeAfterInline and pseudo-element :before and got '0px'
+PASS Expected '0px' for margin in the computed style for element with id testBeforeAfterInline and pseudo-element :after and got '0px'
+PASS Expected '10px 20px 30px 40px' for padding in the computed style for element with id testBeforeAfterInline and pseudo-element :after and got '10px 20px 30px 40px'
+PASS Expected '' for width in the computed style for element with id testBeforeAfterDisplayNone and pseudo-element :after and got ''
+PASS Expected '' for height in the computed style for element with id testBeforeAfterDisplayNone and pseudo-element :after and got ''
+PASS Expected '' for width in the computed style for element with id testBeforeAfterDisplayNone and pseudo-element :before and got ''
+PASS Expected '' for height in the computed style for element with id testBeforeAfterDisplayNone and pseudo-element :before and got ''
 PASS Expected 'rgb(165, 42, 42)' for color in the computed style for element with id testNoPseudoElement and pseudo-element null and got 'rgb(165, 42, 42)'
 PASS Expected 'rgb(165, 42, 42)' for color in the computed style for element with id testNoPseudoElement and pseudo-element :first-line and got 'rgb(165, 42, 42)'
 PASS Expected 'rgb(165, 42, 42)' for color in the computed style for element with id testNoPseudoElement and pseudo-element :first-letter and got 'rgb(165, 42, 42)'
 PASS Expected 'rgb(165, 42, 42)' for color in the computed style for element with id testNoPseudoElement and pseudo-element :before and got 'rgb(165, 42, 42)'
 PASS Expected 'rgb(165, 42, 42)' for color in the computed style for element with id testNoPseudoElement and pseudo-element :after and got 'rgb(165, 42, 42)'
 PASS Expected 'rgb(165, 42, 42)' for color in the computed style for element with id testNoPseudoElement and pseudo-element :garbage and got 'rgb(165, 42, 42)'
+PASS Expected '100px' for height in the computed style for element with id testNoPseudoElement and pseudo-element null and got '100px'
+PASS Expected '100px' for width in the computed style for element with id testNoPseudoElement and pseudo-element null and got '100px'
+PASS Expected '100px' for height in the computed style for element with id testNoPseudoElement and pseudo-element :after and got '100px'
+PASS Expected '100px' for width in the computed style for element with id testNoPseudoElement and pseudo-element :after and got '100px'
 PASS Expected '0.5' for opacity in the computed style for element with id testHardwareAcceleratedCompositing and pseudo-element :before and got '0.5'
diff --git a/LayoutTests/fast/css/getComputedStyle/getComputedStyle-with-pseudo-element.html b/LayoutTests/fast/css/getComputedStyle/getComputedStyle-with-pseudo-element.html
@@ -14,15 +14,87 @@
       #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 {
@@ -66,12 +138,50 @@
         { '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' : 'auto' },
+        { 'elementId' : 'testBeforeAfterInline', 'pseudoElement' : ':before', 'property' : 'width', 'expectedValue' : 'auto' },
+        { 'elementId' : 'testBeforeAfterInline', 'pseudoElement' : ':after', 'property' : 'height', 'expectedValue' : 'auto' },
+        { 'elementId' : 'testBeforeAfterInline', 'pseudoElement' : ':after', 'property' : 'width', 'expectedValue' : 'auto' },
+        { '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' : '' },
+        { 'elementId' : 'testBeforeAfterDisplayNone', 'pseudoElement' : ':after', 'property' : 'height', 'expectedValue' : '' },
+        { 'elementId' : 'testBeforeAfterDisplayNone', 'pseudoElement' : ':before', 'property' : 'width', 'expectedValue' : '' },
+        { 'elementId' : 'testBeforeAfterDisplayNone', 'pseudoElement' : ':before', 'property' : 'height', 'expectedValue' : '' },
         { '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' : '100px' },
+        { 'elementId' : 'testNoPseudoElement', 'pseudoElement' : ':after', 'property' : 'width', 'expectedValue' : '100px' },
         { 'elementId' : 'testHardwareAcceleratedCompositing', 'pseudoElement' : ':before', 'property' : 'opacity', 'expectedValue' : '0.5' }
       ];
 
@@ -113,6 +223,12 @@ <h3>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=24021">WebKit bug
     <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>

diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
@@ -1,3 +1,19 @@
+2012-03-06  Alexis Menard  <alexis.menard@openbossa.org>
+
+        getComputedStyle returns incorrect values for the width and height of pseudo-elements
+        https://bugs.webkit.org/show_bug.cgi?id=37835
+
+        Reviewed by Tony Chang.
+
+        In case we are querying the computed style of an element with a pseudo-element we can't use
+        the renderer of the element as this one is not the one used to render the pseudo-element. We need
+        to use the one created to render the pseudo-element.
+
+        No new tests : Extend the existing getComputedStyle-with-pseudo-element.
+
+        * css/CSSComputedStyleDeclaration.cpp:
+        (WebCore::CSSComputedStyleDeclaration::getPropertyCSSValue):
+
 2012-03-06  Shawn Singh  <shawnsingh@chromium.org>
 
         [chromium] Make compositeAndReadback and damage tracking play nicely together

diff --git a/Source/WebCore/css/CSSComputedStyleDeclaration.cpp b/Source/WebCore/css/CSSComputedStyleDeclaration.cpp
@@ -1341,6 +1341,13 @@ PassRefPtr<CSSValue> CSSComputedStyleDeclaration::getPropertyCSSValue(int proper
     if (!style)
         return 0;
 
+    if (renderer) {
+        if (m_pseudoElementSpecifier == AFTER)
+            renderer = renderer->afterPseudoElementRenderer();
+        else if (m_pseudoElementSpecifier == BEFORE)
+            renderer = renderer->beforePseudoElementRenderer();
+    }
+
     CSSValuePool* cssValuePool = node->document()->cssValuePool().get();
 
     propertyID = CSSProperty::resolveDirectionAwareProperty(propertyID, style->direction(), style->writingMode());