Bug 57505 - getComputedStyle fails for 'first-line' pseudo-element
Summary: getComputedStyle fails for 'first-line' pseudo-element
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: New Bugs (show other bugs)
Version: 528+ (Nightly build)
Hardware: Mac (Intel) OS X 10.6
: P2 Normal
Assignee: Alexis Menard (darktears)
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2011-03-30 14:25 PDT by felix
Modified: 2012-02-28 11:55 PST (History)
7 users (show)

See Also:


Attachments
a.html (244 bytes, text/html)
2011-03-30 14:25 PDT, felix
no flags Details
Patch (6.07 KB, patch)
2012-02-28 03:05 PST, Alexis Menard (darktears)
no flags Details | Formatted Diff | Diff
Patch for landing (7.04 KB, patch)
2012-02-28 11:11 PST, Alexis Menard (darktears)
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description felix 2011-03-30 14:25:42 PDT
Created attachment 87615 [details]
a.html

the attached "a.html" prints the computed color of foo:first-char and foo:first-line.

I expect both to have the same value.

instead, getComputedStyle(foo, 'first-line') returns a style object where all the values are "".
Comment 1 Eli Grey (:sephr) 2011-11-24 21:21:33 PST
The second parameter to getComputedStyle in your testcase must include the colon. Also, it's :first-letter, not :first-char.
Comment 2 Eli Grey (:sephr) 2011-11-24 21:32:09 PST
It also appears that ::selection doesn't work either.
Comment 3 Eli Grey (:sephr) 2011-11-24 21:45:55 PST
Sorry to spam, but none of the ::-webkit-scrollbar stuff works either. This is essential for my dom2canvas webpage screenshot utility.
Comment 4 Alexis Menard (darktears) 2012-02-24 10:10:15 PST
<!doctype html>
<body>
<style>
p:first-letter { color: red }
</style>
<div id="test"></div>
<p id="foo">hello</p>
<script>
var foo = document.getElementById('foo');
var test = document.getElementById('test');
test.innerHTML = window.getComputedStyle(foo, ':first-letter').color
</script>
</body>

works perfectly. (r108516).
Comment 5 Antonio Gomes 2012-02-24 17:16:22 PST
(In reply to comment #4)
> <!doctype html>
> <body>
> <style>
> p:first-letter { color: red }
> </style>
> <div id="test"></div>
> <p id="foo">hello</p>
> <script>
> var foo = document.getElementById('foo');
> var test = document.getElementById('test');
> test.innerHTML = window.getComputedStyle(foo, ':first-letter').color
> </script>
> </body>
> 
> works perfectly. (r108516).

Quick question: ":first-letter" and ":first-line" are the same / work the same?
Comment 6 felix 2012-02-27 05:22:47 PST
Sorry for the typos in the a.html attachment.

Here's a better example.  This does what I expect in firefox, but not in safari or chrome:

<!doctype html>
<html>
<body>
<style>
 #a { color: red; }
 #b:first-letter { color: red; }
</style>
<p id="a">hello</p>
<p id="b">world</p>
<script>
  var a = document.getElementById('a');
  var b = document.getElementById('b');
  alert(window.getComputedStyle(a, ':first-letter').color + ':' +
        window.getComputedStyle(b, ':first-letter').color);
</script>
</body>
</html>

In firefox 11.0 it alerts 'rgb(255, 0, 0):rgb(255, 0, 0)'
In safari 5.1.3 it alerts ':rgb(255, 0, 0)'
Comment 7 Alexis Menard (darktears) 2012-02-28 03:05:16 PST
Created attachment 129221 [details]
Patch
Comment 8 Alexis Menard (darktears) 2012-02-28 03:08:21 PST
Comment on attachment 129221 [details]
Patch

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

> Source/WebCore/dom/Element.cpp:1671
> +        }

I will fix that later.
Comment 9 Tony Chang 2012-02-28 10:23:02 PST
Comment on attachment 129221 [details]
Patch

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

> Source/WebCore/ChangeLog:14
> +        No new tests : I updated the expectation of one.

Please name the test that you updated here.

> LayoutTests/fast/css/getComputedStyle/getComputedStyle-with-pseudo-element.html:70
> -        { 'elementId' : 'testNoPseudoElement', 'pseudoElement' : ':first-line', 'property' : 'color', 'expectedValue' : '' },
> +        { 'elementId' : 'testNoPseudoElement', 'pseudoElement' : ':first-line', 'property' : 'color', 'expectedValue' : 'rgb(165, 42, 42)' },

Can we add test cases for more pseudo styles?
Comment 10 Alexis Menard (darktears) 2012-02-28 11:11:46 PST
Created attachment 129295 [details]
Patch for landing
Comment 11 WebKit Review Bot 2012-02-28 11:55:54 PST
Comment on attachment 129295 [details]
Patch for landing

Clearing flags on attachment: 129295

Committed r109134: <http://trac.webkit.org/changeset/109134>
Comment 12 WebKit Review Bot 2012-02-28 11:55:59 PST
All reviewed patches have been landed.  Closing bug.