position-absolute-002.html (5322B)
1 <!DOCTYPE html> 2 <html> 3 <title>CSS Test: Absolutely positioned children of flexboxes</title> 4 <link href="../support/flexbox.css" rel="stylesheet"> 5 <link rel="author" title="Google Inc." href="http://www.google.com/"> 6 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> 7 <meta name="flags" content="dom"> 8 <meta name="assert" content="Checks that we correctly position abspos children 9 with different alignments and dynamic changes"> 10 <style> 11 body { 12 margin: 0; 13 } 14 .flexbox { 15 background-color: green; 16 height: 100px; 17 width: 100px; 18 margin: 10px; 19 } 20 .flexbox > * { 21 flex: none; 22 } 23 .relative { 24 position: relative; 25 } 26 .flexbox > div { 27 width: 20px; 28 height: 20px; 29 } 30 .absolute { 31 position: absolute; 32 } 33 #placed-absolute { 34 top: 20px; 35 left: 20px; 36 } 37 38 .rtl { 39 direction: rtl; 40 } 41 .ltr { 42 direction: ltr; 43 } 44 45 .flexbox :nth-child(1) { 46 background-color: blue; 47 } 48 .flexbox :nth-child(2) { 49 background-color: yellow; 50 } 51 .flexbox :nth-child(3) { 52 background-color: salmon; 53 } 54 .flexbox :nth-child(4) { 55 background-color: grey; 56 } 57 .flexbox :nth-child(5) { 58 background-color: red; 59 } 60 .flexbox :nth-child(6) { 61 background-color: orange; 62 } 63 .flexbox :nth-child(7) { 64 background-color: purple; 65 } 66 </style> 67 68 <script src="/resources/testharness.js"></script> 69 <script src="/resources/testharnessreport.js"></script> 70 <script src="/resources/check-layout-th.js"></script> 71 72 <body onload="checkLayout('.flexbox')"> 73 <div id=log></div> 74 75 <div class='flexbox relative align-items-center'> 76 <div id='placed-absolute' class='absolute' data-offset-x=20 data-offset-y=20></div> 77 </div> 78 79 <div class='flexbox relative align-items-center'> 80 <div data-offset-x=0 data-offset-y=40></div> 81 <div class='absolute' data-offset-x=0 data-offset-y=40></div> 82 <div data-offset-x=20 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 86 <div class="relative"> 87 <div class='flexbox align-items-center'> 88 <div data-offset-x=10 data-offset-y=40></div> 89 <div class='absolute' data-offset-x=10 data-offset-y=40></div> 90 <div data-offset-x=30 data-offset-y=40></div> 91 <div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div> 92 </div> 93 </div> 94 95 <div class='flexbox relative column rtl'> 96 <div data-offset-x=80 data-offset-y=0></div> 97 <div class='absolute' data-offset-x=80 data-offset-y=0></div> 98 <div data-offset-x=80 data-offset-y=20></div> 99 <div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div> 100 </div> 101 102 <div class="relative"> 103 <div class='flexbox wrap-reverse'> 104 <div style="width:90px" data-offset-x=10 data-offset-y=80></div> 105 <div class="absolute" data-offset-x=10 data-offset-y=80></div> 106 <div data-offset-x=10 data-offset-y=30></div> 107 <div class="absolute" data-offset-x=10 data-offset-y=80></div> 108 <div data-offset-x=30 data-offset-y=30></div> 109 <div class="absolute" data-offset-x=10 data-offset-y=80></div> 110 <div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div> 111 </div> 112 </div> 113 114 <div class='flexbox relative'> 115 <div style="margin: auto;" data-offset-x=40 data-offset-y=40></div> 116 <div class="absolute" style="margin: auto;" data-offset-x=0 data-offset-y=0></div> 117 <div class="absolute" style="margin: auto;" data-offset-x=0 data-offset-y=0></div> 118 <div class="absolute" style="margin: auto; top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div> 119 </div> 120 121 <div class='flexbox align-items-stretch relative'> 122 <div style="height: auto" data-offset-x=0 data-offset-y=0 data-expected-height=100></div> 123 <div class="absolute" style="height: auto" data-offset-x=0 data-offset-y=0 data-expected-height=0></div> 124 <div class="absolute" style="height: auto; top: 5px; left: 5px" data-offset-x=5 data-offset-y=5 data-expected-height=0></div> 125 </div> 126 127 <div class="flexbox wrap relative"> 128 <div style="width: 100px;" data-offset-x=0 data-offset-y=0></div> 129 <div class="absolute" data-offset-x=0 data-offset-y=0></div> 130 <div style="width: 50px;" data-offset-x=0 data-offset-y=50></div> 131 <div class="absolute" data-offset-x=0 data-offset-y=0></div> 132 <div style="width: 50px;" data-offset-x=50 data-offset-y=50></div> 133 <div class="absolute" data-offset-x=0 data-offset-y=0></div> 134 </div> 135 136 <div class="flexbox wrap relative align-items-flex-end"> 137 <div style="width: 100px;" data-offset-x=0 data-offset-y=30></div> 138 <div class="absolute" data-offset-x=0 data-offset-y=80></div> 139 <div style="width: 50px;" data-offset-x=0 data-offset-y=80></div> 140 <div class="absolute" data-offset-x=0 data-offset-y=80></div> 141 <div style="width: 50px;" data-offset-x=50 data-offset-y=80></div> 142 <div class="absolute" data-offset-x=0 data-offset-y=80></div> 143 </div> 144 145 146 <script> 147 var absolute = document.getElementById('placed-absolute'); 148 var beforePosition = absolute.getBoundingClientRect(); 149 document.querySelector('.flexbox').style.height = '101px'; 150 var afterPosition = absolute.getBoundingClientRect(); 151 152 // Positioned element should not change position when the height of it's parent flexbox is changed. 153 for (key in beforePosition) { 154 test(function() { 155 assert_equals(beforePosition[key], afterPosition[key]); 156 }, 'position of ' + key); 157 } 158 </script> 159 </body> 160 </html>