clip-transform-order.html (857B)
1 <!doctype html> 2 <title>Clips should be applied before transforms</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 } 11 #testcase { 12 position: absolute; 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>