third_party/WebKit/LayoutTests/css3/flexbox/multiline-min-max.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <link rel="stylesheet" href="resources/flexbox.css">
   5 <script src="../../resources/check-layout.js"></script>
   6 <style>
   7 .flexbox {
   8   width: 600px;
   9   background-color: grey;
  10   border: 5px solid black;
  11   height: 20px;
  12   position: relative;
  13 }
  14 .flexbox > div {
  15   height: 10px;
  16 }
  17 .children-border-box > div {
  18   box-sizing: border-box;
  19 }
  20
  21 .flexbox :nth-child(1) {
  22     background-color: blue;
  23 }
  24 .flexbox :nth-child(2) {
  25     background-color: yellow;
  26 }
  27 .flexbox :nth-child(3) {
  28     background-color: salmon;
  29 }
  30 .flexbox :nth-child(4) {
  31     background-color: lime;
  32 }
  33 .flexbox :nth-child(5) {
  34     background-color: red;
  35 }
  36 .flexbox :nth-child(6) {
  37     background-color: orange;
  38 }
  39 .flexbox :nth-child(7) {
  40     background-color: purple;
  41 }
  42 </style>
  43 </head>
  44 <body onload="checkLayout('.flexbox')">
  45
  46 <div class="flexbox wrap">
  47   <div class="flex-one" style="min-width: 400px" data-expected-width="400" data-offset-x="0" data-offset-y="0"></div>
  48   <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="400" data-offset-y="0"></div>
  49   <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="500" data-offset-y="0"></div>
  50   <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="0" data-offset-y="10"></div>
  51 </div>
  52
  53 <div class="flexbox wrap">
  54   <div class="flex-one" style="min-width: 400px; padding-left: 10px;" data-expected-width="500" data-offset-x="0" data-offset-y="0"></div>
  55   <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="500" data-offset-y="0"></div>
  56   <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="0" data-offset-y="10"></div>
  57   <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="100" data-offset-y="10"></div>
  58 </div>
  59
  60 <div class="flexbox wrap">
  61   <div class="flex-one" style="min-width: 400px; border-left: 10px solid red;" data-expected-width="500" data-offset-x="0" data-offset-y="0"></div>
  62   <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="500" data-offset-y="0"></div>
  63   <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="0" data-offset-y="10"></div>
  64   <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="100" data-offset-y="10"></div>
  65 </div>
  66
  67 <div class="flexbox wrap">
  68   <div class="flex-one" style="min-width: 400px; margin-left: 10px;" data-expected-width="490" data-offset-x="10" data-offset-y="0"></div>
  69   <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="500" data-offset-y="0"></div>
  70   <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="0" data-offset-y="10"></div>
  71   <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="100" data-offset-y="10"></div>
  72 </div>
  73
  74 <div class="flexbox wrap">
  75   <div style="flex: 1 1 600px; flex: 1 1 600px; max-width: 300px;" data-expected-width="300" data-offset-x="0" data-offset-y="0"></div>
  76   <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100" data-offset-x="300" data-offset-y="0"></div>
  77   <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100" data-offset-x="400" data-offset-y="0"></div>
  78   <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100" data-offset-x="500" data-offset-y="0"></div>
  79 </div>
  80
  81 <div class="flexbox wrap">
  82   <div style="flex: 1 1 600px; flex: 1 1 600px; max-width: 300px; padding-left: 10px;" data-expected-width="310" data-offset-x="0" data-offset-y="0"></div>
  83   <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145" data-offset-x="310" data-offset-y="0"></div>
  84   <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145" data-offset-x="455" data-offset-y="0"></div>
  85   <div class="flex-one-one-auto" style="width: 100px" data-expected-width="600" data-offset-x="0" data-offset-y="10"></div>
  86 </div>
  87
  88 <div class="flexbox wrap">
  89   <div style="flex: 1 1 600px; flex: 1 1 600px; max-width: 300px; border-left: 10px solid red;" data-expected-width="310" data-offset-x="0" data-offset-y="0"></div>
  90   <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145" data-offset-x="310" data-offset-y="0"></div>
  91   <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145" data-offset-x="455" data-offset-y="0"></div>
  92   <div class="flex-one-one-auto" style="width: 100px" data-expected-width="600" data-offset-x="0" data-offset-y="10"></div>
  93 </div>
  94
  95 <div class="flexbox wrap">
  96   <div style="flex: 1 1 600px; flex: 1 1 600px; max-width: 300px; margin-left: 10px;" data-expected-width="300" data-offset-x="10" data-offset-y="0"></div>
  97   <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145" data-offset-x="310" data-offset-y="0"></div>
  98   <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145" data-offset-x="455" data-offset-y="0"></div>
  99   <div class="flex-one-one-auto" style="width: 100px" data-expected-width="600" data-offset-x="0" data-offset-y="10"></div>
 100 </div>
 101
 102 <div class="flexbox wrap children-border-box">
 103   <div class="flex-one" style="min-width: 400px; padding-left: 10px;" data-expected-width="400" data-offset-x="0" data-offset-y="0"></div>
 104   <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="400" data-offset-y="0"></div>
 105   <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="500" data-offset-y="0"></div>
 106   <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="0" data-offset-y="10"></div>
 107 </div>
 108
 109 <div class="flexbox wrap children-border-box">
 110   <div class="flex-one" style="min-width: 400px; border-left: 10px solid red;" data-expected-width="400" data-offset-x="0" data-offset-y="0"></div>
 111   <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="400" data-offset-y="0"></div>
 112   <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="500" data-offset-y="0"></div>
 113   <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="0" data-offset-y="10"></div>
 114 </div>
 115
 116 <div class="flexbox wrap children-border-box">
 117   <div class="flex-one" style="min-width: 400px; margin-left: 10px;" data-expected-width="490" data-offset-x="10" data-offset-y="0"></div>
 118   <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="500" data-offset-y="0"></div>
 119   <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="0" data-offset-y="10"></div>
 120   <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="100" data-offset-y="10"></div>
 121 </div>
 122
 123 <div class="flexbox wrap children-border-box">
 124   <div style="flex: 1 1 600px; flex: 1 1 600px; max-width: 300px; padding-left: 10px;" data-expected-width="300" data-offset-x="0" data-offset-y="0"></div>
 125   <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100" data-offset-x="300" data-offset-y="0"></div>
 126   <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100" data-offset-x="400" data-offset-y="0"></div>
 127   <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100" data-offset-x="500" data-offset-y="0"></div>
 128 </div>
 129
 130 <div class="flexbox wrap children-border-box">
 131   <div style="flex: 1 1 600px; flex: 1 1 600px; max-width: 300px; border-left: 10px solid red;" data-expected-width="300" data-offset-x="0" data-offset-y="0"></div>
 132   <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100" data-offset-x="300" data-offset-y="0"></div>
 133   <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100" data-offset-x="400" data-offset-y="0"></div>
 134   <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100" data-offset-x="500" data-offset-y="0"></div>
 135 </div>
 136
 137 <div class="flexbox wrap children-border-box">
 138   <div style="flex: 1 1 600px; flex: 1 1 600px; max-width: 300px; margin-left: 10px;" data-expected-width="300" data-offset-x="10" data-offset-y="0"></div>
 139   <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145" data-offset-x="310" data-offset-y="0"></div>
 140   <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145" data-offset-x="455" data-offset-y="0"></div>
 141   <div class="flex-one-one-auto" style="width: 100px" data-expected-width="600" data-offset-x="0" data-offset-y="10"></div>
 142 </div>
 143
 144 </body>
 145 </html>