position-absolute-012.html (3677B)
1 <!DOCTYPE html> 2 <html> 3 <title>CSS Test: Absolutely positioned children of flexboxes</title> 4 <link rel="author" title="Google Inc." href="http://www.google.com/"> 5 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> 6 <meta name="assert" content="Checks that we correctly position abspos children in a number of writing modes and alignments when containing block is grid."> 7 <style> 8 9 .abspos { 10 height: 50px; 11 width: 50px; 12 background: lightblue; 13 position: absolute; 14 flex: none; 15 } 16 17 .grid { 18 display: grid; 19 position: relative; 20 } 21 22 .title { 23 margin-top: 1em; 24 } 25 26 .flexbox { 27 display: flex; 28 background-color: #aaa; 29 height: 100px; 30 width: 100px; 31 } 32 33 .horizontal-tb { 34 writing-mode: horizontal-tb; 35 } 36 .vertical-rl { 37 writing-mode: vertical-rl; 38 } 39 .vertical-lr { 40 writing-mode: vertical-lr; 41 } 42 43 .rtl { 44 direction: rtl; 45 } 46 .ltr { 47 direction: ltr; 48 } 49 50 .align-items-flex-start { 51 align-items: flex-start; 52 } 53 .align-items-flex-end { 54 align-items: flex-end; 55 } 56 .justify-content-flex-start { 57 justify-content: flex-start; 58 } 59 .justify-content-flex-end { 60 justify-content: flex-end; 61 } 62 </style> 63 <script src="/resources/testharness.js"></script> 64 <script src="/resources/testharnessreport.js"></script> 65 <script src="/resources/check-layout-th.js"></script> 66 <body onload="checkLayout('.flexbox')"> 67 <div id=log></div> 68 <script> 69 70 var writingModes = ['horizontal-tb', 'vertical-rl', 'vertical-lr']; 71 var directions = ['ltr', 'rtl']; 72 var justifyContents = ['flex-start', 'flex-end']; 73 var alignItems = ['flex-start', 'flex-end']; 74 var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse']; 75 76 // These were harvested from Firefox 76.0b4. 77 var x = [0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50]; 78 79 var y = [0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0]; 80 81 var test_number = 1; 82 83 writingModes.forEach(function(flexWritingMode) { 84 flexDirections.forEach(function(flexDirection) { 85 directions.forEach(function(direction) { 86 justifyContents.forEach(function(justifyContent) { 87 alignItems.forEach(function(alignment) { 88 var flexboxClassName = flexWritingMode + ' ' + direction + ' ' + flexDirection + ' justify-content-' + justifyContent + ' align-items-' + alignment; 89 var title = document.createElement('div'); 90 title.className = 'title'; 91 title.innerHTML = flexboxClassName + " .flexbox " + (test_number++); 92 document.body.appendChild(title); 93 94 var flexbox = document.createElement('div'); 95 flexbox.className = 'flexbox ' + flexboxClassName; 96 97 var child = document.createElement('div'); 98 child.setAttribute('class', 'abspos'); 99 child.setAttribute("data-offset-x", x.shift()); 100 child.setAttribute("data-offset-y", y.shift()); 101 flexbox.appendChild(child); 102 103 var relpos = document.createElement('div'); 104 relpos.className = 'grid'; 105 relpos.appendChild(flexbox); 106 107 document.body.appendChild(relpos); 108 }) 109 }) 110 }) 111 }) 112 }) 113 114 </script> 115 116 </body>