OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <style> | 2 <style> |
3 body { | 3 body { |
4 height: 2000px; | 4 height: 2000px; |
5 width: 2000px; | 5 width: 2000px; |
6 } | 6 } |
7 ::-webkit-scrollbar { | 7 ::-webkit-scrollbar { |
8 width: 20px; | 8 width: 20px; |
9 height: 20px; | 9 height: 20px; |
10 } /* this targets the default scrollbar (compulsory) */ | 10 } /* this targets the default scrollbar (compulsory) */ |
11 | 11 |
12 ::-webkit-scrollbar-track { | 12 ::-webkit-scrollbar-track { |
13 background-color: #b46868; | 13 background-color: #b46868; |
14 } /* the new scrollbar will have a flat appearance with the set background col
or */ | 14 } /* the new scrollbar will have a flat appearance with the set background col
or */ |
15 | 15 |
16 ::-webkit-scrollbar-thumb { | 16 ::-webkit-scrollbar-thumb { |
17 background-color: rgba(0, 0, 0, 0.2); | 17 background-color: rgba(0, 0, 0, 0.2); |
18 } /* this will style the thumb, ignoring the track */ | 18 } /* this will style the thumb, ignoring the track */ |
19 </style> | 19 </style> |
20 | 20 |
21 <script src="../../../resources/testharness.js"></script> | 21 <script src="../../../resources/testharness.js"></script> |
22 <script src="../../../resources/testharnessreport.js"></script> | 22 <script src="../../../resources/testharnessreport.js"></script> |
23 <script> | 23 <script> |
24 var browserZoomFactor = 1.25; | 24 var browserZoomFactor = 1.25; |
25 var pageScaleFactor = 2; | 25 var pageScaleFactor = 2; |
26 var scrollbarWidthCSSPixels = 20 / pageScaleFactor; | 26 var scrollbarWidthCSSPixels = 20 / pageScaleFactor; |
27 var scrollbaHeightCSSPixels = 20 / pageScaleFactor; | 27 var scrollbaHeightCSSPixels = 20 / pageScaleFactor; |
28 | 28 |
29 function viewport() { | 29 function viewport() { |
30 return window.visualViewport; | 30 return window.view; |
31 } | 31 } |
32 | 32 |
33 async_test(function(t) { | 33 async_test(function(t) { |
34 window.onload = t.step_func(function() { | 34 window.onload = t.step_func(function() { |
35 // TODO(ymalik): Remove hook to internals to pinch-zoom here and browser | 35 // TODO(ymalik): Remove hook to internals to pinch-zoom here and browser |
36 // zoom below. This will be required to upstream to w3c repo. | 36 // zoom below. This will be required to upstream to w3c repo. |
37 internals.setPageScaleFactor(pageScaleFactor); | 37 internals.setPageScaleFactor(pageScaleFactor); |
38 | 38 |
39 // Verify viewport dimensions exclude scrollbar. | 39 // Verify viewport dimensions exclude scrollbar. |
40 assert_equals(viewport().clientWidth, 800 / pageScaleFactor - scrollbarWid
thCSSPixels); | 40 assert_equals(viewport().width, 800 / pageScaleFactor - scrollbarWidthCSSP
ixels); |
41 assert_equals(viewport().clientHeight, 600 / pageScaleFactor - scrollbaHei
ghtCSSPixels); | 41 assert_equals(viewport().height, 600 / pageScaleFactor - scrollbaHeightCSS
Pixels); |
42 | 42 |
43 // Apply browser zoom. | 43 // Apply browser zoom. |
44 window.internals.setZoomFactor(browserZoomFactor); | 44 window.internals.setZoomFactor(browserZoomFactor); |
45 | 45 |
46 // Verify scrollbar exclusion with browser zoom. Custom scrollbars are | 46 // Verify scrollbar exclusion with browser zoom. Custom scrollbars are |
47 // scaled with browser zoom but remain unchanged with pinch zoom. | 47 // scaled with browser zoom but remain unchanged with pinch zoom. |
48 assert_equals(viewport().clientWidth, 800 / browserZoomFactor / pageScaleF
actor - scrollbarWidthCSSPixels * browserZoomFactor); | 48 assert_equals(viewport().width, 800 / browserZoomFactor / pageScaleFactor
- scrollbarWidthCSSPixels * browserZoomFactor); |
49 assert_equals(viewport().clientHeight, 600 / browserZoomFactor / pageScale
Factor - scrollbaHeightCSSPixels * browserZoomFactor); | 49 assert_equals(viewport().height, 600 / browserZoomFactor / pageScaleFactor
- scrollbaHeightCSSPixels * browserZoomFactor); |
50 t.done(); | 50 t.done(); |
51 }); | 51 }); |
52 }, 'Verify viewport dimensions exclude custom scrollbars.'); | 52 }, 'Verify viewport dimensions exclude custom scrollbars.'); |
53 </script> | 53 </script> |
OLD | NEW |