overflow-clip-transform-001.html (1938B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Overflow Test: "overflow-x/y:clip" should not cause clipping in other axis, regardless of whether a transform is applied</title> 4 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-overflow-3/#valdef-overflow-clip"> 6 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1990292"> 7 <link rel="match" href="overflow-clip-transform-001-ref.html"> 8 <style> 9 body { margin-left: 50px; } 10 body { margin-left: 50px; } 11 .outer { 12 width: 50px; 13 height: 50px; 14 border: 4px solid grey; 15 display: inline-block; 16 margin: 30px; 17 } 18 .clip-x { 19 overflow-x: clip; 20 } 21 .clip-y { 22 overflow-y: clip; 23 } 24 .shift-left { 25 transform: translatex(-10px); 26 } 27 .shift-right { 28 transform: translatex(10px); 29 } 30 .shift-up { 31 transform: translatey(-10px); 32 } 33 .shift-down { 34 transform: translatey(10px); 35 } 36 .child { 37 width: 100%; 38 height: 100%; 39 box-sizing: border-box; 40 border: 4px solid blue; 41 } 42 .wide { 43 width: 90px; 44 margin-left: -20px; 45 } 46 .tall { 47 height: 90px; 48 margin-top: -20px; 49 } 50 </style> 51 <body> 52 <!-- These elements have 'overflow-y: clip', but their only overflow is 53 in the horizontal axis, so there shouldn't be any clipping: --> 54 <div class="outer clip-y shift-left"> 55 <div class="child wide"></div> 56 </div> 57 <div class="outer clip-y"> 58 <div class="child wide"></div> 59 </div> 60 <div class="outer clip-y shift-right"> 61 <div class="child wide"></div> 62 </div> 63 <br> 64 65 <!-- These elements have 'overflow-x: clip', but their only overflow is 66 in the vertical axis, so there shouldn't be any clipping: --> 67 <div class="outer clip-x shift-up"> 68 <div class="child tall"></div> 69 </div> 70 <div class="outer clip-x"> 71 <div class="child tall"></div> 72 </div> 73 <div class="outer clip-x shift-down"> 74 <div class="child tall"></div> 75 </div> 76 </body>