overflow-body-propagation-016.html (1400B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Test: two BODY elements</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-overflow-3/#overflow-propagation"> 6 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/12644"> 7 <meta name="assert" content="If there are multiple <body> elements, the 8 one that propagates `overflow` to the viewport would be the first one. 9 10 However, the first one has `display: none`, and overflow propagation 11 can only happen when the element generates a box. Therefore, the viewport 12 shouldn't get scrollbars from the `overflow: scroll` on the first body. 13 14 The second body doesn't propagate either, so it should be able to keep 15 `overflow: hidden` and hide its overflowing contents."> 16 <link rel="match" href="overflow-body-propagation-012-ref.html"> 17 <style> 18 html { 19 scrollbar-color: red red; 20 } 21 body { 22 overflow: scroll; 23 width: 0px; 24 height: 0px; 25 border: solid red; 26 border-width: 0 400px 400px 0; 27 } 28 body > div { 29 overflow: hidden; 30 background: green; 31 width: 400px; 32 height: 400px; 33 } 34 #clone { 35 border-color: green; 36 } 37 #clone > div { 38 background: red; 39 } 40 </style> 41 <body> 42 <div></div> 43 </body> 44 <script> 45 let clone = document.body.cloneNode(true); 46 clone.id = "clone"; 47 document.documentElement.appendChild(clone); 48 document.body.style.display = "none"; 49 </script>