third_party/WebKit/LayoutTests/css3/flexbox/negative-overflow.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <link href="resources/flexbox.css" rel="stylesheet">
   5 <style>
   6 .flexbox {
   7     overflow: auto;
   8     height: 50px;
   9     width: 50px;
  10     background-color: red;
  11     position: relative;
  12 }
  13
  14 .vertical-padding {
  15     padding-top: 5px;
  16     padding-bottom: 10px;
  17     background-color: lime;
  18 }
  19
  20 .flexbox > div {
  21     width: 100%;
  22     height: 100px;
  23     background-color: green;
  24 }
  25 </style>
  26 <script src="../../resources/check-layout.js"></script>
  27 <script>
  28 window.onload = function() {
  29     checkLayout('.flexbox');
  30
  31     // Make failures more obvious by showing the red background that should have been clipped.
  32     Array.prototype.forEach.call(document.querySelectorAll(".flexbox"), function(element) {
  33         element.scrollTop = 1000;
  34     });
  35 };
  36 </script>
  37 </head>
  38 <body>
  39
  40 <div class="flexbox align-items-flex-end" data-expected-scroll-height="50">
  41     <div></div>
  42 </div>
  43
  44 <div class="flexbox align-items-flex-end" data-expected-scroll-height="150">
  45     <div></div>
  46     <div style="position: absolute; left: 0; top: 50px;"></div>
  47 </div>
  48
  49 <div class="flexbox align-items-center" data-expected-scroll-height="75">
  50     <div></div>
  51 </div>
  52
  53 <div class="flexbox" data-expected-scroll-height="100">
  54     <div></div>
  55 </div>
  56
  57 <div class="flexbox wrap-reverse" data-expected-scroll-height="50">
  58     <div></div>
  59     <div></div>
  60 </div>
  61
  62 <div class="flexbox align-items-flex-end vertical-padding" data-expected-scroll-height="65">
  63     <div></div>
  64 </div>
  65
  66 <div class="flexbox align-items-center vertical-padding" data-expected-scroll-height="90">
  67     <div></div>
  68 </div>
  69
  70 <div class="flexbox vertical-padding" data-expected-scroll-height="115">
  71     <div></div>
  72 </div>
  73
  74 <div class="flexbox wrap-reverse vertical-padding" data-expected-scroll-height="65">
  75     <div></div>
  76     <div></div>
  77 </div>
  78 </body>
  79 </html>