| <html> |
| <head> |
| <title></title> |
| <style> |
| legend { height: 10px; border: 1px solid blue; } |
| fieldset { margin-bottom: 10px; -webkit-border-radius: 5px; height: 20px;} |
| fieldset.render { border: 8px double; } |
| fieldset.render legend { height: 12px; width: 50px; background-color: rgba(0, 128, 0, 0.3); border: none; } |
| div.rel { position: relative; height: 40px; } |
| #col1 { float: left; } |
| #col2 { float: left; margin-left: 70px; } |
| #col3 { margin-left: 450px; } |
| |
| </style> |
| </head> |
| <body> |
| <!-- border rendering tests --> |
| <div id="col1"> |
| <fieldset class="render" style="width: 100px;"> |
| <legend></legend> |
| </fieldset> |
| <fieldset class="render" style="width: 100px;"> |
| <legend style="width: 108%;"></legend> |
| </fieldset> |
| <fieldset class="render" style="width: 100px;"> |
| <legend style="width: 112%;"></legend> |
| </fieldset> |
| <fieldset class="render" style="width: 100px;"> |
| <legend style="width: 117%;"></legend> |
| </fieldset> |
| <fieldset class="render" style="width: 100px;"> |
| <legend style="margin-left: -12px;"></legend> |
| </fieldset> |
| <fieldset class="render" style="width: 100px; border-width: 15px; border-style: solid;"> |
| <legend style="margin-left: -12px;"></legend> |
| </fieldset> |
| <fieldset class="render" style="width: 100px; border-width: 15px; border-style: solid; -webkit-border-radius: 20px;"> |
| <legend style="margin-left: -12px;"></legend> |
| </fieldset> |
| </div> |
| <div id="col2"> |
| <fieldset class="render" style="width: 100px;"> |
| <legend style="margin-left: -16px;"></legend> |
| </fieldset> |
| <fieldset class="render" style="width: 100px;"> |
| <legend style="margin-left: -21px;"></legend> |
| </fieldset> |
| <fieldset class="render" style="width: 100px;"> |
| <legend style="margin-left: -69px;"></legend> |
| </fieldset> |
| <fieldset class="render" style="width: 100px;"> |
| <legend style="margin-left: -74px;"></legend> |
| </fieldset> |
| <fieldset class="render" style="width: 100px;"> |
| <legend style="margin-left: 115%;"></legend> |
| </fieldset> |
| <fieldset class="render" style="width: 100px;"> |
| <legend style="margin-left: 120%;"></legend> |
| </fieldset> |
| </div> |
| <!-- layout tests --> |
| <div id="col3"> |
| <fieldset style="width: 100px;"> |
| <legend style="width: 150px;"></legend> |
| </fieldset> |
| <fieldset style="width: 100px;"> |
| <legend style="width: 90px; margin: 30px;"></legend> |
| </fieldset> |
| <div class="rel" style="width: 100px;"> |
| <fieldset> |
| <legend style="width: 150px;"></legend> |
| </fieldset> |
| </div> |
| <div class="rel" style="width: 300px;"> |
| <fieldset style="width: 100; margin: auto;"> |
| <legend style="width: 150px;"></legend> |
| </fieldset> |
| </div> |
| <div class="rel" style="width: 100px;"> |
| <fieldset style="position: absolute;"> |
| <legend style="width: 150px;"></legend> |
| </fieldset> |
| </div> |
| <div class="rel"> |
| <fieldset style="position: absolute; width: 100px;"> |
| <legend style="width: 150px;"></legend> |
| </fieldset> |
| </div> |
| <div class="rel" style="width: 300px;"> |
| <fieldset style="position: absolute; left: 100px; right: 100px;"> |
| <legend style="width: 150px;"></legend> |
| </fieldset> |
| </div> |
| <fieldset style="display: inline; width: 100px;"> |
| <legend style="width: 150px;"></legend> |
| </fieldset> |
| <fieldset style="width: 100px;"> |
| <legend style="width: 150%;"></legend> |
| </fieldset> |
| </div> |
| </body> |
