OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 | |
3 <style> | |
4 body { font: 16px/16px monospace; } | |
5 | |
6 .region { | |
7 -webkit-flow-from: flow; | |
8 width: 250px; | |
9 height: 55px; | |
10 border: 1px solid red; | |
11 padding: 2px; | |
12 overflow: visible; | |
13 } | |
14 | |
15 #region4 { | |
16 height: auto; | |
17 position: absolute; | |
18 left: 330px; | |
19 top: 120px; | |
20 border-width: thick; | |
21 } | |
22 | |
23 #container { | |
24 overflow: auto; | |
25 border: 3px solid blue; | |
26 height: 100px; | |
27 padding: 10px; | |
28 width: 270px; | |
29 } | |
30 | |
31 #article { | |
32 -webkit-flow-into: flow; | |
33 } | |
34 | |
35 .inner_scroll { | |
36 height: 75px; | |
37 border: 2px solid green; | |
38 margin: 5px; | |
39 overflow: scroll; | |
40 padding: 5px; | |
41 } | |
42 | |
43 p { | |
44 margin: 0px; | |
45 } | |
46 </style> | |
47 | |
48 <script> | |
49 onload = function() { | |
50 if (window.eventSender) { | |
51 eventSender.mouseMoveTo(150, 230); | |
52 eventSender.continuousMouseScrollBy(0, -10000); | |
53 eventSender.continuousMouseScrollBy(0, -10000); | |
54 eventSender.mouseMoveTo(0, 0); | |
55 } | |
56 } | |
57 </script> | |
58 | |
59 <body> | |
60 <div> | |
61 The text passes if everything can be scrolled normally using the mouse w
heel: | |
62 <ul> | |
63 <li>Scrolling inside the green div should work until it reaches the
end and then the blue container should scroll.</li> | |
64 <li>Scrolling inside the orange div should work until it reaches the
end and then the blue container should NOT scroll because the region in which t
he orange div is flowed is absolutely positioned</li> | |
65 </ul> | |
66 </div> | |
67 | |
68 <div id="container"> | |
69 <!-- content to be flowed in regions --> | |
70 <div id="article"> | |
71 <p>Assume that there is enough content in the flow to fill the regio
ns</p> | |
72 <div class="inner_scroll" style="height: 30px"> | |
73 <p>Assume that there is enough content in the flow to fill the r
egions and the size of the container is less than the size of regions so that th
e container gets vertical scrollbar. Case1. If the mouse cursor is over the flow
thread fragmented content inside a region, the user is unable to scroll the con
tent inside the container. Case2. However, if the mouse is outside the flow thre
ad content but still inside the container, then the user is able to scroll the c
ontainer content. There *should be* a possibility to scroll the container conten
t even when the mouse cursor is over the flow thread content in regions. (Case1)
</p> | |
74 </div> | |
75 <p>is less than the size of regions so that the container gets verti
cal scrollbar. Case1. If the mouse cursor is over the flow thread fragmented con
tent inside a region, the user is unable to scroll the content inside the contai
ner. </p> | |
76 <div class="inner_scroll" style="border-color: orange;"> | |
77 <p>Assume that there is enough content in the flow to fill the r
egions and the size of the container is less than the size of regions so that th
e container gets vertical scrollbar. Case1. If the mouse cursor is over the flow
thread fragmented content inside a region, the user is unable to scroll the con
tent inside the container. Case2. However, if the mouse is outside the flow thre
ad content but still inside the container, then the user is able to scroll the c
ontainer content. There *should be* a possibility to scroll the container conten
t even when the mouse cursor is over the flow thread content in regions. (Case1)
</p> | |
78 </div> | |
79 <p>Assume that there is enough content in the flow to fill the regio
ns and the size of the container is less than the size of regions so that the co
ntainer gets vertical scrollbar. Case1.</p> | |
80 </div> | |
81 | |
82 <!-- regions that will fragment the content --> | |
83 <div class="region"></div> | |
84 <div class="region"></div> | |
85 <div class="region"></div> | |
86 <div class="region" id="region4"></div> | |
87 </div> | |
88 </body> | |
OLD | NEW |