Last Comment Bug 630404 - SVG graphic doesn't display properly on Canvas Pinball HTML5 demo
: SVG graphic doesn't display properly on Canvas Pinball HTML5 demo
Status: RESOLVED DUPLICATE of bug 614649
:
Product: Core
Classification: Components
Component: SVG (show other bugs)
: Trunk
: All All
: -- normal (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
:
Mentors:
http://ie.microsoft.com/testdrive/Gra...
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2011-01-31 16:21 PST by Brian Carpenter [:geeknik]
Modified: 2011-02-11 10:14 PST (History)
1 user (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments

Description Brian Carpenter [:geeknik] 2011-01-31 16:21:15 PST
User-Agent:       Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0b11pre) Gecko/20110131 Firefox/4.0b11pre
Build Identifier: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0b11pre) Gecko/20110131 Firefox/4.0b11pre

The arrow keys SVG graphic on the Canvas Pinball HTML5 demo don't display properly with Minefield. 

Not displayed correctly in Minefield:
http://i.imgur.com/Ea9xf.png

Displayed correctly in Chrome:
http://i.imgur.com/vRTlb.png

Code responsible:
<p>To play, use the arrow keys <span class="GiantFont">(<span id="arrowKeys"><img width="75" height="56" src="assets/aarowkeys.svg"></span>)</span>. Left and right operate the flippers, and the down arrow key operates the launcher.</p>

Reproducible: Always
Comment 1 Daniel Holbert [:dholbert] (mostly OOTO until Aug 9th) 2011-01-31 16:33:10 PST
(In reply to comment #0)
> <img width="75" height="56"
> src="assets/aarowkeys.svg">

From the SVG:
 <svg width="100" height="75" xmlns="http://www.w3.org/2000/svg">

This is an instance of bug 614649 (i.e. NOTABUG, but an difference in behavior between us & chrome/opera).

In short: the <svg> node needs to add viewBox="0 0 100 75" to tell the browser (a) that it wants a region scaled to fit a viewport and (b) what that region is.

Absent a viewBox, we just present the (cropped-to-75px-by-56px) upper-right corner of SVG-space, at 100% zoomlevel.  See the other bug for more.

*** This bug has been marked as a duplicate of bug 614649 ***
Comment 2 Daniel Holbert [:dholbert] (mostly OOTO until Aug 9th) 2011-02-10 23:00:09 PST
(In reply to comment #1)
> From the SVG:
>  <svg width="100" height="75" xmlns="http://www.w3.org/2000/svg">

For the record, the "aarowkeys.svg" used in this demo has now changed (on Microsoft's web site) to:
> <svg width="100" height="75" viewBox="0 0 100 75" xmlns="http://www.w3.org/2000/svg">
so this demo should now work in older Firefox 4 beta versions and nightlies, from before bug 614649 was fixed.

Per today's messages to www-svg[1], IE9 RC apparently changed (with respect to their beta) to match the behavior that mozilla-central had up until a few days ago (until bug 614649 landed):
http://lists.w3.org/Archives/Public/www-svg/2011Feb/0046.html
Comment 3 Daniel Holbert [:dholbert] (mostly OOTO until Aug 9th) 2011-02-11 10:14:01 PST
(for reference, aarowkeys.svg is located at
http://ie.microsoft.com/testdrive/Graphics/CanvasPinball/assets/aarowkeys.svg
)

Note You need to log in before you can comment on or make changes to this bug.