Setting textDecoration 'underline' in HTMLElement.style inserts "text-decoration-line: underline" to element’s style attribute
Reported by
and...@acusti.ca,
May 20 2016
|
|||||||||||
Issue description
Chrome Version : 50.0.2661.102 (Official Build) (64-bit)
URLs (if applicable) : Any
Other browsers tested:
Add OK or FAIL, along with the version, after other browsers where you
have tested this issue:
Safari: OK
Firefox: OK
What steps will reproduce the problem?
(1) Select a DOM node and set style.textDecoration to 'underline' (document.querySelector('span').style.textDecoration = 'underline')
(2) Inspect the actual rendered HTML for that DOM node and see it’s inline style attribute. It will have 'style="text-decoration-line:underline"'
What is the expected result?
The DOM node should render the shorthand property that was set, i.e. 'style="text-decoration:underline"'. This is how other browsers, including Firefox, which supports text-decoration-line, and Safari, which doesn’t, render the shorthand when set, and it is how Chrome 50.0.2661.102 handles it. Also, this is the behavior when setting other shorthand CSS properties on HTMLElement.style, like border.
What happens instead?
The DOM node will render "text-decoration-line:underline" into its style attribute.
Please provide any additional information below. Attach a screenshot if
possible.
I attached a screenshot. This bug is a result of the changes from issue 165462 .
,
May 23 2016
@andrew: Could you please provide us the sample file along with the screen-recording to repro this issue from our side, which would help us in triaging it further. Thank you.
,
May 23 2016
I attached an HTML file that will recreate the issue and a screen-recording where I try to illustrate the difference in the generated DOM between Chrome Canary (53.0.2745.0) and Chrome (50.0.2661.102).
,
May 24 2016
Thank you for providing more feedback. Adding requester "rnimmagadda@chromium.org" for another review and adding "Needs-Review" label for tracking. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
May 25 2016
Unable to reproduce the issue on win8.1 mac and linux chrome version 50.0.2661.102, 52.0.2740.0 and canary 53.0.2748.0 - style="text-decoration:underline" is displayed as expected Please find the screenshot Could you please try the same on a new profile and update the thread. If issue still exists please let us know the OS on which you are facing this issue.
,
May 25 2016
In Canary 53.0.2747.0, I get: <span style="text-decoration-line: underline; text-decoration-style: initial; text-decoration-color: initial;">text in a span</span> On Mac Os 10.11.4 (15E65)
,
May 25 2016
Just updated to 53.0.2748.0 and created a new profile (via “Add person…” under People in preferences). Again seeing the new behavior in which all of the properties set by the shorthand get rendered inline in the style attribute. Again, I’m on OS X El Capitan 10.11.4 (15E65) See attached screenshot for a view of what I see.
,
May 26 2016
Still no luck in reproducing this on Mac OS 10.11.5(Mac Book Air) on the latest canary(53.0.2749.0). Adding proper label for someone from the respective team to have a look at this.
,
May 26 2016
This is probably because of the "experimental web platform features" flag. text-decoration is not shipped as a shorthand yet, but turning the flag on enables it. Can you confirm if you only see the behaviour with the flag on? Fixing this should be easy, the StylePropertySerializer just needs to support the text-decoration shorthand.
,
May 26 2016
Thank you for providing more feedback. Adding requester "tkonchada@chromium.org" for another review and adding "Needs-Review" label for tracking. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
May 26 2016
Marking as available assuming the analysis in comment #10 is right, but if you could confirm whether you can only see this behavior with the "experimental web platform features" flag on that would be great :)
,
May 31 2016
Sorry for the extended silence. @timloh you are exactly correct, I only see the behavior with the “experimental web platform features” flag on. And your diagnosis sounds spot on (making StylePropertySerializer support the text-decoration shorthand). Thanks!
,
Jun 17 2016
,
Jun 17 2016
,
Oct 29 2016
data:text/html;charset=utf-8,%3Cp%20id%3D%22tu%22%3Eunderlined%3C%2Fp%3E%3Cscript%3Etu.style.textDecoration%20%3D%20%22underline%22%3B%3C%2Fscript%3E is a quick reproduction, only shows this behavior with the flag on. I'll try to add support in the StylePropertySerializer.
,
Nov 2 2016
,
Nov 14 2016
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/05bbe1b2538e2f9722f0e9881e70e24b7e264c63 commit 05bbe1b2538e2f9722f0e9881e70e24b7e264c63 Author: drott <drott@chromium.org> Date: Mon Nov 14 10:42:50 2016 Serialize the text-decoration shorthand The shorthand text-decoration should be accessible and correctly serialized on the computed style of an element. Without this implementation, the CSS code would default serialize those values only into the longhand forms. TEST=fast/css3-text/css3-text-decoration/text-decoration-shorthand.html BUG= 613451 Review-Url: https://codereview.chromium.org/2494963003 Cr-Commit-Position: refs/heads/master@{#431853} [modify] https://crrev.com/05bbe1b2538e2f9722f0e9881e70e24b7e264c63/third_party/WebKit/LayoutTests/editing/style/push-down-inline-styles-expected.txt [modify] https://crrev.com/05bbe1b2538e2f9722f0e9881e70e24b7e264c63/third_party/WebKit/LayoutTests/editing/style/script-tests/push-down-inline-styles.js [add] https://crrev.com/05bbe1b2538e2f9722f0e9881e70e24b7e264c63/third_party/WebKit/LayoutTests/fast/css3-text/css3-text-decoration/resources/text-decoration-shorthand.js [add] https://crrev.com/05bbe1b2538e2f9722f0e9881e70e24b7e264c63/third_party/WebKit/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-shorthand.html [modify] https://crrev.com/05bbe1b2538e2f9722f0e9881e70e24b7e264c63/third_party/WebKit/LayoutTests/inspector/console/console-format-style-whitelist-expected.txt [modify] https://crrev.com/05bbe1b2538e2f9722f0e9881e70e24b7e264c63/third_party/WebKit/Source/core/css/StylePropertySerializer.cpp
,
Nov 18 2016
,
Nov 18 2016
🎉 Yay! Just tried it out and it works a charm. |
|||||||||||
►
Sign in to add a comment |
|||||||||||
Comment 1 by and...@acusti.ca
, May 20 2016