- From: Boris Zbarsky <bzbarsky@MIT.EDU>
- Date: Fri, 16 Mar 2012 00:44:06 -0400
- To: HTML WG <public-html@w3.org>
Consider the following testcase:
<!DOCTYPE html>
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAIAAAALACogAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAABtJREFUKM9jFBB4z0AKYGIgEYxqGNUwqoGeGgBbDwE3IUzUhQAAAABJRU5ErkJggg==">
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAAXNSR0IArs4c6QAAAChJREFUSMftzUEBAAAEBLCjf2dK8NsKrJLJp84zgUAgEAgEAoFAcGUBocYBP+pqhN4AAAAASUVORK5CYII=">
<script>
window.onload = function() {
var img = document.querySelector("img");
img.src =
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAAXNSR0IArs4c6QAAAChJREFUSMftzUEBAAAEBLCjf2dK8NsKrJLJp84zgUAgEAgEAoFAcGUBocYBP+pqhN4AAAAASUVORK5CYII=";
alert(img.width + " " + img.height);
}
</script>
Every non-Gecko UA alerts "32 32". Gecko used to do the same thing
before Firefox 4. At that point we switched to doing what the spec
calls for here, which is that the src set starts an async fetch and the
image size does not update until the fetch completes.
Unfortunately, this does not seem to be web-compatible. People expect
their preloaded images to synchronously update the width and height when
src is set to them.
I'm probably going to change Gecko to do that. I have no idea how to
spec it, though, because the spec doesn't have any concept of images
being preloaded, and I'm not quite sure it should. :(
-Boris
P.S. The behavior is the same with non-data: URIs; the data: URIs just
made it easier to construct a standalone testcase.
Received on Friday, 16 March 2012 04:44:36 UTC