offsetParent-fixed.html (1506B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel="author" href="mailto:zhoupeng.1996@bytedance.com"> 4 <link rel="help" href="https://www.w3.org/TR/css-position-3/#fixed-cb"> 5 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/12352"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 #a, #b, #c, #d, #e, #f { 10 position: fixed; 11 } 12 #margin { 13 margin: 10px; 14 } 15 #transform { 16 transform: translateX(10px); 17 } 18 #perspective { 19 perspective: 10px; 20 } 21 #filter { 22 filter: opacity(25%); 23 } 24 #contain { 25 contain: paint; 26 } 27 </style> 28 29 <body> 30 <div id="a"></div> 31 <div id="margin"> 32 <div><div id="b"></div></div> 33 </div> 34 35 <div id="transform"> 36 <div><div id="c"></div></div> 37 </div> 38 <div id="perspective"> 39 <div><div id="d"></div></div> 40 </div> 41 <div id="filter"> 42 <div><div id="e"></div></div> 43 </div> 44 <div id="contain"> 45 <div><div id="f"></div></div> 46 </div> 47 </body> 48 49 <script> 50 test(() => { 51 assert_equals(a.offsetParent, null); 52 assert_equals(b.offsetParent, null); 53 }, 'If the containing block for a fixed positioned element is viewport, the offsetParent should be null.'); 54 55 test(() => { 56 assert_equals(c.offsetParent, transform); 57 assert_equals(d.offsetParent, perspective); 58 assert_equals(e.offsetParent, filter); 59 assert_equals(f.offsetParent, contain); 60 }, 'If the containing block for a fixed positioned element is the nearest ancestor box, the offsetParent should be the nearest ancestor box.'); 61 </script>