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