clip-fixed-pos-transform-descendant-001.html (933B)
1 <!doctype html> 2 <title>CSS Masking: Transformed descendants of a fixed pos element under a clipped element get properly clipped</title> 3 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> 4 <link rel="author" title="Mozilla" href="https://mozilla.org"> 5 <link rel="match" href="clip-fixed-pos-transform-descendant-001-ref.html"> 6 <link rel="help" href="https://drafts.fxtf.org/css-masking/#clip-property"> 7 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1495791"> 8 <style> 9 html, body { margin: 0; } 10 11 #clip { 12 height: 100px; 13 width: 100px; 14 background: lime; 15 clip: rect(0, auto, auto, 0); 16 position: absolute; 17 } 18 19 #fixed { 20 position: fixed; 21 top: 0; 22 left: 0; 23 width: 100px; 24 height: 100px; 25 } 26 27 #clipped { 28 height: 100px; 29 width: 100px; 30 background: red; 31 transform: translateY(100px); 32 } 33 </style> 34 <div id="clip"> 35 <div id="fixed"> 36 <div id="clipped"></div> 37 </div> 38 </div>