style-change.html | Explore in Territory

<!DOCTYPE html>
<html>
<style>
body {
    margin: 0;
}
.flexbox {
    display: flex;
    background-color: #aaa;
    position: relative;
}

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

.absolute {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: yellow !important;
}
</style>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/check-layout-th.js"></script>
<body>
<div id=log></div>

<p>This test verifies that changing order, align-content, align-items, align-self, or justify-content will relayout.</p>

<div id="flexbox" class="flexbox" style="width: 300px; height: 300px;">
  <div id="a" style="flex: 0 0 auto; width: 100px; height: 100px;"></div>
  <div id="b" style="flex: 0 0 auto; width: 100px; height: 100px;"></div>
</div>
<script>

var flexbox = document.getElementById("flexbox");
var aDiv = document.getElementById("a");
var bDiv = document.getElementById("b");

function checkValues(aXOffset, aYOffset, bXOffset, bYOffset)
{
    aDiv.setAttribute("data-offset-x", aXOffset);
    aDiv.setAttribute("data-offset-y", aYOffset);
    bDiv.setAttribute("data-offset-x", bXOffset);
    bDiv.setAttribute("data-offset-y", bYOffset);
    checkLayout('.flexbox');
}

checkValues(0, 0, 100, 0);

flexbox.style.justifyContent = "flex-end";
checkValues(100, 0, 200, 0);

flexbox.style.alignItems = "flex-end";
checkValues(100, 200, 200, 200);

bDiv.style.order = -1;
checkValues(200, 200, 100, 200);

aDiv.style.alignSelf = "flex-start";
checkValues(200, 0, 100, 200);

flexbox.style.width = "100px";
flexbox.style.flexWrap = "wrap";
flexbox.style.alignContent = "flex-end";
checkValues(0, 200, 0, 100);

</script>

</body>
</html>
chromium/third_party/blink/web_tests/css3/flexbox/style-change.html
