feImage-scale-to-primitive-subregion.html (1371B)
1 <!-- 2 Any copyright is dedicated to the Public Domain. 3 http://creativecommons.org/publicdomain/zero/1.0/ 4 --> 5 <!DOCTYPE HTML> 6 <html> 7 <title>feImage Rendering Should Scale To Its Primitive Subregion</title> 8 <!-- 9 Test for https://bugzilla.mozilla.org/show_bug.cgi?id=1065606 10 11 This test verifies that an feImage renders as large as its primitive subregion 12 before being clipped by its filter region. 13 14 In this case, the primitive subregion is 600x600. The filter region is equal 15 to the bounding box of the filtered element (100% x 30px). 16 17 Thus, the 1x1 green pixel feImage rendering should scale up to the 600x600 18 primitive subregion and then be clipped by the 100% x 30px filter region. 19 Assuming the browser window is more than 600px wide, the final rendering 20 should be a 600x30 green rectangle. 21 --> 22 <head> 23 <style> 24 .filtered { 25 filter: url(#f); 26 height: 30px; 27 background: red; 28 } 29 </style> 30 </head> 31 <body> 32 <p>You should see a long horizontal green rectangle.</p> 33 <div class="filtered"></div> 34 <svg> 35 <defs> 36 <filter id="f" x="0" y="0" width="1" height="1"> 37 <!-- Data URI represents a 1x1 green pixel. --> 38 <feImage width="600" height="600" 39 xlink:href="data:image/gif;base64,R0lGODlhAQABAIAAAAD/AAAAACwAAAAAAQABAAACAkQBADs="/> 40 </filter> 41 </defs> 42 </svg> 43 </body> 44 </html>