Re: display:none and mixed SVG and HTML

On Thursday, February 2, 2012, 11:13:14 AM, Tab wrote:

TAJ> On Wed, Feb 1, 2012 at 11:38 PM, Brian Birtles <bbirtles@mozilla.com> wrote:
>> In SVG, however, sometimes content marked as display:none can be rendered
>> when referenced elsewhere.[1]

>> For example:
>>  - display:none does not apply to filters[2]
>>  - display:none does not apply to gradients[3]
>>  - display:none on clipPath has no effect (although it does on child
>> elements)[4]

TAJ> The key point is "when referenced elsewhere".  The elements don't
TAJ> generate boxes/rendering themselves.

Yes, that is the key point. And filters and gradients do not directly render anyway.

The defs element (which prevents rendering, even if some of the children would directly render) is effectively <g display="none">

When referenced elsewhere, a shadow dom tree is built under the referencing node. That tree:

- is rendering directly
- does not have display: none
- if it *does* get display: none then it stops rendering.

In other words, there is no conflict here between HTML/CSS and SVG/CSS.


>> A. When display:none is first encountered on an SVG element other than the
>> outermost SVG element in a document, SVG rendering behaviour applies 

No, it doesn't.

> and the
>> element and its children may still be referenced and rendered elsewhere
>> where permitted by SVG (e.g. patterns, filters etc.)

If referenced elsewhere, it is rendered if the referencing element (or an ancestor of it) have a value of display other than none. 

>> B. When display:none is first encountered on an HTML element or an outermost
>> SVG element in a compound document the whole subtree from that element
>> onwards is not available for rendering. Attempts to reference content from
>> that subtree will behave as if the target element was not found.

That part isn't clear to me either.



>> [1] http://www.w3.org/TR/SVG11/painting.html#DisplayProperty, "The ‘display’
>> property only affects the direct rendering of a given element, whereas it
>> does not prevent elements from being referenced by other elements."

That clarification should go into CSS 2.1 as well as an erratum, IMO.

TAJ> For one, I don't think we should be enshrining any functionality
TAJ> differences between HTML and SVG unless absolutely necessary.

Nor do I. But we aren't, this is a read herring.

TAJ> For two, "<p style=display:none><img id=foo></p>" will still draw the
TAJ> image when you reference it with the element() function from CSS.

Or in other words "The ‘display’ property only affects the direct rendering of a given element, whereas it does not prevent elements from being referenced by other elements or stylesheets."


TAJ> This
TAJ> is basically identical to the situation you're talking about, though -
TAJ> if, instead of <img>, I had <svg><pattern /></svg>, I should be able
TAJ> to reference it just the same.

Yes.




-- 
 Chris Lilley   Technical Director, Interaction Domain                 
 W3C Graphics Activity Lead, Fonts Activity Lead
 Co-Chair, W3C Hypertext CG
 Member, CSS, WebFonts, SVG Working Groups

Received on Thursday, 2 February 2012 15:27:57 UTC