position-absolute-dynamic-containing-block.html (4486B)
1 <!DOCTYPE html> 2 <title>CSS Position: position:absolute dynamic containing block</title> 3 <link rel="author" title="mailto:atotic@google.com"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <link rel="help" href="https://drafts.csswg.org/css-position-3/#def-cb"> 7 <meta name="assert" content="Tests changes in containing block for out-of-flow positioned descendants."> 8 <style> 9 10 #outer { 11 width: 400px; 12 height: 300px; 13 outline: black solid 1px; 14 } 15 #intermediate { 16 width: 300px; 17 height: 200px; 18 outline: gray solid 1px; 19 } 20 #target { 21 background: green; 22 } 23 .abs { 24 position: absolute; 25 top: 0; 26 left: 0; 27 bottom: 0; 28 right: 0; 29 } 30 .fixed { 31 position: fixed; 32 top: 0; 33 left: 0; 34 bottom: 0; 35 right: 0; 36 } 37 .abs-container { 38 position: relative; 39 } 40 .fixed-container { 41 will-change: transform; 42 } 43 div { 44 padding: 5px; 45 } 46 </style> 47 <!-- This tests potential caching of out-of-flow positioned descendants. --> 48 <div id="outer"> 49 <div> 50 <div id="intermediate"> 51 <div> 52 <div id="target">TTT</div> 53 <div id="noLayout1"></div> 54 </div> 55 <div id="noLayout2"></div> 56 </div> 57 </div> 58 </div> 59 <script> 60 let outer = document.querySelector("#outer"); 61 let intermediate = document.querySelector("#intermediate"); 62 let target = document.querySelector("#target"); 63 let padding = 5; 64 65 function cleanup() { 66 outer.className = ""; 67 intermediate.className = ""; 68 target.className = ""; 69 document.body.offsetTop; 70 } 71 72 test( t => { 73 t.add_cleanup(cleanup); 74 outer.classList.add("abs-container"); 75 target.classList.add("abs"); 76 assert_equals(target.offsetHeight, outer.offsetHeight); 77 intermediate.classList.add("abs-container"); 78 assert_equals(target.offsetHeight, intermediate.offsetHeight); 79 }, "abs containing block moves from outer to intermediate" ); 80 test( t => { 81 t.add_cleanup(cleanup); 82 target.classList.add("abs"); 83 intermediate.classList.add("abs-container"); 84 assert_equals(target.offsetHeight, intermediate.offsetHeight); 85 outer.classList.add("abs-container"); 86 assert_equals(target.offsetHeight, intermediate.offsetHeight); 87 intermediate.classList.remove("abs-container"); 88 assert_equals(target.offsetHeight, outer.offsetHeight); 89 }, "abs containing block moves from intermediate to outer" ); 90 test( t => { 91 t.add_cleanup(cleanup); 92 target.classList.add("abs"); 93 outer.classList.add("abs-container"); 94 assert_equals(target.offsetHeight, outer.offsetHeight); 95 target.classList.remove("abs"); 96 assert_equals(target.offsetWidth, intermediate.offsetWidth - 4 * padding); 97 }, "target is no longer absolute"); 98 test( t => { 99 t.add_cleanup(cleanup); 100 outer.classList.add("abs-container"); 101 assert_equals(target.offsetWidth, intermediate.offsetWidth - 4 * padding); 102 target.classList.add("abs"); 103 assert_equals(target.offsetHeight, outer.offsetHeight); 104 }, "target becomes absolute"); 105 106 // Repeat same tests with fixed 107 test( t => { 108 t.add_cleanup(cleanup); 109 outer.classList.add("fixed-container"); 110 target.classList.add("fixed"); 111 assert_equals(target.offsetHeight, outer.offsetHeight); 112 intermediate.classList.add("fixed-container"); 113 assert_equals(target.offsetHeight, intermediate.offsetHeight); 114 }, "fixed containing block moves from outer to intermediate" ); 115 test( t => { 116 t.add_cleanup(cleanup); 117 target.classList.add("fixed"); 118 intermediate.classList.add("fixed-container"); 119 assert_equals(target.offsetHeight, intermediate.offsetHeight); 120 outer.classList.add("fixed-container"); 121 assert_equals(target.offsetHeight, intermediate.offsetHeight); 122 intermediate.classList.remove("fixed-container"); 123 assert_equals(target.offsetHeight, outer.offsetHeight); 124 }, "fixed containing block moves from intermediate to outer" ); 125 test( t => { 126 t.add_cleanup(cleanup); 127 target.classList.add("fixed"); 128 outer.classList.add("fixed-container"); 129 assert_equals(target.offsetHeight, outer.offsetHeight); 130 target.classList.remove("fixed"); 131 assert_equals(target.offsetWidth, intermediate.offsetWidth - 4 * padding); 132 }, "target is no longer fixed"); 133 test( t => { 134 t.add_cleanup(cleanup); 135 outer.classList.add("fixed-container"); 136 assert_equals(target.offsetWidth, intermediate.offsetWidth - 4 * padding); 137 target.classList.add("fixed"); 138 assert_equals(target.offsetHeight, outer.offsetHeight); 139 }, "target becomes fixed"); 140 </script>