| <!DOCTYPE html> |
| <style> |
| body { |
| height: 2000px; |
| width: 2000px; |
| } |
| ::-webkit-scrollbar { |
| width: 20px; |
| height: 20px; |
| } |
| |
| ::-webkit-scrollbar-track { |
| background-color: #b46868; |
| } |
| |
| ::-webkit-scrollbar-thumb { |
| background-color: rgba(0, 0, 0, 0.2); |
| } |
| </style> |
| |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script> |
| var pageZoomFactor = 1.25; |
| var pageScaleFactor = 2; |
| var scrollbarThicknessInCSSPixels; |
| |
| function viewport() { |
| return window.visualViewport; |
| } |
| |
| var test = async_test('Verify viewport dimensions exclude custom scrollbars.'); |
| |
| var doAfterZooming = test.step_func(function() { |
| window.scrollTo(0, 0); |
| scrollbarThicknessInCSSPixels /= pageScaleFactor; |
| |
| assert_equals( |
| viewport().width, |
| 800 / pageScaleFactor - scrollbarThicknessInCSSPixels, |
| "Width with page scale"); |
| assert_equals( |
| viewport().height, 600 / pageScaleFactor - scrollbarThicknessInCSSPixels, |
| "Height with page scale"); |
| |
| window.internals.setPageZoomFactor(pageZoomFactor); |
| |
| // Verify scrollbar exclusion with page zoom. Custom scrollbars are |
| // scaled with page zoom, so their size in CSS pixels remains unchanged. |
| assert_equals( |
| viewport().width, |
| 800 / pageZoomFactor / pageScaleFactor - scrollbarThicknessInCSSPixels, |
| "Width with page scale and page zoom"); |
| assert_equals( |
| viewport().height, |
| 600 / pageZoomFactor / pageScaleFactor - scrollbarThicknessInCSSPixels, |
| "Height with page scale and page zoom"); |
| test.done(); |
| }); |
| |
| function getUIScript() { |
| return `(function() { |
| uiController.zoomToScale(${pageScaleFactor}, function() { |
| uiController.uiScriptComplete(uiController.zoomScale); |
| }); |
| })();`; |
| } |
| |
| window.onload = function() { |
| scrollbarThicknessInCSSPixels = window.innerWidth - document.documentElement.clientWidth; |
| testRunner.runUIScript(getUIScript(), function(zoomScale) { |
| doAfterZooming(); |
| }); |
| }; |
| </script> |
