third_party/WebKit/LayoutTests/css3/flexbox/flex-flow-auto-margins-no-available-space.html

   1 <!DOCTYPE html>
   2 <html>
   3 <link href="resources/flexbox.css" rel="stylesheet">
   4 <style>
   5 .container {
   6     position: relative;
   7     background-color: pink;
   8     outline: 1px solid black;
   9     display: inline-block;
  10 }
  11 .flexbox {
  12     background-color: grey;
  13     width: 100px;
  14     height: 100px;
  15     margin: 20px;
  16 }
  17 .flexbox > * {
  18     flex: none;
  19 }
  20 .flexbox > :nth-child(1) {
  21     background-color: blue;
  22     margin: auto;
  23 }
  24 </style>
  25 <script src="../../resources/check-layout.js"></script>
  26 <body onload="checkLayout('.flexbox')">
  27
  28 <div class="container">
  29   <div class="flexbox row">
  30     <div data-offset-x=60 data-offset-y=20 style="width: 20px; height: 120px"></div>
  31   </div>
  32 </div>
  33
  34 <div class="container">
  35   <div class="flexbox row-reverse">
  36     <div data-offset-x=60 data-offset-y=20 style="width: 20px; height: 120px"></div>
  37   </div>
  38 </div>
  39
  40 <div class="container">
  41   <div class="flexbox column">
  42     <div data-offset-x=20 data-offset-y=60 style="width: 120px; height: 20px"></div>
  43   </div>
  44 </div>
  45
  46 <div class="container">
  47   <div class="flexbox column-reverse">
  48     <div data-offset-x=20 data-offset-y=60 style="width: 120px; height: 20px"></div>
  49   </div>
  50 </div>
  51 </body>
  52 </html>