<!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; // 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.pushPrefEnv({"set": [["editor.resizing.preserve_ratio", false]]}, function() { runTests(false); SpecialPowers.pushPrefEnv({"set": [["editor.resizing.preserve_ratio", true]]}, function() { runTests(true); SimpleTest.finish(); }); }); }); </script> </pre> </body> </html>