third_party/WebKit/LayoutTests/css3/flexbox/flex-algorithm-with-margins.html

   1 <!DOCTYPE html>
   2 <html>
   3 <link href="resources/flexbox.css" rel="stylesheet">
   4 <style>
   5 body {
   6     margin: 0;
   7 }
   8 .flexbox {
   9     width: 600px;
  10     background-color: #aaa;
  11     position: relative;
  12 }
  13 .flexbox div {
  14     height: 20px;
  15     border: 0;
  16 }
  17
  18 .flexbox :nth-child(1) {
  19     background-color: blue;
  20 }
  21 .flexbox :nth-child(2) {
  22     background-color: green;
  23 }
  24 .flexbox :nth-child(3) {
  25     background-color: red;
  26 }
  27
  28 .flex1 {
  29     flex: 1;
  30 }
  31 .flex2 {
  32     flex: 2;
  33 }
  34 .flex4 {
  35     flex: 4;
  36 }
  37 .flex1-0-0 {
  38     flex: 1 0 0px;
  39 }
  40 .flex2-0-0 {
  41     flex: 2 0 0px;
  42 }
  43 </style>
  44 <script src="../../resources/check-layout.js"></script>
  45 <body onload="checkLayout('.flexbox')">
  46 <div class="flexbox">
  47   <div data-expected-width="200" class="flex1-0-0"></div>
  48   <div data-expected-width="100" data-offset-x="250" class="flex-none" style="width: 100px; margin: 0 50px;"></div>
  49   <div data-expected-width="200" data-offset-x="400" class="flex1-0-0"></div>
  50 </div>
  51
  52 <div data-expected-height="120" class="flexbox">
  53   <div data-expected-width="200" data-offset-y="50" class="flex1-0-0" style="margin: 50px 0;"></div>
  54   <div data-expected-width="100" data-offset-x="250" class="flex-none" style="width: 100px; margin: 0 50px"></div>
  55   <div data-expected-width="200" data-offset-x="400" class="flex1-0-0"></div>
  56 </div>
  57
  58 <!-- Margins set to auto get space only if there's space available after flexing. -->
  59 <div class="flexbox">
  60   <div data-expected-width="200" class="flex1-0-0"></div>
  61   <div data-expected-width="200" data-offset-x="200" class="flex-none" style="width: 200px; margin: 0 auto"></div>
  62   <div data-expected-width="200" data-offset-x="400" class="flex1-0-0"></div>
  63 </div>
  64
  65 <div class="flexbox">
  66   <div data-expected-width="100" class="flex1-0-0"></div>
  67   <div data-expected-width="300" data-offset-x="100" style="flex: 2 0 100px; margin-left: auto;"></div>
  68   <div data-expected-width="100" data-offset-x="400" class="flex1-0-0" style="margin-right: 100px"></div>
  69 </div>
  70
  71 <!-- Margins set to auto don't have negative flex. -->
  72 <div class="flexbox">
  73   <div data-expected-width="150" style="flex: 1 1 300px;"></div>
  74   <div data-expected-width="300" data-offset-x="150" style="flex: 1 0 300px; margin: 0 auto;"></div>
  75   <div data-expected-width="150" data-offset-x="450" style="flex: 1 1 300px;"></div>
  76 </div>
  77
  78 <div class="flexbox">
  79   <div data-expected-width="300" data-offset-x="150" style="flex: 0 0 300px; margin: 0 auto;"></div>
  80 </div>
  81
  82 <!-- margin: auto safe centers, which means it won't overflow to before the start of the flexbox. -->
  83 <div class="flexbox">
  84   <div data-expected-width="700" data-offset-x="0" style="flex: 0 0 700px; margin: 0 auto;"></div>
  85 </div>
  86
  87 <div class="flexbox">
  88   <div data-expected-width="600" data-offset-x="0" style="flex: 1 0 300px; margin: 0 auto;"></div>
  89 </div>
  90
  91 <div class="flexbox">
  92   <div data-expected-width="600" data-offset-x="0" class="flex4" style="margin: 0 auto;">
  93       <div style="width: 100px; height: 100%;"></div>
  94   </div>
  95 </div>
  96
  97 <div class="flexbox" style="margin: 100px;">
  98   <div data-expected-width="300" data-offset-x="0" class="flex1" style="margin: 0 auto;"></div>
  99   <div data-expected-width="300" data-offset-x="300" class="flex1" style="margin: 0 auto;"></div>
 100 </div>
 101
 102 <div class="flexbox" style="padding: 100px;">
 103   <div data-expected-width="300" data-offset-x="100" style="flex: 1 0 0px; margin: 0 auto;"></div>
 104   <div data-expected-width="300" data-offset-x="400" style="flex: 1 0 0em; margin: 0 auto;"></div>
 105 </div>
 106
 107 <div class="flexbox">
 108   <div data-expected-width="75" data-offset-x="0" class="flex1-0-0" style="margin: 0 auto;"></div>
 109   <div data-expected-width="350" data-offset-x="75" class="flex2-0-0" style="padding: 0 100px;"></div>
 110   <div data-expected-width="75" data-offset-x="525" class="flex1-0-0" style="margin-left: 100px;"></div>
 111 </div>
 112
 113 </body>
 114 </html>