| <!DOCTYPE html> |
| <style> |
| div { |
| margin: 20px; |
| display: inline-block; |
| width: 100px; |
| } |
| |
| span { |
| outline-width: 20px; |
| outline-color: rgba(0, 0, 255, 0.3); |
| } |
| |
| span.solid { |
| outline-style: solid; |
| } |
| |
| span.auto { |
| outline-style: auto; |
| } |
| |
| span.dotted { |
| outline-style: dotted; |
| } |
| |
| span.dashed { |
| outline-style: dashed; |
| } |
| |
| span.double { |
| outline-style: double; |
| } |
| |
| span.ridge { |
| outline-style: ridge; |
| } |
| |
| span.groove { |
| outline-style: groove; |
| } |
| |
| span.inset { |
| outline-style: inset; |
| } |
| |
| span.outset { |
| outline-style: outset; |
| } |
| </style> |
| |
| The outlines should be a consistent color all the way around the outline. There should be no dark pixels or blocks at corners or between lines.<br><br> |
| |
| <div> |
| <span class="solid">Text spanning more than one line.</span> |
| </div> |
| solid |
| |
| <div> |
| <span class="double">Text spanning more than one line.</span> |
| </div> |
| double<br><br> |
| |
| <div> |
| <span class="dotted">Text spanning more than one line.</span> |
| </div> |
| dotted |
| |
| <div> |
| <span class="dashed">Text spanning more than one line.</span> |
| </div> |
| dashed<br><br> |
| |
| <div> |
| <span class="ridge">Text spanning more than one line.</span> |
| </div> |
| ridge |
| |
| <div> |
| <span class="groove">Text spanning more than one line.</span> |
| </div> |
| groove<br><br> |
| |
| <div> |
| <span class="inset">Text spanning more than one line.</span> |
| </div> |
| inset |
| |
| <div> |
| <span class="outset">Text spanning more than one line.</span> |
| </div> |
| outset |
| |
| <script> |
| if (window.testRunner) |
| testRunner.dumpAsTextWithPixelResults(); |
| </script> |
