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

<!DOCTYPE html>
<html>
<link href="resources/flexbox.css" rel="stylesheet">
<style>
body {
    margin: 0;
}
.flexbox {
    width: 600px;
    background-color: #aaa;
    position: relative;
}
.flexbox div {
    height: 20px;
    border: 0;
}

.flexbox :nth-child(1) {
    background-color: blue;
}
.flexbox :nth-child(2) {
    background-color: green;
}
.flexbox :nth-child(3) {
    background-color: red;
}

.flex1 {
    flex: 1;
}
.flex2 {
    flex: 2;
}
.flex4 {
    flex: 4;
}
.flex1-0-0 {
    flex: 1 0 0px;
}
.flex2-0-0 {
    flex: 2 0 0px;
}
</style>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/check-layout-th.js"></script>
<body onload="checkLayout('.flexbox')">
<div id=log></div>
<div class="flexbox">
  <div data-expected-width="200" class="flex1-0-0"></div>
  <div data-expected-width="100" data-offset-x="250" class="flex-none" style="width: 100px; margin: 0 50px;"></div>
  <div data-expected-width="200" data-offset-x="400" class="flex1-0-0"></div>
</div>

<div data-expected-height="120" class="flexbox">
  <div data-expected-width="200" data-offset-y="50" class="flex1-0-0" style="margin: 50px 0;"></div>
  <div data-expected-width="100" data-offset-x="250" class="flex-none" style="width: 100px; margin: 0 50px"></div>
  <div data-expected-width="200" data-offset-x="400" class="flex1-0-0"></div>
</div>

<!-- Margins set to auto get space only if there's space available after flexing. -->
<div class="flexbox">
  <div data-expected-width="200" class="flex1-0-0"></div>
  <div data-expected-width="200" data-offset-x="200" class="flex-none" style="width: 200px; margin: 0 auto"></div>
  <div data-expected-width="200" data-offset-x="400" class="flex1-0-0"></div>
</div>

<div class="flexbox">
  <div data-expected-width="100" class="flex1-0-0"></div>
  <div data-expected-width="300" data-offset-x="100" style="flex: 2 0 100px; margin-left: auto;"></div>
  <div data-expected-width="100" data-offset-x="400" class="flex1-0-0" style="margin-right: 100px"></div>
</div>

<!-- Margins set to auto don't have negative flex. -->
<div class="flexbox">
  <div data-expected-width="150" style="flex: 1 1 300px;"></div>
  <div data-expected-width="300" data-offset-x="150" style="flex: 1 0 300px; margin: 0 auto;"></div>
  <div data-expected-width="150" data-offset-x="450" style="flex: 1 1 300px;"></div>
</div>

<div class="flexbox">
  <div data-expected-width="300" data-offset-x="150" style="flex: 0 0 300px; margin: 0 auto;"></div>
</div>

<!-- margin: auto safe centers, which means it won't overflow to before the start of the flexbox. -->
<div class="flexbox">
  <div data-expected-width="700" data-offset-x="0" style="flex: 0 0 700px; margin: 0 auto;"></div>
</div>

<div class="flexbox">
  <div data-expected-width="600" data-offset-x="0" style="flex: 1 0 300px; margin: 0 auto;"></div>
</div>

<div class="flexbox">
  <div data-expected-width="600" data-offset-x="0" class="flex4" style="margin: 0 auto;">
      <div style="width: 100px; height: 100%;"></div>
  </div>
</div>

<div class="flexbox" style="margin: 100px;">
  <div data-expected-width="300" data-offset-x="0" class="flex1" style="margin: 0 auto;"></div>
  <div data-expected-width="300" data-offset-x="300" class="flex1" style="margin: 0 auto;"></div>
</div>

<div class="flexbox" style="padding: 100px;">
  <div data-expected-width="300" data-offset-x="100" style="flex: 1 0 0px; margin: 0 auto;"></div>
  <div data-expected-width="300" data-offset-x="400" style="flex: 1 0 0em; margin: 0 auto;"></div>
</div>

<div class="flexbox">
  <div data-expected-width="75" data-offset-x="0" class="flex1-0-0" style="margin: 0 auto;"></div>
  <div data-expected-width="350" data-offset-x="75" class="flex2-0-0" style="padding: 0 100px;"></div>
  <div data-expected-width="75" data-offset-x="525" class="flex1-0-0" style="margin-left: 100px;"></div>
</div>

</body>
</html>