Skip to content

Commit de7d481

Browse files
shubhamg13servo-wpt-sync
shubhamg13
authored and
servo-wpt-sync
committed
Support pinch-zoom for factors less than 1.
Signed-off-by: Shubham Gupta <shubham.gupta@chromium.org>
1 parent 59253e1 commit de7d481

4 files changed

Lines changed: 84 additions & 13 deletions

File tree

‎visual-viewport/viewport-scale-clamped.html‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -14,25 +14,15 @@
1414
<script src="/resources/testdriver.js"></script>
1515
<script src="/resources/testdriver-actions.js"></script>
1616
<script src="/resources/testdriver-vendor.js"></script>
17+
<script src="/visual-viewport/viewport_support.js"></script>
1718
</head>
1819

1920
<body>
2021
<div style="font-size: 50px;">This page can not be pinch zoomed, it is clamped using meta viewport scale.</div>
2122
<script> promise_test(async () => {
22-
const x = 200, y = 200;
2323
const initialScale = window.visualViewport.scale;
24-
// Perform pinch zoom
25-
await new test_driver.Actions()
26-
.addPointer("f1", "touch")
27-
.addPointer("f2", "touch")
28-
.pointerMove(x, y, { origin: "viewport", sourceName: "f1" })
29-
.pointerMove(x + 100, y + 100, { origin: "viewport", sourceName: "f2" })
30-
.pointerDown({ sourceName: "f1" })
31-
.pointerDown({ sourceName: "f2" })
32-
.pointerMove(x - 100, y - 100, { origin: "viewport", sourceName: "f1", duration: 0 })
33-
.pointerMove(x + 100, y + 100, { origin: "viewport", sourceName: "f2", duration: 0 })
34-
.pointerUp({ sourceName: "f1" })
35-
.pointerUp({ sourceName: "f2" }).send();
24+
// Perform Pinch Zoom-In
25+
await pinchZoomIn();
3626
assert_equals(window.visualViewport.scale, initialScale, "Scale should be same");
3727
}) </script>
3828
</body>

‎visual-viewport/viewport-scale-with-pinch-zoom-in.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Viewport Scale : Pinch Zoom In</title>
7+
<link rel=help href="https://github.com/w3c/csswg-drafts/issues/9004">
8+
<link rel=help href="https://www.w3.org/TR/2015/WD-mobile-accessibility-mapping-20150226/#zoom-magnification">
9+
<link rel="author" title="Shubham Gupta" href="mailto:shubham.gupta@chromium.org">
10+
<meta name="assert" content="The page can be pinch zoomed-in.">
11+
<meta name="viewport" content="minimum-scale=0.1, initial-scale=1.0, maximum-scale=10.0">
12+
<script src="/resources/testharness.js"></script>
13+
<script src="/resources/testharnessreport.js"></script>
14+
<script src="/resources/testdriver.js"></script>
15+
<script src="/resources/testdriver-actions.js"></script>
16+
<script src="/resources/testdriver-vendor.js"></script>
17+
<script src="/visual-viewport/viewport_support.js"></script>
18+
19+
</head>
20+
21+
<body>
22+
<div style="font-size: 50px;">Pinch Zoom Test: Zoom In</div>
23+
<script> promise_test(async () => {
24+
const initialScale = window.visualViewport.scale;
25+
await pinchZoomIn();
26+
assert_greater_than(window.visualViewport.scale, initialScale, "Scale should be greater than initial scale");
27+
}) </script>
28+
</body>
29+
30+
</html>

‎visual-viewport/viewport-scale-with-pinch-zoom-out.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Viewport Scale : Pinch Zoom Out</title>
7+
<link rel=help href="https://github.com/w3c/csswg-drafts/issues/9004">
8+
<link rel=help href="https://www.w3.org/TR/2015/WD-mobile-accessibility-mapping-20150226/#zoom-magnification">
9+
<link rel="author" title="Shubham Gupta" href="mailto:shubham.gupta@chromium.org">
10+
<meta name="assert" content="The page can be pinch zoomed-out.">
11+
<meta name="viewport" content="minimum-scale=0.1, initial-scale=2.0, maximum-scale=10.0">
12+
<script src="/resources/testharness.js"></script>
13+
<script src="/resources/testharnessreport.js"></script>
14+
<script src="/resources/testdriver.js"></script>
15+
<script src="/resources/testdriver-actions.js"></script>
16+
<script src="/resources/testdriver-vendor.js"></script>
17+
<script src="/visual-viewport/viewport_support.js"></script>
18+
</head>
19+
20+
<body style="background-color: blue">
21+
<div style="font-size: 50px;">Pinch Zoom Test: Zoom Out</div>
22+
<script> promise_test(async () => {
23+
const initialScale = window.visualViewport.scale;
24+
await pinchZoomOut();
25+
assert_less_than(window.visualViewport.scale, initialScale, "Scale should be less than initial scale");
26+
}) </script>
27+
</body>
28+
29+
</html>

‎visual-viewport/viewport_support.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,28 @@ function pinchZoomIn() {
2525
.send();
2626
}
2727

28+
// Simulates two fingers, 100px apart, pulling closer vertically to 60px of
29+
// separation.
30+
function pinchZoomOut() {
31+
const viewport = window.visualViewport;
32+
const center_x = Math.floor((viewport.width * viewport.scale) / 2);
33+
const center_y = Math.floor((viewport.height * viewport.scale) / 2);
34+
35+
return new test_driver.Actions()
36+
.setContext(window)
37+
.addPointer("finger1", "touch")
38+
.addPointer("finger2", "touch")
39+
.pointerMove(center_x, center_y-50, {origin: "viewport", sourceName: "finger1"})
40+
.pointerMove(center_x, center_y+50, {origin: "viewport", sourceName: "finger2"})
41+
.pointerDown({sourceName: "finger1"})
42+
.pointerDown({sourceName: "finger2"})
43+
.pointerMove(center_x, center_y-50+20, {origin: "viewport", sourceName: "finger1"})
44+
.pointerMove(center_x, center_y+50-20, {origin: "viewport", sourceName: "finger2"})
45+
.pointerUp({sourceName: "finger1"})
46+
.pointerUp({sourceName: "finger2"})
47+
.send();
48+
}
49+
2850
// If scrollbars affect layout (i.e. what the CSS Overflow spec calls "classic
2951
// scrollbars", as opposed to overlay scrollbars), return the scrollbar
3052
// thickness in CSS pixels. Returns 0 otherwise.

0 commit comments

Comments
 (0)