[CSS Shapes] New positioning model: support for rounded rectangle shape-outside

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

Patch by Bem Jones-Bey <bjonesbe@adobe.com> on 2013-07-23
Reviewed by Dean Jackson.

Update the shape-outside rounded rectangle tests and import them from
the CSS WG's repository. They have been moved to the CSS WG repository
so they can be part of the spec test suite for CSS Shapes.

* TestExpectations: Remove skipping for tests that have been replaced.
* csswg/submitted/shapes/shape-outside/resources/rounded-rectangle.js: Added.
(ellipseXIntercept):
(scanConvertRoundedRectangleOutside):
(genLeftRightRoundedRectFloatShapeOutsideRefTest):
(genLeftRoundedRectFloatShapeOutsideRefTest):
(genRightRoundedRectFloatShapeOutsideRefTest):
* csswg/submitted/shapes/shape-outside/resources/subpixel-utils.js: Added.
(SubPixelLayout):
(SubPixelLayout.):
* csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-001-expected.html: Renamed from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-001-expected.html.
* csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-001.html: Renamed from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-001.html.
* csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-002-expected.html: Renamed from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-002-expected.html.
* csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-002.html: Renamed from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-002.html.
* csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-003-expected.html: Renamed from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-003-expected.html.
* csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-003.html: Renamed from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-003.html.
* csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-004-expected.html: Added.
* csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-004.html: Added.
* csswg/submitted/shapes/shape-outside/w3c-import.log:

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@153063 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 9ce069c9
2013-07-23 Bem Jones-Bey <bjonesbe@adobe.com>
[CSS Shapes] New positioning model: support for rounded rectangle shape-outside
https://bugs.webkit.org/show_bug.cgi?id=118081
Reviewed by Dean Jackson.
Update the shape-outside rounded rectangle tests and import them from
the CSS WG's repository. They have been moved to the CSS WG repository
so they can be part of the spec test suite for CSS Shapes.
* TestExpectations: Remove skipping for tests that have been replaced.
* csswg/submitted/shapes/shape-outside/resources/rounded-rectangle.js: Added.
(ellipseXIntercept):
(scanConvertRoundedRectangleOutside):
(genLeftRightRoundedRectFloatShapeOutsideRefTest):
(genLeftRoundedRectFloatShapeOutsideRefTest):
(genRightRoundedRectFloatShapeOutsideRefTest):
* csswg/submitted/shapes/shape-outside/resources/subpixel-utils.js: Added.
(SubPixelLayout):
(SubPixelLayout.):
* csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-001-expected.html: Renamed from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-001-expected.html.
* csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-001.html: Renamed from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-001.html.
* csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-002-expected.html: Renamed from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-002-expected.html.
* csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-002.html: Renamed from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-002.html.
* csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-003-expected.html: Renamed from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-003-expected.html.
* csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-003.html: Renamed from LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-003.html.
* csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-004-expected.html: Added.
* csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-004.html: Added.
* csswg/submitted/shapes/shape-outside/w3c-import.log:
2013-07-23 Zalan Bujtas <zalan@apple.com>
REGRESSION(r152313): Links in certain twitter postings don't warp correctly on page
......@@ -37,11 +37,6 @@ webkit.org/b/118086 fast/shapes/shape-outside-floats/shape-outside-floats-simple
webkit.org/b/118083 fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-inset-rectangle.html [ Skip ]
webkit.org/b/118083 fast/shapes/shape-outside-floats/shape-outside-floats-simple-inset-rectangle.html [ Skip ]
webkit.org/b/118081 fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-001.html [ Skip ]
webkit.org/b/118081 fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-002.html [ Skip ]
webkit.org/b/118081 fast/shapes/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-003.html [ Skip ]
webkit.org/b/118081 fast/shapes/shape-outside-floats/shape-outside-floats-rounded-rectangle-large-radius.html [ Skip ]
webkit.org/b/118087 fast/shapes/shape-outside-floats/shape-outside-floats-stacked.html [ Skip ]
webkit.org/b/118087 fast/shapes/shape-outside-floats/shape-outside-floats-simple-rectangle-horizontal-multiple.html [ Skip ]
......
function ellipseXIntercept(yi, rx, ry)
{
return rx * Math.sqrt(1 - (yi * yi) / (ry * ry));
}
function scanConvertRoundedRectangleOutside(r, height, lineHeight)
{
var intervals = [];
for (var y = 0; y < height; y += lineHeight) {
if (y + lineHeight <= r.y || y >= r.y + r.height)
continue;
if (y + lineHeight < r.y + r.ry) {
// within the upper rounded corner 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} );
}
else if (y > r.y + r.height - r.ry) {
// within the lower rounded corner 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 // within the rectangle's vertical edges
intervals.push( {y: y, left: r.x, right: r.x + r.width} );
}
return intervals;
}
function genLeftRightRoundedRectFloatShapeOutsideRefTest(args)
{
genLeftRoundedRectFloatShapeOutsideRefTest(args);
genRightRoundedRectFloatShapeOutsideRefTest(args);
}
function genLeftRoundedRectFloatShapeOutsideRefTest(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"));
}
function genRightRoundedRectFloatShapeOutsideRefTest(args)
{
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"));
}
var SubPixelLayout = (function() {
var enabled = undefined;
function isEnabled()
{
if (enabled === undefined) {
var elem = document.createElement('div');
elem.style.setProperty('width', '4.5px');
document.body.appendChild(elem);
var bounds = elem.getBoundingClientRect();
enabled = (bounds.width != Math.floor(bounds.width));
document.body.removeChild(elem);
}
return enabled;
}
return {
isEnabled: isEnabled,
snapToLayoutUnit: function(f) {
return isEnabled() ? Math.floor(f * 64) / 64 : Math.floor(f); // as in LayoutUnit(f).toFloat()
},
ceilSnapToLayoutUnit: function(f) {
return isEnabled() ? Math.ceil(f * 64) / 64 : Math.ceil(f); // see ceiledLayoutUnit(), LayoutUnit.h
}
}
}());
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title>shape-outside-floats-rounded-rectangle-001-reference.html</title>
<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
<meta name="flags" content="ahem dom">
<style>
.container {
position: relative;
font: 20px/1 Ahem, sans-serif;
line-height: 20px;
width: 500px;
height: 200px;
border: 1px solid black;
......@@ -15,7 +17,6 @@
height: 160px;
border-radius: 60px;
border: 1px solid blue;
margin: -1px; /* shape-outside layout is unaffected by the border */
}
#left-rounded-rect-outline {
......@@ -27,7 +28,7 @@
#right-rounded-rect-outline {
position: absolute;
top: 20px;
left: 180px;
right: 0px;
}
.left-rounded-rect-float-line {
......@@ -43,7 +44,7 @@
}
</style>
<h2><a href="https://bugs.webkit.org/show_bug.cgi?id=100299">Bug 100299</a> - [CSS Exclusions] shape-outside on floats for rounded rectangle shapes</h2>
<body>
<p>The black squares should trace the right side of the rounded rectangle's blue outline.</p>
<div class="container">
X<br/>
......@@ -77,11 +78,13 @@ X
</div>
</body>
<script src="../resources/rounded-rectangle.js"></script>
<script src="../resources/subpixel-utils.js"></script>
<script src="resources/rounded-rectangle.js"></script>
<script src="resources/subpixel-utils.js"></script>
<script>
// Note that the border must be added into the width to account for its affect
// on float positioning.
genLeftRightRoundedRectFloatShapeOutsideRefTest({
roundedRect: {x: 0, y: 20, width: 320, height: 160, rx: 60, ry: 60},
roundedRect: {x: 0, y: 20, width: 321, height: 160, rx: 60, ry: 60},
containerWidth: 500,
containerHeight: 200,
lineHeight: 20,
......@@ -89,7 +92,3 @@ genLeftRightRoundedRectFloatShapeOutsideRefTest({
insertElementIdSuffix: "rounded-rect-outline"
});
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<title>shape-outside-floats-rounded-rectangle-001.html</title>
<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
<link rel="help" href="http://dev.w3.org/csswg/css-shapes-1/#shape-outside-property">
<link rel="match" href="shape-outside-floats-rounded-rectangle-001-reference.html">
<meta name="flags" content="ahem">
<script>
if (window.internals)
window.internals.settings.setCSSShapesEnabled(true);
......@@ -8,6 +11,7 @@
<style>
.container {
font: 20px/1 Ahem, sans-serif;
line-height: 20px;
width: 500px;
height: 200px;
border: 1px solid black;
......@@ -22,7 +26,7 @@
}
</style>
<h2><a href="https://bugs.webkit.org/show_bug.cgi?id=100299">Bug 100299</a> - [CSS Exclusions] shape-outside on floats for rounded rectangle shapes</h2>
<body>
<p>The black squares should trace the right side of the rounded rectangle's blue outline.</p>
<div class="container">
X<br/>
......@@ -53,6 +57,3 @@ X<br/>
X
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>shape-outside-floats-rounded-rectangle-002-reference.html</title>
<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
<meta name="flags" content="ahem dom">
<style>
.container {
position: relative;
font: 20px/1 Ahem, sans-serif;
line-height: 20px;
width: 500px;
height: 200px;
border: 1px solid black;
......@@ -15,7 +17,6 @@
height: 160px;
border-radius: 80px;
border: 1px solid blue;
margin: -1px; /* shape-outside layout is unaffected by the border */
}
#left-rounded-rect-circle-outline {
......@@ -27,7 +28,7 @@
#right-rounded-rect-circle-outline {
position: absolute;
top: 20px;
left: 340px;
right: 0px;
}
.left-rounded-rect-circle-float-line {
......@@ -43,7 +44,7 @@
}
</style>
<h2><a href="https://bugs.webkit.org/show_bug.cgi?id=100299">Bug 100299</a> - [CSS Exclusions] shape-outside on floats for rounded rectangle shapes</h2>
<body>
<p>The black squares should trace the right side of the circle's blue outline.</p>
<div class="container">
X<br/>
......@@ -77,11 +78,13 @@ X
</div>
</body>
<script src="../resources/rounded-rectangle.js"></script>
<script src="../resources/subpixel-utils.js"></script>
<script src="resources/rounded-rectangle.js"></script>
<script src="resources/subpixel-utils.js"></script>
<script>
// Note that the border must be added into the width to account for its affect
// on float positioning.
genLeftRightRoundedRectFloatShapeOutsideRefTest({
roundedRect: {x: 0, y: 20, width: 160, height: 160, rx: 80, ry: 80},
roundedRect: {x: 0, y: 20, width: 161, height: 160, rx: 80, ry: 80},
containerWidth: 500,
containerHeight: 200,
lineHeight: 20,
......@@ -89,7 +92,3 @@ genLeftRightRoundedRectFloatShapeOutsideRefTest({
insertElementIdSuffix: "rounded-rect-circle-outline"
});
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<title>shape-outside-floats-rounded-rectangle-002.html</title>
<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
<link rel="help" href="http://dev.w3.org/csswg/css-shapes-1/#shape-outside-property">
<link rel="match" href="shape-outside-floats-rounded-rectangle-002-reference.html">
<meta name="flags" content="ahem">
<script>
if (window.internals)
window.internals.settings.setCSSShapesEnabled(true);
......@@ -8,6 +11,7 @@
<style>
.container {
font: 20px/1 Ahem, sans-serif;
line-height: 20px;
width: 500px;
height: 200px;
border: 1px solid black;
......@@ -22,7 +26,7 @@
}
</style>
<h2><a href="https://bugs.webkit.org/show_bug.cgi?id=100299">Bug 100299</a> - [CSS Exclusions] shape-outside on floats for rounded rectangle shapes</h2>
<body>
<p>The black squares should trace the right side of the circle's blue outline.</p>
<div class="container">
X<br/>
......@@ -53,4 +57,3 @@ X<br/>
X
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>shape-outside-floats-rounded-rectangle-003-reference.html</title>
<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
<meta name="flags" content="ahem dom">
<style>
.container {
position: relative;
font: 20px/1 Ahem, sans-serif;
line-height: 20px;
width: 500px;
height: 200px;
border: 1px solid black;
......@@ -15,7 +17,6 @@
height: 160px;
border-radius: 160px / 80px;
border: 1px solid blue;
margin: -1px; /* shape-outside layout is unaffected by the border */
}
#left-rounded-rect-ellipse-outline {
......@@ -27,7 +28,7 @@
#right-rounded-rect-ellipse-outline {
position: absolute;
top: 20px;
left: 180px;
right: 0px;
}
.left-rounded-rect-ellipse-float-line {
......@@ -43,7 +44,7 @@
}
</style>
<h2><a href="https://bugs.webkit.org/show_bug.cgi?id=100299">Bug 100299</a> - [CSS Exclusions] shape-outside on floats for rounded rectangle shapes</h2>
<body>
<p>The black squares should trace the right side of the ellipse's blue outline.</p>
<div class="container">
X<br/>
......@@ -77,11 +78,13 @@ X
</div>
</body>
<script src="../resources/rounded-rectangle.js"></script>
<script src="../resources/subpixel-utils.js"></script>
<script src="resources/rounded-rectangle.js"></script>
<script src="resources/subpixel-utils.js"></script>
<script>
// Note that the border must be added into the width to account for its affect
// on float positioning.
genLeftRightRoundedRectFloatShapeOutsideRefTest({
roundedRect: {x: 0, y: 20, width: 320, height: 160, rx: 160, ry: 80},
roundedRect: {x: 0, y: 20, width: 321, height: 160, rx: 160, ry: 80},
containerWidth: 500,
containerHeight: 200,
lineHeight: 20,
......@@ -89,7 +92,3 @@ genLeftRightRoundedRectFloatShapeOutsideRefTest({
insertElementIdSuffix: "rounded-rect-ellipse-outline"
});
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<title>shape-outside-floats-rounded-rectangle-003.html</title>
<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
<link rel="help" href="http://dev.w3.org/csswg/css-shapes-1/#shape-outside-property">
<link rel="match" href="shape-outside-floats-rounded-rectangle-003-reference.html">
<meta name="flags" content="ahem">
<script>
if (window.internals)
window.internals.settings.setCSSShapesEnabled(true);
......@@ -8,6 +11,7 @@
<style>
.container {
font: 20px/1 Ahem, sans-serif;
line-height: 20px;
width: 500px;
height: 200px;
border: 1px solid black;
......@@ -22,7 +26,7 @@
}
</style>
<h2><a href="https://bugs.webkit.org/show_bug.cgi?id=100299">Bug 100299</a> - [CSS Exclusions] shape-outside on floats for rounded rectangle shapes</h2>
<body>
<p>The black squares should trace the right side of the ellipse's blue outline.</p>
<div class="container">
X<br/>
......@@ -53,4 +57,3 @@ X<br/>
X
</div>
</body>
</html>
<!DOCTYPE html>
<title>shape-outside-floats-rounded-rectangle-004-reference.html</title>
<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
<meta name="flags" content="ahem dom">
<style>
.container {
position: relative;
font: 10px/1 Ahem, sans-serif;
width: 80px;
height: 40px;
border: 1px solid black;
margin: 5px;
}
.rounded-rect {
position: absolute;
top: 0px;
left: 0px;
width: 40px;
height: 40px;
border: 1px solid blue;
border-radius: 50%;
}
.left-rounded-rect-float-line {
float: left;
clear: left;
height: 10px;
}
</style>
<body>
<div class="container">
<div id="left-fixed-units" class="rounded-rect"></div>
X<br/>
X<br/>
X<br/>
X
</div>
<div class="container">
<div id="left-relative-units" class="rounded-rect"></div>
X<br/>
X<br/>
X<br/>
X
</div>
<div class="container">
<div id="left-different-units" class="rounded-rect"></div>
X<br/>
X<br/>
X<br/>
X
</div>
<div class="container">
<div id="left-edge-case" class="rounded-rect"></div>
X<br/>
X<br/>
X<br/>
X
</div>
<script src="resources/rounded-rectangle.js"></script>
<script src="resources/subpixel-utils.js"></script>
<script>
// Note that the border must be added into the width to account for its
// affect on float positioning.
genLeftRoundedRectFloatShapeOutsideRefTest({
roundedRect: {x: 0, y: 0, width: 41, height: 40, rx: 20, ry: 20},
containerWidth: 80,
containerHeight: 40,
lineHeight: 10,
floatElementClassSuffix: "rounded-rect-float-line",
insertElementIdSuffix: "fixed-units"
});
genLeftRoundedRectFloatShapeOutsideRefTest({
roundedRect: {x: 0, y: 0, width: 41, height: 40, rx: 20, ry: 20},
containerWidth: 80,
containerHeight: 40,
lineHeight: 10,
floatElementClassSuffix: "rounded-rect-float-line",
insertElementIdSuffix: "relative-units"
});
genLeftRoundedRectFloatShapeOutsideRefTest({
roundedRect: {x: 0, y: 0, width: 41, height: 40, rx: 20, ry: 20},
containerWidth: 80,
containerHeight: 40,
lineHeight: 10,
floatElementClassSuffix: "rounded-rect-float-line",
insertElementIdSuffix: "different-units"
});
genLeftRoundedRectFloatShapeOutsideRefTest({
roundedRect: {x: 0, y: 0, width: 41, height: 40, rx: 20, ry: 20},
containerWidth: 80,
containerHeight: 40,
lineHeight: 10,
floatElementClassSuffix: "rounded-rect-float-line",
insertElementIdSuffix: "edge-case"
});
</script>
</body>
<!DOCTYPE html>
<title>CSS Test: rounded rectangle shape-outside on floats with clamped radii values</title>
<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
<link rel="help" href="http://dev.w3.org/csswg/css-shapes-1/#shape-outside-property">
<link rel="match" href="shape-outside-floats-rounded-rectangle-004-reference.html">
<meta name="flags" content="ahem">
<script>
// This is required to run the tests in WebKit's test infrastructure.
if (window.internals)
window.internals.settings.setCSSShapesEnabled(true);
</script>
<style>
.container {
font: 10px/1 Ahem, sans-serif;
width: 80px;
height: 40px;
border: 1px solid black;
margin: 5px;
}
.float {
float: left;
width: 40px;
height: 40px;
border: 1px solid blue;
border-radius: 50%;
}
.fixed-units {
-webkit-shape-outside: rectangle(0px, 0px, 40px, 40px, 40px, 40px);
}
.different-units {
-webkit-shape-outside: rectangle(0px, 0px, 40px, 40px, 100%, 100%);
}
.relative-units {
-webkit-shape-outside: rectangle(0px, 0px, 100%, 100%, 700em, 700em);
}
.edge-case {
-webkit-shape-outside: rectangle(0px, 0px, 100%, 100%, 50%, 50%);
}
</style>
<body>
<div class="container">
<div class="float fixed-units"></div>
X<br/>
X<br/>
X<br/>
X
</div>
<div class="container">
<div class="float relative-units"></div>
X<br/>
X<br/>
X<br/>
X
</div>
<div class="container">
<div class="float different-units"></div>
X<br/>
X<br/>
X<br/>
X
</div>
<div class="container">
<div class="float edge-case"></div>
X<br/>