Skip to content

Commit f2afcaa

Browse files
Implement VisualViewport API attributes
https://bugs.webkit.org/show_bug.cgi?id=179385 Patch by Ali Juma <[email protected]> on 2017-11-22 Reviewed by Frédéric Wang. LayoutTests/imported/w3c: Update expectations for viewport WPTs. The new expectations are all passing, except as mentioned below. * web-platform-tests/viewport/viewport-no-resize-event-on-overflow-recalc-expected.txt: * web-platform-tests/viewport/viewport-read-size-causes-layout-expected.txt: * web-platform-tests/viewport/viewport-read-size-in-iframe-causes-layout-expected.txt: * web-platform-tests/viewport/viewport-resize-event-on-load-overflowing-page-expected.txt: Fails since events are not implemented yet (wkbug.com/b/179386). * web-platform-tests/viewport/viewport-scrollbars-cause-resize-expected.txt: * web-platform-tests/viewport/viewport-type-expected.txt: * web-platform-tests/viewport/viewport-unscaled-scale-expected.txt: * web-platform-tests/viewport/viewport-unscaled-scale-iframe-expected.txt: * web-platform-tests/viewport/viewport-unscaled-scroll-expected.txt: * web-platform-tests/viewport/viewport-unscaled-scroll-iframe-expected.txt: Passing expectation for non-iOS, but fails on iOS because iframes aren't scrollable (wkbug.com/b/179794). * web-platform-tests/viewport/viewport-unscaled-size-expected.txt: * web-platform-tests/viewport/viewport-unscaled-size-iframe-expected.txt: Passing expectation for non-iOS, but fails on iOS because iframes aren't scrollable (wkbug.com/b/179794). Source/WebCore: Add a visualViewport attribute to Window, and implement the VisualViewport interface (https://wicg.github.io/visual-viewport/#the-visualviewport-interface). This is behind a newly-added VisualViewportAPI experimental feature flag. Tests: fast/visual-viewport/viewport-dimensions-exclude-custom-scrollbars.html fast/visual-viewport/viewport-dimensions-exclude-scrollbars.html fast/visual-viewport/viewport-dimensions-iframe.html fast/visual-viewport/viewport-dimensions-under-page-zoom.html fast/visual-viewport/viewport-dimensions.html * CMakeLists.txt: * DerivedSources.cpp: * DerivedSources.make: * Sources.txt: * WebCore.xcodeproj/project.pbxproj: * bindings/js/WebCoreBuiltinNames.h: * dom/EventTargetFactory.in: * page/DOMWindow.cpp: (WebCore::DOMWindow::~DOMWindow): (WebCore::DOMWindow::resetDOMWindowProperties): (WebCore::DOMWindow::visualViewport const): * page/DOMWindow.h: * page/DOMWindow.idl: * page/Settings.yaml: * page/VisualViewport.cpp: Added. (WebCore::VisualViewport::VisualViewport): (WebCore::VisualViewport::eventTargetInterface const): (WebCore::VisualViewport::scriptExecutionContext const): (WebCore::getFrameViewAndLayoutIfNonNull): (WebCore::VisualViewport::offsetLeft const): (WebCore::VisualViewport::offsetTop const): (WebCore::VisualViewport::pageLeft const): (WebCore::VisualViewport::pageTop const): (WebCore::VisualViewport::width const): (WebCore::VisualViewport::height const): (WebCore::VisualViewport::scale const): * page/VisualViewport.h: Added. * page/VisualViewport.idl: Added. Source/WebKit: Add a VisualViewportAPI experimental feature. * Shared/WebPreferences.yaml: Source/WebKitLegacy/mac: Add a VisualViewportAPI preference. * WebView/WebPreferenceKeysPrivate.h: * WebView/WebPreferences.mm: (+[WebPreferences initialize]): (-[WebPreferences visualViewportAPIEnabled]): (-[WebPreferences setVisualViewportAPIEnabled:]): * WebView/WebPreferencesPrivate.h: * WebView/WebView.mm: (-[WebView _preferencesChanged:]): Source/WebKitLegacy/win: Add a VisualViewportAPI preference. * Interfaces/IWebPreferencesPrivate.idl: * WebPreferenceKeysPrivate.h: * WebPreferences.cpp: (WebPreferences::initializeDefaultSettings): (WebPreferences::visualViewportAPIEnabled): (WebPreferences::setVisualViewportAPIEnabled): * WebPreferences.h: * WebView.cpp: (WebView::notifyPreferencesChanged): Tools: Enable the VisualViewportAPI in layout tests. * DumpRenderTree/mac/DumpRenderTree.mm: (enableExperimentalFeatures): * DumpRenderTree/win/DumpRenderTree.cpp: (enableExperimentalFeatures): LayoutTests: Add tests for the Visual Viewport API, based on Blink's layout tests but modified to use UIScriptController. * fast/visual-viewport/viewport-dimensions-exclude-custom-scrollbars-expected.txt: Added. * fast/visual-viewport/viewport-dimensions-exclude-custom-scrollbars.html: Added. * fast/visual-viewport/viewport-dimensions-exclude-scrollbars-expected.txt: Added. * fast/visual-viewport/viewport-dimensions-exclude-scrollbars.html: Added. * fast/visual-viewport/viewport-dimensions-expected.txt: Added. * fast/visual-viewport/viewport-dimensions-iframe-expected.txt: Added. * fast/visual-viewport/viewport-dimensions-iframe.html: Added. * fast/visual-viewport/viewport-dimensions-under-page-zoom-expected.txt: Added. * fast/visual-viewport/viewport-dimensions-under-page-zoom.html: Added. * fast/visual-viewport/viewport-dimensions.html: Added. * platform/gtk/TestExpectations: Skipped tests that use UIScriptController::zoomToScale, since this isn't implemented on GTK (webkit.org/b/168050). * platform/ios/fast/visual-viewport/viewport-dimensions-iframe-expected.txt: Added. Fails because iframes aren't scrollable on iOS (webkit.org/b/179794). * platform/ios/imported/w3c/web-platform-tests/viewport/viewport-unscaled-scroll-iframe-expected.txt: Added. Fails because iframes aren't scrollable on iOS (webkit.org/b/179794). * platform/ios/imported/w3c/web-platform-tests/viewport/viewport-unscaled-size-expected.txt: Added. Platform-specific expectation because of the window size being different on iOS. * platform/ios/imported/w3c/web-platform-tests/viewport/viewport-unscaled-size-iframe-expected.txt: Added. Fails because iframes aren't scrollable on iOS (webkit.org/b/179794). * platform/mac-wk1/TestExpectations: Skipped a test that applies webkit-scrollbar to main frame scrollbars, since this is unsupported in WK1. git-svn-id: http://svn.webkit.org/repository/webkit/trunk@225103 268f45cc-cd09-0410-ab3c-d52691b4dbfc
1 parent 3b2d648 commit f2afcaa

File tree

61 files changed

+962
-58
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+962
-58
lines changed

LayoutTests/ChangeLog

+33
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,36 @@
1+
2017-11-22 Ali Juma <[email protected]>
2+
3+
Implement VisualViewport API attributes
4+
https://bugs.webkit.org/show_bug.cgi?id=179385
5+
6+
Reviewed by Frédéric Wang.
7+
8+
Add tests for the Visual Viewport API, based on Blink's layout tests but modified
9+
to use UIScriptController.
10+
11+
* fast/visual-viewport/viewport-dimensions-exclude-custom-scrollbars-expected.txt: Added.
12+
* fast/visual-viewport/viewport-dimensions-exclude-custom-scrollbars.html: Added.
13+
* fast/visual-viewport/viewport-dimensions-exclude-scrollbars-expected.txt: Added.
14+
* fast/visual-viewport/viewport-dimensions-exclude-scrollbars.html: Added.
15+
* fast/visual-viewport/viewport-dimensions-expected.txt: Added.
16+
* fast/visual-viewport/viewport-dimensions-iframe-expected.txt: Added.
17+
* fast/visual-viewport/viewport-dimensions-iframe.html: Added.
18+
* fast/visual-viewport/viewport-dimensions-under-page-zoom-expected.txt: Added.
19+
* fast/visual-viewport/viewport-dimensions-under-page-zoom.html: Added.
20+
* fast/visual-viewport/viewport-dimensions.html: Added.
21+
* platform/gtk/TestExpectations:
22+
Skipped tests that use UIScriptController::zoomToScale, since this isn't implemented on GTK (webkit.org/b/168050).
23+
* platform/ios/fast/visual-viewport/viewport-dimensions-iframe-expected.txt: Added.
24+
Fails because iframes aren't scrollable on iOS (webkit.org/b/179794).
25+
* platform/ios/imported/w3c/web-platform-tests/viewport/viewport-unscaled-scroll-iframe-expected.txt: Added.
26+
Fails because iframes aren't scrollable on iOS (webkit.org/b/179794).
27+
* platform/ios/imported/w3c/web-platform-tests/viewport/viewport-unscaled-size-expected.txt: Added.
28+
Platform-specific expectation because of the window size being different on iOS.
29+
* platform/ios/imported/w3c/web-platform-tests/viewport/viewport-unscaled-size-iframe-expected.txt: Added.
30+
Fails because iframes aren't scrollable on iOS (webkit.org/b/179794).
31+
* platform/mac-wk1/TestExpectations:
32+
Skipped a test that applies webkit-scrollbar to main frame scrollbars, since this is unsupported in WK1.
33+
134
2017-11-22 Manuel Rego Casasnovas <[email protected]>
235

336
Available height is wrong for positioned elements with "box-sizing: border-box"
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
2+
PASS Verify viewport dimensions exclude custom scrollbars.
3+
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!DOCTYPE html>
2+
<style>
3+
body {
4+
height: 2000px;
5+
width: 2000px;
6+
}
7+
::-webkit-scrollbar {
8+
width: 20px;
9+
height: 20px;
10+
}
11+
12+
::-webkit-scrollbar-track {
13+
background-color: #b46868;
14+
}
15+
16+
::-webkit-scrollbar-thumb {
17+
background-color: rgba(0, 0, 0, 0.2);
18+
}
19+
</style>
20+
21+
<script src="../../resources/testharness.js"></script>
22+
<script src="../../resources/testharnessreport.js"></script>
23+
<script>
24+
var pageZoomFactor = 1.25;
25+
var pageScaleFactor = 2;
26+
var scrollbarThicknessInCSSPixels;
27+
28+
if (window.internals)
29+
internals.settings.setVisualViewportEnabled(true);
30+
31+
function viewport() {
32+
return window.visualViewport;
33+
}
34+
35+
var test = async_test('Verify viewport dimensions exclude custom scrollbars.');
36+
37+
var doAfterZooming = test.step_func(function() {
38+
window.scrollTo(0, 0);
39+
scrollbarThicknessInCSSPixels /= pageScaleFactor;
40+
41+
assert_equals(
42+
viewport().width,
43+
800 / pageScaleFactor - scrollbarThicknessInCSSPixels,
44+
"Width with page scale");
45+
assert_equals(
46+
viewport().height, 600 / pageScaleFactor - scrollbarThicknessInCSSPixels,
47+
"Height with page scale");
48+
49+
window.internals.setPageZoomFactor(pageZoomFactor);
50+
51+
// Verify scrollbar exclusion with page zoom. Custom scrollbars are
52+
// scaled with page zoom, so their size in CSS pixels remains unchanged.
53+
assert_equals(
54+
viewport().width,
55+
800 / pageZoomFactor / pageScaleFactor - scrollbarThicknessInCSSPixels,
56+
"Width with page scale and page zoom");
57+
assert_equals(
58+
viewport().height,
59+
600 / pageZoomFactor / pageScaleFactor - scrollbarThicknessInCSSPixels,
60+
"Height with page scale and page zoom");
61+
test.done();
62+
});
63+
64+
function getUIScript() {
65+
return `(function() {
66+
uiController.zoomToScale(${pageScaleFactor}, function() {
67+
uiController.uiScriptComplete(uiController.zoomScale);
68+
});
69+
})();`;
70+
}
71+
72+
window.onload = function() {
73+
scrollbarThicknessInCSSPixels = window.innerWidth - document.documentElement.clientWidth;
74+
testRunner.runUIScript(getUIScript(), function(zoomScale) {
75+
doAfterZooming();
76+
});
77+
};
78+
</script>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
2+
PASS Verify viewport dimensions exclude scrollbars.
3+
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<style>
3+
body {
4+
height: 2000px;
5+
width: 2000px;
6+
}
7+
</style>
8+
<script src="../../resources/testharness.js"></script>
9+
<script src="../../resources/testharnessreport.js"></script>
10+
<script>
11+
var pageZoomFactor = 1.25;
12+
var pageScaleFactor = 2;
13+
var scrollbarThicknessInCSSPixels;
14+
15+
if (window.internals)
16+
internals.settings.setVisualViewportEnabled(true);
17+
18+
function viewport() {
19+
return window.visualViewport;
20+
}
21+
22+
var test = async_test('Verify viewport dimensions exclude scrollbars.');
23+
24+
var doAfterZooming = test.step_func(function() {
25+
window.scrollTo(0, 0);
26+
scrollbarThicknessInCSSPixels /= pageScaleFactor;
27+
28+
assert_equals(
29+
viewport().width,
30+
800 / pageScaleFactor - scrollbarThicknessInCSSPixels,
31+
"Width with page scale");
32+
assert_equals(
33+
viewport().height,
34+
600 / pageScaleFactor - scrollbarThicknessInCSSPixels,
35+
"Height with page scale");
36+
37+
window.internals.setPageZoomFactor(pageZoomFactor);
38+
39+
// Since the scrollbars don't change size to the user with page zoom,
40+
// they're actually smaller in CSS pixels.
41+
scrollbarThicknessInCSSPixels /= pageZoomFactor;
42+
assert_equals(
43+
viewport().width,
44+
800 / pageScaleFactor / pageZoomFactor - scrollbarThicknessInCSSPixels,
45+
"Width with page scale and page zoom");
46+
assert_equals(
47+
viewport().height,
48+
600 / pageScaleFactor / pageZoomFactor - scrollbarThicknessInCSSPixels,
49+
"Height with page scale and page zoom");
50+
test.done();
51+
});
52+
53+
function getUIScript() {
54+
return `(function() {
55+
uiController.zoomToScale(${pageScaleFactor}, function() {
56+
uiController.uiScriptComplete(uiController.zoomScale);
57+
});
58+
})();`;
59+
}
60+
61+
window.onload = function() {
62+
scrollbarThicknessInCSSPixels = window.innerWidth - document.documentElement.clientWidth;
63+
testRunner.runUIScript(getUIScript(), function(zoomScale) {
64+
doAfterZooming();
65+
});
66+
};
67+
</script>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
2+
PASS Verify viewport dimensions
3+
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2+
3+
PASS Verify viewport dimensions for iframe.
4+
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<style>
3+
body {
4+
height: 2000px;
5+
width: 2000px;
6+
}
7+
#frame {
8+
height: 500px;
9+
width: 200px;
10+
}
11+
</style>
12+
<script src="../../resources/testharness.js"></script>
13+
<script src="../../resources/testharnessreport.js"></script>
14+
<script>
15+
var pageScaleFactor = 2;
16+
var scrollbarThicknessInCSSPixels;
17+
18+
if (window.internals)
19+
internals.settings.setVisualViewportEnabled(true);
20+
21+
function frameViewport() {
22+
var frame = document.getElementById("frame");
23+
return frame.contentWindow.visualViewport;
24+
}
25+
26+
var test = async_test('Verify viewport dimensions for iframe.');
27+
28+
var doAfterZooming = test.step_func(function() {
29+
// The page scale on the root frame shouldn't affect the viewport/scale
30+
// values in the iframe.
31+
var frame = document.getElementById("frame");
32+
frame.contentWindow.scrollTo(10, 15);
33+
assert_equals(frameViewport().width, 200 - scrollbarThicknessInCSSPixels, "width");
34+
assert_equals(frameViewport().height, 500 - scrollbarThicknessInCSSPixels, "height");
35+
assert_equals(frameViewport().pageLeft, 10, "pageLeft");
36+
assert_equals(frameViewport().pageTop, 15, "pageTop");
37+
assert_equals(frameViewport().offsetLeft, 0, "offsetLeft");
38+
assert_equals(frameViewport().offsetTop, 0, "offsetTop");
39+
assert_equals(frameViewport().scale, 1, "scale");
40+
41+
test.done();
42+
});
43+
44+
function getUIScript() {
45+
return `(function() {
46+
uiController.zoomToScale(${pageScaleFactor}, function() {
47+
uiController.uiScriptComplete(uiController.zoomScale);
48+
});
49+
})();`;
50+
}
51+
52+
window.onload = function() {
53+
scrollbarThicknessInCSSPixels = window.innerWidth - document.documentElement.clientWidth;
54+
testRunner.runUIScript(getUIScript(), function(zoomScale) {
55+
doAfterZooming();
56+
});
57+
};
58+
</script>
59+
<iframe id="frame" srcdoc="
60+
<style>
61+
body {
62+
width: 2000px;
63+
height: 2000px;
64+
}
65+
</style>
66+
"></iframe>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
2+
PASS Verify viewport dimensions under page zoom.
3+
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<style>
3+
body {
4+
height: 2000px;
5+
width: 2000px;
6+
}
7+
</style>
8+
<script src="../../resources/testharness.js"></script>
9+
<script src="../../resources/testharnessreport.js"></script>
10+
<script>
11+
var pageScaleFactor = 2;
12+
var pageZoomFactor = 2;
13+
var scrollbarThicknessInCSSPixels;
14+
15+
if (window.internals)
16+
internals.settings.setVisualViewportEnabled(true);
17+
18+
function viewport() {
19+
return window.visualViewport;
20+
}
21+
22+
var test = async_test('Verify viewport dimensions under page zoom.');
23+
24+
var doAfterZooming = test.step_func(function() {
25+
window.scrollTo(0, 0);
26+
scrollbarThicknessInCSSPixels /= pageScaleFactor;
27+
28+
// Make the layout viewport have origin (100, 100).
29+
window.scrollTo(1500, 1500);
30+
window.scrollTo(100, 100);
31+
window.scrollTo(110, 110);
32+
33+
assert_equals(viewport().offsetTop, 10, "offsetTop with page scale");
34+
assert_equals(viewport().offsetLeft, 10, "offsetLeft with page scale");
35+
assert_equals(viewport().pageLeft, 110, "pageLeft with page scale");
36+
assert_equals(viewport().pageTop, 110, "pageTop with page scale");
37+
assert_equals(viewport().width, 400 - scrollbarThicknessInCSSPixels, "width with page scale");
38+
assert_equals(viewport().height, 300 - scrollbarThicknessInCSSPixels, "height with page scale");
39+
assert_equals(viewport().scale, 2, "scale with page scale");
40+
41+
window.internals.setPageZoomFactor(pageZoomFactor);
42+
scrollbarThicknessInCSSPixels /= pageZoomFactor;
43+
44+
testRunner.runUIScript(getUIScript(), function(zoomScale) {
45+
// Make the layout viewport havie origin (100, 100).
46+
window.scrollTo(1500, 1500);
47+
window.scrollTo(100, 100);
48+
window.scrollTo(110, 110);
49+
50+
assert_equals(viewport().offsetTop, 10, "offsetTop with page scale and page zoom");
51+
assert_equals(viewport().offsetLeft, 10, "offsetLeft with page scale and page zoom");
52+
assert_equals(viewport().pageLeft, 110, "pageLeft with page scale and page zoom");
53+
assert_equals(viewport().pageTop, 110, "pageTop with page scale and page zoom");
54+
assert_equals(viewport().width,
55+
400 / pageZoomFactor - scrollbarThicknessInCSSPixels,
56+
"width with page scale and page zoom");
57+
assert_equals(viewport().height,
58+
300 / pageZoomFactor - scrollbarThicknessInCSSPixels,
59+
"height with page scale and page zoom");
60+
assert_equals(viewport().scale, 2, "scale with page scale and page zoom");
61+
62+
test.done();
63+
});
64+
});
65+
66+
function getUIScript() {
67+
return `(function() {
68+
uiController.zoomToScale(${pageScaleFactor}, function() {
69+
uiController.uiScriptComplete(uiController.zoomScale);
70+
});
71+
})();`;
72+
}
73+
74+
window.onload = function() {
75+
scrollbarThicknessInCSSPixels = window.innerWidth - document.documentElement.clientWidth;
76+
testRunner.runUIScript(getUIScript(), function(zoomScale) {
77+
doAfterZooming();
78+
});
79+
};
80+
</script>

0 commit comments

Comments
 (0)