WebKit Bugzilla
Attachment 373393 Details for
Bug 199451
: scrollLeft can become positive in vertical-rl writing-mode when -webkit-scrollbar is used
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Requests
|
Help
|
New Account
|
Log In
Remember
[x]
|
Forgot Password
Login:
[x]
testcase
scrollLeft.html (text/html), 1.89 KB, created by
Frédéric Wang (:fredw)
on 2019-07-03 09:59:02 PDT
(
hide
)
Description:
testcase
Filename:
MIME Type:
Creator:
Frédéric Wang (:fredw)
Created:
2019-07-03 09:59:02 PDT
Size:
1.89 KB
patch
obsolete
><!DOCTYPE html> ><html> ><head> > <meta charset="utf-8"> > <meta name="viewport" content="width=device-width"> > <title>scrolLeft vertical-rl with -webkit-scrollbar</title> > <style> > .scroller { > overflow: scroll; > width: 100px; > height: 100px; > } > .visible-bar::-webkit-scrollbar { > width: 15px; > height: 15px; > background-color: #aaa; > } > .content { > width: 300px; > height: 300px; > background: linear-gradient(170deg, red, yellow); > } > #output { > position: fixed; > right: 0; > } > </style> ></head> ><body> > <h1>scrolLeft vertical-rl</h1> > <textarea id="output" cols="80" rows="20"></textarea> > <section> > <h2>without -webkit-scrollbar</h2> > <div style="writing-mode: vertical-rl" class="scroller"> > <div class="content"></div> > </div> > </section> > <section> > <h2>with -webkit-scrollbar</h2> > <div style="writing-mode: vertical-rl" class="scroller visible-bar"> > <div class="content"></div> > </div> > </section> > <script> > function logOutput(text) { > var textarea = document.getElementById("output"); > textarea.value += `${text}\n`; > textarea.scrollTop = textarea.scrollHeight; > } > function logScroll(scroller) { > logOutput(`scrollLeft: ${scroller.scrollLeft}\n`); > } > window.addEventListener("load", function() { > document.getElementById("output").value = ""; > Array.from(document.getElementsByClassName("scroller")).forEach(function(scroller) { > logOutput("Initial position."); > logScroll(scroller); > logOutput("Setting scroller.scrollLeft = 10000"); > scroller.scrollLeft = 10000; > logScroll(scroller); > logOutput("Setting scroller.scrollLeft = -10000"); > scroller.scrollLeft = -10000; > logScroll(scroller); > }); > }); > </script> ></body> ></html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>scrolLeft vertical-rl with -webkit-scrollbar</title> <style> .scroller { overflow: scroll; width: 100px; height: 100px; } .visible-bar::-webkit-scrollbar { width: 15px; height: 15px; background-color: #aaa; } .content { width: 300px; height: 300px; background: linear-gradient(170deg, red, yellow); } #output { position: fixed; right: 0; } </style> </head> <body> <h1>scrolLeft vertical-rl</h1> <textarea id="output" cols="80" rows="20"></textarea> <section> <h2>without -webkit-scrollbar</h2> <div style="writing-mode: vertical-rl" class="scroller"> <div class="content"></div> </div> </section> <section> <h2>with -webkit-scrollbar</h2> <div style="writing-mode: vertical-rl" class="scroller visible-bar"> <div class="content"></div> </div> </section> <script> function logOutput(text) { var textarea = document.getElementById("output"); textarea.value += `${text}\n`; textarea.scrollTop = textarea.scrollHeight; } function logScroll(scroller) { logOutput(`scrollLeft: ${scroller.scrollLeft}\n`); } window.addEventListener("load", function() { document.getElementById("output").value = ""; Array.from(document.getElementsByClassName("scroller")).forEach(function(scroller) { logOutput("Initial position."); logScroll(scroller); logOutput("Setting scroller.scrollLeft = 10000"); scroller.scrollLeft = 10000; logScroll(scroller); logOutput("Setting scroller.scrollLeft = -10000"); scroller.scrollLeft = -10000; logScroll(scroller); }); }); </script> </body> </html>
View Attachment As Raw
Actions:
View
Attachments on
bug 199451
: 373393