gecko/layout/base/tests/test_bug445810.html

140 lines
4.6 KiB
HTML

<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=445810
-->
<head>
<title>Test for Bug 445810</title>
<script type="text/javascript" src="/MochiKit/packed.js"></script>
<script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
<script type="text/javascript" src="/tests/modules/libpr0n/test/mochitest/imgutils.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=445810">Mozilla Bug 445810</a>
<div><p id="display"></p></div>
<div style="display: none;"><img id="currimg"></div>
<pre id="test">
<script class="testbody" type="text/javascript">
/** Test for Bug 445810 **/
// Once the border image is loaded, it isn't necessarily decoded. We need to
// force a decode, but only have a good way of doing that for image elements,
// not border images. However, we can take advantage of the image cache (which
// shares images of the same url) and assign the same url to both.
var currImageElem = document.getElementById("currimg");
function new_image_url()
{
var width = 10;
var height = 10;
var canvas = document.createElement("canvas");
canvas.setAttribute("width", width);
canvas.setAttribute("height", height);
var cx = canvas.getContext("2d");
function random_color() {
function random_component() {
return Math.floor(Math.random() * 256);
}
return "rgb(" + random_component() + "," +
random_component() + "," +
random_component() + ")";
}
for (var x = 0; x < width; ++x) {
for (var y = 0; y < height; ++y) {
cx.fillStyle = random_color();
cx.fillRect(x, y, 1, 1);
}
}
return canvas.toDataURL();
}
SimpleTest.waitForExplicitFinish();
var p = document.getElementById("display");
var div = p.parentNode;
var divcs = getComputedStyle(div, "");
div.style.width = "-moz-min-content";
p.style.width = "5px";
p.style.height = "5px";
is(divcs.width, "5px", "correct width without a border");
is(divcs.height, "5px", "correct height without a border");
p.style.border = "3px solid";
is(divcs.width, "11px", // 3 (border-left) + 5 (width) + 3 (border-right)
"correct width without a border image");
is(divcs.height, "11px", // 3 (border-top) + 5 (height) + 3 (border-bottom)
"correct height without a border image");
currImageElem.src = new_image_url();
p.style.MozBorderImage = "url( " + currImageElem.src + ") 2 2 2 2 / 7px 2px";
is(divcs.width, "11px", "border image not loaded yet");
is(divcs.height, "11px", "border image not loaded yet");
currImageElem.onload = function() { setTimeout(step2, 0); }
function step2() {
// We got here through onload
ok(isImageLoaded("currimg"), "image loaded");
// Force a decode
forceDecode("currimg");
ok(isFrameDecoded("currimg"), "frame decoded");
is(divcs.width, "9px", "border image loading caused reflow");
is(divcs.height, "19px", "border image loading caused reflow");
p.style.borderStyle = "none";
is(divcs.width, "9px", "border image still shows with border-style:none");
is(divcs.height, "19px", "border image still shows with border-style:none");
p.style.MozBorderImage = "";
is(divcs.width, "5px", "correct width without a border");
is(divcs.height, "5px", "correct height without a border");
currImageElem.src = new_image_url();
p.style.MozBorderImage = "url( " + currImageElem.src + ") 2 2 2 2 / 7px 2px";
is(divcs.width, "5px", "border image not loaded yet");
is(divcs.height, "5px", "border image not loaded yet");
currImageElem.onload = function() { setTimeout(step3, 0); }
}
function step3() {
// We got here through onload
ok(isImageLoaded("currimg"), "image loaded");
// Force a decode
forceDecode("currimg");
ok(isFrameDecoded("currimg"), "frame decoded");
is(divcs.width, "9px", "border image loading caused reflow");
is(divcs.height, "19px", "border image loading caused reflow");
currImageElem.src = new_image_url();
p.style.MozBorderImage = "url( " + currImageElem.src + ") 2 2 2 2";
is(divcs.width, "5px", "border image not loaded yet");
is(divcs.height, "5px", "border image not loaded yet");
currImageElem.onload = function() { setTimeout(step4, 0); }
}
function step4() {
// We got here through onload
ok(isImageLoaded("currimg"), "image loaded");
// Force a decode
forceDecode("currimg");
ok(isFrameDecoded("currimg"), "frame decoded");
is(divcs.width, "11px", "border image loading caused reflow");
is(divcs.height, "11px", "border image loading caused reflow");
SimpleTest.finish();
}
</script>
</pre>
</body>
</html>