OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <style> | |
3 ::-webkit-scrollbar { | |
4 width: 0px; | |
5 height: 0px; | |
6 } | |
7 | |
8 body, html { | |
9 width: 100%; | |
10 height: 100%; | |
11 margin: 0px; | |
12 } | |
13 | |
14 #rootscroller { | |
15 width: 100%; | |
16 height: 100%; | |
17 overflow: auto; | |
18 } | |
19 | |
20 #dialog { | |
21 position: fixed; | |
22 left: 50px; | |
23 right: 50px; | |
24 top: 50px; | |
25 bottom: 50px; | |
26 overflow: auto; | |
27 } | |
28 | |
29 .bigspace { | |
30 width: 2000px; | |
31 height: 2000px; | |
32 background-image: repeating-linear-gradient( | |
33 45deg, | |
34 yellow, | |
35 yellow 80px, | |
36 orange 80px, | |
37 orange 160px); | |
38 } | |
39 | |
40 .bigspace2 { | |
41 width: 2000px; | |
42 height: 2000px; | |
43 background-image: repeating-linear-gradient( | |
44 -45deg, | |
45 blue, | |
46 blue 80px, | |
47 red 80px, | |
48 red 160px); | |
49 } | |
50 | |
51 </style> | |
52 | |
53 <div id="rootscroller"> | |
54 To test manually, try scrolling the red/orange box past the end. Scrolling | |
55 shouldn't chain up to this blue/red box. | |
56 <div class="bigspace2"></div> | |
57 </div> | |
58 <div id="dialog"> | |
59 <div class="bigspace"></div> | |
60 </div> | |
61 | |
62 <script src="../../resources/testharness.js"></script> | |
63 <script src="../../resources/testharnessreport.js"></script> | |
64 | |
65 <script> | |
66 var rootScroller = document.querySelector('#rootscroller'); | |
67 var dialog = document.querySelector('#dialog'); | |
68 | |
69 document.rootScroller = rootScroller; | |
70 | |
71 var dialogRect = dialog.getBoundingClientRect(); | |
72 | |
73 var x = dialogRect.left + dialogRect.width / 2; | |
74 var y = dialogRect.top + dialogRect.height / 2; | |
75 | |
76 test(function() { | |
77 if (!window.eventSender) | |
78 return; | |
79 | |
80 // Sanity check - there should be no initial scroll. | |
81 assert_equals(dialog.scrollLeft, 0); | |
82 assert_equals(dialog.scrollTop, 0); | |
83 assert_equals(rootscroller.scrollLeft, 0); | |
84 assert_equals(rootscroller.scrollTop, 0); | |
85 | |
86 // This scroll should fully scroll the dialog | |
87 eventSender.gestureScrollBegin(x, y); | |
88 eventSender.gestureScrollUpdate(-3000, 0); | |
89 eventSender.gestureScrollUpdate(0, -3000); | |
90 eventSender.gestureScrollEnd(0, 0); | |
91 | |
92 assert_equals(dialog.scrollLeft, dialog.scrollWidth - dialog.clientWid
th); | |
93 assert_equals(dialog.scrollTop, dialog.scrollHeight - dialog.clientHei
ght); | |
94 assert_equals(rootscroller.scrollLeft, 0); | |
95 assert_equals(rootscroller.scrollTop, 0); | |
96 | |
97 // This scroll would normally chain up to the viewport but the "real" | |
98 // viewport has no scrolling. Make sure we don't scroll the | |
99 // document.rootScroller. | |
100 eventSender.gestureScrollBegin(x, y); | |
101 eventSender.gestureScrollUpdate(-3000, 0); | |
102 eventSender.gestureScrollUpdate(0, -3000); | |
103 eventSender.gestureScrollEnd(0, 0); | |
104 | |
105 assert_equals(dialog.scrollLeft, dialog.scrollWidth - dialog.clientWid
th); | |
106 assert_equals(dialog.scrollTop, dialog.scrollHeight - dialog.clientHei
ght); | |
107 assert_equals(rootscroller.scrollLeft, 0); | |
108 assert_equals(rootscroller.scrollTop, 0); | |
109 | |
110 }, 'Scrolls on the dialog should not chain to the sibling root scroller.'); | |
111 </script> | |
OLD | NEW |