350 lines
13 KiB
HTML
350 lines
13 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<title>Test for scroll snapping</title>
|
|
<script type="text/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>
|
|
|
|
<p id="display"></p>
|
|
<div id="sc" style="margin: 0px; padding: 0px; overflow: scroll; width:250px; height: 250px;">
|
|
<div id="sd" style="margin: 0px; padding: 0px; width: 1250px; height: 1250px;"></div>
|
|
</div>
|
|
|
|
<pre id="test">
|
|
<script class="testbody" type="text/javascript">
|
|
|
|
var runtime = SpecialPowers.Cc["@mozilla.org/xre/app-info;1"]
|
|
.getService(SpecialPowers.Ci.nsIXULRuntime);
|
|
var isMac = navigator.platform.indexOf("Mac") != -1;
|
|
var isGtk = runtime.widgetToolkit.indexOf("gtk") != -1;
|
|
var isWin = navigator.platform.indexOf("Win") != -1;
|
|
var isSN = /mac os x 10\.6/.test(navigator.userAgent.toLowerCase());
|
|
|
|
// Half of the scrollbar control width, in CSS pixels
|
|
var scrollbarOffset = isWin ? 8 : 5;
|
|
|
|
// OSX 10.6 scroll bar thumbs are off-center due to the bundling of buttons on one end
|
|
// of the scroll bar frame.
|
|
var scrollbarCenter = isSN ? 100 : 125;
|
|
|
|
var testCases = [
|
|
{
|
|
"description" : "Drag scrollbar left, expect scroll snapping.",
|
|
"snapCoord" : "500px 500px",
|
|
"startScroll" : { "x" : 500, "y" : 500 },
|
|
"endScroll" : { "x" : 500, "y" : 500 },
|
|
"mousePosition" : { "x" : scrollbarCenter, "y" : 250 - scrollbarOffset },
|
|
"mouseOffset" : { "x" : -10, "y" : 0 },
|
|
"duration" : "0",
|
|
"runMac" : true,
|
|
"runGtk" : true,
|
|
"runWin" : true
|
|
},
|
|
{
|
|
"description" : "Drag scrollbar right, expect scroll snapping.",
|
|
"snapCoord" : "500px 500px",
|
|
"startScroll" : { "x" : 500, "y" : 500 },
|
|
"endScroll" : { "x" : 500, "y" : 500 },
|
|
"mousePosition" : { "x" : scrollbarCenter, "y" : 250 - scrollbarOffset },
|
|
"mouseOffset" : { "x" : 10, "y" : 0 },
|
|
"duration" : "0",
|
|
"runMac" : true,
|
|
"runGtk" : true,
|
|
"runWin" : true
|
|
},
|
|
{
|
|
"description" : "Drag scrollbar up, expect scroll snapping.",
|
|
"snapCoord" : "500px 500px",
|
|
"startScroll" : { "x" : 500, "y" : 500 },
|
|
"endScroll" : { "x" : 500, "y" : 500 },
|
|
"mousePosition" : { "x" : 250 - scrollbarOffset, "y" : scrollbarCenter },
|
|
"mouseOffset" : { "x" : 0, "y" : -10 },
|
|
"duration" : "0",
|
|
"runMac" : true,
|
|
"runGtk" : true,
|
|
"runWin" : true
|
|
},
|
|
{
|
|
"description" : "Drag scrollbar down, expect scroll snapping.",
|
|
"snapCoord" : "500px 500px",
|
|
"startScroll" : { "x" : 500, "y" : 500 },
|
|
"endScroll" : { "x" : 500, "y" : 500 },
|
|
"mousePosition" : { "x" : 250 - scrollbarOffset, "y" : scrollbarCenter },
|
|
"mouseOffset" : { "x" : 0, "y" : 10 },
|
|
"duration" : "0",
|
|
"runMac" : true,
|
|
"runGtk" : true,
|
|
"runWin" : true
|
|
},
|
|
{
|
|
"description" : "Page scrollbar left, expect scroll snapping.",
|
|
"snapCoord" : "500px 500px, 1000px 500px",
|
|
"startScroll" : { "x" : 1000, "y" : 500 },
|
|
"endScroll" : { "x" : 500, "y" : 500 },
|
|
"mousePosition" : { "x" : 50, "y" : 250 - scrollbarOffset },
|
|
"mouseOffset" : { "x" : 0, "y" : 0 },
|
|
"duration" : "0",
|
|
"runMac" : true,
|
|
"runGtk" : true,
|
|
"runWin" : true
|
|
},
|
|
{
|
|
"description" : "Page scrollbar right, expect scroll snapping.",
|
|
"snapCoord" : "500px 500px, 0px 500px",
|
|
"startScroll" : { "x" : 0, "y" : 500 },
|
|
"endScroll" : { "x" : 500, "y" : 500 },
|
|
"mousePosition" : { "x" : 200, "y" : 250 - scrollbarOffset },
|
|
"mouseOffset" : { "x" : 0, "y" : 0 },
|
|
"duration" : "0",
|
|
"runMac" : true,
|
|
"runGtk" : true,
|
|
"runWin" : true
|
|
},
|
|
{
|
|
"description" : "Page scrollbar up, expect scroll snapping.",
|
|
"snapCoord" : "500px 500px, 500px 1000px",
|
|
"startScroll" : { "x" : 500, "y" : 1000 },
|
|
"endScroll" : { "x" : 500, "y" : 500 },
|
|
"mousePosition" : { "x" : 250 - scrollbarOffset, "y" : 50 },
|
|
"mouseOffset" : { "x" : 0, "y" : 0 },
|
|
"duration" : "0",
|
|
"runMac" : true,
|
|
"runGtk" : true,
|
|
"runWin" : true
|
|
},
|
|
{
|
|
"description" : "Page scrollbar down, expect scroll snapping.",
|
|
"snapCoord" : "500px 500px, 500px 0px",
|
|
"startScroll" : { "x" : 500, "y" : 0 },
|
|
"endScroll" : { "x" : 500, "y" : 500 },
|
|
"mousePosition" : { "x" : 250 - scrollbarOffset, "y" : 200 },
|
|
"mouseOffset" : { "x" : 0, "y" : 0 },
|
|
"duration" : "0",
|
|
"runMac" : true,
|
|
"runGtk" : true,
|
|
"runWin" : true
|
|
},
|
|
{
|
|
"description" : "Click scrollbar left button, expect scroll snapping.",
|
|
"snapCoord" : "50px 500px, 250px 500px, 500px 500px, 750px 500px, 950px 500px",
|
|
"startScroll" : { "x" : 500, "y" : 500 },
|
|
"endScroll" : { "x" : 250, "y" : 500 },
|
|
"mousePosition" : { "x" : scrollbarOffset, "y" : 250 - scrollbarOffset },
|
|
"mouseOffset" : { "x" : 0, "y" : 0 },
|
|
"duration" : "0",
|
|
"runMac" : false, // OSX does not have have line-scroll buttons
|
|
"runGtk" : false, // Some GTK themes may not have scroll buttons
|
|
"runWin" : true
|
|
},
|
|
{
|
|
"description" : "Hold scrollbar left button until repeating, expect scroll snapping.",
|
|
"snapCoord" : "50px 500px, 500px 500px, 950px 500px",
|
|
"startScroll" : { "x" : 500, "y" : 500 },
|
|
"endScroll" : { "x" : 50, "y" : 500 },
|
|
"mousePosition" : { "x" : scrollbarOffset, "y" : 250 - scrollbarOffset },
|
|
"mouseOffset" : { "x" : 0, "y" : 0 },
|
|
"duration" : "500",
|
|
"runMac" : false, // OSX does not have have line-scroll buttons
|
|
"runGtk" : false, // Some GTK themes may not have scroll buttons
|
|
"runWin" : true
|
|
},
|
|
{
|
|
"description" : "Click scrollbar right button, expect scroll snapping.",
|
|
"snapCoord" : "50px 500px, 250px 500px, 500px 500px, 750px 500px, 950px 500px",
|
|
"startScroll" : { "x" : 500, "y" : 500 },
|
|
"endScroll" : { "x" : 750, "y" : 500 },
|
|
"mousePosition" : { "x" : 250 - scrollbarOffset * 3, "y" : 250 - scrollbarOffset },
|
|
"mouseOffset" : { "x" : 0, "y" : 0 },
|
|
"duration" : "0",
|
|
"runMac" : false, // OSX does not have have line-scroll buttons
|
|
"runGtk" : false, // Some GTK themes may not have scroll buttons
|
|
"runWin" : true
|
|
},
|
|
{
|
|
"description" : "Hold scrollbar right button until repeating, expect scroll snapping.",
|
|
"snapCoord" : "50px 500px, 500px 500px, 950px 500px",
|
|
"startScroll" : { "x" : 500, "y" : 500 },
|
|
"endScroll" : { "x" : 950, "y" : 500 },
|
|
"mousePosition" : { "x" : 250 - scrollbarOffset * 3, "y" : 250 - scrollbarOffset },
|
|
"mouseOffset" : { "x" : 0, "y" : 0 },
|
|
"duration" : "500",
|
|
"runMac" : false, // OSX does not have have line-scroll buttons
|
|
"runGtk" : false, // Some GTK themes may not have scroll buttons
|
|
"runWin" : true
|
|
},
|
|
{
|
|
"description" : "Click scrollbar up button, expect scroll snapping.",
|
|
"snapCoord" : "500px 50px, 500px 250px, 500px 500px, 500px 750px, 500px 950px",
|
|
"startScroll" : { "x" : 500, "y" : 500 },
|
|
"endScroll" : { "x" : 500, "y" : 250 },
|
|
"mousePosition" : { "x" : 250 - scrollbarOffset, "y" : scrollbarOffset },
|
|
"mouseOffset" : { "x" : 0, "y" : 0 },
|
|
"duration" : "0",
|
|
"runMac" : false, // OSX does not have have line-scroll buttons
|
|
"runGtk" : false, // Some GTK themes may not have scroll buttons
|
|
"runWin" : true
|
|
},
|
|
{
|
|
"description" : "Hold scrollbar up button until repeating, expect scroll snapping.",
|
|
"snapCoord" : "500px 50px, 500px 500px, 500px 950px",
|
|
"startScroll" : { "x" : 500, "y" : 500 },
|
|
"endScroll" : { "x" : 500, "y" : 50 },
|
|
"mousePosition" : { "x" : 250 - scrollbarOffset, "y" : scrollbarOffset },
|
|
"mouseOffset" : { "x" : 0, "y" : 0 },
|
|
"duration" : "500",
|
|
"runMac" : false, // OSX does not have have line-scroll buttons
|
|
"runGtk" : false, // Some GTK themes may not have scroll buttons
|
|
"runWin" : true
|
|
},
|
|
{
|
|
"description" : "Click scrollbar down button, expect scroll snapping.",
|
|
"snapCoord" : "500px 50px, 500px 250px, 500px 500px, 500px 750px, 500px 950px",
|
|
"startScroll" : { "x" : 500, "y" : 500 },
|
|
"endScroll" : { "x" : 500, "y" : 750 },
|
|
"mousePosition" : { "x" : 250 - scrollbarOffset, "y" : 250 - scrollbarOffset * 3},
|
|
"mouseOffset" : { "x" : 0, "y" : 0 },
|
|
"duration" : "0",
|
|
"runMac" : false, // OSX does not have have line-scroll buttons
|
|
"runGtk" : false, // Some GTK themes may not have scroll buttons
|
|
"runWin" : true
|
|
},
|
|
{
|
|
"description" : "Hold scrollbar down button until repeating, expect scroll snapping.",
|
|
"snapCoord" : "500px 50px, 500px 500px, 500px 950px",
|
|
"startScroll" : { "x" : 500, "y" : 500 },
|
|
"endScroll" : { "x" : 500, "y" : 950 },
|
|
"mousePosition" : { "x" : 250 - scrollbarOffset, "y" : 250 - scrollbarOffset * 3},
|
|
"mouseOffset" : { "x" : 0, "y" : 0 },
|
|
"duration" : "500",
|
|
"runMac" : false, // OSX does not have have line-scroll buttons
|
|
"runGtk" : false, // Some GTK themes may not have scroll buttons
|
|
"runWin" : true
|
|
},
|
|
|
|
];
|
|
|
|
var step = 0;
|
|
var sc; // Scroll Container
|
|
var sd; // Scrolled Div
|
|
|
|
var lastScrollTop;
|
|
var lastScrollLeft;
|
|
var stopFrameCount;
|
|
var winUtils = SpecialPowers.DOMWindowUtils;
|
|
|
|
function doTest() {
|
|
var testCase = testCases[step];
|
|
|
|
stopFrameCount = 0;
|
|
lastScrollTop = sc.scrollTop;
|
|
lastScrollLeft = sc.scrollLeft;
|
|
|
|
sc.scrollTo(testCase.startScroll.x, testCase.startScroll.y);
|
|
sc.style.scrollSnapType = "mandatory";
|
|
sd.style.scrollSnapCoordinate = testCase.snapCoord;
|
|
|
|
synthesizeMouse(sc,
|
|
testCase.mousePosition.x,
|
|
testCase.mousePosition.y,
|
|
{ type: "mousedown" });
|
|
|
|
synthesizeMouse(sc,
|
|
testCase.mousePosition.x + testCase.mouseOffset.x,
|
|
testCase.mousePosition.y + testCase.mouseOffset.y,
|
|
{ type: "mousemove" });
|
|
|
|
stopFrameCount = 0;
|
|
waitForScrollStart();
|
|
}
|
|
|
|
function waitForScrollStart() {
|
|
// Wait for up to 30 frames for scrolling to start
|
|
var testCase = testCases[step];
|
|
if (testCase.startScroll.y != sc.scrollTop
|
|
|| testCase.startScroll.x != sc.scrollLeft
|
|
|| ++stopFrameCount < 30) {
|
|
window.requestAnimationFrame(doMouseUp);
|
|
} else {
|
|
window.requestAnimationFrame(waitForScrollStart);
|
|
}
|
|
}
|
|
|
|
function doMouseUp() {
|
|
var testCase = testCases[step];
|
|
isnot("(" + sc.scrollLeft + "," + sc.scrollTop + ")",
|
|
"(" + testCase.startScroll.x +"," + testCase.startScroll.y + ")",
|
|
"Step " + step + ": Synthesized mouse events move scroll position. ("
|
|
+ testCase.description + ")");
|
|
|
|
window.setTimeout(function() {
|
|
synthesizeMouse(sc,
|
|
testCase.mousePosition.x + testCase.mouseOffset.x,
|
|
testCase.mousePosition.y + testCase.mouseOffset.y,
|
|
{ type: "mouseup" });
|
|
|
|
stopFrameCount = 0;
|
|
window.requestAnimationFrame(waitForScrollStop);
|
|
}, testCase.duration);
|
|
}
|
|
|
|
function waitForScrollStop() {
|
|
if (stopFrameCount > 30) {
|
|
// We have the same position for 30 consecutive frames -- we are stopped
|
|
verifyTest();
|
|
} else {
|
|
// Still moving
|
|
if (lastScrollTop == sc.scrollTop && lastScrollLeft == sc.scrollLeft) {
|
|
stopFrameCount++;
|
|
} else {
|
|
stopFrameCount = 0;
|
|
lastScrollTop = sc.scrollTop;
|
|
lastScrollLeft = sc.scrollLeft;
|
|
}
|
|
window.requestAnimationFrame(waitForScrollStop);
|
|
}
|
|
}
|
|
|
|
function verifyTest() {
|
|
// Test ended, check if scroll position matches expected position
|
|
var testCase = testCases[step];
|
|
is("(" + sc.scrollLeft + "," + sc.scrollTop + ")",
|
|
"(" + testCase.endScroll.x +"," + testCase.endScroll.y + ")",
|
|
"Step " + step + ": " + testCase.description);
|
|
|
|
// Find next test to run
|
|
while (true) {
|
|
if (++step == testCases.length) {
|
|
SimpleTest.finish();
|
|
break;
|
|
} else {
|
|
testCase = testCases[step];
|
|
if ((testCase.runGtk && isGtk)
|
|
|| (testCase.runMac && isMac)
|
|
|| (testCase.runWin && isWin)) {
|
|
doTest();
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
SimpleTest.waitForExplicitFinish();
|
|
SimpleTest.requestFlakyTimeout("Delays added to allow synthesized mouse " +
|
|
"events to trigger scrollbar repeating scrolls.");
|
|
addLoadEvent(function() {
|
|
sc = document.getElementById("sc");
|
|
sd = document.getElementById("sd");
|
|
SpecialPowers.pushPrefEnv({
|
|
"set": [["layout.css.scroll-snap.enabled", true],
|
|
["layout.css.scroll-snap.proximity-threshold", 100]]},
|
|
doTest);
|
|
});
|
|
</script>
|
|
</pre>
|
|
</body>
|
|
|
|
</html>
|