Diff
Modified: trunk/LayoutTests/ChangeLog (130556 => 130557)
--- trunk/LayoutTests/ChangeLog 2012-10-05 21:57:04 UTC (rev 130556)
+++ trunk/LayoutTests/ChangeLog 2012-10-05 22:01:04 UTC (rev 130557)
@@ -1,3 +1,42 @@
+2012-10-05 Bear Travis <[email protected]>
+
+ [CSS Exclusions] Add shape-inside tests for rounded rectangles
+ https://bugs.webkit.org/show_bug.cgi?id=96669
+
+ Reviewed by Levi Weintraub.
+
+ Adding multiple rounded rectangle tests. The more complex tests use float "sandbags"
+ to simulate the shape-inside area in the test expectations.
+ (See http://www.alistapart.com/articles/sandbags/)
+ In general, each line has its own pair of left and right floats (both lineHeight tall),
+ to position the text and appropriately limit its width. In the simple, 0 corner radius
+ cases, these floats can be merged because they all have the same width on the left and
+ right.
+
+ * fast/exclusions/resources/rounded-rectangle.js: Contains functionality for generating
+ a shape-inside, simulating one, and generating content that should roughly fill the
+ shape-inside.
+ (xFromEllipseCenter): The x distance from the center of an ellipse, based on its y
+ distance from center.
+ (xInset): The inset of a rounded rectangle from its bounding box.
+ (generateString): Generate a string that roughly fills a shape-inside's content area.
+ (simulateShape): Create floats to simulate a shape-inside area.
+ (simulateShapeOutline): Create an outline for the rounded rectangle shape-inside.
+ (generateSimulatedShapeElement): Simulate a shape-inside and appropriately fill it
+ with content.
+ (generateShapeElement): Create a shape-inside and fill it with content.
+ * fast/exclusions/shape-inside/shape-inside-rounded-rectangle-001-expected.html:
+ Renamed from LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle-expected.html.
+ * fast/exclusions/shape-inside/shape-inside-rounded-rectangle-001.html:
+ Renamed from LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle.html.
+ * fast/exclusions/shape-inside/shape-inside-rounded-rectangle-002-expected.html: Added.
+ * fast/exclusions/shape-inside/shape-inside-rounded-rectangle-002.html: Added.
+ * fast/exclusions/shape-inside/shape-inside-rounded-rectangle-003-expected.html: Added.
+ * fast/exclusions/shape-inside/shape-inside-rounded-rectangle-003.html: Added.
+ * fast/exclusions/shape-inside/shape-inside-rounded-rectangle-004-expected.html: Added.
+ * fast/exclusions/shape-inside/shape-inside-rounded-rectangle-004.html: Added.
+
+
2012-10-04 Eric Carlson <[email protected]>
Allow ports to override text track rendering style
Added: trunk/LayoutTests/fast/exclusions/resources/rounded-rectangle.js (0 => 130557)
--- trunk/LayoutTests/fast/exclusions/resources/rounded-rectangle.js (rev 0)
+++ trunk/LayoutTests/fast/exclusions/resources/rounded-rectangle.js 2012-10-05 22:01:04 UTC (rev 130557)
@@ -0,0 +1,111 @@
+function xFromEllipseCenter(yFromEllipseCenter, radiusX, radiusY) {
+ return radiusX * Math.sqrt(1 - Math.pow(yFromEllipseCenter / radiusY, 2));
+}
+
+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 generateString(dimensions, lineHeight) {
+ var resultLength = 0;
+ if (dimensions.shapeRadiusX == 0 || dimensions.shapeRadiusY == 0)
+ resultLength = dimensions.shapeWidth * dimensions.shapeHeight / (lineHeight * lineHeight);
+ else {
+ for (var lineTop = 0; lineTop < dimensions.shapeHeight; lineTop += lineHeight) {
+ var width = dimensions.shapeWidth - 2 * xInset(dimensions, lineTop, lineTop + lineHeight);
+ resultLength += width / lineHeight;
+ }
+ }
+ 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 = dimensions.shapeX + inset + "px";
+ element.appendChild(paddingLeft);
+
+ var paddingRight = document.createElement("div");
+ paddingRight.setAttribute("class", "float right");
+ paddingRight.style.width = Math.floor((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);
+}
Copied: trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle-001-expected.html (from rev 130556, trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle-expected.html) (0 => 130557)
--- trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle-001-expected.html (rev 0)
+++ trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle-001-expected.html 2012-10-05 22:01:04 UTC (rev 130557)
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+ #shape-inside {
+ font: 100px/1 Ahem, sans-serif;
+ white-space: pre;
+ color: green;
+ width: 300px;
+ height: 300px;
+ }
+</style>
+</head>
+<body>
+ Requires Ahem font. Tests that inline content avoids the border radius of a rounded rectangle.
+ Should display five green boxes in the shape of a plus.
+ <div id="shape-inside"> X <br/>XXX<br/> X </div>
+</body>
+</html>
Copied: trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle-001.html (from rev 130556, trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle.html) (0 => 130557)
--- trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle-001.html (rev 0)
+++ trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle-001.html 2012-10-05 22:01:04 UTC (rev 130557)
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script>
+ if (window.internals)
+ window.internals.settings.setCSSExclusionsEnabled(true);
+</script>
+<style>
+ #shape-inside {
+ font: 100px/1 Ahem, sans-serif;
+ color: green;
+ word-wrap: break-word;
+ width: 300px;
+ height: 300px;
+ -webkit-shape-inside: rectangle(0, 0, 300px, 300px, 100px, 100px);
+ }
+</style>
+</head>
+<body>
+ Requires Ahem font. Tests that inline content avoids the border radius of a rounded rectangle.
+ Should display five green boxes in the shape of a plus.
+ <div id="shape-inside">XXXXX</div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle-002-expected.html (0 => 130557)
--- trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle-002-expected.html (rev 0)
+++ trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle-002-expected.html 2012-10-05 22:01:04 UTC (rev 130557)
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src=""
+<script>
+ function createSimulatedShapeElement() {
+ var stylesheet = document.getElementById("stylesheet");
+ var dimensions = { width: 200, height: 300,
+ shapeX: 25, shapeY: 45,
+ shapeWidth: 100, shapeHeight: 200,
+ shapeRadiusX: 0, shapeRadiusY: 55 };
+ generateSimulatedShapeElement("shape-inside1", stylesheet.sheet, dimensions, 9);
+ dimensions.shapeRadiusX = 55;
+ dimensions.shapeRadiusY = 0;
+ generateSimulatedShapeElement("shape-inside2", stylesheet.sheet, dimensions, 9);
+ }
+</script>
+<style id="stylesheet">
+ body { margin: 0; }
+</style>
+</head>
+<body _onload_="createSimulatedShapeElement()">
+<div id="shape-inside1" style="display:inline-block"></div>
+<div id="shape-inside2" style="display:inline-block"></div>
+<div>
+ This test requires the Ahem font. It creates two rectangular shape-insides with one of
+ corner radius X or corner radius Y equal to zero. The content should fill and slightly
+ overflow these two rectangular areas with alternating black and white boxes.
+</div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle-002.html (0 => 130557)
--- trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle-002.html (rev 0)
+++ trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle-002.html 2012-10-05 22:01:04 UTC (rev 130557)
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src=""
+<script>
+ if (window.internals)
+ window.internals.settings.setCSSExclusionsEnabled(true);
+
+ function createShapeElement() {
+ var stylesheet = document.getElementById("stylesheet");
+ var dimensions = { width: 200, height: 300,
+ shapeX: 25, shapeY: 45,
+ shapeWidth: 100, shapeHeight: 200,
+ shapeRadiusX: 55, shapeRadiusY: 0 };
+ generateShapeElement("shape-inside1", stylesheet.sheet, dimensions, 9);
+ dimensions.shapeRadiusX = 55;
+ dimensions.shapeRadiusY = 0;
+ generateShapeElement("shape-inside2", stylesheet.sheet, dimensions, 9);
+ }
+</script>
+<style id="stylesheet">
+ body { margin: 0; }
+</style>
+</head>
+<body _onload_="createShapeElement()">
+<div id="shape-inside1" style="display:inline-block"></div>
+<div id="shape-inside2" style="display:inline-block"></div>
+<div>
+ This test requires the Ahem font. It creates two rectangular shape-insides with one of
+ corner radius X or corner radius Y equal to zero. The content should fill and slightly
+ overflow these two rectangular areas with alternating black and white boxes.
+</div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle-003-expected.html (0 => 130557)
--- trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle-003-expected.html (rev 0)
+++ trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle-003-expected.html 2012-10-05 22:01:04 UTC (rev 130557)
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src=""
+<script>
+ function createSimulatedShapeElement() {
+ var stylesheet = document.getElementById("stylesheet");
+ var dimensions = { width: 400, height: 600,
+ shapeX: 45, shapeY: 25,
+ shapeWidth: 300, shapeHeight: 500,
+ shapeRadiusX: 75, shapeRadiusY: 55 };
+ generateSimulatedShapeElement("shape-inside", stylesheet.sheet, dimensions, 22);
+ }
+</script>
+<style id="stylesheet">
+ body { margin: 0; }
+</style>
+</head>
+<body _onload_="createSimulatedShapeElement()">
+<div id="shape-inside"></div>
+<div>
+ This test requires the Ahem font. It creates a rounded rectangle shape-inside and fills it
+ with alternating black and white squares as inline content. The entire shape-inside should
+ be filled, with a small amount of overflow.
+</div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle-003.html (0 => 130557)
--- trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle-003.html (rev 0)
+++ trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle-003.html 2012-10-05 22:01:04 UTC (rev 130557)
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src=""
+<script>
+ if (window.internals)
+ window.internals.settings.setCSSExclusionsEnabled(true);
+
+ function createShapeElement() {
+ var stylesheet = document.getElementById("stylesheet");
+ var dimensions = { width: 400, height: 600,
+ shapeX: 45, shapeY: 25,
+ shapeWidth: 300, shapeHeight: 500,
+ shapeRadiusX: 75, shapeRadiusY: 55 };
+ generateShapeElement("shape-inside", stylesheet.sheet, dimensions, 22);
+ }
+</script>
+<style id="stylesheet">
+ body { margin: 0; }
+</style>
+</head>
+<body _onload_="createShapeElement()">
+<div id="shape-inside"></div>
+<div>
+ This test requires the Ahem font. It creates a rounded rectangle shape-inside and fills it
+ with alternating black and white squares as inline content. The entire shape-inside should
+ be filled, with a small amount of overflow.
+</div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle-004-expected.html (0 => 130557)
--- trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle-004-expected.html (rev 0)
+++ trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle-004-expected.html 2012-10-05 22:01:04 UTC (rev 130557)
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src=""
+<script>
+ function createSimulatedShapeElement() {
+ var stylesheet = document.getElementById("stylesheet");
+ var dimensions = { width: 700, height: 500,
+ shapeX: 25, shapeY: 45,
+ shapeWidth: 600, shapeHeight: 300,
+ shapeRadiusX: 100, shapeRadiusY: 150 };
+ generateSimulatedShapeElement("shape-inside", stylesheet.sheet, dimensions, 90);
+ }
+</script>
+<style id="stylesheet">
+ body { margin: 0; }
+</style>
+</head>
+<body _onload_="createSimulatedShapeElement()">
+<div id="shape-inside"></div>
+<div>
+ This test requires the Ahem font. It creates a rounded rectangle shape-inside and fills it
+ with alternating black and white squares as inline content. The middle line overlaps the top
+ and bottom rounded corner area. The entire shape-inside should be filled, with a small amount
+ of overflow.
+</div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle-004.html (0 => 130557)
--- trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle-004.html (rev 0)
+++ trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle-004.html 2012-10-05 22:01:04 UTC (rev 130557)
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src=""
+<script>
+ if (window.internals)
+ window.internals.settings.setCSSExclusionsEnabled(true);
+
+ function createShapeElement() {
+ var stylesheet = document.getElementById("stylesheet");
+ var dimensions = { width: 700, height: 500,
+ shapeX: 25, shapeY: 45,
+ shapeWidth: 600, shapeHeight: 300,
+ shapeRadiusX: 100, shapeRadiusY: 150 };
+ generateShapeElement("shape-inside", stylesheet.sheet, dimensions, 90);
+ }
+</script>
+<style id="stylesheet">
+ body { margin: 0; }
+</style>
+</head>
+<body _onload_="createShapeElement()">
+<div id="shape-inside"></div>
+<div>
+ This test requires the Ahem font. It creates a rounded rectangle shape-inside and fills it
+ with alternating black and white squares as inline content. The middle line overlaps the top
+ and bottom rounded corner area. The entire shape-inside should be filled, with a small amount
+ of overflow.
+</div>
+</body>
+</html>
Deleted: trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle-expected.html (130556 => 130557)
--- trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle-expected.html 2012-10-05 21:57:04 UTC (rev 130556)
+++ trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle-expected.html 2012-10-05 22:01:04 UTC (rev 130557)
@@ -1,19 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<style>
- #shape-inside {
- font: 100px/1 Ahem, sans-serif;
- white-space: pre;
- color: green;
- width: 300px;
- height: 300px;
- }
-</style>
-</head>
-<body>
- Requires Ahem font. Tests that inline content avoids the border radius of a rounded rectangle.
- Should display five green boxes in the shape of a plus.
- <div id="shape-inside"> X <br/>XXX<br/> X </div>
-</body>
-</html>
Deleted: trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle.html (130556 => 130557)
--- trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle.html 2012-10-05 21:57:04 UTC (rev 130556)
+++ trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-rounded-rectangle.html 2012-10-05 22:01:04 UTC (rev 130557)
@@ -1,24 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<script>
- if (window.internals)
- window.internals.settings.setCSSExclusionsEnabled(true);
-</script>
-<style>
- #shape-inside {
- font: 100px/1 Ahem, sans-serif;
- color: green;
- word-wrap: break-word;
- width: 300px;
- height: 300px;
- -webkit-shape-inside: rectangle(0, 0, 300px, 300px, 100px, 100px);
- }
-</style>
-</head>
-<body>
- Requires Ahem font. Tests that inline content avoids the border radius of a rounded rectangle.
- Should display five green boxes in the shape of a plus.
- <div id="shape-inside">XXXXX</div>
-</body>
-</html>
