Fri, 16 Jan 2015 18:13:44 +0100
Integrate suggestion from review to improve consistency with existing code.
michael@0 | 1 | <!-- |
michael@0 | 2 | Any copyright is dedicated to the Public Domain. |
michael@0 | 3 | http://creativecommons.org/publicdomain/zero/1.0/ |
michael@0 | 4 | --> |
michael@0 | 5 | <!DOCTYPE svg [ |
michael@0 | 6 | <!-- entities etc. here --> |
michael@0 | 7 | <!ENTITY dataURI |
michael@0 | 8 | "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><g id='empty'/><mask id='mask' maskContentUnits='userSpaceOnUse'><rect width='50' height='50' fill='white'/></mask></svg>"> |
michael@0 | 9 | ]> |
michael@0 | 10 | <svg xmlns="http://www.w3.org/2000/svg" |
michael@0 | 11 | xmlns:xlink="http://www.w3.org/1999/xlink"> |
michael@0 | 12 | <title> |
michael@0 | 13 | Testcase for bug 686013: CSS mask targeting a fragment in a data URI |
michael@0 | 14 | </title> |
michael@0 | 15 | <style type="text/css"> |
michael@0 | 16 | .masked { |
michael@0 | 17 | mask: url("&dataURI;#mask"); |
michael@0 | 18 | } |
michael@0 | 19 | </style> |
michael@0 | 20 | |
michael@0 | 21 | <!-- use an empty g to force resource document to load before onload --> |
michael@0 | 22 | <use xlink:href="&dataURI;#empty"/> |
michael@0 | 23 | |
michael@0 | 24 | <!-- giant lime background --> |
michael@0 | 25 | <rect width="100%" height="100%" fill="lime"/> |
michael@0 | 26 | |
michael@0 | 27 | <!-- Masked red rect, covered by lime rect |
michael@0 | 28 | (to make sure mask doesn't let too much through) --> |
michael@0 | 29 | <rect width="75" height="75" fill="red" class="masked"/> |
michael@0 | 30 | <rect width="50" height="50" fill="lime"/> |
michael@0 | 31 | |
michael@0 | 32 | <!-- Masked lime rect, covering red rect |
michael@0 | 33 | (to make sure mask lets enough through) --> |
michael@0 | 34 | <g transform="translate(0, 100)"> |
michael@0 | 35 | <rect width="50" height="50" fill="red"/> |
michael@0 | 36 | <rect width="75" height="75" fill="lime" class="masked"/> |
michael@0 | 37 | </g> |
michael@0 | 38 | </svg> |