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:

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@109968 268f45cc-cd09-0410-ab3c-d52691b4dbfc

diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
index 545f183..46fee22 100644 (file)
--- 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
index aec54e6..33f4d5f 100644 (file)
--- 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
index 60412b9..34db75f 100644 (file)
--- 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 @@
     <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
index 256e16d..ec382f9 100644 (file)
--- 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
index 4313021..6c497f6 100644 (file)
--- 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());