Skip to main content

Browse the archive

Raw File
test_bug445810.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="/tests/SimpleTest/SimpleTest.js"></script>
  <script type="text/javascript" src="/tests/image/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>
back to top