OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <title>SVG grid with percentage width</title> |
| 3 <!-- This test is inspired by |
| 4 http://www.w3.org/2004/CDF/TestSuite/WICD_CDR_WP1/rightsizing-grid/index.xh
tml --> |
| 5 <style type="text/css"> |
| 6 body { |
| 7 width: 240px; |
| 8 } |
| 9 div, object { |
| 10 float:left; |
| 11 } |
| 12 .full { |
| 13 width:100%; |
| 14 } |
| 15 .half { |
| 16 width:50%; |
| 17 } |
| 18 .third { |
| 19 width:33.33%; |
| 20 } |
| 21 .quarter { |
| 22 width:25%; |
| 23 } |
| 24 .threequarters { |
| 25 width:75%; |
| 26 } |
| 27 </style> |
| 28 <h1>SVG grid with percentage width</h1> |
| 29 <object class="half" data="resources/a.svg"></object> |
| 30 <object class="half" data="resources/l.svg"></object> |
| 31 |
| 32 <object class="third" data="resources/bcde.svg"></object> |
| 33 |
| 34 <div class="third"> |
| 35 <object width="100%" data="resources/k.svg"></object><br/> |
| 36 <object width="100%" data="resources/j.svg"></object> |
| 37 </div> |
| 38 |
| 39 <div class="third"> |
| 40 <object class="full" data="resources/mnop.svg"></object> |
| 41 <object class="full" data="resources/q.svg"></object> |
| 42 </div> |
| 43 |
| 44 <object class="half" data="resources/i.svg"></object> |
| 45 <object class="half" data="resources/f.svg"></object> |
| 46 |
| 47 <div class="half"> |
| 48 <object class="quarter" data="resources/empty1.svg"></object> |
| 49 <object class="threequarters" data="resources/g.svg"></object> |
| 50 </div> |
| 51 |
| 52 <div class="half"> |
| 53 <object class="half" data="resources/h.svg"></object> |
| 54 <object class="half" data="resources/r.svg"></object> |
| 55 </div> |
| 56 |
| 57 <object class="quarter" data="resources/empty2.svg"></object> |
| 58 <object class="quarter" data="resources/empty2.svg"></object> |
| 59 |
| 60 <div class="half"> |
| 61 <object class="threequarters" data="resources/s.svg"></object> |
| 62 <object class="quarter" data="resources/t.svg"></object> |
| 63 </div> |
| 64 |
OLD | NEW |