LayoutTests/scrollbars/overflow-custom-scrollbar-crash.html

   1 <head>
   2 <style>
   3
   4 body {
   5   margin: 0;
   6 }
   7 ::-webkit-scrollbar {
   8     width: 20px;
   9     height: 20px;
  10 }
  11
  12 /* Horizontal Scrollbar Styles */
  13
  14 ::-webkit-scrollbar:horizontal {
  15     -webkit-border-image: url(resources/horizontal-button.png) 0 2 0 2;
  16     border-color: transparent;
  17     border-width: 0 2px;
  18     background-image: url(resources/horizontal-button-background.png);
  19     background-repeat: repeat-x;
  20 }
  21
  22 ::-webkit-scrollbar-thumb:horizontal {
  23     -webkit-border-image: url(resources/horizontal-thumb.png) 0 20 0 20;
  24     border-color: transparent;
  25     border-width: 0 20px;
  26     min-width: 20px;
  27 }
  28
  29 ::-webkit-scrollbar-track-piece:horizontal:decrement {
  30     -webkit-border-image: url(resources/horizontal-track.png) 0 20 0 20;
  31     border-color: transparent;
  32     border-width: 0 0 0 20px;
  33 }
  34
  35 ::-webkit-scrollbar-track-piece:horizontal:increment {
  36     -webkit-border-image: url(resources/horizontal-track.png) 0 20 0 20;
  37     border-color: transparent;
  38     border-width: 0 20px 0 0;
  39 }
  40
  41 ::-webkit-scrollbar-button:horizontal {
  42     width: 20px;
  43     -webkit-border-image: url(resources/horizontal-button.png) 0 2 0 2;
  44     border-color: transparent;
  45     border-width: 0 2px;
  46 }
  47
  48 ::-webkit-scrollbar-button:horizontal:decrement {
  49     background-image: url(resources/horizontal-decrement-arrow.png), url(resources/horizontal-button-background.png);
  50     background-repeat: no-repeat, repeat-x;
  51     background-position: 2px 3px, 0 0;
  52 }
  53
  54 ::-webkit-scrollbar-button:horizontal:increment {
  55     background-image: url(resources/horizontal-increment-arrow.png), url(resources/horizontal-button-background.png);
  56     background-repeat: no-repeat, repeat-x;
  57     background-position: 7px 3px, 0 0;
  58 }
  59
  60 .container {
  61   position: absolute;
  62   height: 100px;
  63   width: 100px;
  64   background-color: silver;
  65 }
  66
  67 .scroller {
  68   position: absolute;
  69   top: 50px;
  70   left: 0;
  71   width: 300px;
  72   height: 50px;
  73   -webkit-box-sizing: border-box;
  74   border: 1px solid black;
  75   overflow-x: scroll;
  76 }
  77
  78 .inner {
  79   width: 400px;
  80 }
  81 </style>
  82 <script>
  83   function showScroller()
  84   {
  85     var scroller = document.createElement('div');
  86     scroller.className = 'scroller';
  87
  88     var contents = document.createElement('div')
  89     contents.className = 'inner';
  90     contents.appendChild(document.createTextNode('inner'));
  91
  92     scroller.appendChild(contents);
  93
  94     document.getElementById('container').appendChild(scroller);
  95   }
  96
  97   function hideScroller()
  98   {
  99     var scroller = document.getElementById('container').querySelectorAll('.scroller')[0];
 100     scroller.parentNode.removeChild(scroller);
 101   }
 102
 103   function doTest() {
 104     if (window.layoutTestController)
 105         layoutTestController.dumpAsText();
 106
 107     if (window.eventSender) {
 108         eventSender.dragMode = false;
 109         eventSender.mouseMoveTo(50, 40);
 110         eventSender.mouseMoveTo(50, 55);
 111         eventSender.mouseMoveTo(50, 90);
 112         eventSender.mouseDown();
 113         eventSender.mouseUp();
 114         eventSender.mouseMoveTo(50, 120);
 115     }
 116   }
 117
 118   window.addEventListener('load', doTest, false);
 119 </script>
 120 </head>
 121 <body>
 122   <div id="container" class="container" onmouseover="showScroller()" onmouseout="hideScroller()">
 123   </div>
 124   <p>This test should not crash</p>
 125 </body>