WebKit Bugzilla
Attachment 348493 Details for
Bug 188043
: Add support for ScrollOptions' ScrollBehavior and CSS scroll-behavior properties
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Requests
|
Help
|
New Account
|
Log In
Remember
[x]
|
Forgot Password
Login:
[x]
Testcase
smooth-scrolling.html (text/html), 5.72 KB, created by
Frédéric Wang (:fredw)
on 2018-08-30 03:28:43 PDT
(
hide
)
Description:
Testcase
Filename:
MIME Type:
Creator:
Frédéric Wang (:fredw)
Created:
2018-08-30 03:28:43 PDT
Size:
5.72 KB
patch
obsolete
><!DOCTYPE html> ><head> > <meta charset="utf-8"> > <title>Smooth Scrolling</title> > <meta name="viewport" content="width=device-width"> > <style> > .scrollable { > background: gray; > overflow-y: auto; > -webkit-overflow-scrolling: touch; > } > > #horizontal .scrollable { > width: 400px; > height: 100px; > } > #vertical .scrollable { > height: 400px; > width: 100px; > } > #vertical { > writing-mode: vertical-lr; > } > #bidirectional .scrollable { > height: 400px; > width: 300px; > } > #bidirectional > div { > float: left; > } > </style> > <script type="text/javascript"> > function scrollBoxes(id, p) { > var container = document.getElementById(id); > container.querySelectorAll('.scrollable').forEach(function(element) { > element.scrollBy(p); > }); > container.querySelectorAll('iframe').forEach(function(element) { > element.contentWindow.scrollBy(p); > }); > } > </script> ></head> ><body> > <div id="horizontal"> > <input type="button" onclick="scrollBoxes('horizontal', {left: -2000, top: 0, behavior: 'instant'});" value="reset"/> > <input type="button" onclick="scrollBoxes('horizontal', {left: 1000, top: 0, behavior: 'instant'});" value="scroll instant"/> > <input type="button" onclick="scrollBoxes('horizontal', {left: 1000, top: 0, behavior: 'smooth'});" value="scroll smooth"/> > <input type="button" onclick="scrollBoxes('horizontal', {left: 1000, top: 0, behavior: 'auto'});" value="scroll auto"/> > <div>scroll-behavior: auto; > <div class="scrollable"> > <div style="width: 2000px; height: 400px; background: linear-gradient(135deg, red, green);"></div> > </div> > </div> > <div>scroll-behavior: smooth;<br/> > <div class="scrollable" style="scroll-behavior: smooth"> > <div style="width: 2000px; height: 400px; background: linear-gradient(135deg, red, green);"></div> > </div> > </div> > <div>scroll-behavior: auto;<br/> > <iframe width="400px" height="100px" scrolling="yes" srcdoc="<!doctype><html style='scroll-behavior: auto'><body><div style='width: 2000px; height: 400px; background: linear-gradient(135deg, red, green);'</div></body></html>"></iframe> > </div> > <div>scroll-behavior: smooth;<br/> > <iframe style="scroll-behavior: smooth" width="400px" height="100px" scrolling="yes" srcdoc="<!doctype><html style='scroll-behavior: smooth'><body><div style='width: 2000px; height: 400px; background: linear-gradient(135deg, red, green);'</div></body></html>"></iframe> > </div> > </div> > <hr/> > <div id="vertical"> > <div> > <input type="button" onclick="scrollBoxes('vertical', {top: -2000, left: 0, behavior: 'instant'});" value="reset"/> > <input type="button" onclick="scrollBoxes('vertical', {top: 1000, left: 0, behavior: 'instant'});" value="scroll instant"/> > <input type="button" onclick="scrollBoxes('vertical', {top: 1000, left: 0, behavior: 'smooth'});" value="scroll smooth"/> > <input type="button" onclick="scrollBoxes('vertical', {top: 1000, left: 0, behavior: 'auto'});" value="scroll auto"/> > </div> > <div>scroll-behavior: auto; > <div class="scrollable"> > <div style="height: 2000px; width: 400px; background: linear-gradient(135deg, red, green);"></div> > </div> > </div> > <div>scroll-behavior: smooth;<br/> > <div class="scrollable" style="scroll-behavior: smooth"> > <div style="height: 2000px; width: 400px; background: linear-gradient(135deg, red, green);"></div> > </div> > </div> > <div>scroll-behavior: auto;<br/> > <iframe height="400px" width="100px" scrolling="yes" srcdoc="<!doctype><html style='scroll-behavior: auto'><body><div style='height: 2000px; width: 400px; background: linear-gradient(135deg, red, green);'</div></body></html>"></iframe> > </div> > <div>scroll-behavior: smooth;<br/> > <iframe style="scroll-behavior: smooth" height="400px" width="100px" scrolling="yes" srcdoc="<!doctype><html style='scroll-behavior: smooth'><body><div style='height: 2000px; width: 400px; background: linear-gradient(135deg, red, green);'</div></body></html>"></iframe> > </div> > </div> > <hr/> > <div id="bidirectional"> > <div> > <input type="button" onclick="scrollBoxes('bidirectional', {top: -2000, left: -1500, behavior: 'instant'});" value="reset"/> > <input type="button" onclick="scrollBoxes('bidirectional', {top: 1000, left: 750, behavior: 'instant'});" value="scroll instant"/> > <input type="button" onclick="scrollBoxes('bidirectional', {top: 1000, left: 750, behavior: 'smooth'});" value="scroll smooth"/> > <input type="button" onclick="scrollBoxes('bidirectional', {top: 1000, left: 750, behavior: 'auto'});" value="scroll auto"/> > </div> > <div style="clear: both"></div> > <div>scroll-behavior: auto; > <div class="scrollable"> > <div style="height: 2000px; width: 1500px; background: linear-gradient(135deg, red, green);"></div> > </div> > </div> > <div>scroll-behavior: smooth;<br/> > <div class="scrollable" style="scroll-behavior: smooth"> > <div style="height: 2000px; width: 1500px; background: linear-gradient(135deg, red, green);"></div> > </div> > </div> > <div>scroll-behavior: auto;<br/> > <iframe height="400px" width="300px" scrolling="yes" srcdoc="<!doctype><html style='scroll-behavior: auto'><body><div style='height: 2000px; width: 1500px; background: linear-gradient(135deg, red, green);'</div></body></html>"></iframe> > </div> > <div>scroll-behavior: smooth;<br/> > <iframe style="scroll-behavior: smooth" height="400px" width="300px" scrolling="yes" srcdoc="<!doctype><html style='scroll-behavior: smooth'><body><div style='height: 2000px; width: 1500px; background: linear-gradient(135deg, red, green);'</div></body></html>"></iframe> > </div> > </div> ></body>
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>Smooth Scrolling</title> <meta name="viewport" content="width=device-width"> <style> .scrollable { background: gray; overflow-y: auto; -webkit-overflow-scrolling: touch; } #horizontal .scrollable { width: 400px; height: 100px; } #vertical .scrollable { height: 400px; width: 100px; } #vertical { writing-mode: vertical-lr; } #bidirectional .scrollable { height: 400px; width: 300px; } #bidirectional > div { float: left; } </style> <script type="text/javascript"> function scrollBoxes(id, p) { var container = document.getElementById(id); container.querySelectorAll('.scrollable').forEach(function(element) { element.scrollBy(p); }); container.querySelectorAll('iframe').forEach(function(element) { element.contentWindow.scrollBy(p); }); } </script> </head> <body> <div id="horizontal"> <input type="button" onclick="scrollBoxes('horizontal', {left: -2000, top: 0, behavior: 'instant'});" value="reset"/> <input type="button" onclick="scrollBoxes('horizontal', {left: 1000, top: 0, behavior: 'instant'});" value="scroll instant"/> <input type="button" onclick="scrollBoxes('horizontal', {left: 1000, top: 0, behavior: 'smooth'});" value="scroll smooth"/> <input type="button" onclick="scrollBoxes('horizontal', {left: 1000, top: 0, behavior: 'auto'});" value="scroll auto"/> <div>scroll-behavior: auto; <div class="scrollable"> <div style="width: 2000px; height: 400px; background: linear-gradient(135deg, red, green);"></div> </div> </div> <div>scroll-behavior: smooth;<br/> <div class="scrollable" style="scroll-behavior: smooth"> <div style="width: 2000px; height: 400px; background: linear-gradient(135deg, red, green);"></div> </div> </div> <div>scroll-behavior: auto;<br/> <iframe width="400px" height="100px" scrolling="yes" srcdoc="<!doctype><html style='scroll-behavior: auto'><body><div style='width: 2000px; height: 400px; background: linear-gradient(135deg, red, green);'</div></body></html>"></iframe> </div> <div>scroll-behavior: smooth;<br/> <iframe style="scroll-behavior: smooth" width="400px" height="100px" scrolling="yes" srcdoc="<!doctype><html style='scroll-behavior: smooth'><body><div style='width: 2000px; height: 400px; background: linear-gradient(135deg, red, green);'</div></body></html>"></iframe> </div> </div> <hr/> <div id="vertical"> <div> <input type="button" onclick="scrollBoxes('vertical', {top: -2000, left: 0, behavior: 'instant'});" value="reset"/> <input type="button" onclick="scrollBoxes('vertical', {top: 1000, left: 0, behavior: 'instant'});" value="scroll instant"/> <input type="button" onclick="scrollBoxes('vertical', {top: 1000, left: 0, behavior: 'smooth'});" value="scroll smooth"/> <input type="button" onclick="scrollBoxes('vertical', {top: 1000, left: 0, behavior: 'auto'});" value="scroll auto"/> </div> <div>scroll-behavior: auto; <div class="scrollable"> <div style="height: 2000px; width: 400px; background: linear-gradient(135deg, red, green);"></div> </div> </div> <div>scroll-behavior: smooth;<br/> <div class="scrollable" style="scroll-behavior: smooth"> <div style="height: 2000px; width: 400px; background: linear-gradient(135deg, red, green);"></div> </div> </div> <div>scroll-behavior: auto;<br/> <iframe height="400px" width="100px" scrolling="yes" srcdoc="<!doctype><html style='scroll-behavior: auto'><body><div style='height: 2000px; width: 400px; background: linear-gradient(135deg, red, green);'</div></body></html>"></iframe> </div> <div>scroll-behavior: smooth;<br/> <iframe style="scroll-behavior: smooth" height="400px" width="100px" scrolling="yes" srcdoc="<!doctype><html style='scroll-behavior: smooth'><body><div style='height: 2000px; width: 400px; background: linear-gradient(135deg, red, green);'</div></body></html>"></iframe> </div> </div> <hr/> <div id="bidirectional"> <div> <input type="button" onclick="scrollBoxes('bidirectional', {top: -2000, left: -1500, behavior: 'instant'});" value="reset"/> <input type="button" onclick="scrollBoxes('bidirectional', {top: 1000, left: 750, behavior: 'instant'});" value="scroll instant"/> <input type="button" onclick="scrollBoxes('bidirectional', {top: 1000, left: 750, behavior: 'smooth'});" value="scroll smooth"/> <input type="button" onclick="scrollBoxes('bidirectional', {top: 1000, left: 750, behavior: 'auto'});" value="scroll auto"/> </div> <div style="clear: both"></div> <div>scroll-behavior: auto; <div class="scrollable"> <div style="height: 2000px; width: 1500px; background: linear-gradient(135deg, red, green);"></div> </div> </div> <div>scroll-behavior: smooth;<br/> <div class="scrollable" style="scroll-behavior: smooth"> <div style="height: 2000px; width: 1500px; background: linear-gradient(135deg, red, green);"></div> </div> </div> <div>scroll-behavior: auto;<br/> <iframe height="400px" width="300px" scrolling="yes" srcdoc="<!doctype><html style='scroll-behavior: auto'><body><div style='height: 2000px; width: 1500px; background: linear-gradient(135deg, red, green);'</div></body></html>"></iframe> </div> <div>scroll-behavior: smooth;<br/> <iframe style="scroll-behavior: smooth" height="400px" width="300px" scrolling="yes" srcdoc="<!doctype><html style='scroll-behavior: smooth'><body><div style='height: 2000px; width: 1500px; background: linear-gradient(135deg, red, green);'</div></body></html>"></iframe> </div> </div> </body>
View Attachment As Raw
Actions:
View
Attachments on
bug 188043
:
346381
|
346513
|
346627
|
348010
| 348493 |
348494
|
348500
|
348903
|
348904
|
349043
|
349393
|
349536
|
349668
|
349879
|
350255
|
350271
|
350286
|
350288
|
350309
|
350409
|
350566
|
350567
|
350568
|
350571
|
350572
|
350579
|
350610
|
350615
|
350617
|
350620
|
350621
|
353958
|
353960
|
354071
|
354079
|
354082
|
354086
|
354319
|
354320
|
356043
|
356151
|
358313
|
363090
|
363093
|
368453
|
368454
|
368455
|
368459
|
368460
|
372999
|
377582
|
377813
|
378193
|
382485
|
382550
|
382561
|
384462
|
384514
|
384517
|
384623
|
384720
|
384789
|
384800
|
440977