mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
140 lines
4.6 KiB
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>
|
|
|