Commit 3f66c4ad authored by hmuller@adobe.com's avatar hmuller@adobe.com

[CSS Exclusions] Simple shape-outside tests fail when subpixel layout is disabled

https://bugs.webkit.org/show_bug.cgi?id=115767

Reviewed by Dirk Schulze.

The overall goal of this change was to restore the (last) four excluded exclusions ref-tests
by making them work correctly when subpixel layout is disabled. All of the tests were
substantially simplified, as was the supporting javascript code. The original
shape-outside-floats-simple-rounded-rectangle test was replaced by three separate tests
because the original was bigger then then the 800x600 limit and because it unncessarily
combined three indepedent test cases.

* fast/exclusions/resources/rounded-rectangle.js:
(ellipseXIntercept): Return the 1st quadrant X intercept for an ellipse given a first quadrant Y intercept.
(scanConvertRoundedRectangleOutside): Return the line segment intervals that overlap a rounded rectangle.
(genLeftRightRoundedRectFloatShapeOutsideRefTest): Insert a stack of float divs that match the left or right edge of a rounded rectangle.
* fast/exclusions/shape-outside-floats/shape-outside-floats-non-zero-y-expected.html:
* fast/exclusions/shape-outside-floats/shape-outside-floats-non-zero-y.html:
* fast/exclusions/shape-outside-floats/shape-outside-floats-simple-circle-expected.html:
* fast/exclusions/shape-outside-floats/shape-outside-floats-simple-circle.html:
* fast/exclusions/shape-outside-floats/shape-outside-floats-simple-ellipse-expected.html:
* fast/exclusions/shape-outside-floats/shape-outside-floats-simple-ellipse.html:
* fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-001-expected.html: Added.
* fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-001.html: Added.
* fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-002-expected.html: Added.
* fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-002.html: Added.
* fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-003-expected.html: Added.
* fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-003.html: Added.
* fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-expected.html: Removed.
* fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle.html: Removed.
* platform/mac/TestExpectations:


git-svn-id: http://svn.webkit.org/repository/webkit/trunk@150032 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 7f3a9eb5
2013-05-13 Hans Muller <hmuller@adobe.com>
[CSS Exclusions] Simple shape-outside tests fail when subpixel layout is disabled
https://bugs.webkit.org/show_bug.cgi?id=115767
Reviewed by Dirk Schulze.
The overall goal of this change was to restore the (last) four excluded exclusions ref-tests
by making them work correctly when subpixel layout is disabled. All of the tests were
substantially simplified, as was the supporting javascript code. The original
shape-outside-floats-simple-rounded-rectangle test was replaced by three separate tests
because the original was bigger then then the 800x600 limit and because it unncessarily
combined three indepedent test cases.
* fast/exclusions/resources/rounded-rectangle.js:
(ellipseXIntercept): Return the 1st quadrant X intercept for an ellipse given a first quadrant Y intercept.
(scanConvertRoundedRectangleOutside): Return the line segment intervals that overlap a rounded rectangle.
(genLeftRightRoundedRectFloatShapeOutsideRefTest): Insert a stack of float divs that match the left or right edge of a rounded rectangle.
* fast/exclusions/shape-outside-floats/shape-outside-floats-non-zero-y-expected.html:
* fast/exclusions/shape-outside-floats/shape-outside-floats-non-zero-y.html:
* fast/exclusions/shape-outside-floats/shape-outside-floats-simple-circle-expected.html:
* fast/exclusions/shape-outside-floats/shape-outside-floats-simple-circle.html:
* fast/exclusions/shape-outside-floats/shape-outside-floats-simple-ellipse-expected.html:
* fast/exclusions/shape-outside-floats/shape-outside-floats-simple-ellipse.html:
* fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-001-expected.html: Added.
* fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-001.html: Added.
* fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-002-expected.html: Added.
* fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-002.html: Added.
* fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-003-expected.html: Added.
* fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-003.html: Added.
* fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-expected.html: Removed.
* fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle.html: Removed.
* platform/mac/TestExpectations:
2013-05-13 Christophe Dumez <ch.dumez@sisa.samsung.com>
Unreviewed, rolling out r150022.
......
if (window.internals)
window.internals.settings.setCSSExclusionsEnabled(true);
function defined(value) { return typeof value !== "undefined"; }
function convertToRoundedRect(dimensions) {
if (defined(dimensions.shapeCenterX) && defined(dimensions.shapeCenterY)) {
if (defined(dimensions.shapeRadius)) {
// Convert a circle.
dimensions.shapeX = dimensions.shapeCenterX - dimensions.shapeRadius;
dimensions.shapeY = dimensions.shapeCenterY - dimensions.shapeRadius;
dimensions.shapeWidth = dimensions.shapeRadius * 2;
dimensions.shapeHeight = dimensions.shapeRadius * 2;
dimensions.shapeRadiusX = dimensions.shapeRadius;
dimensions.shapeRadiusY = dimensions.shapeRadius;
} else {
// Convert an ellipse.
dimensions.shapeX = dimensions.shapeCenterX - dimensions.shapeRadiusX;
dimensions.shapeY = dimensions.shapeCenterY - dimensions.shapeRadiusY;
dimensions.shapeWidth = dimensions.shapeRadiusX * 2;
dimensions.shapeHeight = dimensions.shapeRadiusY * 2;
}
}
// Otherwise, we have a rounded rect, so no conversion is needed.
function ellipseXIntercept(yi, rx, ry)
{
return rx * Math.sqrt(1 - (yi * yi) / (ry * ry));
}
function xFromEllipseCenter(yFromEllipseCenter, radiusX, radiusY) {
return radiusX * Math.sqrt(1 - Math.pow(yFromEllipseCenter / radiusY, 2));
}
function scanConvertRoundedRectangleOutside(r, height, lineHeight)
{
var intervals = [];
function xInset(dimensions, lineTop, lineBottom) {
var left;
if (lineTop < dimensions.shapeHeight && lineBottom > dimensions.shapeHeight)
lineBottom = dimensions.shapeHeight;
if (lineTop >= dimensions.shapeHeight || (lineTop >= dimensions.shapeRadiusY && lineBottom <= dimensions.shapeHeight - dimensions.shapeRadiusY)) {
left = 0;
} else {
var yFromEllipseCenter = Math.max((dimensions.shapeRadiusY - lineTop), lineBottom - (dimensions.shapeHeight - dimensions.shapeRadiusY));
left = dimensions.shapeRadiusX - xFromEllipseCenter(yFromEllipseCenter, dimensions.shapeRadiusX, dimensions.shapeRadiusY);
}
return left;
}
function xOutset(dimensions, lineTop, lineBottom) {
var left = 0;
if (lineBottom > dimensions.shapeHeight)
lineBottom = dimensions.shapeHeight;
if (lineTop < dimensions.shapeHeight && (lineTop < dimensions.shapeRadiusY || lineBottom > dimensions.shapeHeight - dimensions.shapeRadiusY)) {
var yFromEllipseCenter;
if (lineBottom < dimensions.shapeRadiusY) {
yFromEllipseCenter = lineBottom - dimensions.shapeRadiusY;
left = dimensions.shapeRadiusX - xFromEllipseCenter(yFromEllipseCenter, dimensions.shapeRadiusX, dimensions.shapeRadiusY);
} else if (lineTop > dimensions.shapeHeight - dimensions.shapeRadiusY) {
yFromEllipseCenter = lineTop - (dimensions.shapeHeight - dimensions.shapeRadiusY);
left = dimensions.shapeRadiusX - xFromEllipseCenter(yFromEllipseCenter, dimensions.shapeRadiusX, dimensions.shapeRadiusY);
}
}
return left;
}
for (var y = 0; y < height; y += lineHeight) {
if (y + lineHeight <= r.y || y >= r.y + r.height)
continue;
function generateString(dimensions, lineHeight) {
var resultLength = 0;
if (dimensions.shapeRadiusX == 0 || dimensions.shapeRadiusY == 0)
resultLength = dimensions.shapeWidth * dimensions.shapeHeight / (lineHeight * lineHeight);
else {
for (var lineBottom = lineHeight; lineBottom < dimensions.shapeHeight; lineBottom += lineHeight) {
var width = dimensions.shapeWidth - 2 * xInset(dimensions, lineBottom, lineBottom + lineHeight);
resultLength += width / lineHeight;
if (y + lineHeight < r.y + r.ry) {
// within the upper rounded corner part of the rectangle
var dx = ellipseXIntercept(y + lineHeight - r.y - r.ry, r.rx, r.ry);
intervals.push( { y: y, left: r.x + r.rx - dx, right: r.x + r.width - r.rx + dx} );
}
}
return (new Array(Math.ceil(resultLength / 2)).join("x "));
}
function simulateShape(elementId, stylesheet, dimensions, lineHeight) {
var simpleRectangle = dimensions.shapeRadiusX == 0 || dimensions.shapeRadiusY == 0;
var floatHeight = simpleRectangle ? dimensions.shapeHeight : lineHeight;
stylesheet.insertRule("#" + elementId + " { width: " + dimensions.width + "px; height: " + dimensions.height + "px; font: " + lineHeight + "px/1 Ahem, sans-serif; }");
stylesheet.insertRule("#" + elementId + " .float { height: " + floatHeight + "px; }");
stylesheet.insertRule("#" + elementId + " .left { float: left; clear: left; }");
stylesheet.insertRule("#" + elementId + " .right { float: right; clear: right; }");
stylesheet.insertRule("#" + elementId + " p { -webkit-margin-before: 0; word-wrap: break-word; letter-spacing: 0; }");
var element = document.getElementById(elementId);
if (dimensions.shapeY > 0) {
var paddingTop = document.createElement("div");
paddingTop.setAttribute("class", "float left");
paddingTop.style.width = dimensions.width + "px";
paddingTop.style.height = dimensions.shapeY + "px";
element.appendChild(paddingTop);
}
for (var y = 0; y < dimensions.shapeHeight; y+= floatHeight) {
var inset = simpleRectangle ? 0 : xInset(dimensions, y, y + lineHeight);
var paddingLeft = document.createElement("div");
paddingLeft.setAttribute("class", "float left");
paddingLeft.style.width = SubPixelLayout.snapToLayoutUnit(dimensions.shapeX + inset) + "px";
element.appendChild(paddingLeft);
var paddingRight = document.createElement("div");
paddingRight.setAttribute("class", "float right");
paddingRight.style.width = SubPixelLayout.snapToLayoutUnit((dimensions.width - dimensions.shapeWidth - dimensions.shapeX) + inset) + "px";
element.appendChild(paddingRight);
}
}
function simulateShapeOutline(elementId, stylesheet, dimensions) {
stylesheet.insertRule("#" + elementId + "{ position: relative; }");
stylesheet.insertRule("#" + elementId + "::before { "
+ "content: ' '; "
+ "display: block; "
+ "position: absolute; "
+ "top: " + (dimensions.shapeY - 1) + "px; "
+ "left: " + (dimensions.shapeX - 1) + "px; "
+ "width: " + dimensions.shapeWidth + "px; "
+ "height: " + dimensions.shapeHeight + "px; "
+ "border: 1px solid blue; "
+ "border-radius: " + dimensions.shapeRadiusX + "px / " + dimensions.shapeRadiusY + "px; }");
}
function generateSimulatedShapeElement(elementId, stylesheet, dimensions, lineHeight) {
simulateShape(elementId, stylesheet, dimensions, lineHeight);
simulateShapeOutline(elementId, stylesheet, dimensions);
var text = document.createTextNode(generateString(dimensions, lineHeight));
var p = document.createElement("p");
p.appendChild(text);
var element = document.getElementById(elementId);
element.appendChild(p);
}
function generateShapeElement(elementId, stylesheet, dimensions, lineHeight) {
stylesheet.insertRule("#" + elementId + " { "
+ "-webkit-shape-inside: rectangle("
+ dimensions.shapeX + "px, "
+ dimensions.shapeY + "px, "
+ dimensions.shapeWidth + "px, "
+ dimensions.shapeHeight + "px, "
+ dimensions.shapeRadiusX + "px, "
+ dimensions.shapeRadiusY + "px); "
+ "width: " + dimensions.width + "px; "
+ "height: " + dimensions.height + "px; "
+ "font: " + lineHeight + "px/1 Ahem, sans-serif; "
+ "word-wrap: break-word; }");
stylesheet.insertRule("#" + elementId + " p { -webkit-margin-before: 0; word-wrap: break-word; letter-spacing: 0; }");
simulateShapeOutline(elementId, stylesheet, dimensions);
var text = document.createTextNode(generateString(dimensions, lineHeight));
var p = document.createElement("p");
p.appendChild(text);
var element = document.getElementById(elementId);
element.appendChild(p);
}
function generateShapeOutsideOnFloat(elementId, stylesheet, dimensions, floatValue, lineHeight) {
if (defined(dimensions.shapeCenterX) && defined(dimensions.shapeCenterY)) { // circle or ellipse
if (defined(dimensions.shapeRadius)) {
stylesheet.insertRule("#" + elementId + " { "
+ "-webkit-shape-outside: circle("
+ dimensions.shapeCenterX + "px, "
+ dimensions.shapeCenterY + "px, "
+ dimensions.shapeRadius + "px); "
+ "float: " + floatValue + "; }");
} else {
stylesheet.insertRule("#" + elementId + " { "
+ "-webkit-shape-outside: ellipse("
+ dimensions.shapeCenterX + "px, "
+ dimensions.shapeCenterY + "px, "
+ dimensions.shapeRadiusX + "px, "
+ dimensions.shapeRadiusY + "px); "
+ "float: " + floatValue + "; }");
else if (y > r.y + r.height - r.ry) {
// within the lower rounded corner part of the rectangle
var dx = ellipseXIntercept(y - (r.y + r.height - r.ry), r.rx, r.ry);
intervals.push( { y: y, left: r.x + r.rx - dx, right: r.x + r.width - r.rx + dx} );
}
} else {
stylesheet.insertRule("#" + elementId + " { "
+ "-webkit-shape-outside: rectangle("
+ dimensions.shapeX + "px, "
+ dimensions.shapeY + "px, "
+ dimensions.shapeWidth + "px, "
+ dimensions.shapeHeight + "px, "
+ dimensions.shapeRadiusX + "px, "
+ dimensions.shapeRadiusY + "px); "
+ "float: " + floatValue + "; }");
}
convertToRoundedRect(dimensions);
simulateShapeOutline(elementId, stylesheet, dimensions);
}
// Note that this does not attempt to simulate where the float content would be
// if the shape's X and Y are not 0.
function generateSimulatedShapeOutsideOnFloat(elementId, stylesheet, dimensions, floatValue, lineHeight) {
convertToRoundedRect(dimensions);
var simpleRectangle = dimensions.shapeRadiusX == 0 || dimensions.shapeRadiusY == 0;
var floatHeight = simpleRectangle ? dimensions.shapeHeight : lineHeight;
stylesheet.insertRule("#" + elementId + " { float: " + floatValue + " }");
stylesheet.insertRule("." + elementId + "-float { "
+ "height: " + floatHeight + "px; "
+ "float: " + floatValue + ";"
+ "clear: " + floatValue + "; }");
var element = document.getElementById(elementId);
var simulationHTML = "";
for (var y = 0; y < dimensions.shapeHeight; y+= floatHeight) {
var outset = simpleRectangle ? 0 : xOutset(dimensions, y, y + lineHeight);
var width = dimensions.shapeWidth - outset;
simulationHTML += '<div class="' + elementId + '-float" style="width:' + width + 'px"></div>\n';
}
element.insertAdjacentHTML('afterend', simulationHTML);
// For simulating, we ignore the x and y values, since we're not attempting
// to draw the float's content in the right place, we just want to simulate
// the shape's effect.
if (floatValue == "right")
dimensions.shapeX = -dimensions.shapeWidth;
else
dimensions.shapeX = 0;
dimensions.shapeY = 0;
simulateShapeOutline(elementId, stylesheet, dimensions);
else // within the rectangle's vertical edges
intervals.push( {y: y, left: r.x, right: r.x + r.width} );
}
return intervals;
}
function genLeftRightRoundedRectFloatShapeOutsideRefTest(args)
{
var leftRoundedRect = args.roundedRect;
var leftRoundedRectIntervals = scanConvertRoundedRectangleOutside(leftRoundedRect, args.containerHeight, args.lineHeight);
var leftFloatDivs = leftRoundedRectIntervals.map(function(interval) {
var width = SubPixelLayout.snapToLayoutUnit(interval.right);
var cls = "left-" + args.floatElementClassSuffix;
return '<div class="' + cls + '" style="width:' + width + 'px"></div>';
});
document.getElementById("left-" + args.insertElementIdSuffix).insertAdjacentHTML('afterend', leftFloatDivs.join("\n"));
var rightRoundedRect = Object.create(args.roundedRect);
rightRoundedRect.x = args.containerWidth - args.roundedRect.width;
var rightRoundedRectIntervals = scanConvertRoundedRectangleOutside(rightRoundedRect, args.containerHeight, args.lineHeight);
var rightFloatDivs = rightRoundedRectIntervals.map(function(interval) {
var width = args.containerWidth - SubPixelLayout.snapToLayoutUnit(interval.left);
var cls = "right-" + args.floatElementClassSuffix;
return '<div class="' + cls + '" style="width:' + width + 'px"></div>';
});
document.getElementById("right-" + args.insertElementIdSuffix).insertAdjacentHTML('afterend', rightFloatDivs.join("\n"));
}
<!DOCTYPE html>
<html>
<head>
<script src="../resources/subpixel-utils.js"></script>
<script src="../resources/rounded-rectangle.js"></script>
<script>
window.onload = function () {
var stylesheet = document.getElementById("stylesheet");
generateSimulatedShapeOutsideOnFloat(
"float-left", stylesheet.sheet,
{
'shapeX': 25, 'shapeY': 50,
'shapeWidth': 75, 'shapeHeight': 100,
'shapeRadiusX': 20, 'shapeRadiusY': 20
},
'left',
10
);
generateSimulatedShapeOutsideOnFloat(
"float-right", stylesheet.sheet,
{
'shapeCenterX': 25, 'shapeCenterY': 50,
'shapeRadiusX': 50, 'shapeRadiusY': 100
},
'right',
10
);
}
</script>
<style id="stylesheet">
<style>
.container {
font: 10px/1 Ahem, sans-serif;
width: 200px;
text-align: justify;
border: 1px solid black;
position: relative;
font: 20px/1 Ahem, sans-serif;
width: 500px;
height: 200px;
border: 1px solid black;
}
.rounded-rect {
width: 150px;
height: 100px;
border-radius: 40px;
border: 1px solid blue;
}
#left-rounded-rect-outline {
position: absolute;
top: 0px;
left: 0px;
}
#right-rounded-rect-outline {
position: absolute;
top: 0px;
left: 350px;
}
.left-rounded-rect-float-line {
float: left;
clear: left;
height: 20px;
}
.right-rounded-rect-float-line {
float: right;
clear: right;
height: 20px;
}
</style>
</head>
<body>
<h1><a href="https://bugs.webkit.org/show_bug.cgi?id=98676">Bug 112587</a> - [CSS Exclusions] [CSS Exclusions] shape outside segments not properly calculated for ellipses</h1>
<h2>The vertical black lines in the following box should wrap around the rounded rectangle on the left and the ellipse on the right</h2>
<h2><a href="https://bugs.webkit.org/show_bug.cgi?id=112587">Bug 112587</a> - [CSS Exclusions] shape outside segments not properly calculated for ellipses</h2>
<p>The black squares should trace the right side of the rounded rectangle's blue outline.</p>
<div class="container">
<div id="float-left">
</div>
X X X X X X X X X X
X X X X X X X X X X
X X X X X X X X X X
X X X X X X X X X X
X X X X X X X X X X
X X X X X X X X X X
X X X X X X X X X X
X X X X X X X X X X
<div id="float-right">
</div>.
X X X X X X X X X X
X X X X X X X X X X
X X X X X X X X X X
X X X X X X X X X X
X X X X X X X X X X
X X X X X X X X X X
X X X X X X X X X X
X X X X X X X X X X
X X X X X X X X X X
X X X X X X X X X X
X X X X X X X X X X
X X X X X X X
</div>
<div id="left-rounded-rect-outline" class="rounded-rect"></div>
<!-- generated left-rounded-rect-float-line divs will be inserted here -->
X<br/>
X<br/>
X<br/>
X<br/>
X
</div>
<p>The black squares should trace the left side of the rounded rectangle's blue outline.</p>
<div class="container" style="text-align: right">
<div id="right-rounded-rect-outline" class="rounded-rect"></div>
<!-- generated right-rounded-rect-float-line divs will be inserted here -->
X<br/>
X<br/>
X<br/>
X<br/>
X
</div>
</body>
</html>
<script src="../resources/rounded-rectangle.js"></script>
<script src="../resources/subpixel-utils.js"></script>
<script>
genLeftRightRoundedRectFloatShapeOutsideRefTest({
roundedRect: {x: 0, y: 0, width: 150, height: 100, rx: 40, ry: 40},
containerWidth: 500,
containerHeight: 200,
lineHeight: 20,
floatElementClassSuffix: "rounded-rect-float-line",
insertElementIdSuffix: "rounded-rect-outline"
});
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="../resources/subpixel-utils.js"></script>
<script src="../resources/rounded-rectangle.js"></script>
<script>
window.onload = function () {
var stylesheet = document.getElementById("stylesheet");
generateShapeOutsideOnFloat(
"float-left", stylesheet.sheet,
{
'shapeX': 25, 'shapeY': 50,
'shapeWidth': 75, 'shapeHeight': 100,
'shapeRadiusX': 20, 'shapeRadiusY': 20
},
'left',
10
);
generateShapeOutsideOnFloat(
"float-right", stylesheet.sheet,
{
'shapeCenterX': 25, 'shapeCenterY': 50,
'shapeRadiusX': 50, 'shapeRadiusY': 100
},
'right',
10
);
}
if (window.internals)
window.internals.settings.setCSSExclusionsEnabled(true);
</script>
<style id="stylesheet">
<style>
.container {
font: 10px/1 Ahem, sans-serif;
width: 200px;
text-align: justify;
font: 20px/1 Ahem, sans-serif;
width: 500px;
height: 200px;
border: 1px solid black;
}
.rounded-rect {
position: relative;
-webkit-shape-outside: rectangle(25px, 50px, 150px, 100px, 40px, 40px); /* x,y,width,height,rx,ry */
}
.rounded-rect-outline {
position: absolute;
top: 50px;
left: 25px;
width: 150px;
height: 100px;
border: 1px solid blue;
border-radius: 40px;
}
</style>
</head>
<body>
<h1><a href="https://bugs.webkit.org/show_bug.cgi?id=98676">Bug 112587</a> - [CSS Exclusions] [CSS Exclusions] shape outside segments not properly calculated for ellipses</h1>
<h2>The vertical black lines in the following box should wrap around the rounded rectangle on the left and the ellipse on the right</h2>
<h2><a href="https://bugs.webkit.org/show_bug.cgi?id=112587">Bug 112587</a> - [CSS Exclusions] shape outside segments not properly calculated for ellipses</h2>
<p>The black squares should trace the right side of the rounded rectangle's blue outline.</p>
<div class="container">
<div id="float-left">
<div style="float: left" class="rounded-rect">
<div class="rounded-rect-outline"></div>
</div>
X<br/>
X<br/>
X<br/>
X<br/>
X
</div>
<p>The black squares should trace the left side of the rounded rectangle's blue outline.</p>
<div class="container" style="text-align: right">
<div style="float: right" class="rounded-rect">
<div class="rounded-rect-outline"></div>
</div>
X X X X X X X X X X
X X X X X X X X X X
X X X X X X X X X X
X X X X X X X X X X
X X X X X X X X X X
X X X X X X X X X X
X X X X X X X X X X
X X X X X X X X X X
<div id="float-right">
</div>.
X X X X X X X X X X
X X X X X X X X X X
X X X X X X X X X X
X X X X X X X X X X
X X X X X X X X X X
X X X X X X X X X X
X X X X X X X X X X
X X X X X X X X X X
X X X X X X X X X X
X X X X X X X X X X
X X X X X X X X X X
X X X X X X X
</div>
X<br/>
X<br/>
X<br/>
X<br/>
X
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="../resources/subpixel-utils.js"></script>
<script src="../resources/rounded-rectangle.js"></script>
<script>
window.onload = function () {
var stylesheet = document.getElementById("stylesheet");
generateSimulatedShapeOutsideOnFloat(
"left-circle", stylesheet.sheet,
{