third_party/WebKit/LayoutTests/css3/flexbox/align-absolute-child.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     background-color: green;
  10     height: 100px;
  11     width: 100px;
  12     margin: 10px;
  13 }
  14 .flexbox > * {
  15     flex: none;
  16 }
  17 .relative {
  18     position: relative;
  19 }
  20 .flexbox > div {
  21     width: 20px;
  22     height: 20px;
  23 }
  24 .absolute {
  25     position: absolute;
  26 }
  27 #placed-absolute {
  28     top: 20px;
  29     left: 20px;
  30 }
  31
  32 .rtl {
  33     direction: rtl;
  34 }
  35 .ltr {
  36     direction: ltr;
  37 }
  38
  39 .flexbox :nth-child(1) {
  40     background-color: blue;
  41 }
  42 .flexbox :nth-child(2) {
  43     background-color: yellow;
  44 }
  45 .flexbox :nth-child(3) {
  46     background-color: salmon;
  47 }
  48 .flexbox :nth-child(4) {
  49     background-color: grey;
  50 }
  51 .flexbox :nth-child(5) {
  52     background-color: red;
  53 }
  54 .flexbox :nth-child(6) {
  55     background-color: orange;
  56 }
  57 .flexbox :nth-child(7) {
  58     background-color: purple;
  59 }
  60 </style>
  61
  62 <script src="../../resources/js-test.js"></script>
  63 <script src="../../resources/check-layout.js"></script>
  64
  65 <body onload="checkLayout('.flexbox')">
  66
  67 <div class='flexbox relative align-items-center'>
  68     <div id='placed-absolute' class='absolute' data-offset-x=20 data-offset-y=20></div>
  69 </div>
  70
  71 <div class='flexbox relative align-items-center'>
  72     <div data-offset-x=0 data-offset-y=40></div>
  73     <div class='absolute' data-offset-x=20 data-offset-y=0></div>
  74     <div data-offset-x=20 data-offset-y=40></div>
  75     <div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div>
  76 </div>
  77
  78 <div class="relative">
  79 <div class='flexbox align-items-center'>
  80     <div data-offset-x=10 data-offset-y=40></div>
  81     <div class='absolute' data-offset-x=30 data-offset-y=0></div>
  82     <div data-offset-x=30 data-offset-y=40></div>
  83     <div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div>
  84 </div>
  85 </div>
  86
  87 <div class='flexbox relative column rtl'>
  88     <div data-offset-x=80 data-offset-y=0></div>
  89     <div class='absolute' data-offset-x=80 data-offset-y=20></div>
  90     <div data-offset-x=80 data-offset-y=20></div>
  91     <div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div>
  92 </div>
  93
  94 <div class="relative">
  95 <div class='flexbox wrap-reverse'>
  96     <div style="width:90px" data-offset-x=10 data-offset-y=80></div>
  97     <div class="absolute" data-offset-x=100 data-offset-y=100></div>
  98     <div data-offset-x=10 data-offset-y=30></div>
  99     <div class="absolute" data-offset-x=30 data-offset-y=50></div>
 100     <div data-offset-x=30 data-offset-y=30></div>
 101     <div class="absolute" data-offset-x=50 data-offset-y=50></div>
 102     <div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div>
 103 </div>
 104 </div>
 105
 106 <div class='flexbox relative'>
 107     <div style="margin: auto;" data-offset-x=40 data-offset-y=40></div>
 108     <div class="absolute" style="margin: auto;" data-offset-x=100 data-offset-y=0></div>
 109     <div class="absolute" style="margin: auto;" data-offset-x=100 data-offset-y=0></div>
 110     <div class="absolute" style="margin: auto; top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div>
 111 </div>
 112
 113 <div class='flexbox align-items-stretch relative'>
 114     <div style="height: auto" data-offset-x=0 data-offset-y=0 data-expected-height=100></div>
 115     <div class="absolute" style="height: auto" data-offset-x=20 data-offset-y=0 data-expected-height=0></div>
 116     <div class="absolute" style="height: auto; top: 5px; left: 5px" data-offset-x=5 data-offset-y=5 data-expected-height=0></div>
 117 </div>
 118
 119 <div class="flexbox wrap relative">
 120   <div style="width: 100px;" data-offset-x=0 data-offset-y=0></div>
 121   <div class="absolute" data-offset-x=100 data-offset-y=0></div>
 122   <div style="width: 50px;" data-offset-x=0 data-offset-y=50></div>
 123   <div class="absolute" data-offset-x=50 data-offset-y=50></div>
 124   <div style="width: 50px;" data-offset-x=50 data-offset-y=50></div>
 125   <div class="absolute" data-offset-x=100 data-offset-y=50></div>
 126 </div>
 127
 128 <div class="flexbox wrap relative align-items-flex-end">
 129   <div style="width: 100px;" data-offset-x=0 data-offset-y=30></div>
 130   <div class="absolute" data-offset-x=100 data-offset-y=0></div>
 131   <div style="width: 50px;" data-offset-x=0 data-offset-y=80></div>
 132   <div class="absolute" data-offset-x=50 data-offset-y=50></div>
 133   <div style="width: 50px;" data-offset-x=50 data-offset-y=80></div>
 134   <div class="absolute" data-offset-x=100 data-offset-y=50></div>
 135 </div>
 136
 137
 138 <script>
 139 var absolute = document.getElementById('placed-absolute');
 140 var beforePosition = absolute.getBoundingClientRect();
 141 document.querySelector('.flexbox').style.height = '101px';
 142 var afterPosition = absolute.getBoundingClientRect();
 143
 144 // Positioned element should not change position when the height of it's parent flexbox is changed.
 145 for (key in beforePosition)
 146     shouldBe('beforePosition[key]', 'afterPosition[key]');
 147 </script>
 148 </body>
 149 </html>