shape-outside-floats-left-margin-polygon-expected.html 1.08 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 48 49 50 51 52 53
<!DOCTYPE html>
<html>
<head>
<style>
#container-border {
    border: 1px solid black; 
    margin: 10px; 
    width: 200px;
}

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

#float-left {
    float: left;
    position: relative;
    overflow: visible;
}

#svg-shape {
    position: absolute;
    display:block;
    top: -1px;
    left: -1px;
    width: 142px;
    height: 102px;
}

#expected-text {
    position: relative;
    top: 0px;
    left: 140px;
}

</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">
        <div id="expected-text">X<br/>X<br/>X<br/>X<br/>X</div>
        <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>
</div>
</body>
</html>