Closed Bug 1057921 Opened 7 years ago Closed 6 years ago

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

Categories

(Core :: SVG, defect)

31 Branch
x86_64
Windows 7
defect
Not set
normal

Tracking

()

RESOLVED FIXED
mozilla42
Tracking Status
firefox42 --- fixed

People

(Reporter: paul.lebeau, Assigned: heycam)

References

Details

Attachments

(1 file)

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.
Component: Untriaged → SVG
Product: Firefox → Core
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
Blocks: 839955
Flags: needinfo?(cam)
Status: UNCONFIRMED → NEW
Ever confirmed: true
What's the question that NEEDINFO would answer? This is a valid bug if that's what you wanted to know.
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.
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.
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.
Status: NEW → RESOLVED
Closed: 7 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 202530
(Note that this only "regressed" from bug 839955 (per comment 1) because that's when we started painting text decorations on SVG text.)
Flags: needinfo?(cam)
Ahh yes, you need to disable underline on the <a>
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.
(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
Status: RESOLVED → REOPENED
Flags: needinfo?(cam)
Resolution: DUPLICATE → ---
http://www.w3.org/TR/SVG/text.html

If the ‘text-decoration’ property is specified on a descendant, then that overrides the ancestor.
This causes issues when using an SVG inside of an <a> to better style :visited links.
(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.
Flags: needinfo?(cam)
Tab confirmed on IRC that decorations indeed shouldn't propagate through the <svg>.
Assignee: nobody → cam
Status: REOPENED → ASSIGNED
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?
Attachment #8633866 - Flags: review?(dholbert) → review+
Will do, thanks.
https://hg.mozilla.org/mozilla-central/rev/66f8e6467228
Status: ASSIGNED → RESOLVED
Closed: 7 years ago6 years ago
Flags: in-testsuite+
Resolution: --- → FIXED
Target Milestone: --- → mozilla42
You need to log in before you can comment on or make changes to this bug.