mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-08 12:37:37 +00:00
193 lines
8.1 KiB
HTML
193 lines
8.1 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<!--
|
|
https://bugzilla.mozilla.org/show_bug.cgi?id=640321
|
|
-->
|
|
<head>
|
|
<title>Test for Bug 640321</title>
|
|
<script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
|
|
<script type="text/javascript" src="/tests/SimpleTest/EventUtils.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=640321">Mozilla Bug 640321</a>
|
|
<p id="display"></p>
|
|
<div id="content" contenteditable style="text-align: center">
|
|
<img src="green.png">
|
|
</div>
|
|
<div id="clickaway" style="width: 10px; height: 10px"></div>
|
|
<pre id="test">
|
|
<script type="application/javascript">
|
|
|
|
/** Test for Bug 640321 **/
|
|
SimpleTest.waitForExplicitFinish();
|
|
SimpleTest.waitForFocus(function() {
|
|
var img = document.querySelector("img");
|
|
|
|
function cancel(e) { e.stopPropagation(); }
|
|
var content = document.getElementById("content");
|
|
content.addEventListener("mousedown", cancel, false);
|
|
content.addEventListener("mousemove", cancel, false);
|
|
content.addEventListener("mouseup", cancel, false);
|
|
|
|
/**
|
|
* This function is a generic resizer test.
|
|
* We have 8 resizers that we'd like to test, and each can be moved in 8 different directions.
|
|
* In specifying baseX, W can be considered to be the width of the image, and for baseY, H
|
|
* can be considered to be the height of the image. deltaX and deltaY are regular pixel values
|
|
* which can be positive or negative.
|
|
*/
|
|
const W = 1;
|
|
const H = 1;
|
|
function testResizer(baseX, baseY, deltaX, deltaY, expectedDeltaX, expectedDeltaY) {
|
|
ok(true, "testResizer(" + [baseX, baseY, deltaX, deltaY, expectedDeltaX, expectedDeltaY].join(", ") + ")");
|
|
|
|
// Reset the dimensions of the image
|
|
img.style.width = "100px";
|
|
img.style.height = "100px";
|
|
var rect = img.getBoundingClientRect();
|
|
is(rect.width, 100, "Sanity check the length");
|
|
is(rect.height, 100, "Sanity check the height");
|
|
|
|
// Click on the image to show the resizers
|
|
synthesizeMouseAtCenter(img, {});
|
|
|
|
// Determine which resizer we're dealing with
|
|
var basePosX = rect.width * baseX;
|
|
var basePosY = rect.height * baseY;
|
|
|
|
// Click on the correct resizer
|
|
synthesizeMouse(img, basePosX, basePosY, {type: "mousedown"});
|
|
// Drag it delta pixels to the right and bottom (or maybe left and top!)
|
|
synthesizeMouse(img, basePosX + deltaX, basePosY + deltaY, {type: "mousemove"});
|
|
// Release the mouse button
|
|
synthesizeMouse(img, basePosX + deltaX, basePosY + deltaY, {type: "mouseup"});
|
|
// Move the mouse delta more pixels to the same direction to make sure that the
|
|
// resize operation has stopped.
|
|
synthesizeMouse(img, basePosX + deltaX * 2, basePosY + deltaY * 2, {type: "mousemove"});
|
|
// Click outside of the image to hide the resizers
|
|
synthesizeMouseAtCenter(document.getElementById("clickaway"), {});
|
|
|
|
// Get the new dimensions for the image
|
|
var newRect = img.getBoundingClientRect();
|
|
is(newRect.width, rect.width + expectedDeltaX, "The width should be increased by " + expectedDeltaX + " pixels");
|
|
is(newRect.height, rect.height + expectedDeltaY, "The height should be increased by " + expectedDeltaY + "pixels");
|
|
}
|
|
|
|
function runTests(preserveRatio) {
|
|
// Account for changes in the resizing behavior when we're trying to preserve
|
|
// the aspect ration.
|
|
// ignoredGrowth means we don't change the size of a dimension because otherwise
|
|
// the aspect ratio would change undesirably.
|
|
// needlessGrowth means that we change the size of a dimension perpendecular to
|
|
// the mouse movement axis in order to preserve the aspect ratio.
|
|
// reversedGrowth means that we change the size of a dimension in the opposite
|
|
// direction to the mouse movement in order to maintain the aspect ratio.
|
|
const ignoredGrowth = preserveRatio ? 0 : 1;
|
|
const needlessGrowth = preserveRatio ? 1 : 0;
|
|
const reversedGrowth = preserveRatio ? -1 : 1;
|
|
|
|
SpecialPowers.setBoolPref("editor.resizing.preserve_ratio", preserveRatio);
|
|
|
|
// top resizer
|
|
testResizer(W/2, 0, -10, -10, 0, 10);
|
|
testResizer(W/2, 0, -10, 0, 0, 0);
|
|
testResizer(W/2, 0, -10, 10, 0, -10);
|
|
testResizer(W/2, 0, 0, -10, 0, 10);
|
|
testResizer(W/2, 0, 0, 0, 0, 0);
|
|
testResizer(W/2, 0, 0, 10, 0, -10);
|
|
testResizer(W/2, 0, 10, -10, 0, 10);
|
|
testResizer(W/2, 0, 10, 0, 0, 0);
|
|
testResizer(W/2, 0, 10, 10, 0, -10);
|
|
|
|
// top right resizer
|
|
testResizer( W, 0, -10, -10, -10 * reversedGrowth, 10);
|
|
testResizer( W, 0, -10, 0, -10 * ignoredGrowth, 0);
|
|
testResizer( W, 0, -10, 10, -10, -10);
|
|
testResizer( W, 0, 0, -10, 10 * needlessGrowth, 10);
|
|
testResizer( W, 0, 0, 0, 0, 0);
|
|
testResizer( W, 0, 0, 10, 0, -10 * ignoredGrowth);
|
|
testResizer( W, 0, 10, -10, 10, 10);
|
|
testResizer( W, 0, 10, 0, 10, 10 * needlessGrowth);
|
|
testResizer( W, 0, 10, 10, 10, -10 * reversedGrowth);
|
|
|
|
// right resizer
|
|
testResizer( W, H/2, -10, -10, -10, 0);
|
|
testResizer( W, H/2, -10, 0, -10, 0);
|
|
testResizer( W, H/2, -10, 10, -10, 0);
|
|
testResizer( W, H/2, 0, -10, 0, 0);
|
|
testResizer( W, H/2, 0, 0, 0, 0);
|
|
testResizer( W, H/2, 0, 10, 0, 0);
|
|
testResizer( W, H/2, 10, -10, 10, 0);
|
|
testResizer( W, H/2, 10, 0, 10, 0);
|
|
testResizer( W, H/2, 10, 10, 10, 0);
|
|
|
|
// bottom right resizer
|
|
testResizer( W, H, -10, -10, -10, -10);
|
|
testResizer( W, H, -10, 0, -10 * ignoredGrowth, 0);
|
|
testResizer( W, H, -10, 10, -10 * reversedGrowth, 10);
|
|
testResizer( W, H, 0, -10, 0, -10 * ignoredGrowth);
|
|
testResizer( W, H, 0, 0, 0, 0);
|
|
testResizer( W, H, 0, 10, 10 * needlessGrowth, 10);
|
|
testResizer( W, H, 10, -10, 10, -10 * reversedGrowth);
|
|
testResizer( W, H, 10, 0, 10, 10 * needlessGrowth);
|
|
testResizer( W, H, 10, 10, 10, 10);
|
|
|
|
// bottom resizer
|
|
testResizer(W/2, H, -10, -10, 0, -10);
|
|
testResizer(W/2, H, -10, 0, 0, 0);
|
|
testResizer(W/2, H, -10, 10, 0, 10);
|
|
testResizer(W/2, H, 0, -10, 0, -10);
|
|
testResizer(W/2, H, 0, 0, 0, 0);
|
|
testResizer(W/2, H, 0, 10, 0, 10);
|
|
testResizer(W/2, H, 10, -10, 0, -10);
|
|
testResizer(W/2, H, 10, 0, 0, 0);
|
|
testResizer(W/2, H, 10, 10, 0, 10);
|
|
|
|
// bottom left resizer
|
|
testResizer( 0, H, -10, -10, 10, -10 * reversedGrowth);
|
|
testResizer( 0, H, -10, 0, 10, 10 * needlessGrowth);
|
|
testResizer( 0, H, -10, 10, 10, 10);
|
|
testResizer( 0, H, 0, -10, 0, -10 * ignoredGrowth);
|
|
testResizer( 0, H, 0, 0, 0, 0);
|
|
testResizer( 0, H, 0, 10, 10 * needlessGrowth, 10);
|
|
testResizer( 0, H, 10, -10, -10, -10);
|
|
testResizer( 0, H, 10, 0, -10 * ignoredGrowth, 0);
|
|
testResizer( 0, H, 10, 10, -10 * reversedGrowth, 10);
|
|
|
|
// left resizer
|
|
testResizer( 0, H/2, -10, -10, 10, 0);
|
|
testResizer( 0, H/2, -10, 0, 10, 0);
|
|
testResizer( 0, H/2, -10, 10, 10, 0);
|
|
testResizer( 0, H/2, 0, -10, 0, 0);
|
|
testResizer( 0, H/2, 0, 0, 0, 0);
|
|
testResizer( 0, H/2, 0, 10, 0, 0);
|
|
testResizer( 0, H/2, 10, -10, -10, 0);
|
|
testResizer( 0, H/2, 10, 0, -10, 0);
|
|
testResizer( 0, H/2, 10, 10, -10, 0);
|
|
|
|
// top left resizer
|
|
testResizer( 0, 0, -10, -10, 10, 10);
|
|
testResizer( 0, 0, -10, 0, 10, 10 * needlessGrowth);
|
|
testResizer( 0, 0, -10, 10, 10, -10 * reversedGrowth);
|
|
testResizer( 0, 0, 0, -10, 10 * needlessGrowth, 10);
|
|
testResizer( 0, 0, 0, 0, 0, 0);
|
|
testResizer( 0, 0, 0, 10, 0, -10 * ignoredGrowth);
|
|
testResizer( 0, 0, 10, -10, -10 * reversedGrowth, 10);
|
|
testResizer( 0, 0, 10, 0, -10 * ignoredGrowth, 0);
|
|
testResizer( 0, 0, 10, 10, -10, -10);
|
|
|
|
SpecialPowers.clearUserPref("editor.resizing.preserve_ratio");
|
|
}
|
|
|
|
runTests(false);
|
|
runTests(true);
|
|
|
|
SimpleTest.finish();
|
|
});
|
|
|
|
</script>
|
|
</pre>
|
|
</body>
|
|
</html>
|