rightsizing-grid.html | Explore in Territory

<!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>
chromium/third_party/blink/web_tests/svg/wicd/rightsizing-grid.html
