clip-transform-order-2.html (949B)
1 <!doctype html> 2 <title>Clips should be applied before transforms (when fixed positioned too)</title> 3 <link rel="help" href="https://drafts.fxtf.org/css-masking-1/#placement"> 4 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1524966"> 5 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> 6 <link rel="author" title="Mozilla" href="https://mozilla.org"> 7 <link rel="match" href="clip-filter-order-ref.html"> 8 9 <style> 10 body { margin: 0; overflow: hidden; } 11 #testcase { 12 position: fixed; 13 left: -100px; 14 width: 400px; 15 height: 400px; 16 background: green; 17 transform: translateX(110px); 18 clip: rect(0px, 200px, 200px, 0px); 19 } 20 </style> 21 22 <div> 23 <p>Expected: A green box.<br> 24 There should be no red visible.<br> 25 There should be a crisp, clipped edge around the green box (no blurring).</p> 26 </div> 27 28 <div id="testcase"><div></div></div> 29 30 <div id="padding" style="height: 100vh"></div>