1
    2
    3
    4
    5
    6
    7
    8
    9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78


content / test / data / accessibility / html / scrollable-overflow.html [blame]

<!--
* Test scrollXMin -- the presence of this indicates something is scrollable.
@AURALINUX-ALLOW:class:*
@BLINK-ALLOW:scrollXMin=*
@BLINK-ALLOW:scrollable=true
@BLINK-ALLOW:className*
@BLINK-ALLOW:focusable*
@UIA-WIN-ALLOW:ClassName*
@UIA-WIN-ALLOW:*ScrollItemPatternAvailable*
@UIA-WIN-ALLOW:*ScrollPatternAvailable*
@UIA-WIN-ALLOW:*Scrollable*
@WIN-ALLOW:class:*
-->
<html>
  <style>
  body { font-style: monospace; width: 999px;}
  .not-scrollable { margin-bottom: 50px; border: 2px dashed red;}
  .scrollable { margin-bottom: 50px; border: 2px solid green;}
  .clipped { width: 25px; height: 25px; overflow: hidden; }
  .x-overflow-group > div { width: 25px; height: 50px;}
  .x-overflow-group > div > p { margin: 0; }
  .y-overflow-group > div { height: 25px; width: 20em;}
  .y-overflow-group > div > p { padding: 12px 0; margin: 0;}
  </style>
  <body>
    <div class="no-overflow not-scrollable">  <!-- Not scrollable -->
      <p>no overflow <!-- Default is overflow: visible -->
    </div>

    <div class="clipped-not scrollable">  <!-- Not scrollable -->
      <p>clipped large lots of text more text <!-- Default is overflow: visible -->
    </div>

    <textarea class="textarea scrollable" rows="1" cols="2">ab cd</textarea>  <!-- User scrollable -->

    <div class="not-enough-content not-scrollable">  <!-- Not scrollable -->
      <div style="overflow: scroll; width: 100px; height: 100px">
        <p>tiny
      </div>
    </div>

    <div class="x-overflow-group" role="group">
      <div class="x-hidden-small not-scrollable" style="overflow-x: hidden;">  <!-- Not user scrollable, because not enough content   -->
        <p>x=hidden
      </div>
      <div class="x-hidden-large scrollable" style="overflow-x: hidden;">  <!-- Actually user scrollable, because overflow-x=hidden changes overflow-y to auto   -->
        <p style="width:999px; height:999px; background-color:green;">x=hidden
      </div>
      <div class="x-auto scrollable" style="overflow-x: auto;">  <!-- User scrollable if overflow -->
        <p>x=auto
      </div>
      <div class="x-scroll scrollable" style="overflow-x: scroll;">  <!-- User scrollable if overflow -->
        <p>x=scroll
      </div>
      <div class="x-visible not-scrollable" style="overflow-x: visible;">  <!-- Not scrollable -->
        <p>x=visible
      </div>
    </div>

    <div class="y-overflow-group" role="group">
      <div class="y-hidden-small not-scrollable" style="overflow-y: hidden;">  <!-- Not user scrollable, because not enough text   -->
        <p>y=hidden
      </div>
      <div class="y-hidden-large scrollable" style="overflow-y: hidden;">  <!-- Actually user scrollable, because overflow-y=hidden changes overflow-x to auto   -->
        <p style="width:999px; height:999px; background-color:green;">y=hidden
      </div>
      <div class="y-auto scrollable" style="overflow-y: auto;">  <!-- Use scrollable if overflow -->
        <p>y=auto
      </div>
      <div class="y-scroll scrollable" style="overflow-y: scroll;">  <!-- Use scrollable if overflow  -->
        <p>y=scroll
      </div>
      <div class="y-visible not-scrollable" style="overflow-y: visible;">  <!-- Not scrollable -->
        <p>y=visible
      </div>
    </div>
  </body>
</html>