contain-layout-overflow-002.html (1871B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Test: 'contain: layout' should force all overflow to be ink overflow (including when the overflow comes from floated descendants)</title> 6 <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu"> 7 <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout"> 8 <link rel="match" href="contain-layout-overflow-002-ref.html"> 9 <style> 10 .contain { 11 contain: layout; 12 } 13 .float { float: left; } 14 .outer { 15 height: 100px; 16 width: 100px; 17 } 18 .auto { 19 overflow: auto; 20 } 21 .inner-sm { 22 height: 50px; 23 width: 50px; 24 background: lightblue; 25 } 26 .inner-lg { 27 height: 200px; 28 width: 200px; 29 background: lightblue; 30 } 31 .pass { 32 background: green; 33 } 34 .fail { 35 background: red; 36 } 37 .border { 38 border: 5px solid green; 39 } 40 </style> 41 </head> 42 <body> 43 <!--CSS Test: Elements with contain:layout that do not produce scrollable overflow should paint as if containment were not applied. --> 44 <div class="outer"> 45 <div class="inner-sm contain float"></div> 46 </div> 47 <br> 48 49 <!--CSS Test: Layout-contained elements that overflow their container and have children who overflow should produce the same amount of scrollable overflow as if there were no children. --> 50 <div class="outer auto"> 51 <div class="inner-lg contain"> 52 <div class="inner-lg pass float"></div> 53 <div class="inner-lg fail float"></div> 54 </div> 55 </div> 56 <br> 57 58 <!--CSS Test: Layout-contained elements that do not overflow their container, but have children who overflow, should not allow their children to affect the scrollable overflow regions of their parent. --> 59 <div class="outer auto"> 60 <div class="inner-sm contain border"> 61 <div class="inner-lg float"> 62 </div> 63 </div> 64 </div> 65 </body> 66 </html>