Skip to content

paint: Support pinch-zoom for factors less than 1. #59660

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
servo-wpt-sync wants to merge 1 commit into
base: master
Choose a base branch
from
Open

paint: Support pinch-zoom for factors less than 1. #59660

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions resources/testdriver-actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@
* rejected if any actions fail.
*/
send: function() {
console.log("Sending actions: ", this.serialize());
let actions;
try {
actions = this.serialize();
Expand Down
16 changes: 3 additions & 13 deletions visual-viewport/viewport-scale-clamped.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,25 +14,15 @@
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/visual-viewport/viewport_support.js"></script>
</head>

<body>
<div style="font-size: 50px;">This page can not be pinch zoomed, it is clamped using meta viewport scale.</div>
<script> promise_test(async () => {
const x = 200, y = 200;
const initialScale = window.visualViewport.scale;
// Perform pinch zoom
await new test_driver.Actions()
.addPointer("f1", "touch")
.addPointer("f2", "touch")
.pointerMove(x, y, { origin: "viewport", sourceName: "f1" })
.pointerMove(x + 100, y + 100, { origin: "viewport", sourceName: "f2" })
.pointerDown({ sourceName: "f1" })
.pointerDown({ sourceName: "f2" })
.pointerMove(x - 100, y - 100, { origin: "viewport", sourceName: "f1", duration: 0 })
.pointerMove(x + 100, y + 100, { origin: "viewport", sourceName: "f2", duration: 0 })
.pointerUp({ sourceName: "f1" })
.pointerUp({ sourceName: "f2" }).send();
// Perform Pinch Zoom-In
await pinchZoomIn();
assert_equals(window.visualViewport.scale, initialScale, "Scale should be same");
}) </script>
</body>
Expand Down
38 changes: 38 additions & 0 deletions visual-viewport/viewport-scale-with-pinch-zoom-in.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Viewport Scale : Pinch Zoom In</title>
<link rel=help href="https://github.com/w3c/csswg-drafts/issues/9004">
<link rel=help href="https://www.w3.org/TR/2015/WD-mobile-accessibility-mapping-20150226/#zoom-magnification">
<link rel="author" title="Shubham Gupta" href="mailto:shubham.gupta@chromium.org">
<meta name="assert" content="The page can be pinch zoomed-in.">
<meta name="viewport" content="minimum-scale=0.1, initial-scale=1.0, maximum-scale=10.0">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/visual-viewport/viewport_support.js"></script>

</head>

<body>
<div style="font-size: 50px;">Pinch Zoom Test: Zoom In</div>
<script>
promise_test(async () => {
const initialScale = window.visualViewport.scale;

await pinchZoomIn();
assert_greater_than(window.visualViewport.scale, initialScale,
"Scale should be greater than initial scale after pinch zoom in");
const afterZoomIn = window.visualViewport.scale;

await pinchZoomOut();
assert_less_than(window.visualViewport.scale, afterZoomIn,
"Scale should be less than after pinch zoom out");
}) </script>
</body>

</html>
48 changes: 48 additions & 0 deletions visual-viewport/viewport-scale-with-pinch-zoom-out.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Viewport Scale : Pinch Zoom Out</title>
<link rel=help href="https://github.com/w3c/csswg-drafts/issues/9004">
<link rel=help href="https://www.w3.org/TR/2015/WD-mobile-accessibility-mapping-20150226/#zoom-magnification">
<link rel="author" title="Shubham Gupta" href="mailto:shubham.gupta@chromium.org">
<meta name="assert" content="The page can be pinch zoomed-out.">
<meta name="viewport" content="minimum-scale=0.1, initial-scale=2.0, maximum-scale=10.0">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/visual-viewport/viewport_support.js"></script>
</head>

<body style="background-color: blue">
<div style="font-size: 50px;">Pinch Zoom Test: Zoom Out</div>
<script>
function waitForScaleChange(previousScale) {
return new Promise(resolve => {
const poll = () => requestAnimationFrame(() => {
if (window.visualViewport.scale !== previousScale) {
resolve();
} else {
poll();
}
});
poll();
});
}

promise_test(async () => {
const initialScale = window.visualViewport.scale;
await pinchZoomOut();
await Promise.race([
waitForScaleChange(initialScale),
new Promise(resolve => step_timeout(resolve, 5000)),
]);
assert_less_than(window.visualViewport.scale, initialScale,
"Scale should be less than initial scale after pinch zoom out");
}) </script>
</body>

</html>
33 changes: 32 additions & 1 deletion visual-viewport/viewport_support.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ function pinchZoomIn() {
const viewport = window.visualViewport;
const center_x = Math.floor((viewport.width * viewport.scale) / 2);
const center_y = Math.floor((viewport.height * viewport.scale) / 2);

console.log("Center: ", center_x, center_y);
return new test_driver.Actions()
.setContext(window)
.addPointer("finger1", "touch")
Expand All @@ -23,6 +23,37 @@ function pinchZoomIn() {
.pointerUp({sourceName: "finger1"})
.pointerUp({sourceName: "finger2"})
.send();

console.log("Sent pinch zoom in actions");
}

// Simulates two fingers, 100px apart, pulling closer vertically to 60px of
// separation.
function pinchZoomOut() {
const viewport = window.visualViewport;
// After a zoom-in the CSS viewport may be very small, so limit the initial
// finger spread to fit within the viewport.
const css_height = viewport.height;
const offset = Math.min(50, Math.floor(css_height / 4));
const center_x = Math.floor((viewport.width * viewport.scale) / 2);
const center_y = Math.floor((viewport.height * viewport.scale) / 2);
console.log("Center: ", center_x, center_y, "offset:", offset);

return new test_driver.Actions()
.setContext(window)
.addPointer("finger1", "touch")
.addPointer("finger2", "touch")
.pointerMove(center_x, center_y - offset, {origin: "viewport", sourceName: "finger1"})
.pointerMove(center_x, center_y + offset, {origin: "viewport", sourceName: "finger2"})
.pointerDown({sourceName: "finger1"})
.pointerDown({sourceName: "finger2"})
.pointerMove(center_x, center_y, {origin: "viewport", sourceName: "finger1"})
.pointerMove(center_x, center_y, {origin: "viewport", sourceName: "finger2"})
.pointerUp({sourceName: "finger1"})
.pointerUp({sourceName: "finger2"})
.send();

console.log("Sent pinch zoom out actions");
}

// If scrollbars affect layout (i.e. what the CSS Overflow spec calls "classic
Expand Down
Loading