contain-layout-overflow-001.html (1761B)
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.</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-001-ref.html"> 9 <style> 10 .contain { 11 contain: layout; 12 } 13 .outer { 14 height: 100px; 15 width: 100px; 16 } 17 .auto { 18 overflow: auto; 19 } 20 .inner-sm { 21 height: 50px; 22 width: 50px; 23 background: lightblue; 24 } 25 .inner-lg { 26 height: 200px; 27 width: 200px; 28 background: lightblue; 29 } 30 .pass { 31 background: green; 32 } 33 .fail { 34 background: red; 35 } 36 .border { 37 border: 5px solid green; 38 } 39 </style> 40 </head> 41 <body> 42 <!--CSS Test: Elements with contain:layout that do not produce scrollable overflow should paint as if containment were not applied. --> 43 <div class="outer"> 44 <div class="inner-sm contain"></div> 45 </div> 46 <br> 47 48 <!--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. --> 49 <div class="outer auto"> 50 <div class="inner-lg contain"> 51 <div class="inner-lg pass"></div> 52 <div class="inner-lg fail"></div> 53 </div> 54 </div> 55 <br> 56 57 <!--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. --> 58 <div class="outer auto"> 59 <div class="inner-sm contain border"> 60 <div class="inner-lg"> 61 </div> 62 </div> 63 </div> 64 </body> 65 </html>