<!DOCTYPE html>
<script src="../../resources/js-test.js"></script>
<style>
body { margin: 0; }
.p .a {
transform: scaleX(0);
}
.p:hover .a {
transform: scaleX(1);
fill: red;
}
</style>
<svg width="400" height="100">
<clipPath id="c" clipPathTransform="scale(0)">
<rect width="100%" height="100%"/>
</clipPath>
<g class="p">
<rect class="a" width="200" height="100" fill="red" clip-path="url(#c)"/>
<rect class="b" width="100" height="100" fill="green"/>
</g>
</svg>
<script>
if (window.testRunner)
eventSender.mouseMoveTo(150, 50);
shouldBeNull("document.querySelector('.p:hover .a')");
</script>