707071 - svg figure is clipped to the viewBox even though we could display more on screen

Status: VERIFIED INVALID

(Core :: SVG, defect)

Description

[oversky0]

User Agent: Mozilla/5.0 (Windows NT 5.1; rv:8.0.1) Gecko/20111122 Firefox/8.0.1
Build ID: 20111122185838

Steps to reproduce:

http://dl.dropbox.com/u/2484898/Test/test.svg


Actual results:

In this figure, the right most text "Screen" is clipped.


Expected results:

Full text "Screen" should be shown.
I test this svg in Inkscape and Chrome, both are rendered correctly.

Comment 1

[Benjamin Smedberg]

Do not abuse the security-sensitive flag, it is meant for issues that must stay private due to security disclosure only.

Comment 2

[Benjamin Smedberg]

The text of "screen" is outside of the viewbox of the root <svg> element. I believe that Firefox only displays content which is inside the viewbox.

Comment 3

[Benjamin Smedberg]

Relevant text from the SVG 1.1 spec:

14.3.3:

When an outermost svg element is stand-alone or embedded inline within a parent XML grammar which does not use CSS layout or XSL formatting, the ‘overflow’ property on the outermost svg element is ignored for the purposes of visual rendering and the initial clipping path is set to the bounds of the initial viewport.

It's not clear to me what the initial viewport is in this example should actually be, because my undereducated reading of the spec would have it being x=0 y=0 width=32cm height=4cm and not all of the image fits into that viewport either.

Comment 4

[Robert Longson [:longsonr]]

This is more about font sizing than clipping really.

The testcase specifies font-sizes without units. This is invalid CSS. You can either convert the font-size to an attribute e.g. font-size="12.7998" or add units to the css e.g. 

style="fill: #000000;text-anchor:start;font-size:12.7998px;font-family:sanserif;font-style:normal;font-weight:normal"

The text will then be smaller and won't overflow the bounds that the testcase has set.

Inkscape and Chrome accept the invalid CSS. Opera doesn't and it displays the same as Firefox.

Comment 5

[oversky0]

Checking with W3C Markup Validation Service
http://validator.w3.org/check?uri=http%3A%2F%2Fdl.dropbox.com%2Fu%2F2484898%2FTest%2Ftest.svg&charset=%28detect+automatically%29&doctype=Inline&group=0

Result: 	Passed, 1 warning(s)

The warning message,
"Mismatch between Public and System identifiers in the DOCTYPE declaration",
is not related to the font-sizes without units.

The document located at <http://dl.dropbox.com/u/2484898/Test/test.svg> was successfully checked as SVG 1.0. This means that the resource in question identified itself as "SVG 1.0" and that we successfully performed a formal validation of it. The parser implementations we used for this check are based on OpenSP (SGML/XML) and libxml2 (XML). 

I don't understand the SVG standard, but W3C think this is OK, and I think firefox should follow W3C. I will email this issue to W3C and see which is one is correct.

Comment 6

[Robert Longson [:longsonr]]

The appropriate text is here since you are using inline CSS: http://www.w3.org/TR/CSS2/syndata.html#length-units specifically

You can report bugs in the validator at http://www.w3.org/Bugs/Public/

Comment 7

[oversky0]

I made another svg with "font-size:12.7998px" modification as suggested by Robert.
http://dl.dropbox.com/u/2484898/Test/test1.svg
The text "Screen" is still clipped and displayed as "Screer"

Some questions here,
1. If Firefox rejects invalid CSS, why "Scree" is still displayed? Shouldn't the whole word disappear?
2. Other texts in this svg have the same "wrong unit" issue, but they are all displayed with full word at the correct places. Apparently, Firefox can deal with and access this "invalid CSS".

Comment 8

[Robert Longson [:longsonr]]

Please don't keep reopening this bug.

1. The invalid CSS is ignored. The text is displayed as if it was not present.
2. No it can't but it may be getting some inherited text size or using the default.

Comment 9

[David Dorward]

Regarding the comments about the validator reporting the markup as valid, it is correct. It is the CSS that is invalid, not the Markup. There is a CSS validator at http://jigsaw.w3.org/css-validator/ but it can't extract inline CSS from SVG. If I copy and paste some of the CSS into the direct input box, add a selector, and pick the SVG profile, it reports: Value Error : font-size only 0 can be a length. You must put a unit after your number : 12.7998