clip-path-fixed-nested.html (990B)
1 <!doctype html> 2 <title>CSS Test: nested clip-path() inside the same reference frame with position: fixed</title> 3 <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> 4 <link rel="author" href="https://mozilla.org" title="Mozilla"> 5 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1501111"> 6 <link rel="help" href="https://drafts.fxtf.org/css-masking/#the-clip-path"> 7 <link rel="match" href="clip-path-fixed-nested-ref.html"> 8 <style> 9 body, html { 10 margin: 0; 11 padding: 0; 12 } 13 .outer-clip { 14 height: 100vh; 15 clip-path: inset(0 0 0 0); 16 background: green; 17 } 18 .fixed { 19 position: fixed; 20 } 21 .inner-clip { 22 height: 50px; 23 width: 50px; 24 clip-path: inset(0 0 0 0); 25 } 26 .inner-clip-contents { 27 height: 100px; 28 width: 100px; 29 background: purple; 30 } 31 </style> 32 <div class="outer-clip"> 33 <div class="fixed"> 34 <div class="inner-clip"> 35 <div class="inner-clip-contents"></div> 36 </div> 37 </div> 38 </div>