third_party/WebKit/LayoutTests/css3/flexbox/style-change.html

   1 <!DOCTYPE html>
   2 <html>
   3 <style>
   4 body {
   5     margin: 0;
   6 }
   7 .flexbox {
   8     display: flex;
   9     background-color: #aaa;
  10     position: relative;
  11 }
  12
  13 .flexbox > :nth-child(1) {
  14     background-color: blue;
  15 }
  16 .flexbox > :nth-child(2) {
  17     background-color: green;
  18 }
  19
  20 .absolute {
  21   position: absolute;
  22   width: 50px;
  23   height: 50px;
  24   background-color: yellow !important;
  25 }
  26 </style>
  27 <script src="../../resources/check-layout.js"></script>
  28 <body>
  29
  30 <p>This test verifies that changing order, align-content, align-items, align-self, or justify-content will relayout.</p>
  31
  32 <div id="flexbox" class="flexbox" style="width: 300px; height: 300px;">
  33   <div id="a" style="flex: 0 0 auto; width: 100px; height: 100px;"></div>
  34   <div id="b" style="flex: 0 0 auto; width: 100px; height: 100px;"></div>
  35 </div>
  36 <script>
  37
  38 var flexbox = document.getElementById("flexbox");
  39 var aDiv = document.getElementById("a");
  40 var bDiv = document.getElementById("b");
  41
  42 function checkValues(aXOffset, aYOffset, bXOffset, bYOffset)
  43 {
  44     aDiv.setAttribute("data-offset-x", aXOffset);
  45     aDiv.setAttribute("data-offset-y", aYOffset);
  46     bDiv.setAttribute("data-offset-x", bXOffset);
  47     bDiv.setAttribute("data-offset-y", bYOffset);
  48     checkLayout('.flexbox');
  49 }
  50
  51 checkValues(0, 0, 100, 0);
  52
  53 flexbox.style.justifyContent = "flex-end";
  54 checkValues(100, 0, 200, 0);
  55
  56 flexbox.style.alignItems = "flex-end";
  57 checkValues(100, 200, 200, 200);
  58
  59 bDiv.style.order = -1;
  60 checkValues(200, 200, 100, 200);
  61
  62 aDiv.style.alignSelf = "flex-start";
  63 checkValues(200, 0, 100, 200);
  64
  65 flexbox.style.width = "100px";
  66 flexbox.style.flexWrap = "wrap";
  67 flexbox.style.alignContent = "flex-end";
  68 checkValues(0, 200, 0, 100);
  69
  70 </script>
  71
  72 </body>
  73 </html>