New issue
Advanced search Search tips
Starred by 17 users
Status: Duplicate
Merged: issue 165462
Owner: ----
Closed: Aug 2015
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 3
Type: Feature



Sign in to add a comment
text-decoration-style not working
Reported by than...@gmail.com, Apr 25 2014 Back to list
UserAgent: Opera/9.80 (Windows NT 6.1; WOW64) Presto/2.12.388 Version/12.16

Example URL:

Steps to reproduce the problem:
Make a webpage with an <abbr> element. and style it as follows:

abbr] { 
  text-decoration: underline;
  -moz-text-decoration-style: dotted; 
  -webkit-text-decoration-style: dotted; 
  text-decoration-style: dotted; 
}

What is the expected behavior?
Dotted underline

What went wrong?
Solid underline

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes 

Chrome version: 36.0.1957.0 canary  Channel: canary
OS Version: 6.1 (Windows 7)
Flash Version: Shockwave Flash 13.0 r0

In the inspector, text-decoration-style is listed as an existing property, but when typing any valid value for it (such as solid or dotted), it gets the !-sign left from it, to indicate it's an invalid property value.

This works absolutely fine in Firefox (which catches the -moz- version of course).

Multiple sites claim that Chrome has support for this property, so I can only assume something is broken or some other condition preventing this from working.
 
Comment 1 by than...@gmail.com, Apr 25 2014
Make that:

abbr { 
  text-decoration: underline;
  -moz-text-decoration-style: dotted; 
  -webkit-text-decoration-style: dotted; 
  text-decoration-style: dotted; 
}


(sorry, I can't find an edit button... seriously, where is it?)
Comment 2 by tkent@chromium.org, Apr 28 2014
Labels: -Cr-Content Cr-Blink-CSS
Comment 3 by than...@gmail.com, Apr 28 2014
Just for kicks, I tried applying these rules to absolutely every element, using the universal selector. Every element got a solid underline, instead of the expected dotted underline. So it's not just the abbr element that it doesn't work for.
Comment 4 by ande...@opera.com, Apr 28 2014
thany81: Support for CSS3 text decorations is currently experimental, and only works if you run Chrome with the --enable-experimental-web-platform-features flag.
Comment 5 by than...@gmail.com, Apr 28 2014
Without that flag, shouldn't the inspector *not* list the property as an available one?

Regardless, can we not enable this flag by default? It's not like it's a majorly significant feature that could break whole websites when enabled, is it?

Besides, it's a candidate recommendation already:
http://www.w3.org/TR/css-text-decor-3/
And Webkit has never let that be a limiting factor, even for more obscure features.
Comment 6 by ande...@opera.com, Apr 28 2014
> Without that flag, shouldn't the inspector *not* list the property as an available one?

Yes. This is mentioned in a previous issue. ( Issue 342126 ).

> Can we not enable this flag by default?

That flags enables *all* experimental features, so most certainly not. We can probably enable CSS3 text decorations soon, though, but there are some issues with style recalc and multiple decorations that should be resolved first.

> And Webkit has never let that be a limiting factor

Webkit devs have been quick to release prefixed versions of new APIs in the past, yes (if that's what you're referring to). However, we don't do that anymore. http://www.chromium.org/blink#vendor-prefixes


Project Member Comment 7 by bugdroid1@chromium.org, May 19 2014
The following revision refers to this bug:
  http://src.chromium.org/viewvc/blink?view=rev&rev=174269

------------------------------------------------------------------
r174269 | andersr@opera.com | 2014-05-19T12:05:39.222292Z

Changed paths:
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css3-text/css3-text-decoration/stable?r1=174269&r2=174268&pathrev=174269
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/virtual/stable/fast/css3-text/css3-text-decoration/stable?r1=174269&r2=174268&pathrev=174269
   M http://src.chromium.org/viewvc/blink/trunk/Tools/Scripts/webkitpy/layout_tests/port/base.py?r1=174269&r2=174268&pathrev=174269
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/virtual/stable/fast/css3-text?r1=174269&r2=174268&pathrev=174269
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css3-text/css3-text-decoration/stable/getComputedStyle-text-decoration-expected.txt?r1=174269&r2=174268&pathrev=174269
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/virtual/stable/fast/css3-text/css3-text-decoration/stable/getComputedStyle-text-decoration-expected.txt?r1=174269&r2=174268&pathrev=174269
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/virtual/stable/fast/css3-text/css3-text-decoration?r1=174269&r2=174268&pathrev=174269
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/virtual/stable/fast?r1=174269&r2=174268&pathrev=174269
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css3-text/css3-text-decoration/stable/getComputedStyle-text-decoration.html?r1=174269&r2=174268&pathrev=174269
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/CSSComputedStyleDeclaration.cpp?r1=174269&r2=174268&pathrev=174269

Don't pretend that text-decoration is a shorthand in computed style.

Even when the appropriate runtime flag isn't enabled, we still return
the shorthand version of the computed style for 'text-decoration'. For
example, for 'text-decoration: underline', we return the computed style
'underline solid rgb(0, 0, 0)', which is correct only when the runtime
flag is on.

BUG= 367091 , 342126 

Review URL: https://codereview.chromium.org/282303007
-----------------------------------------------------------------
Cc: ranjitkan@chromium.org
Labels: Needs-Feedback
Can we have a sample test case for this so that it can be verified and closed, if working fine.
Comment 9 by ksobolev...@box.com, Oct 22 2014
for instance: http://jsfiddle.net/e8138fvc/1/ should give a red wavy underline (compare to FF)
Comment 10 by than...@gmail.com, Oct 22 2014
Doesn't work on Chrome 38, not on Canary 40.
It does on Firefox 33.
Comment 11 by than...@gmail.com, Oct 22 2014
not->nor

(sorry, can't find an edit button)
Labels: -OS-Windows -Needs-Feedback OS-All
Status: Untriaged
Able to reproduce the issue on chrome version 38.0.2125.104, issue is a non regression as it exists from M21 - 21.0.1134.0 (Official Build 136496). Able to reproduce on all OS. Works fine on FF. Untriaging it so that it gets addressed.
Comment 13 by ande...@opera.com, Oct 22 2014
That fiddle looks invalid, it uses "wave" instead of "wavy".

text-decoration-style does work, but experimental features must be enabled.
my bad, updated fiddle: http://jsfiddle.net/e8138fvc/5/
In this case also, issue is reproducible on chrome version 38.0.2125.104 , Canary - 40.0.2196.0 and issue is seen from M21 - 21.0.1134.0 for Windows, MAC and Ubuntu. So keeping it in untriaged state.
Comment 16 by than...@gmail.com, Oct 23 2014
"text-decoration-style does work, but experimental features must be enabled."

So to a user, it doesn't work. An for a developer, using it is pointless, because noone will see it.

Updated fiddle also doesn't work. Neither in Chrome 38.0.2125.104 nor in Canary 40.0.2196.0. Still fine on Firefox 33.
Is CSS3 still considered "experimental"? When will it go "live" in Chromium?
Comment 18 by than...@gmail.com, Apr 3 2015
> Is CSS3 still considered "experimental"

Depends on the module you're referring to ;)
But, since CSS4 is already in the making, I think we can consider most of CSS3 to be reasonably solidified.
Labels: -Type-Bug Type-Feature
There are still some outstanding issues which we'd need to resolve before we can consider shipping this feature, and i'm not sure if anyone is actively working on these.
I think I understand.  There just may not be enough demand for these features for developers to implement them, despite them being part of the CSS3 spec. 
Comment 21 by than...@gmail.com, Apr 7 2015
@19 That never kept Google (and by extension, Chromium) from enabling such features, albeit prefixed.
Owner: loyso@chromium.org
Labels: -Pri-2 Pri-3
Owner: ----
Status: Available
Comment 24 Deleted
Comment 25 Deleted
Comment 26 by pdr@chromium.org, Jun 7 2015
Blockedon: chromium:165462
It looks like progress on this stopped right before shipping. I've cc'ed some folks on https://code.google.com/p/chromium/issues/detail?id=165462#c18 to find out what the status of css3 text decorations is.

@patrick.andries, the code is written but you have to enable "experimental web platform features" in about://flags to use it.
"@patrick.andries, the code is written but you have to enable "experimental web platform features" in about://flags to use it."

Ah, still. So useless for me. Thanks.
Comment 28 by than...@gmail.com, Jun 17 2015
Why is this feature behind a flag in the first place? As long as it doesn't work for the general public, no web developer will use it. If it's prefixed, some will use it and will (should) test well against their targets.

I seriously don't see how it could harm by simply having this feature around. It doesn't do anything if a web developer doesn't use it, so you might as well turn it on by default.

Please consider this thoroughly for the next version (and the next new feature).
Blockedon: -chromium:165462
Mergedinto: 165462
Status: Duplicate
Has support been removed for this from Chromium?? all links of examples now no longer work and do not show any dashed styling of underline? If anyone has this working can they give an example please.
Sign in to add a comment