scrollParent.html (3179B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSSOM View —— scrollParent test</title> 5 <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-htmlelement-scrollparent"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 .scroller { 10 overflow: scroll; 11 height: 100px; 12 } 13 .hidden { 14 overflow: hidden; 15 } 16 .clip { 17 overflow: clip; 18 } 19 .relpos { 20 position: relative; 21 } 22 .abspos { 23 position: absolute; 24 } 25 .fixedpos { 26 position: fixed; 27 } 28 #noBox { 29 display: none; 30 } 31 .contains-fixed { 32 transform: scale(1); 33 contain: paint; 34 } 35 </style> 36 </head> 37 <body> 38 <div id="childOfRoot"></div> 39 <div class="contains-fixed"> 40 <div id="fixedContainedByRoot" class="fixedpos"></div> 41 </div> 42 <div id="scroller3" class="scroller"> 43 <div id="fixedToRoot" class="fixedpos"></div> 44 <!-- Contains the fixed positioned descendant. --> 45 <div class="contains-fixed"> 46 <div id="scroller2" class="scroller"> 47 <!-- Contains the absolute positioned descendant. --> 48 <div class="relpos"> 49 <div id="scroller1" class="scroller"> 50 <div> 51 <div id="normalChild"></div> 52 <div id="noBox"></div> 53 <div id="absPosChild" class="abspos"></div> 54 <div id="fixedPosChild" class="fixedpos"></div> 55 </div> 56 <!-- Overflow: hidden is also a scroll container. --> 57 <div id="hidden" class="hidden"> 58 <div id="childOfHidden"></div> 59 </div> 60 <!-- No box with `display: contents` --> 61 <div style="display: contents"> 62 <div id="childOfDisplayContents"></div> 63 </div> 64 </div> 65 </div> 66 </div> 67 </div> 68 </div> 69 </body> 70 <script> 71 test(() => { assert_equals(normalChild.scrollParent, scroller1); }, 72 "scrollParent returns the nearest scroll container."); 73 test(() => { assert_equals(childOfHidden.scrollParent, hidden); }, 74 "hidden element is a scroll container."); 75 test(() => { assert_equals(noBox.scrollParent, null); }, 76 "Element with no box has null scrollParent."); 77 test(() => { assert_equals(absPosChild.scrollParent, scroller2); }, 78 "scrollParent follows absolute positioned containing block chain."); 79 test(() => { assert_equals(fixedPosChild.scrollParent, scroller3); }, 80 "scrollParent follows fixed positioned containing block chain."); 81 test(() => { assert_equals(fixedToRoot.scrollParent, null); }, 82 "scrollParent of element fixed to root is null."); 83 test(() => { assert_equals(childOfRoot.scrollParent, document.scrollingElement); }, 84 "scrollParent of child in root viewport returns document scrolling element."); 85 test(() => { assert_equals(fixedContainedByRoot.scrollParent, document.scrollingElement); }, 86 "scrollParent of fixed element contained within root is document scrolling element."); 87 test(() => { assert_equals(document.body.scrollParent, null); }, 88 "scrollParent of body is null."); 89 test(() => { assert_equals(document.documentElement.scrollParent, null); }, 90 "scrollParent of root is null."); 91 test(() => { assert_equals(childOfDisplayContents.scrollParent, scroller1); }, 92 "scrollParent skips ancestors with `display: contents`."); 93 </script> 94 </html>