shape-outside-floats-left-margin-polygon.html 1.1 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
<!DOCTYPE html>
<html>
<head>
<script>
    if (window.internals)
        window.internals.settings.setCSSExclusionsEnabled(true);
</script>

<style>
#container {
    font: 20px/1 Ahem, sans-serif;
    width: 200px;
    height: 300px;
  }

#float-left {
    float: left;
    position: relative;
    overflow: visible;
    -webkit-shape-outside: polygon(0px 0px, 100px 0px, 100px 60px, 0px 60px);
    -webkit-shape-margin: 20px;
}

#svg-shape {
    position: absolute;
    display:block;
    top: -21px;
    left: -21px;
    width: 142px;
    height: 102px;
}
</style>

<body>
<p>The left edges of the five black squares should follow the right side of the outer rounded rectangle boundary and each square should appear on a subsequent line.</p>
<div id="container">
    <div id="float-left">
        <svg id="svg-shape" xmlns="http://www.w3.org/2000/">
            <rect x="20" y="20" width="100" height="60" fill="none" stroke="green"></rect>
            <rect x="1" y="1" width="140" height="100" rx="20" ry="20" fill="none" stroke="green"></rect>
        </svg>
    </div>
    X<br/>X<br/>X<br/>X<br/>X
</div>
</body>
</html>