overflow-clip-margin-005.html (1240B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>Verifies overflow-clip-margin impacts layout</title> 4 <link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin"> 5 <link rel="author" title="Scott Violet" href="mailto:sky@chromium.org"> 6 <link rel="match" href="overflow-clip-margin-005-ref.html"> 7 <style> 8 .scroller { 9 overflow: auto; 10 width: 100px; 11 height: 100px; 12 /* Avoids some fuzz on scrollbar corners */ 13 scrollbar-color: blue blue; 14 } 15 .parent { 16 width: 100px; 17 height: 100px; 18 contain: paint; 19 overflow-clip-margin: 10px; 20 } 21 .child { 22 width: 200px; 23 height: 200px; 24 position: relative; 25 top: -50px; 26 left: -50px; 27 background-color: green; 28 } 29 </style> 30 <p>You should see a green box with scrollbars.</p> 31 <div class="scroller"> 32 <div class="parent"> 33 <div class="child"></div> 34 </div> 35 </div> 36 37 <p>You should see a green box with scrollbars.</p> 38 <div class="scroller"> 39 <div class="parent" style="overflow-clip-margin: 100px"> 40 <div class="child"></div> 41 </div> 42 </div> 43 44 <p>You should see a green box with no scrollbars.</p> 45 <div class="scroller"> 46 <div class="parent" style="background-color: green"> 47 </div> 48 </div>