third_party/WebKit/LayoutTests/css3/flexbox/overflow-and-padding.html

   1 <!DOCTYPE html>
   2 <script src="../../resources/check-layout.js"></script>
   3 <style>
   4 #scrollable {
   5     overflow: scroll;
   6     background: pink;
   7     height: 300px;
   8     width: 300px;
   9     box-sizing: border-box;
  10     display: flex;
  11     padding: 100px;
  12 }
  13 #item {
  14     width: 300px;
  15     height: 300px;
  16     background: salmon;
  17     flex-shrink: 0;
  18 }
  19 </style>
  20 Tests that padding bottom on a flexbox works in the face of overflowing content.
  21 Padding-right does not work. This matches the Blink/WebKit display:block behavior.
  22 Unfortunately, IE and Gecko both lose the padding bottom and the padding right.
  23 <div id="scrollable" data-expected-scroll-height=500 data-expected-scroll-width=400>
  24     <div id="item"></div>
  25 </div>
  26 <script>
  27 checkLayout('#scrollable');
  28 </script>