Closed Bug 296018 Opened 19 years ago Closed 18 years ago

Images in SVG fail to display when image elements replaced using replaceChild

Categories

(Core :: SVG, defect)

Product:
Core
Component:
SVG
Platform:
x86
Windows XP
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED FIXED

People

(Reporter: hugh.saalmans, Assigned: longsonr)

References

(
URL
)

Details

Attachments

(3 files)

A simple IIS application that replicates the problem
86.26 KB, application/zip
Details
another testcase for loading a svg fragment containing a jpeg image with xmlhttprequest
12.17 KB, application/zip
Details
patch
2.38 KB, patch
tor
: review+
bzbarsky
: superreview+
Details | Diff | Splinter Review 
User-Agent:       Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8b2) Gecko/20050510 Firefox/1.0+

I have an XHTML page with SVG in it which contains a group of image elements.

Via JavaScript, a user action triggers an XmlHttpRequest request to a server 
which returns a new group of image elements to be displayed (they are all 
JPEGs).

The result of the request is an SVG document.  The javascript grabs the new 
group of image elements and replaces the existing images group in the DOM 
using replaceChild.

The new image elements appear in the DOM (using DOM Inspector) and I can right 
click on them and see the JPEG's details - but they won't display.  This is 
irrespective of whether I use suspend/unsuspenRedraw or forceRedraw.

See the additional information for the code and sample SVG.

Reproducible: Always

Steps to Reproduce:
1. Using Javascript - send XmlHttpRequest for new group of SVG image elements
2. Convert result into XML node
3. Replace existing image group with new one

Actual Results:  
New images should be displayed on screen

Expected Results:  
New image did not display, but were loaded successfully into the DOM

The original doc: 

<?xml version="1.0" encoding="UTF-8" standalone="no" ?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG­
/1.1/DTD/svg11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
xmlns:xlink="http://www.w3.org/1999/xlink"xmlns:svg="http://www.w3.org/2000/svg
"> 
        <head> 
                <title>Hugle Maps</title> 
                <script type="text/javascript" language="JavaScript" 
src="MapVisualization.js" /> 
        </head> 
        <body onload="init();" bgcolor="#ece9d8"> 
                <svg:svg version="1.1" width="100%" height="100%" 
preserveAspectRatio="xMidYMid meet" zoomAndPan="disable"> 
                        <svg:g id="map"> 
                                <svg:g id="images" /> 
                                <svg:g id="svgData" /> 
                        </svg:g> 
                </svg:svg> 
        </body> 
</html> 


A sample response for a image update: 


<?xml version="1.0" encoding="UTF-8" ?> 
<svg:svg 
xmlns:svg="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink
"> 
        <svg:g id="images"> 
                <svg:image x="37" y="227" xlink:href="Images/ecw/9/0/3-4­.jpg" 
width="125" height="125" /> 
                <!--... more images here ...--> 
        </svg:g> 
</svg:svg> 


And lastly, here is all the code to request the new images and add them 
the SVG DOM: 


        function loadXMLDoc(url) 
        { 
                //Using Mozilla XMLHttpRequest or MSXML for IE 
                if (window.XMLHttpRequest) { 
                        req = new XMLHttpRequest(); 
                        req.overrideMimeType("text/xml­"); 
                        req.onreadystatechange = processReqChange; 
                        req.open("GET", url, true); 
                        req.setRequestHeader("Content-­Encoding", "UTF-8"); 
                        req.send(null); 
                } else if (window.ActiveXObject) { 
                        req = new ActiveXObject("Microsoft.XMLHT­TP"); 
                        if (req) { 
                                req.onreadystatechange = processReqChange; 
                                req.open("GET", url, true); 
                                req.setRequestHeader("Content-­
Type", "text/xml"); 
                                req.setRequestHeader("Content-­Encoding", "UTF-
8"); 
                                req.send(); 
                        } 
                } 
        } 


        function processReqChange() 
        { 
                // only if req shows "complete" 
                if (req.readyState == 4) { 
                        // only if "OK" 
                        if (req.status == 200) { 
                                var newSvg = req.responseXML.documentElemen­t; 
                                replaceImage(newSvg.firstChild­); 
                        } else { 
                                alert("There was a problem retrieving the XML 
data:\n" + req.statusText); 
                        } 
                } 
        } 


        function replaceImage(svgNode) 
        { 
                var map = document.getElementById("map")­; 
                var svgElement = map.ownerSVGElement; 
                var oldImages = document.getElementById("image­s"); 
                var token = svgElement.suspendRedraw(0); 


                map.replaceChild(svgNode, oldImages); 


                svgElement.unsuspendRedraw(tok­en); 
                svgElement.forceRedraw(); 
        }
attach a testcase please
->Core: SVG
Assignee: nobody → general
Component: General → SVG
Product: Firefox → Core
QA Contact: general → ian
Version: unspecified → Trunk
Test applicationn contains an XHTML file that uses JavaScript to:
1 - send a request to an ASP file
2 - replace an SVG image element with the response from the ASP file

ZIP also contains 2 JPEGs used for testing.
I'm seeing the same behavior with an SVG file that's being loaded into an empty 
document (created withdocument.implementation.createDocument()) and then added 
to the current window using appendChild().  Everything in the SVG doc appears 
except for the image.
SVG images should call ImageURIChanged on being inserted into a document.  At
the moment, they do not, hence the issue here.
This is another testcase. If one clicks on the text a SVG fragment (mySVGFragment.svg) is loaded using XMLHttpRequest() and appended to the DOM tree. Only the rect and text appears, but not the raster image, although it appears in the DOM.

Also available online at http://www.carto.net/neumann/temp/load_image_xmlhttprequest.svg
Attached patch patch — — Splinter Review 
As per comment 5 except that ImageURIChanged has become LoadImage in the intervening period.

The testcase asserts due to bug 295639.
Assignee: general → longsonr
Status: UNCONFIRMED → ASSIGNED
Attachment #233805 - Flags: review?(tor)
Attachment #233805 - Flags: review?(tor) → review+
Attachment #233805 - Flags: superreview?(bzbarsky)
Comment on attachment 233805 [details] [diff] [review]
patch

Looks reasonable.
Attachment #233805 - Flags: superreview?(bzbarsky) → superreview+
checked in
Status: ASSIGNED → RESOLVED
Closed: 18 years ago
Resolution: --- → FIXED
*** Bug 287327 has been marked as a duplicate of this bug. ***
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: