<!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>