| <!DOCTYPE html> |
| <title>SVG grid with percentage width</title> |
| <!-- This test is inspired by |
| http://www.w3.org/2004/CDF/TestSuite/WICD_CDR_WP1/rightsizing-grid/index.xhtml --> |
| <style type="text/css"> |
| body { |
| width: 240px; |
| } |
| div, object { |
| float:left; |
| } |
| .full { |
| width:100%; |
| } |
| .half { |
| width:50%; |
| } |
| .third { |
| width:33.33%; |
| } |
| .quarter { |
| width:25%; |
| } |
| .threequarters { |
| width:75%; |
| } |
| </style> |
| <h1>SVG grid with percentage width</h1> |
| <object class="half" data="resources/a.svg"></object> |
| <object class="half" data="resources/l.svg"></object> |
| |
| <object class="third" data="resources/bcde.svg"></object> |
| |
| <div class="third"> |
| <object width="100%" data="resources/k.svg"></object><br/> |
| <object width="100%" data="resources/j.svg"></object> |
| </div> |
| |
| <div class="third"> |
| <object class="full" data="resources/mnop.svg"></object> |
| <object class="full" data="resources/q.svg"></object> |
| </div> |
| |
| <object class="half" data="resources/i.svg"></object> |
| <object class="half" data="resources/f.svg"></object> |
| |
| <div class="half"> |
| <object class="quarter" data="resources/empty1.svg"></object> |
| <object class="threequarters" data="resources/g.svg"></object> |
| </div> |
| |
| <div class="half"> |
| <object class="half" data="resources/h.svg"></object> |
| <object class="half" data="resources/r.svg"></object> |
| </div> |
| |
| <object class="quarter" data="resources/empty2.svg"></object> |
| <object class="quarter" data="resources/empty2.svg"></object> |
| |
| <div class="half"> |
| <object class="threequarters" data="resources/s.svg"></object> |
| <object class="quarter" data="resources/t.svg"></object> |
| </div> |
| |
