Revision control
++ <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>