-
Notifications
You must be signed in to change notification settings - Fork 3.2k
/
Copy pathviewport-offset-manual.html
151 lines (135 loc) · 5.45 KB
/
viewport-offset-manual.html
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!doctype html>
<html>
<head>
<title>Viewport: Offset</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="viewport_support.js"></script>
<script>
setup({explicit_done: true, explicit_timeout: true});
</script>
<style>
html {
width: 100%;
height: 100%;
}
#fullscreenBox {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
visibility: hidden;
}
</style>
</head>
<body>
<h1>Viewport: Offset</h1>
<h4>
Test Description: Tests the offset scrolling properties on an
unscrollable page.
</h4>
<h2 style="color: red">THIS IS A MANUAL TEST</h2>
<p id="skip">
<button id="skipbtn" onclick="skipManualTest();">Skip Test</button>
</p>
<h4>Instruction</h4>
<p id="instruction"></p>
<button id="continue">Start Test</button>
<div id="log"></div>
<div id="fullscreenBox">
<!-- Invisible but needed to get maximum scrollable extents in the
presence of a collapsible URL bar. -->
</div>
</body>
<script>
var continueBtn = document.getElementById("continue");
function continueTest() {
nextStep(function(instructionText) {
var instruction = document.getElementById("instruction");
continueBtn.innerText = "Continue";
instruction.innerText = instructionText;
});
}
continueBtn.addEventListener('click', continueTest);
// Prevent scrolling (though there should be no overflow) so that all
// scrolling must happen as panning the visual viewport within the
// layout viewport.
document.documentElement.style.overflow = "hidden";
addManualTestStep(
function() {},
null,
'1. Ensure the browser is at the default pinch and browser zoom ' +
'levels (100%). Most browsers: ctrl+0');
var scale = 3.0;
var xTarget = 2 * window.innerWidth / scale;
var yTarget = 2 * window.innerHeight / scale;
addManualTestStep(
showPinchWidget.bind(null, scale, xTarget, yTarget, continueTest),
null,
'2.Follow instructions on pinch zoom dialog.');
addManualTestStep(
function() {
var actualScale = window.visualViewport.scale;
var actualOffsetLeft = window.visualViewport.offsetLeft;
var actualOffsetTop = window.visualViewport.offsetTop;
// This needs to happen before assertions in case they fail. A
// failed assertion stops running this function.
window.scrollTo(0, 0);
// Ensure we zoomed in to about what we expect.
assert_approx_equals(actualScale, scale, 0.2,
"window.visualViewport.scale reflects pinch-zoom level");
assert_approx_equals(actualOffsetLeft, xTarget, 5,
"offsetLeft value is correct.");
assert_approx_equals(actualOffsetTop, yTarget, 5,
"offsetTop value is correct.");
},
'With ~300% pinch-zoom',
'3. Pinch-zoom back out to the minimum scale');
addManualTestStep(
showPinchWidget.bind(null, 2, 0, 0, continueTest),
null,
'4.Follow instructions on pinch zoom dialog.');
addManualTestStep(
function() {
document.documentElement.style.overflow = "";
continueBtn.style.position = "absolute";
continueBtn.style.left = "150%";
continueBtn.style.top = "150%";
assert_approx_equals(window.visualViewport.scale, 2, 0.2,
"window.visualViewport.scale reflects pinch-zoom level");
},
'Tester pinch zoomed in correctly',
'5. Scroll fully to the bottom right. Click the continue button ' +
'there.');
addManualTestStep(
function() {
var fullscreenBox = document.getElementById('fullscreenBox');
var expectedLeft = fullscreenBox.clientWidth / 2;
var expectedTop = fullscreenBox.clientHeight / 2;
var viewOffsetLeft = window.visualViewport.offsetLeft;
var viewOffsetTop = window.visualViewport.offsetTop;
// This needs to happen before assertions in case they fail. A
// failed assertion stops running this function.
continueBtn.style.position = "";
continueBtn.style.left = "";
continueBtn.style.top = "";
window.scrollTo(0, 0);
assert_approx_equals(viewOffsetLeft, expectedLeft, 10,
"OffsetLeft is correct");
assert_approx_equals(viewOffsetTop, expectedTop, 10,
"OffsetTop");
},
'OffsetLeft and OffsetTop correct when there\'s some layout ' +
'viewport scrolling as well.',
'6. Pinch-zoom out fully');
addManualTestStep(
function() {
continueBtn.remove();
},
null,
'Test Complete');
</script>
</html>