overflow-clip-transform-001-ref.html (1415B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Reference Case</title> 4 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 5 <!-- Note: This reference case should have almost identical markup to the 6 testcase; the only difference should be the removal of the 'clip-{x,y}' 7 classes and their 'overflow-{x,y}: clip' styles. --> 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 .shift-left { 19 transform: translatex(-10px); 20 } 21 .shift-right { 22 transform: translatex(10px); 23 } 24 .shift-up { 25 transform: translatey(-10px); 26 } 27 .shift-down { 28 transform: translatey(10px); 29 } 30 .child { 31 width: 100%; 32 height: 100%; 33 box-sizing: border-box; 34 border: 4px solid blue; 35 } 36 .wide { 37 width: 90px; 38 margin-left: -20px; 39 } 40 .tall { 41 height: 90px; 42 margin-top: -20px; 43 } 44 </style> 45 <body> 46 <div class="outer shift-left"> 47 <div class="child wide"></div> 48 </div> 49 <div class="outer"> 50 <div class="child wide"></div> 51 </div> 52 <div class="outer shift-right"> 53 <div class="child wide"></div> 54 </div> 55 <br> 56 57 <div class="outer shift-up"> 58 <div class="child tall"></div> 59 </div> 60 <div class="outer"> 61 <div class="child tall"></div> 62 </div> 63 <div class="outer shift-down"> 64 <div class="child tall"></div> 65 </div> 66 </body>