<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400" viewBox="0 0 100 100">
 <!-- red outline for fail condition -->
 <rect x="-100" y="-100" width="1000" height="1000" fill="red"/>
 <rect x="-26" y="-1" width="152" height="102" fill="white"/> <!-- extra pixel to get around anti-aliasing artifacts -->

 <!-- blue square -->
 <rect width="100%" height="100%" fill="navy"/>
 <line x1="0" y1="0" x2="100" y2="100" stroke="blue"/>
 <line x1="100" y1="0" x2="0" y2="100" stroke="blue"/>
 <text x="50" y="30" text-anchor="middle" fill="white" font-size="7">This should be a SQUARE.</text>
 <text x="50" y="40" text-anchor="middle" fill="white" font-size="5">It should be 400 pixels to a side.</text>
 <text x="50" y="48" text-anchor="middle" fill="white" font-size="5">There should be no red on this page.</text>

 <!-- orange ruler at the bottom -->
 <text x="50" y="90" text-anchor="middle" fill="white" font-size="5">The orange line should be 600 pixels long:</text>
 <line x1="-25" y1="92" x2="125" y2="92" stroke="orange"/>
 <text x="-25" y="90" text-anchor="start" fill="orange" font-size="3">0</text>
 <line x1="-25" y1="92" x2="-25" y2="90.5" stroke="orange"/>
 <text x="125" y="90" text-anchor="end" fill="orange" font-size="3">600</text>
 <line x1="125" y1="92" x2="125" y2="90.5" stroke="orange"/>
</svg>