third_party/WebKit/LayoutTests/css3/flexbox/flexbox-overflow-auto-expected.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 .test-row {
   6     display: flex;
   7     margin-bottom: 5px;
   8 }
   9 .test-row > div {
  10     flex: none;
  11 }
  12
  13 .container {
  14     margin-right: 5px;
  15     border: 5px solid lightgreen;
  16     width: 100px;
  17 }
  18
  19 .flexbox {
  20     display: block;
  21     height: 100px;
  22     width: 100px;
  23     overflow: auto;
  24 }
  25
  26 .flexbox > div {
  27     width: 200px;
  28     height: 200px;
  29     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%);
  30 }
  31 </style>
  32 </head>
  33 <body>
  34     <p>Scrollbars should work in all the flexboxes.</p>
  35 </body>
  36 <script>
  37 // The -almost values are cases where we don't scroll all the way because of
  38 // https://bugs.webkit.org/show_bug.cgi?id=76129 .
  39 var results = [
  40     'left top', 'left top', 'right top', 'left bottom',
  41     'left bottom-almost', 'left bottom-almost', 'right bottom-almost', 'left top',
  42     'right-almost top', 'right-almost top', 'right-almost bottom', 'left top',
  43     'left top', 'left top', 'left bottom', 'right top'];
  44
  45 var testContents = '';
  46 for (var i = 0; i < results.length; ++i) {
  47     if (!(i % 4))
  48         testContents += "<div class='test-row'>";
  49
  50     var containerClass = 'container ' + results[i];
  51     testContents +=
  52         "<div class='" + containerClass + "'>" +
  53         "<div class='flexbox'>" +
  54         "<div></div>" +
  55         "</div>" +
  56         "</div>";
  57     if (i % 4 == 3)
  58         testContents += "</div>";
  59 }
  60
  61 document.body.innerHTML += testContents;
  62
  63 Array.prototype.forEach.call(document.querySelectorAll(".right"), function(element) {
  64     element.firstChild.scrollLeft = 1000;
  65 });
  66
  67 Array.prototype.forEach.call(document.querySelectorAll(".bottom"), function(element) {
  68     element.firstChild.scrollTop = 1000;
  69 });
  70
  71 Array.prototype.forEach.call(document.querySelectorAll(".right-almost"), function(element) {
  72     element.firstChild.scrollLeft = element.firstChild.scrollWidth - element.firstChild.offsetWidth;
  73 });
  74
  75 Array.prototype.forEach.call(document.querySelectorAll(".bottom-almost"), function(element) {
  76     element.firstChild.scrollTop = element.firstChild.scrollHeight - element.firstChild.offsetHeight;
  77 });
  78
  79 </script>
  80 </body>
  81 </html>