[webkit-changes] [109968] trunk

Tue, 06 Mar 2012 15:52:40 -0800

Title: [109968] trunk
Revision
109968
Author
[email protected]
Date
2012-03-06 15:52:29 -0800 (Tue, 06 Mar 2012)

Log Message

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:

Modified Paths

Diff

Modified: trunk/LayoutTests/ChangeLog (109967 => 109968)


--- trunk/LayoutTests/ChangeLog	2012-03-06 23:50:15 UTC (rev 109967)
+++ trunk/LayoutTests/ChangeLog	2012-03-06 23:52:29 UTC (rev 109968)
@@ -1,3 +1,15 @@
+2012-03-06  Alexis Menard  <[email protected]>
+
+        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  <[email protected]>
 
         REGRESSION(r109191): Shadow DOM tests stopped running on ports that do not have SHADOW_DOM flag enabled.

Modified: trunk/LayoutTests/fast/css/getComputedStyle/getComputedStyle-with-pseudo-element-expected.txt (109967 => 109968)


--- trunk/LayoutTests/fast/css/getComputedStyle/getComputedStyle-with-pseudo-element-expected.txt	2012-03-06 23:50:15 UTC (rev 109967)
+++ trunk/LayoutTests/fast/css/getComputedStyle/getComputedStyle-with-pseudo-element-expected.txt	2012-03-06 23:52:29 UTC (rev 109968)
@@ -5,6 +5,11 @@
 
 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, 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'

Modified: trunk/LayoutTests/fast/css/getComputedStyle/getComputedStyle-with-pseudo-element.html (109967 => 109968)


--- trunk/LayoutTests/fast/css/getComputedStyle/getComputedStyle-with-pseudo-element.html	2012-03-06 23:50:15 UTC (rev 109967)
+++ trunk/LayoutTests/fast/css/getComputedStyle/getComputedStyle-with-pseudo-element.html	2012-03-06 23:52:29 UTC (rev 109968)
@@ -14,17 +14,89 @@
       #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;
@@ -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>

Modified: trunk/Source/WebCore/ChangeLog (109967 => 109968)


--- trunk/Source/WebCore/ChangeLog	2012-03-06 23:50:15 UTC (rev 109967)
+++ trunk/Source/WebCore/ChangeLog	2012-03-06 23:52:29 UTC (rev 109968)
@@ -1,3 +1,19 @@
+2012-03-06  Alexis Menard  <[email protected]>
+
+        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  <[email protected]>
 
         [chromium] Make compositeAndReadback and damage tracking play nicely together

Modified: trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp (109967 => 109968)


--- trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp	2012-03-06 23:50:15 UTC (rev 109967)
+++ trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp	2012-03-06 23:52:29 UTC (rev 109968)
@@ -1341,6 +1341,13 @@
     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());

_______________________________________________
webkit-changes mailing list
[email protected]
http://lists.webkit.org/mailman/listinfo.cgi/webkit-changes

Reply via email to