1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
<!DOCTYPE html>
<html>
<head>
<script src="../../resources/js-test.js"></script>
<script>
window.jsTestIsAsync = true;
var testScrolls = [];
var currentTest = -1;
var div;
var pixelsPerWheelTick = 40;
function tryScroll() {
eventSender.mouseMoveTo(div.offsetLeft + 5, div.offsetTop + 5);
eventSender.mouseScrollBy(0,-1);
eventSender.mouseScrollBy(-1,0);
}
function startNextTestCase() {
currentTest++;
if (currentTest >= testScrolls.length) {
finishJSTest();
return;
}
var testCase = testScrolls[currentTest];
div = document.getElementById(testCase.elem);
tryScroll();
shouldBecomeEqual("div.scrollTop == " + testCase.expTop + " && " +
"div.scrollLeft == " + testCase.expLeft, "true", startNextTestCase);
}
function test() {
if (window.eventSender && window.testRunner) {
testRunner.waitUntilDone();
description('This tests that scrollable areas with the appropriate overflow mode set'
+ ' are in fact scrollable by the user.');
testScrolls = [
{elem: "overflow-1", expLeft: "window.pixelsPerWheelTick" , expTop: "window.pixelsPerWheelTick"},
{elem: "overflow-2", expLeft: "window.pixelsPerWheelTick" , expTop: "window.pixelsPerWheelTick"},
{elem: "overflow-3", expLeft: 0 , expTop: 0},
{elem: "overflow-4", expLeft: "window.pixelsPerWheelTick" , expTop: "window.pixelsPerWheelTick"},
{elem: "no-overflow-1", expLeft: 0 , expTop: 0},
{elem: "no-overflow-2", expLeft: 0 , expTop: 0},
{elem: "no-overflow-3", expLeft: 0 , expTop: 0},
{elem: "no-overflow-4", expLeft: 0 , expTop: 0},
];
startNextTestCase();
} else {
debug("FAIL: This test requires window.eventSender.");
}
}
</script>
</head>
<body style="margin: 0" onload="test()">
scroll with overflow
<div id="overflow-1" style="width: 100px; height: 100px; overflow-x: scroll; overflow-y: scroll">
<div style="width: 200px; height: 200px;">Content</div>
</div>
auto with overflow
<div id="overflow-2" style="width: 100px; height: 100px; overflow-x: auto; overflow-y: auto">
<div style="width: 200px; height: 200px;">Content</div>
</div>
hidden with overflow
<div id="overflow-3" style="width: 100px; height: 100px; overflow-x: hidden; overflow-y: hidden">
<div style="width: 200px; height: 200px;">Content</div>
</div>
overlay with overflow
<div id="overflow-4" style="width: 100px; height: 100px; overflow-x: overlay; overflow-y: overlay">
<div style="width: 200px; height: 200px;">Content</div>
</div>
scroll without overflow
<div id="no-overflow-1" style="width: 100px; height: 100px; overflow-x: scroll; overflow-y: scroll">
<div style="width: 20px; height: 20px;">Content</div>
</div>
auto without overflow
<div id="no-overflow-2" style="width: 100px; height: 100px; overflow-x: auto; overflow-y: auto">
<div style="width: 20px; height: 20px;">Content</div>
</div>
hidden without overflow
<div id="no-overflow-3" style="width: 100px; height: 100px; overflow-x: hidden; overflow-y: hidden">
<div style="width: 20px; height: 20px;">Content</div>
</div>
overlay without overflow
<div id="no-overflow-4" style="width: 100px; height: 100px; overflow-x: overlay; overflow-y: overlay">
<div style="width: 20px; height: 20px;">Content</div>
</div>
</body>
</html>
|
