New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 635031 link

Starred by 15 users

Issue metadata

Status: Fixed
Owner:
Closed: Sep 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Android , Windows , Chrome , Mac
Pri: 3
Type: Task
Launch-Accessibility: NotReviewed
Launch-Legal: NotReviewed
Launch-Privacy: NotReviewed
Launch-Security: NotReviewed
Launch-Test: NA
Launch-UI: NA

Blocked on:
issue 595826

Blocking:
issue 410894
issue 489206



Sign in to add a comment

Ship window.visualViewport API

Project Member Reported by bokan@chromium.org, Aug 5 2016

Issue description

Change description: Adds a visualViewport object to window that allows authors to directly query properties of the visual viewport.

Changes to API surface:
- Add a visualViewport object on window:
visualViewport = {
    double scrollTop;  // Relative to the layout viewport
    double scrollLeft; // and read-only.

    double pageX;  // Relative to the document
    double pageY;  // and read-only.

    double clientWidth;  // Read-only and excludes the scrollbars
    double clientHeight; // if present. These values give the number
                         // of CSS pixels visible in the visual viewport.
                         // i.e. they shrink as the user zooms in.

    double scale;     // Read-only. The scaling factor applied to
                      // the visual viewport relative to the `ideal
                      // viewport` (size at width=device-width). This
                      // is the same scale as used in the viewport
                      // <meta> tag.
}

-Fire a scroll event against window.visualViewport whenever the scrollTop or scrollLeft attributes change.

-Fire a resize event against window.visualViewport whenever the clientWidth or clientHeight attributes change.

Links: https://github.com/WICG/ViewportAPI
Public standards discussion: https://discourse.wicg.io/t/explicit-api-for-visual-viewport/1399

Support in other browsers:
Internet Explorer: Expressed interest (https://discourse.wicg.io/t/explicit-api-for-visual-viewport/1399)
Firefox: No public signals
Safari: No public signals

 

Comment 1 by bokan@chromium.org, Aug 5 2016

Blockedon: 595826
Blocking: 410894

Comment 2 by bokan@chromium.org, Aug 31 2016

Components: Blink>Scroll

Comment 3 by bokan@chromium.org, Oct 20 2016

Labels: -M-54 M-57

Comment 4 by rbyers@chromium.org, Apr 19 2017

Blocking: 489206

Comment 5 by rbyers@chromium.org, Apr 19 2017

Simon Fraser from Apple (viewport expert) says the VisualViewport API looks good to him: https://bugs.webkit.org/show_bug.cgi?id=170982#c2

I've updated the chromestatus entry to indicate public support from WebKit: https://www.chromestatus.com/features/5737866978131968

Once we've got web-platform-tests, I think we should go ahead and ship!

Comment 6 by rbyers@chromium.org, Apr 19 2017

Attempt to ship after taking a pass over the outstanding issues anyway: https://github.com/WICG/ViewportAPI/issues

In particular https://github.com/WICG/ViewportAPI/issues/35 should be resolved one way or another.
Project Member

Comment 7 by bugdroid1@chromium.org, Jun 12 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/2be632d5bef8b0a00525366005c6c51a439b4f7b

commit 2be632d5bef8b0a00525366005c6c51a439b4f7b
Author: David Bokan <bokan@chromium.org>
Date: Mon Jun 12 19:32:03 2017

Add web platform tests for ViewportAPI.

Bug:  635031 
Change-Id: If116b73922b27263fc5934f85939a95ad861ffd0
Reviewed-on: https://chromium-review.googlesource.com/528374
Commit-Queue: David Bokan <bokan@chromium.org>
Reviewed-by: Dave Tapuska <dtapuska@chromium.org>
Cr-Commit-Position: refs/heads/master@{#478718}
[modify] https://crrev.com/2be632d5bef8b0a00525366005c6c51a439b4f7b/third_party/WebKit/LayoutTests/TestExpectations
[add] https://crrev.com/2be632d5bef8b0a00525366005c6c51a439b4f7b/third_party/WebKit/LayoutTests/external/wpt/viewport/OWNERS
[add] https://crrev.com/2be632d5bef8b0a00525366005c6c51a439b4f7b/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-dimensions-custom-scrollbars-manual.html
[add] https://crrev.com/2be632d5bef8b0a00525366005c6c51a439b4f7b/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-dimensions-scrollbars-manual.html
[add] https://crrev.com/2be632d5bef8b0a00525366005c6c51a439b4f7b/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-offset-manual.html
[add] https://crrev.com/2be632d5bef8b0a00525366005c6c51a439b4f7b/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-page-manual.html
[add] https://crrev.com/2be632d5bef8b0a00525366005c6c51a439b4f7b/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-read-size-causes-layout.html
[add] https://crrev.com/2be632d5bef8b0a00525366005c6c51a439b4f7b/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-read-size-in-iframe-causes-layout.html
[add] https://crrev.com/2be632d5bef8b0a00525366005c6c51a439b4f7b/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-resize-event-manual.html
[add] https://crrev.com/2be632d5bef8b0a00525366005c6c51a439b4f7b/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-scale-iframe-manual.html
[add] https://crrev.com/2be632d5bef8b0a00525366005c6c51a439b4f7b/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-scale-manual.html
[add] https://crrev.com/2be632d5bef8b0a00525366005c6c51a439b4f7b/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-scroll-event-manual.html
[add] https://crrev.com/2be632d5bef8b0a00525366005c6c51a439b4f7b/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-scrollbars-cause-resize.html
[add] https://crrev.com/2be632d5bef8b0a00525366005c6c51a439b4f7b/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-type.html
[add] https://crrev.com/2be632d5bef8b0a00525366005c6c51a439b4f7b/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-unscaled-scale-iframe.html
[add] https://crrev.com/2be632d5bef8b0a00525366005c6c51a439b4f7b/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-unscaled-scale.html
[add] https://crrev.com/2be632d5bef8b0a00525366005c6c51a439b4f7b/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-unscaled-scroll-iframe.html
[add] https://crrev.com/2be632d5bef8b0a00525366005c6c51a439b4f7b/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-unscaled-scroll.html
[add] https://crrev.com/2be632d5bef8b0a00525366005c6c51a439b4f7b/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-unscaled-size-iframe.html
[add] https://crrev.com/2be632d5bef8b0a00525366005c6c51a439b4f7b/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-unscaled-size.html
[add] https://crrev.com/2be632d5bef8b0a00525366005c6c51a439b4f7b/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport_support.js

Project Member

Comment 8 by bugdroid1@chromium.org, Jun 12 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/c43f20626116a43516ae3568cfb1aa30b0ba6dd8

commit c43f20626116a43516ae3568cfb1aa30b0ba6dd8
Author: David Bokan <bokan@chromium.org>
Date: Mon Jun 12 23:58:52 2017

Revert "Add web platform tests for ViewportAPI."

This reverts commit 2be632d5bef8b0a00525366005c6c51a439b4f7b.

Reason for revert: Upstream WPT failing linter. Will reland with lint erros fixed

Original change's description:
> Add web platform tests for ViewportAPI.
> 
> Bug:  635031 
> Change-Id: If116b73922b27263fc5934f85939a95ad861ffd0
> Reviewed-on: https://chromium-review.googlesource.com/528374
> Commit-Queue: David Bokan <bokan@chromium.org>
> Reviewed-by: Dave Tapuska <dtapuska@chromium.org>
> Cr-Commit-Position: refs/heads/master@{#478718}

TBR=bokan@chromium.org,dtapuska@chromium.org
No-Presubmit: true
No-Tree-Checks: true
No-Try: true
Bug:  635031 

Change-Id: Iae9c03e0ee0f625e4e95ccf2f81d1b14d6b64c90
Reviewed-on: https://chromium-review.googlesource.com/532196
Reviewed-by: David Bokan <bokan@chromium.org>
Commit-Queue: David Bokan <bokan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#478826}
[modify] https://crrev.com/c43f20626116a43516ae3568cfb1aa30b0ba6dd8/third_party/WebKit/LayoutTests/TestExpectations
[delete] https://crrev.com/e129166907c06d17f16bda60f38efa6ee0f406d1/third_party/WebKit/LayoutTests/external/wpt/viewport/OWNERS
[delete] https://crrev.com/e129166907c06d17f16bda60f38efa6ee0f406d1/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-dimensions-custom-scrollbars-manual.html
[delete] https://crrev.com/e129166907c06d17f16bda60f38efa6ee0f406d1/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-dimensions-scrollbars-manual.html
[delete] https://crrev.com/e129166907c06d17f16bda60f38efa6ee0f406d1/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-offset-manual.html
[delete] https://crrev.com/e129166907c06d17f16bda60f38efa6ee0f406d1/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-page-manual.html
[delete] https://crrev.com/e129166907c06d17f16bda60f38efa6ee0f406d1/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-read-size-causes-layout.html
[delete] https://crrev.com/e129166907c06d17f16bda60f38efa6ee0f406d1/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-read-size-in-iframe-causes-layout.html
[delete] https://crrev.com/e129166907c06d17f16bda60f38efa6ee0f406d1/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-resize-event-manual.html
[delete] https://crrev.com/e129166907c06d17f16bda60f38efa6ee0f406d1/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-scale-iframe-manual.html
[delete] https://crrev.com/e129166907c06d17f16bda60f38efa6ee0f406d1/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-scale-manual.html
[delete] https://crrev.com/e129166907c06d17f16bda60f38efa6ee0f406d1/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-scroll-event-manual.html
[delete] https://crrev.com/e129166907c06d17f16bda60f38efa6ee0f406d1/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-scrollbars-cause-resize.html
[delete] https://crrev.com/e129166907c06d17f16bda60f38efa6ee0f406d1/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-type.html
[delete] https://crrev.com/e129166907c06d17f16bda60f38efa6ee0f406d1/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-unscaled-scale-iframe.html
[delete] https://crrev.com/e129166907c06d17f16bda60f38efa6ee0f406d1/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-unscaled-scale.html
[delete] https://crrev.com/e129166907c06d17f16bda60f38efa6ee0f406d1/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-unscaled-scroll-iframe.html
[delete] https://crrev.com/e129166907c06d17f16bda60f38efa6ee0f406d1/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-unscaled-scroll.html
[delete] https://crrev.com/e129166907c06d17f16bda60f38efa6ee0f406d1/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-unscaled-size-iframe.html
[delete] https://crrev.com/e129166907c06d17f16bda60f38efa6ee0f406d1/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-unscaled-size.html
[delete] https://crrev.com/e129166907c06d17f16bda60f38efa6ee0f406d1/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport_support.js

Project Member

Comment 9 by bugdroid1@chromium.org, Jun 13 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/618cba5a11e3b1a65c4968b1f85ef6745fb266ca

commit 618cba5a11e3b1a65c4968b1f85ef6745fb266ca
Author: David Bokan <bokan@chromium.org>
Date: Tue Jun 13 14:38:31 2017

Reland 'Add web platform tests for ViewportAPI.'

This was reverted in Iae9c03e0ee0f625e4e95ccf2f81d1b14d6b64c90 due to
the upstream WPT repo failing the lint check.

This patch fixes the issue which was that two of the tests were using
the Chromium-relative testharness.js path. 

TBR=dtapuska@chromium.org

Bug:  635031 
Change-Id: I5e1277125cabf414a75d8d869f78b8efc9bb3684
Reviewed-on: https://chromium-review.googlesource.com/532593
Reviewed-by: Dave Tapuska <dtapuska@chromium.org>
Reviewed-by: David Bokan <bokan@chromium.org>
Commit-Queue: David Bokan <bokan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#479014}
[modify] https://crrev.com/618cba5a11e3b1a65c4968b1f85ef6745fb266ca/third_party/WebKit/LayoutTests/TestExpectations
[add] https://crrev.com/618cba5a11e3b1a65c4968b1f85ef6745fb266ca/third_party/WebKit/LayoutTests/external/wpt/viewport/OWNERS
[add] https://crrev.com/618cba5a11e3b1a65c4968b1f85ef6745fb266ca/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-dimensions-custom-scrollbars-manual.html
[add] https://crrev.com/618cba5a11e3b1a65c4968b1f85ef6745fb266ca/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-dimensions-scrollbars-manual.html
[add] https://crrev.com/618cba5a11e3b1a65c4968b1f85ef6745fb266ca/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-offset-manual.html
[add] https://crrev.com/618cba5a11e3b1a65c4968b1f85ef6745fb266ca/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-page-manual.html
[add] https://crrev.com/618cba5a11e3b1a65c4968b1f85ef6745fb266ca/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-read-size-causes-layout.html
[add] https://crrev.com/618cba5a11e3b1a65c4968b1f85ef6745fb266ca/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-read-size-in-iframe-causes-layout.html
[add] https://crrev.com/618cba5a11e3b1a65c4968b1f85ef6745fb266ca/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-resize-event-manual.html
[add] https://crrev.com/618cba5a11e3b1a65c4968b1f85ef6745fb266ca/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-scale-iframe-manual.html
[add] https://crrev.com/618cba5a11e3b1a65c4968b1f85ef6745fb266ca/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-scale-manual.html
[add] https://crrev.com/618cba5a11e3b1a65c4968b1f85ef6745fb266ca/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-scroll-event-manual.html
[add] https://crrev.com/618cba5a11e3b1a65c4968b1f85ef6745fb266ca/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-scrollbars-cause-resize.html
[add] https://crrev.com/618cba5a11e3b1a65c4968b1f85ef6745fb266ca/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-type.html
[add] https://crrev.com/618cba5a11e3b1a65c4968b1f85ef6745fb266ca/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-unscaled-scale-iframe.html
[add] https://crrev.com/618cba5a11e3b1a65c4968b1f85ef6745fb266ca/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-unscaled-scale.html
[add] https://crrev.com/618cba5a11e3b1a65c4968b1f85ef6745fb266ca/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-unscaled-scroll-iframe.html
[add] https://crrev.com/618cba5a11e3b1a65c4968b1f85ef6745fb266ca/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-unscaled-scroll.html
[add] https://crrev.com/618cba5a11e3b1a65c4968b1f85ef6745fb266ca/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-unscaled-size-iframe.html
[add] https://crrev.com/618cba5a11e3b1a65c4968b1f85ef6745fb266ca/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport-unscaled-size.html
[add] https://crrev.com/618cba5a11e3b1a65c4968b1f85ef6745fb266ca/third_party/WebKit/LayoutTests/external/wpt/viewport/viewport_support.js

Labels: -M-57

Comment 12 by bokan@chromium.org, Jun 28 2017

Labels: M-61
Status: Started (was: Assigned)
This is now turned on in ToT and should launch in M61.
Can this be marked as fixed?
Well, it hasn't shipped yet. Do we close the bug when it hits stable or once it's enabled by default?
Labels: migrated-launch-owp Type-Task
This issue has been automatically relabelled type=task because type=launch-owp issues are now officially deprecated. The deprecation is because they were creating confusion about how to get launch approvals, which should be instead done via type=launch issues.

We recommend this issue be used for implementation tracking (for public visibility), but if you already have an issue for that, you may mark this as duplicate.

For more details see here: https://docs.google.com/document/d/1JA6RohjtZQc26bTrGoIE_bSXGXUDQz8vc6G0n_sZJ2o/edit

For any questions, please contact owencm, sshruthi, larforge

Comment 16 by bokan@chromium.org, Sep 28 2017

Status: Fixed (was: Started)

Sign in to add a comment