overflow-body-propagation-015.html (1382B)
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://bugzilla.mozilla.org/show_bug.cgi?id=1987284"> 7 <meta name="assert" content="If there are multiple <body> elements, the 8 one that propagates `overflow` to the viewport is the first one. 9 10 Here we insert a cloned body before the original one, so the original 11 needs to stop propagating because the clone will do it instead. 12 13 Therefore, the cloned <body> should get `overflow: visible` and its 14 overflowing contents should be visible. And the original <body> should 15 be able to keep `overflow: hidden` and hide its overflowing contents."> 16 <link rel="match" href="overflow-body-propagation-012-ref.html"> 17 <style> 18 body { 19 overflow: hidden; 20 width: 0px; 21 height: 0px; 22 border: solid green; 23 border-width: 0 400px 200px 0; 24 margin-bottom: 0; 25 } 26 body:not(#clone) { 27 margin-top: 0; 28 } 29 body > div { 30 background: red; 31 width: 400px; 32 height: 200px; 33 } 34 #clone { 35 border-color: red; 36 margin-top: revert; 37 } 38 #clone > div { 39 background: green; 40 } 41 </style> 42 <body> 43 <div></div> 44 </body> 45 <script> 46 let clone = document.body.cloneNode(true); 47 clone.id = "clone"; 48 document.documentElement.prepend(clone); 49 </script>