position-absolute-013.html (6229B)
1 <!DOCTYPE html> 2 <title>CSS Test: Absolutely positioned children of flexboxes</title> 3 <link rel="author" title="Google Inc." href="http://www.google.com/"> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> 5 <meta name="assert" content="Checks the abspos position of flex children in a number of writing modes, alignments, etc."> 6 <style> 7 .abspos { 8 height: 50px; 9 width: 50px; 10 background: lightblue; 11 position: absolute; 12 flex: none; 13 } 14 15 .relpos { 16 position: relative; 17 } 18 19 .title { 20 margin-top: 1em; 21 } 22 23 .flexbox { 24 display: flex; 25 background-color: #aaa; 26 height: 100px; 27 width: 100px; 28 } 29 30 .horizontal-tb { 31 writing-mode: horizontal-tb; 32 } 33 .vertical-rl { 34 writing-mode: vertical-rl; 35 } 36 .vertical-lr { 37 writing-mode: vertical-lr; 38 } 39 40 .rtl { 41 direction: rtl; 42 } 43 .ltr { 44 direction: ltr; 45 } 46 47 .align-items-flex-start { 48 align-items: flex-start; 49 } 50 .align-items-flex-end { 51 align-items: flex-end; 52 } 53 .align-items-stretch { 54 align-items: stretch; 55 } 56 .justify-content-flex-start { 57 justify-content: flex-start; 58 } 59 .justify-content-flex-end { 60 justify-content: flex-end; 61 } 62 63 .row { 64 flex-direction: row; 65 } 66 .row-reverse { 67 flex-direction: row-reverse; 68 } 69 .column { 70 flex-direction: column; 71 } 72 .column-reverse { 73 flex-direction: column-reverse; 74 } 75 76 .nowrap { 77 flex-wrap: nowrap; 78 } 79 .wrap { 80 flex-wrap: wrap; 81 } 82 .wrap-reverse { 83 flex-wrap: wrap-reverse; 84 } 85 86 </style> 87 <script src="/resources/testharness.js"></script> 88 <script src="/resources/testharnessreport.js"></script> 89 <script src="/resources/check-layout-th.js"></script> 90 <body onload="checkLayout('.flexbox')"> 91 <div id=log></div> 92 <script> 93 94 var writingModes = ['horizontal-tb', 'vertical-rl', 'vertical-lr']; 95 var directions = ['ltr', 'rtl']; 96 var justifyContents = ['flex-start', 'flex-end']; 97 var alignItems = ['flex-start', 'flex-end', 'stretch']; 98 var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse']; 99 var wraps = ['nowrap', 'wrap', 'wrap-reverse']; 100 101 // These expected values were harvested from Chrome 85. Firefox 78b6 agrees 102 // except when align-items:stretch and flex-wrap:wrap-reverse are both in 103 // effect. 104 // Chrome 83 and FF 78b6 agree with these values when the lone flex child is 105 // position:static instead of position:absolute. That is evidence that these 106 // values are all correct, because the position of a staticpos child is 107 // specified to be identical to the abspos position when there are no other 108 // children or specified offsets. 109 var x = [0,0,0,50,50,50,50,50,50,0,0,0,0,50,0,0,50,0,50,0,50,50,0,50,50,50,50,0,0,0,0,0,0,50,50,50,0,50,0,0,50,0,50,0,50,50,0,50,0,0,0,50,50,50,50,50,50,0,0,0,0,50,0,0,50,0,50,0,50,50,0,50,50,50,50,0,0,0,0,0,0,50,50,50,0,50,0,0,50,0,50,0,50,50,0,50,0,0,0,50,50,50,50,50,50,0,0,0,50,0,50,50,0,50,0,50,0,0,50,0,50,50,50,0,0,0,0,0,0,50,50,50,50,0,50,50,0,50,0,50,0,0,50,0,50,0,50,50,0,50,50,0,50,50,0,50,50,50,50,0,0,0,50,50,50,0,0,0,50,0,50,50,0,50,50,0,50,50,0,50,0,0,0,50,50,50,0,0,0,50,50,50,50,0,50,50,0,50,50,0,50,50,0,50,50,50,50,0,0,0,50,50,50,0,0,0,50,0,50,50,0,50,50,0,50,50,0,50,0,0,0,50,50,50,0,0,0,50,50,50,0,50,0,0,50,0,0,50,0,0,50,0,50,50,50,0,0,0,50,50,50,0,0,0,0,50,0,0,50,0,0,50,0,0,50,0,0,0,0,50,50,50,0,0,0,50,50,50,0,50,0,0,50,0,0,50,0,0,50,0,0,0,0,50,50,50,0,0,0,50,50,50,0,50,0,0,50,0,0,50,0,0,50,0,50,50,50,0,0,0,50,50,50,0,0,0,0,50,0,0,50,0,0,50,0,0,50,0,0,0,0,50,50,50,0,0,0,50,50,50,0,50,0,0,50,0,0,50,0,0,50,0,50,50,50,0,0,0,50,50,50,0,0,0,50,0,50,50,0,50,50,0,50,50,0,50,0,0,0,50,50,50,0,0,0,50,50,50,50,0,50,50,0,50,50,0,50,50,0,50,50,50,50,0,0,0,50,50,50,0,0,0]; 110 111 var y = [0,50,0,0,50,0,0,50,0,0,50,0,0,0,0,50,50,50,0,0,0,50,50,50,0,50,0,0,50,0,0,50,0,0,50,0,50,50,50,0,0,0,50,50,50,0,0,0,0,50,0,0,50,0,0,50,0,0,50,0,0,0,0,50,50,50,0,0,0,50,50,50,0,50,0,0,50,0,0,50,0,0,50,0,50,50,50,0,0,0,50,50,50,0,0,0,50,0,50,50,0,50,50,0,50,50,0,50,0,0,0,50,50,50,0,0,0,50,50,50,50,0,50,50,0,50,50,0,50,50,0,50,50,50,50,0,0,0,50,50,50,0,0,0,0,0,0,50,50,50,50,50,50,0,0,0,0,50,0,0,50,0,50,0,50,50,0,50,50,50,50,0,0,0,0,0,0,50,50,50,0,50,0,0,50,0,50,0,50,50,0,50,0,0,0,50,50,50,50,50,50,0,0,0,0,50,0,0,50,0,50,0,50,50,0,50,50,50,50,0,0,0,0,0,0,50,50,50,0,50,0,0,50,0,50,0,50,50,0,50,0,0,0,50,50,50,50,50,50,0,0,0,50,0,50,50,0,50,0,50,0,0,50,0,50,50,50,0,0,0,0,0,0,50,50,50,50,0,50,50,0,50,0,50,0,0,50,0,0,0,0,50,50,50,50,50,50,0,0,0,0,50,0,0,50,0,50,0,50,50,0,50,50,50,50,0,0,0,0,0,0,50,50,50,0,50,0,0,50,0,50,0,50,50,0,50,0,0,0,50,50,50,50,50,50,0,0,0,0,50,0,0,50,0,50,0,50,50,0,50,50,50,50,0,0,0,0,0,0,50,50,50,0,50,0,0,50,0,50,0,50,50,0,50,0,0,0,50,50,50,50,50,50,0,0,0,50,0,50,50,0,50,0,50,0,0,50,0,50,50,50,0,0,0,0,0,0,50,50,50,50,0,50,50,0,50,0,50,0,0,50,0]; 112 113 var test_number = 1; 114 115 writingModes.forEach(function(flexWritingMode) { 116 wraps.forEach(function(wrap) { 117 flexDirections.forEach(function(flexDirection) { 118 directions.forEach(function(direction) { 119 justifyContents.forEach(function(justifyContent) { 120 alignItems.forEach(function(alignment) { 121 var flexboxClassName = flexWritingMode + ' ' + direction + ' ' + flexDirection + ' justify-content-' + justifyContent + ' align-items-' + alignment + ' ' + wrap; 122 var title = document.createElement('div'); 123 title.className = 'title'; 124 title.innerHTML = flexboxClassName + " .flexbox " + (test_number++); 125 document.body.appendChild(title); 126 127 var flexbox = document.createElement('div'); 128 flexbox.className = 'flexbox ' + flexboxClassName; 129 130 var child = document.createElement('div'); 131 child.setAttribute('class', 'abspos'); 132 child.setAttribute("data-offset-x", x.shift()); 133 child.setAttribute("data-offset-y", y.shift()); 134 flexbox.appendChild(child); 135 136 var relpos = document.createElement('div'); 137 relpos.className = 'relpos'; 138 relpos.appendChild(flexbox); 139 140 document.body.appendChild(relpos); 141 }) 142 }) 143 }) 144 }) 145 }) 146 }) 147 148 // Print the x,y offsets for pasting into above x,y arrays. 149 absposes = document.querySelectorAll('.abspos') 150 lefts = Array.from(absposes).map(x => x.offsetLeft) 151 tops = Array.from(absposes).map(x => x.offsetTop) 152 153 </script> 154 </body>