| OLD | NEW |
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <title>shape-outside-floats-rounded-rectangle-004-reference.html</title> | |
| 3 <link rel="author" title="Adobe" href="http://html.adobe.com/"> | |
| 4 <link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com"> | |
| 5 <meta name="flags" content="ahem dom"> | |
| 6 <style> | |
| 7 .container { | |
| 8 position: relative; | |
| 9 font: 20px/1 Ahem, sans-serif; | |
| 10 line-height: 20px; | |
| 11 width: 160px; | |
| 12 height: 80px; | |
| 13 margin: 5px; | |
| 14 } | |
| 15 .rounded-rect { | |
| 16 position: absolute; | |
| 17 z-index: -1; | |
| 18 top: 0px; | |
| 19 left: 0px; | |
| 20 width: 80px; | |
| 21 height: 80px; | |
| 22 background-color: blue; | |
| 23 overflow: hidden; | |
| 24 border-radius: 50%; | |
| 25 } | |
| 26 .left-rounded-rect-float-line { | |
| 27 float: left; | |
| 28 clear: left; | |
| 29 height: 20px; | |
| 30 } | |
| 31 </style> | |
| 32 <body> | |
| 33 <div class="container"> | |
| 34 <div id="left-fixed-units" class="rounded-rect"></div> | |
| 35 X<br/> | |
| 36 X<br/> | |
| 37 X<br/> | |
| 38 X | |
| 39 </div> | |
| 40 <div class="container"> | |
| 41 <div id="left-relative-units" class="rounded-rect"></div> | |
| 42 X<br/> | |
| 43 X<br/> | |
| 44 X<br/> | |
| 45 X | |
| 46 </div> | |
| 47 <div class="container"> | |
| 48 <div id="left-different-units" class="rounded-rect"></div> | |
| 49 X<br/> | |
| 50 X<br/> | |
| 51 X<br/> | |
| 52 X | |
| 53 </div> | |
| 54 <div class="container"> | |
| 55 <div id="left-edge-case" class="rounded-rect"></div> | |
| 56 X<br/> | |
| 57 X<br/> | |
| 58 X<br/> | |
| 59 X | |
| 60 </div> | |
| 61 <script src="resources/rounded-rectangle.js"></script> | |
| 62 <script src="resources/subpixel-utils.js"></script> | |
| 63 <script> | |
| 64 genLeftRoundedRectFloatShapeOutsideRefTest({ | |
| 65 roundedRect: {x: 0, y: 0, width: 80, height: 80, rx: 40, ry: 40}, | |
| 66 containerWidth: 160, | |
| 67 containerHeight: 80, | |
| 68 lineHeight: 20, | |
| 69 floatElementClassSuffix: "rounded-rect-float-line", | |
| 70 insertElementIdSuffix: "fixed-units" | |
| 71 }); | |
| 72 genLeftRoundedRectFloatShapeOutsideRefTest({ | |
| 73 roundedRect: {x: 0, y: 0, width: 80, height: 80, rx: 40, ry: 40}, | |
| 74 containerWidth: 160, | |
| 75 containerHeight: 80, | |
| 76 lineHeight: 20, | |
| 77 floatElementClassSuffix: "rounded-rect-float-line", | |
| 78 insertElementIdSuffix: "relative-units" | |
| 79 }); | |
| 80 genLeftRoundedRectFloatShapeOutsideRefTest({ | |
| 81 roundedRect: {x: 0, y: 0, width: 80, height: 80, rx: 40, ry: 40}, | |
| 82 containerWidth: 160, | |
| 83 containerHeight: 80, | |
| 84 lineHeight: 20, | |
| 85 floatElementClassSuffix: "rounded-rect-float-line", | |
| 86 insertElementIdSuffix: "different-units" | |
| 87 }); | |
| 88 genLeftRoundedRectFloatShapeOutsideRefTest({ | |
| 89 roundedRect: {x: 0, y: 0, width: 80, height: 80, rx: 40, ry: 40}, | |
| 90 containerWidth: 160, | |
| 91 containerHeight: 80, | |
| 92 lineHeight: 20, | |
| 93 floatElementClassSuffix: "rounded-rect-float-line", | |
| 94 insertElementIdSuffix: "edge-case" | |
| 95 }); | |
| 96 </script> | |
| 97 </body> | |
| OLD | NEW |