gecko-dev/dom/html/test/test_bug1166138.html

131 lines
4.7 KiB
HTML

<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=1166138
-->
<head>
<meta charset="utf-8">
<title>Test for Bug 1166138</title>
<script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
<script type="text/javascript" src="/tests/SimpleTest/SpawnTask.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=1166138">Mozilla Bug 1166138</a>
<p id="display"></p>
<div id="content" style="display: none">
</div>
<img srcset="file_bug1166138_1x.png 1x, file_bug1166138_2x.png 2x"
src="file_bug1166138_def.png"
onload="onLoad()">
<script type="application/javascript">
var img1x = "http://mochi.test:8888/tests/dom/html/test/file_bug1166138_1x.png";
var img2x = "http://mochi.test:8888/tests/dom/html/test/file_bug1166138_2x.png";
var imgdef = "http://mochi.test:8888/tests/dom/html/test/file_bug1166138_def.png";
var onLoadCallback = null;
var done = false;
var startPromise = new Promise((a) => {
onLoadCallback = () => {
var image = document.querySelector('img');
// If we aren't starting at 2x scale, resize to 2x scale, and wait for a load
if (image.currentSrc != img2x) {
onLoadCallback = a;
SpecialPowers.pushPrefEnv({'set': [['layout.css.devPixelsPerPx', 2]]});
} else {
a();
}
};
});
// if aLoad is true, waits for a load event. Otherwise, spins the event loop twice to
// ensure that no events were queued to be fired.
function spin(aLoad) {
if (aLoad) {
return new Promise((a) => {
ok(!onLoadCallback, "Shouldn't be an existing callback");
onLoadCallback = a;
});
} else {
return new Promise((a) => SimpleTest.executeSoon(() => SimpleTest.executeSoon(a)));
}
}
function onLoad() {
if (done) return;
ok(onLoadCallback, "Expected a load event");
if (onLoadCallback) {
var cb = onLoadCallback;
onLoadCallback = null;
cb();
}
}
add_task(function* () {
yield startPromise;
var image = document.querySelector('img');
is(image.currentSrc, img2x, "initial scale must be 2x");
SpecialPowers.pushPrefEnv({'set': [['layout.css.devPixelsPerPx', 1]]});
yield spin(true);
is(image.currentSrc, img1x, "pre-existing img tag to 1x");
SpecialPowers.pushPrefEnv({'set': [['layout.css.devPixelsPerPx', 2]]});
yield spin(true);
is(image.currentSrc, img2x, "pre-existing img tag to 2x");
// Try removing & re-adding the image
document.body.removeChild(image);
SpecialPowers.pushPrefEnv({'set': [['layout.css.devPixelsPerPx', 1]]});
yield spin(false); // No load should occur because the element is unbound
document.body.appendChild(image);
yield spin(true);
is(image.currentSrc, img1x, "remove and re-add tag after changing to 1x");
document.body.removeChild(image);
SpecialPowers.pushPrefEnv({'set': [['layout.css.devPixelsPerPx', 2]]});
yield spin(false); // No load should occur because the element is unbound
document.body.appendChild(image);
yield spin(true);
is(image.currentSrc, img2x, "remove and re-add tag after changing to 2x");
// get rid of the srcset attribute! It should become the default
image.removeAttribute('srcset');
yield spin(true);
is(image.currentSrc, imgdef, "remove srcset attribute");
// Setting srcset again should return it to the correct value
image.setAttribute('srcset', "file_bug1166138_1x.png 1x, file_bug1166138_2x.png 2x");
yield spin(true);
is(image.currentSrc, img2x, "restore srcset attribute");
// Create a new image
var newImage = document.createElement('img');
// Switch load listening over to newImage
newImage.addEventListener('load', onLoad);
image.removeEventListener('load', onLoad);
document.body.appendChild(newImage);
yield spin(false); // no load event should fire - as the image has no attributes
is(newImage.currentSrc, "", "New element with no attributes");
newImage.setAttribute('srcset', "file_bug1166138_1x.png 1x, file_bug1166138_2x.png 2x");
yield spin(true);
is(newImage.currentSrc, img2x, "Adding srcset attribute");
SpecialPowers.pushPrefEnv({'set': [['layout.css.devPixelsPerPx', 1]]});
yield spin(true);
is(newImage.currentSrc, img1x, "new image after switching to 1x");
is(image.currentSrc, img1x, "old image after switching to 1x");
// Clear the listener
done = true;
});
</script>
</body>
</html>