Attachment 373393 Details for Bug 199451 – testcase

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:

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>

Actions: View

Attachments on bug 199451: 373393