Bug 37835

Summary: getComputedStyle returns incorrect values for the width and height of pseudo-elements
Product: WebKit Reporter: Jessie Berlin <jberlin>
Component: CSSAssignee: Jessie Berlin <jberlin>
Status: RESOLVED FIXED    
Severity: Normal CC: kling, koivisto, macpherson, menard, tony, webkit.review.bot
Priority: P2 Keywords: HasReduction
Version: 528+ (Nightly build)   
Hardware: PC   
OS: OS X 10.6   
Attachments:
Description Flags
Test case showing the width and height for the pseudo-element being reported as those of the element it is defined on.
none
Patch
none
Patch
none
Patch
none
Patch none

Description Jessie Berlin 2010-04-19 18:12:48 PDT
Created attachment 53754 [details]
Test case showing the width and height for the pseudo-element being reported as those of the element it is defined on.

getComputedStyle incorrectly returns the width and height values of the element on which the pseudo-element is defined instead of the values for the pseudo element. This is the same incorrect behavior as exhibited in Firefox 3.6.
Comment 1 Alexis Menard (darktears) 2012-03-06 06:40:09 PST
Created attachment 130372 [details]
Patch
Comment 2 Tony Chang 2012-03-06 10:26:24 PST
Comment on attachment 130372 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=130372&action=review

This doesn't look right. E.g., I think you would get the wrong value if width/height is auto or if min/max width changes the size.  We need to get the right RenderObject and ask it for the right size.

Does this work properly in IE?

> Source/WebCore/ChangeLog:12
> +        No new tests : Extend the existing one for pseudo-elements.

Nit: It's nice to name the test in the ChangeLog.
Comment 3 Alexis Menard (darktears) 2012-03-06 12:17:39 PST
Created attachment 130427 [details]
Patch
Comment 4 Alexis Menard (darktears) 2012-03-06 12:30:29 PST
(In reply to comment #2)
> (From update of attachment 130372 [details])
> View in context: https://bugs.webkit.org/attachment.cgi?id=130372&action=review
> 
> This doesn't look right. E.g., I think you would get the wrong value if width/height is auto or if min/max width changes the size.  We need to get the right RenderObject and ask it for the right size.
> 
> Does this work properly in IE?

I don't have IE but it works as it should in FF and Opera.

> 
> > Source/WebCore/ChangeLog:12
> > +        No new tests : Extend the existing one for pseudo-elements.
> 
> Nit: It's nice to name the test in the ChangeLog.
Comment 5 Tony Chang 2012-03-06 12:33:45 PST
Comment on attachment 130427 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=130427&action=review

We need more tests for this.  Changing the renderer pointer impacts more than just width and height, we should test as many values as possible.

Also, you should add tests without display:block and with auto sizing.

> Source/WebCore/css/CSSComputedStyleDeclaration.cpp:1344
> +    if (m_pseudoElementSpecifier == AFTER)
> +        renderer = renderer->afterPseudoElementRenderer();
> +
> +    if (m_pseudoElementSpecifier == BEFORE)

else if since we can't be both AFTER and BEFORE.
Comment 6 Alexis Menard (darktears) 2012-03-06 14:48:29 PST
Created attachment 130446 [details]
Patch
Comment 7 Tony Chang 2012-03-06 14:59:40 PST
Comment on attachment 130446 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=130446&action=review

> Source/WebCore/css/CSSComputedStyleDeclaration.cpp:1344
> +    if (m_pseudoElementSpecifier == AFTER)
> +        renderer = renderer->afterPseudoElementRenderer();
> +    else if (m_pseudoElementSpecifier == BEFORE)
> +        renderer = renderer->beforePseudoElementRenderer();

Is it possible for renderer to be NULL?  E.g., if the node is display: none.  Can you add a test for this case?

> LayoutTests/fast/css/getComputedStyle/getComputedStyle-with-pseudo-element.html:55
> +      #testBeforeAfterTable::before {

Did you mean to have 2 #testBeforeAfterTable::before sections?

> LayoutTests/fast/css/getComputedStyle/getComputedStyle-with-pseudo-element.html:64
> +      #testBeforeAfterTable::after {

Did you mean to have 2 #testBeforeAfterTable::after sections?

> LayoutTests/fast/css/getComputedStyle/getComputedStyle-with-pseudo-element.html:163
> +        { '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' },

These should return the computed value, right?  Maybe just add a FIXME here so we know that we don't actually want to return auto.  It would also be OK for the test to output FAIL.
Comment 8 Tony Chang 2012-03-06 15:01:19 PST
Comment on attachment 130446 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=130446&action=review

>> LayoutTests/fast/css/getComputedStyle/getComputedStyle-with-pseudo-element.html:163
>> +        { 'elementId' : 'testBeforeAfterInline', 'pseudoElement' : ':after', 'property' : 'width', 'expectedValue' : 'auto' },
> 
> These should return the computed value, right?  Maybe just add a FIXME here so we know that we don't actually want to return auto.  It would also be OK for the test to output FAIL.

Oh, nevermind, we always return auto on inline blocks.  This looks correct.
Comment 9 Alexis Menard (darktears) 2012-03-06 15:28:38 PST
Created attachment 130453 [details]
Patch
Comment 10 WebKit Review Bot 2012-03-06 15:52:45 PST
Comment on attachment 130453 [details]
Patch

Clearing flags on attachment: 130453

Committed r109968: <http://trac.webkit.org/changeset/109968>
Comment 11 WebKit Review Bot 2012-03-06 15:52:51 PST
All reviewed patches have been landed.  Closing bug.