border-radius-clipping-with-transform-001.html (1392B)
1 <!DOCTYPE html> 2 <title>CSS Test (Backgrounds): border-radius clipping on overflow:hidden with transforms</title> 3 <link rel="author" title="L. David Baron" href="https://dbaron.org/"> 4 <link rel="author" title="Google" href="http://www.google.com/"> 5 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1207151"> 6 <link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#corner-clipping"> 7 <link rel="match" href="border-radius-clipping-with-transform-001-ref.html"> 8 <meta name="assert" content="The content should be clipped correctly, despite the interesting transforms."> 9 <meta name="fuzzy" content="maxDifference=0-48; totalPixels=0-6783" /> 10 <style> 11 12 #outer { 13 border: 10px solid #000; 14 border-radius: 60px; 15 width: 200px; 16 height: 200px; 17 overflow: hidden; 18 transform: rotate(90deg); 19 position: absolute; 20 top: 10px; 21 left: 10px; 22 } 23 #inner { 24 width: 100%; 25 height: 100%; 26 background: blue; 27 transform: translateZ(0); 28 } 29 30 #coverinner, #coverouter { 31 position: absolute; 32 border: 4px solid fuchsia; 33 filter: grayscale(30%); 34 } 35 36 #coverinner { 37 width: 196px; 38 height: 196px; 39 top: 18px; 40 left: 18px; 41 border-radius: 52px; 42 } 43 44 #coverouter { 45 width: 216px; 46 height: 216px; 47 top: 8px; 48 left: 8px; 49 border-radius: 62px; 50 } 51 52 </style> 53 54 <div id="outer"> 55 <div id="inner"> 56 </div> 57 </div> 58 <div id="coverinner"> 59 </div> 60 <div id="coverouter"> 61 </div>