| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| .test-row { |
| display: -webkit-flex; |
| margin-bottom: 5px; |
| } |
| .test-row > div { |
| -webkit-flex: none; |
| } |
| |
| .container { |
| margin-right: 5px; |
| border: 5px solid lightgreen; |
| width: 100px; |
| } |
| |
| .flexbox { |
| display: block; |
| height: 100px; |
| width: 100px; |
| overflow: auto; |
| } |
| |
| .flexbox > div { |
| width: 200px; |
| height: 200px; |
| background: -webkit-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%,rgba(89,148,202,1) 62%,rgba(95,154,207,0.7) 68%,rgba(125,185,232,0) 100%); |
| } |
| </style> |
| </head> |
| <body> |
| <p>Scrollbars should work in all the flexboxes.</p> |
| </body> |
| <script> |
| // The -almost values are cases where we don't scroll all the way because of |
| // https://bugs.webkit.org/show_bug.cgi?id=76129 . |
| var results = [ |
| 'left top', 'left top', 'right top', 'left bottom', |
| 'left bottom-almost', 'left bottom-almost', 'right bottom-almost', 'left top', |
| 'right-almost top', 'right-almost top', 'right-almost bottom', 'left top', |
| 'left top', 'left top', 'left bottom', 'right top']; |
| |
| var testContents = ''; |
| for (var i = 0; i < results.length; ++i) { |
| if (!(i % 4)) |
| testContents += "<div class='test-row'>"; |
| |
| var containerClass = 'container ' + results[i]; |
| testContents += |
| "<div class='" + containerClass + "'>" + |
| "<div class='flexbox'>" + |
| "<div></div>" + |
| "</div>" + |
| "</div>"; |
| if (i % 4 == 3) |
| testContents += "</div>"; |
| } |
| |
| document.body.innerHTML += testContents; |
| |
| Array.prototype.forEach.call(document.querySelectorAll(".right"), function(element) { |
| element.firstChild.scrollLeft = 1000; |
| }); |
| |
| Array.prototype.forEach.call(document.querySelectorAll(".bottom"), function(element) { |
| element.firstChild.scrollTop = 1000; |
| }); |
| |
| Array.prototype.forEach.call(document.querySelectorAll(".right-almost"), function(element) { |
| element.firstChild.scrollLeft = element.firstChild.scrollWidth - element.firstChild.offsetWidth; |
| }); |
| |
| Array.prototype.forEach.call(document.querySelectorAll(".bottom-almost"), function(element) { |
| element.firstChild.scrollTop = element.firstChild.scrollHeight - element.firstChild.offsetHeight; |
| }); |
| |
| </script> |
| </body> |
| </html> |
