overflow-custom-scrollbar-crash.html 3.11 KB
Newer Older
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 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125
<head>
<style>

body {
  margin: 0;
}
::-webkit-scrollbar {
    width: 20px;
    height: 20px;
}

/* Horizontal Scrollbar Styles */

::-webkit-scrollbar:horizontal {
    -webkit-border-image: url(resources/horizontal-button.png) 0 2 0 2;
    border-color: transparent;
    border-width: 0 2px;
    background-image: url(resources/horizontal-button-background.png);
    background-repeat: repeat-x;
}

::-webkit-scrollbar-thumb:horizontal {
    -webkit-border-image: url(resources/horizontal-thumb.png) 0 20 0 20;
    border-color: transparent;
    border-width: 0 20px;
    min-width: 20px;
}

::-webkit-scrollbar-track-piece:horizontal:decrement {
    -webkit-border-image: url(resources/horizontal-track.png) 0 20 0 20;
    border-color: transparent;
    border-width: 0 0 0 20px;
}

::-webkit-scrollbar-track-piece:horizontal:increment {
    -webkit-border-image: url(resources/horizontal-track.png) 0 20 0 20;
    border-color: transparent;
    border-width: 0 20px 0 0;
}

::-webkit-scrollbar-button:horizontal {
    width: 20px;
    -webkit-border-image: url(resources/horizontal-button.png) 0 2 0 2;
    border-color: transparent;
    border-width: 0 2px;
}

::-webkit-scrollbar-button:horizontal:decrement {
    background-image: url(resources/horizontal-decrement-arrow.png), url(resources/horizontal-button-background.png);
    background-repeat: no-repeat, repeat-x;
    background-position: 2px 3px, 0 0;
}

::-webkit-scrollbar-button:horizontal:increment {
    background-image: url(resources/horizontal-increment-arrow.png), url(resources/horizontal-button-background.png);
    background-repeat: no-repeat, repeat-x;
    background-position: 7px 3px, 0 0;
}

.container {
  position: absolute;
  height: 100px;
  width: 100px;
  background-color: silver;
}

.scroller {
  position: absolute;
  top: 50px;
  left: 0;
  width: 300px;
  height: 50px;
  -webkit-box-sizing: border-box;
  border: 1px solid black;
  overflow-x: scroll;
}

.inner {
  width: 400px;
}
</style>
<script>
  function showScroller()
  {
    var scroller = document.createElement('div');
    scroller.className = 'scroller';
    
    var contents = document.createElement('div')
    contents.className = 'inner';
    contents.appendChild(document.createTextNode('inner'));
  
    scroller.appendChild(contents);
    
    document.getElementById('container').appendChild(scroller);
  }
  
  function hideScroller()
  {
    var scroller = document.getElementById('container').querySelectorAll('.scroller')[0];
    scroller.parentNode.removeChild(scroller);
  }
  
  function doTest() {
    if (window.layoutTestController)
        layoutTestController.dumpAsText();

    if (window.eventSender) {
        eventSender.dragMode = false;
        eventSender.mouseMoveTo(50, 40);
        eventSender.mouseMoveTo(50, 55);
        eventSender.mouseMoveTo(50, 90);
        eventSender.mouseDown();
        eventSender.mouseUp();
        eventSender.mouseMoveTo(50, 120);
    }
  }

  window.addEventListener('load', doTest, false);
</script>
</head>
<body>
  <div id="container" class="container" onmouseover="showScroller()" onmouseout="hideScroller()">
  </div>
  <p>This test should not crash</p>
</body>