blob: 7d44bc09f513d30e494a452633e6a9e2489f8138 [file] [log] [blame]
<svg width="500px" height="580px" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="filter" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox">
<feFlood/>
<feSpecularLighting surfaceScale="10" specularExponent="10" specularConstant="2" lighting-color="rgb(0, 255, 0)">
<fePointLight id="light-source"/>
</feSpecularLighting>
<feComponentTransfer>
<feFuncG type="discrete" tableValues="0 1"/>
<feFuncA type="discrete" tableValues="0 1"/>
</feComponentTransfer>
</filter>
</defs>
<rect x="110" y="150" width="400" height="320" fill="none" filter="url(#filter)"/>
<!-- Mask off slight differences in point light radius -->
<circle cx="250" cy="310" r="112" fill="none" stroke="gray" stroke-width="20"/>
<script>
if (window.testRunner)
testRunner.waitUntilDone();
// Make sure the filter is drawn at least once before changing the light source.
requestAnimationFrame(() => {
requestAnimationFrame(() => {
const lightSource = document.getElementById('light-source');
lightSource.x.baseVal = 0.35;
lightSource.y.baseVal = 0.5;
lightSource.z.baseVal = 0.2;
testRunner.notifyDone();
});
});
</script>
</svg>