<!DOCTYPE html>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<style>
#inputValid:valid + svg #r {
    fill: green;
}
#r {
  fill: red;
}
</style>
<input id="inputValid" required></input>
<svg width="100" height="100">
  <use xlink:href="#g" transform="translate(50,50)"></use>
  <g id="g">
    <rect id="r" x="0" y="0" width="50" height="50"></rect>
  </g>
</svg>
<script>
runAfterLayoutAndPaint(function() {
  inputValid.removeAttribute("required");
}, true);
</script>