1057921 - SVG text is always underlined when SVG is wrapped by an A element

Status: RESOLVED FIXED

(Core :: SVG, defect)

Description

[Paul LeBeau]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.143 Safari/537.36

Steps to reproduce:

1. Visit http://jsfiddle.net/fhcw9w50/2/
2. Try to disable the underline on the SVG TEXT element

This problem occurs in Chrome also, but not IE.


Actual results:

The underline visible on the SVG <text> element does not seem to be removeable.  If I remove the <a> element surrounding the <svg> element and put the <a> inside the SVG, the underline is controllable. 

<a href="foo.html">
<svg width="200" height="200" id="svgBox">
    <text id="foo" x="20" y="180" text-decoration="none">Some text</text>
</svg>
<br/>
Could also click here.
</a>



Expected results:

It should be possible to override (eg. remove) the underline on the SVG TEXT element.  But it does not seem to be possible.

Comment 1

[Loic]

I'm not sure if it's a valid regression, but it's likely due to the activation of the CSS-frame-using SVG text support in bug 839955:
good=2013-06-30
bad=2013-07-01
http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=cbb24a4a96af&tochange=d7553251cf43

Comment 2

[Robert Longson [:longsonr]]

What's the question that NEEDINFO would answer? This is a valid bug if that's what you wanted to know.

Comment 3

[Loic]

That's what I wanted to know. :)
In general, I always set the needinfo flag to the dev who wrote the patch causing the regression.

Comment 4

[Daniel Holbert [:dholbert]]

Are you sure this is valid? I can reproduce something like this even without SVG, e.g.:
data:text/html,<span style="text-decoration:underline"><span style="text-decoration:none">Underlined?

I don't know text-decoration very well, but as far as I know, specifying "text-decoration:none" on a descendant just means "this descendant doesn't add any new text decorations". It doesn't clear decorations applied by an ancestor.

Comment 5

[Daniel Holbert [:dholbert]]

I think this is INVALID. See https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration#Notes :

> Text decorations draw across descendant elements.
> This means that it is not possible to disable on
> a descendant a text decoration that is specified
> on one of its ancestors
> [...]
> the style rule:
>   em { text-decoration: none }
> would not cause any change; the entire paragraph would still be underlined.

Duping to bug 202530, which also has a good explanation in bug 202530 comment 1.

Comment 6

[Daniel Holbert [:dholbert]]

(Note that this only "regressed" from bug 839955 (per comment 1) because that's when we started painting text decorations on SVG text.)

Comment 7

[Robert Longson [:longsonr]]

Ahh yes, you need to disable underline on the <a>

Comment 8

[Paul LeBeau]

I forgot that text-decoration is cumulative. However, the CSS 2.1 spec says:

"For block containers that establish an inline formatting context, the decorations are propagated to an anonymous inline element that wraps all the in-flow inline-level children of the block container. For all other elements it is propagated to any in-flow children. Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables."


Wouldn't <text> elements be exempt from inheriting the underline for either or both of the following reasons:
(a) SVG elements do not establish an inline formatting context, and <text> elements are not in-flow children.
(b) <text> elements are absolutely positioned descendants.

Comment 9

[Daniel Holbert [:dholbert]]

(In reply to Paul LeBeau from comment #8)
> (b) <text> elements are absolutely positioned descendants.

They're not absolutely positioned in the CSS sense (i.e. they're not "position:absolute" or "position:fixed" and able to be placed anywhere in the browser-viewport).  So I don't think this argument applies (at least, not directly).

> (a) SVG elements do not establish an inline formatting context,
> and <text> elements are not in-flow children.

This is more compelling.  Also, I've noticed that it "text-decoration" doesn't propagate through e.g. <table> to textual content inside of a <td> [1] -- so, perhaps the text decorations shouldn't propagate into the <svg>.

heycam, do you know what's supposed to happen here? Perhaps we need clarification from the CSSWG?

[1] e.g. data:text/html,<a href="http://mozilla.org">text<table><tr><td>table

Comment 10

[Robert Longson [:longsonr]]

http://www.w3.org/TR/SVG/text.html

If the ‘text-decoration’ property is specified on a descendant, then that overrides the ancestor.

Comment 11

[Andy Mercer]

This causes issues when using an SVG inside of an <a> to better style :visited links.

Comment 12

[Cameron McCormack (:heycam)]

(In reply to Daniel Holbert [:dholbert] from comment #9)
> > (a) SVG elements do not establish an inline formatting context,
> > and <text> elements are not in-flow children.

It only matters whether an element establishes an inline formatting context for the case of text-decoration on a block container.  In this test case we've got the text-decoration on an inline <a>, so that doesn't apply.  If it were display:block, then it does establish an inline formatting context.

> This is more compelling.  Also, I've noticed that it "text-decoration"
> doesn't propagate through e.g. <table> to textual content inside of a <td>
> [1] -- so, perhaps the text decorations shouldn't propagate into the <svg>.
>
>
> heycam, do you know what's supposed to happen here? Perhaps we need
> clarification from the CSSWG?

I think that we shouldn't propagate the decorations, but for this reason instead:

"Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables."

Boxes for <svg> elements are atomic inline-level boxes, with how I read the definition in http://www.w3.org/TR/CSS21/visuren.html#inline-boxes.

I'll confirm with some CSS folks and write up a web-platform-test.

Comment 13

[Cameron McCormack (:heycam)]

Tab confirmed on IRC that decorations indeed shouldn't propagate through the <svg>.

Comment 14

[Cameron McCormack (:heycam)]

Attachment: patch

https://treeherder.mozilla.org/#/jobs?repo=try&revision=bc6846e26210

Comment 15

[Daniel Holbert [:dholbert]]

Comment on attachment 8633866 [details] [diff] [review]
patch

Review of attachment 8633866 [details] [diff] [review]:
-----------------------------------------------------------------

Thanks! r=me, just one nit on the test:

::: layout/reftests/w3c-css/submitted/text-decor-3/text-decoration-propagation-01.html
@@ +1,3 @@
> +<!DOCTYPE html>
> +<meta charset="utf-8">
> +<title>CSS Test: text-decoration propagation through 'svg' element</title>

This title suggests that text-decoration *should* propagate through 'svg' elements. (But really, you're testing whether that happens, and expecting that it should not happen.)

Maybe change to:
 CSS Test: text-decoration shouldn't propagate through 'svg' element
or something similarly negative, to avoid giving the wrong implication?

Comment 16

[Cameron McCormack (:heycam)]

Will do, thanks.

Comment 17

[Pulsebot]

https://hg.mozilla.org/integration/mozilla-inbound/rev/66f8e6467228

Comment 18

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/66f8e6467228