gradientDefaults.svg

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="600" viewBox="0 0 200 400">

  <!--= This should show eight squares in two colums. All of those should look the same.   =-->

  <!--= Each of them should have a horizontal gradient from black (left) to white (right). =-->

  <!--= In the right column, a green filled circle should be visible in each square.       =-->

  <!--= No red rectangles should be visible.                                               =-->

  <defs>

    <rect id="failed-when-visible" width="20" height="10" fill="red"/>

    <circle id="passed-when-visible" r="10" fill="green"/>

    <linearGradient id="to-white-no-defaults">

        <stop offset="0" stop-color="black" stop-opacity="1"/>

        <stop offset="1" stop-color="white" stop-opacity="1"/>

    </linearGradient>

    <linearGradient id="to-white-default-opacity">

      <stop offset="0" stop-color="black"/>

      <stop offset="1" stop-color="white"/>

    </linearGradient>

    <linearGradient id="to-white-default-color">

        <stop offset="0"                    stop-opacity="1"/>

        <stop offset="1" stop-color="white" stop-opacity="1"/>

    </linearGradient>

    <linearGradient id="to-white-all-defaults">

        <stop offset="0"/>

        <stop offset="1" stop-color="white"/>

    </linearGradient>

    <linearGradient id="to-transblack-no-defaults">

        <stop offset="0" stop-color="black" stop-opacity="1"/>

        <stop offset="1" stop-color="black" stop-opacity="0"/>

    </linearGradient>

    <linearGradient id="to-transblack-default-opacity">

        <stop offset="0" stop-color="black"/>

        <stop offset="1" stop-color="black" stop-opacity="0"/>

    </linearGradient>

    <linearGradient id="to-transblack-default-color">

        <stop offset="0" stop-opacity="1"/>

        <stop offset="1" stop-opacity="0"/>

    </linearGradient>

    <linearGradient id="to-transblack-all-defaults">

        <stop offset="0"/>

        <stop offset="1" stop-opacity="0"/>

    </linearGradient>

  </defs>

  <rect x="0" y="0" width="200" height="400" fill="white" />

  <use href="#failed-when-visible" x="70" y="45"/>

  <rect x="0" y="0" width="100" height="100" fill="url(#to-white-no-defaults)" stroke="black"/>

  <use href="#failed-when-visible" x="70" y="145"/>

  <rect x="0" y="100" width="100" height="100" fill="url(#to-white-default-opacity)" stroke="black"/>

  <use href="#failed-when-visible" x="70" y="245"/>

  <rect x="0" y="200" width="100" height="100" fill="url(#to-white-default-color)" stroke="black"/>

  <use href="#failed-when-visible" x="70" y="345"/>

  <rect x="0" y="300" width="100" height="100" fill="url(#to-white-all-defaults)" stroke="black"/>

  <use href="#passed-when-visible" x="180" y="50"/>

  <rect x="100" y="0" width="100" height="100" fill="url(#to-transblack-no-defaults)" stroke="black"/>

  <use href="#passed-when-visible" x="180" y="150"/>

  <rect x="100" y="100" width="100" height="100" fill="url(#to-transblack-default-opacity)" stroke="black"/>

  <use href="#passed-when-visible" x="180" y="250"/>

  <rect x="100" y="200" width="100" height="100" fill="url(#to-transblack-default-color)" stroke="black"/>

  <use href="#passed-when-visible" x="180" y="350"/>

  <rect x="100" y="300" width="100" height="100" fill="url(#to-transblack-all-defaults)" stroke="black"/>

</svg>