Attachment 349309 Details for Bug 176454 – Testcase

Testcase

overscroll-behavior.html (text/html), 2.70 KB, created by Frédéric Wang (:fredw) on 2018-09-10 08:07:08 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Frédéric Wang (:fredw)

Created: 2018-09-10 08:07:08 PDT

Size: 2.70 KB

patch

obsolete

><!DOCTYPE html>
><html>
>  <head>
>    <title>Overscroll Behavior</title>
>    <meta name="viewport" content="width=device-width">
>    <meta charset="utf-8"/>
>    <style>
>      .scrolling {
>        overflow-x: auto;
>        overflow-y: auto;
>        -webkit-overflow-scrolling: touch;
>      }
>      .scrollContent {
>        background: linear-gradient(135deg, red, blue);
>        width: 300px;
>        height: 300px;
>      }
>    </style>
>  </head>
>  <body>
>    <h1>Overscroll Behavior</h1>
>
>    <h2>overflow, auto</h2>
>    <div class="scrolling" style="width: 200px; height: 200px;">
>      <div class="scrolling" style="width: 100px; height: 100px; overscroll-behavior: auto;">
>        <div class="scrollContent">1</div>
>      </div>
>      <div class="scrollContent">2</div>
>    </div>
>
>    <h2>overflow, contain</h2>
>    <div class="scrolling" style="width: 200px; height: 200px;">
>      <div class="scrolling" style="width: 100px; height: 100px; overscroll-behavior: contain;">
>        <div class="scrollContent">3</div>
>      </div>
>      <div class="scrollContent">4</div>
>    </div>
>
>    <h2>overflow, none</h2>
>    <div class="scrolling" style="width: 200px; height: 200px;">
>      <div class="scrolling" style="width: 100px; height: 100px; overscroll-behavior: none;">
>        <div class="scrollContent">5</div>
>      </div>
>      <div class="scrollContent">6</div>
>    </div>
>
>    <h2>iframe, auto</h2>
>    <iframe style="width: 200px; height: 200px;" srcdoc="<iframe style=&quot;width: 100px; height: 100px; overscroll-behavior: auto;&quot; srcdoc=&quot;&amp;lt;div style=&amp;quot;width: 300px; height: 300px; background: linear-gradient(135deg, red, blue);&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&quot;></iframe><div style=&quot;width: 300px; height: 300px; background: linear-gradient(135deg, red, blue);&quot;></div>"></iframe>
>
>    <h2>iframe, contain</h2>
>    <iframe style="width: 200px; height: 200px;" srcdoc="<iframe style=&quot;width: 100px; height: 100px; overscroll-behavior: contain;&quot; srcdoc=&quot;&amp;lt;div style=&amp;quot;width: 300px; height: 300px; background: linear-gradient(135deg, red, blue);&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&quot;></iframe><div style=&quot;width: 300px; height: 300px; background: linear-gradient(135deg, red, blue);&quot;></div>"></iframe>
>
>    <h2>iframe, none</h2>
>    <iframe style="width: 200px; height: 200px;" srcdoc="<iframe style=&quot;width: 100px; height: 100px; overscroll-behavior: none;&quot; srcdoc=&quot;&amp;lt;div style=&amp;quot;width: 300px; height: 300px; background: linear-gradient(135deg, red, blue);&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&quot;></iframe><div style=&quot;width: 300px; height: 300px; background: linear-gradient(135deg, red, blue);&quot;></div>"></iframe>
>  </body>
></html>

<!DOCTYPE html>
<html>
  <head>
    <title>Overscroll Behavior</title>
    <meta name="viewport" content="width=device-width">
    <meta charset="utf-8"/>
    <style>
      .scrolling {
        overflow-x: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }
      .scrollContent {
        background: linear-gradient(135deg, red, blue);
        width: 300px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <h1>Overscroll Behavior</h1>

    <h2>overflow, auto</h2>
    <div class="scrolling" style="width: 200px; height: 200px;">
      <div class="scrolling" style="width: 100px; height: 100px; overscroll-behavior: auto;">
        <div class="scrollContent">1</div>
      </div>
      <div class="scrollContent">2</div>
    </div>

    <h2>overflow, contain</h2>
    <div class="scrolling" style="width: 200px; height: 200px;">
      <div class="scrolling" style="width: 100px; height: 100px; overscroll-behavior: contain;">
        <div class="scrollContent">3</div>
      </div>
      <div class="scrollContent">4</div>
    </div>

    <h2>overflow, none</h2>
    <div class="scrolling" style="width: 200px; height: 200px;">
      <div class="scrolling" style="width: 100px; height: 100px; overscroll-behavior: none;">
        <div class="scrollContent">5</div>
      </div>
      <div class="scrollContent">6</div>
    </div>

    <h2>iframe, auto</h2>
    <iframe style="width: 200px; height: 200px;" srcdoc="<iframe style=&quot;width: 100px; height: 100px; overscroll-behavior: auto;&quot; srcdoc=&quot;&amp;lt;div style=&amp;quot;width: 300px; height: 300px; background: linear-gradient(135deg, red, blue);&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&quot;></iframe><div style=&quot;width: 300px; height: 300px; background: linear-gradient(135deg, red, blue);&quot;></div>"></iframe>

    <h2>iframe, contain</h2>
    <iframe style="width: 200px; height: 200px;" srcdoc="<iframe style=&quot;width: 100px; height: 100px; overscroll-behavior: contain;&quot; srcdoc=&quot;&amp;lt;div style=&amp;quot;width: 300px; height: 300px; background: linear-gradient(135deg, red, blue);&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&quot;></iframe><div style=&quot;width: 300px; height: 300px; background: linear-gradient(135deg, red, blue);&quot;></div>"></iframe>

    <h2>iframe, none</h2>
    <iframe style="width: 200px; height: 200px;" srcdoc="<iframe style=&quot;width: 100px; height: 100px; overscroll-behavior: none;&quot; srcdoc=&quot;&amp;lt;div style=&amp;quot;width: 300px; height: 300px; background: linear-gradient(135deg, red, blue);&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&quot;></iframe><div style=&quot;width: 300px; height: 300px; background: linear-gradient(135deg, red, blue);&quot;></div>"></iframe>
  </body>
</html>

Actions: View

Attachments on bug 176454: 349309 | 349310 | 350862 | 353488 | 354920 | 355733 | 355887 | 355888 | 356006 | 356410 | 356479 | 356505 | 363094 | 377722 | 377735 | 377789 | 378100 | 378196 | 399351 | 399352 | 399355 | 403978 | 404040 | 404095 | 404100 | 407661 | 407672 | 408125 | 408185 | 408212 | 408213