Log Message
[CSS Exclusions] Implement text alignment for shape-inside https://bugs.webkit.org/show_bug.cgi?id=101086
Reviewed by Alexandru Chiculita. Adding tests to make sure that shape-inside layout correctly supports the different values of text-align. * fast/exclusions/resources/multi-segment-polygon.js: (createOrInsert): * fast/exclusions/shape-inside/shape-inside-text-align-expected.html: Added. * fast/exclusions/shape-inside/shape-inside-text-align.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (151649 => 151650)
--- trunk/LayoutTests/ChangeLog 2013-06-17 18:17:47 UTC (rev 151649)
+++ trunk/LayoutTests/ChangeLog 2013-06-17 18:53:56 UTC (rev 151650)
@@ -1,3 +1,18 @@
+2013-06-17 Bear Travis <[email protected]>
+
+ [CSS Exclusions] Implement text alignment for shape-inside
+ https://bugs.webkit.org/show_bug.cgi?id=101086
+
+ Reviewed by Alexandru Chiculita.
+
+ Adding tests to make sure that shape-inside layout correctly supports
+ the different values of text-align.
+
+ * fast/exclusions/resources/multi-segment-polygon.js:
+ (createOrInsert):
+ * fast/exclusions/shape-inside/shape-inside-text-align-expected.html: Added.
+ * fast/exclusions/shape-inside/shape-inside-text-align.html: Added.
+
2013-06-17 Igor Oliveira <[email protected]>
[CSS Regions] ::before and ::after pseudo-elements are not displayed for regions
Modified: trunk/LayoutTests/fast/exclusions/resources/multi-segment-polygon.js (151649 => 151650)
--- trunk/LayoutTests/fast/exclusions/resources/multi-segment-polygon.js 2013-06-17 18:17:47 UTC (rev 151649)
+++ trunk/LayoutTests/fast/exclusions/resources/multi-segment-polygon.js 2013-06-17 18:53:56 UTC (rev 151650)
@@ -34,7 +34,7 @@
var div = document.createElement('div');
if (document.body.childNodes.length)
- docuemnt.body.insertBefore(div, document.body.childNodes[0]);
+ document.body.insertBefore(div, document.body.childNodes[0]);
else
document.body.appendChild(div);
return div;
Added: trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-text-align-expected.html (0 => 151650)
--- trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-text-align-expected.html (rev 0)
+++ trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-text-align-expected.html 2013-06-17 18:53:56 UTC (rev 151650)
@@ -0,0 +1,55 @@
+<DOCTYPE html>
+<html>
+<head>
+<script src=''></script>
+<style>
+.left { text-align: left; }
+.right { text-align: right; }
+.center { text-align: center; }
+.justify { text-align: justify; }
+.container {
+ width: 4em;
+ height: 1em;
+ font: 50px/1 Ahem, sans-serif;
+ color: green;
+}
+.container.multi { width: 10em; }
+.float {
+ float: left;
+ width: 4em;
+ height: 1em;
+ overflow: hidden;
+}
+.float:first-child { margin-right: 2em; }
+.float:before { content: 'x x'; }
+.justify .float:before { content: 'x x x';}
+</style>
+</head>
+<body>
+<h1><a href=''>Bug 101086</a>: Implement text alignment for shape-inside</h1>
+<p>This test checks that different values of the text-align property work correctly for shape-inside.</p>
+<p>Below you should see 2 green squares in a line 4 squares wide, with different values of text-align. This tests that single-segment polygons work correctly.</p>
+<div class='left container single'><div class='float'></div></div>
+<div class='right container single'><div class='float'></div></div>
+<div class='center container single'><div class='float'></div></div>
+<div class='justify container single'><div class='float'></div></div>
+
+<p>You should see the same results when using block elements.</p>
+<div class='left container single'><div class='float'></div></div>
+<div class='right container single'><div class='float'></div></div>
+<div class='center container single'><div class='float'></div></div>
+<div class='justify container single'><div class='float'></div></div>
+
+<p>Below you should see 2 green squares in 2 lines 4 squares wide, separated by a 2 square space. The lines have different values of text-align. This tests that multi-segment polygons work correctly.</p>
+<div class='left container multi'><div class='float'></div><div class='float'></div></div>
+<div class='right container multi'><div class='float'></div><div class='float'></div></div>
+<div class='center container multi'><div class='float'></div><div class='float'></div></div>
+<div class='justify container multi'><div class='float'></div><div class='float'></div></div>
+
+<p>You should see the same results when using block elements.</p>
+<div class='left container multi'><div class='float'></div><div class='float'></div></div>
+<div class='right container multi'><div class='float'></div><div class='float'></div></div>
+<div class='center container multi'><div class='float'></div><div class='float'></div></div>
+<div class='justify container multi'><div class='float'></div><div class='float'></div></div>
+</body>
+</html>
\ No newline at end of file
Added: trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-text-align.html (0 => 151650)
--- trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-text-align.html (rev 0)
+++ trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-text-align.html 2013-06-17 18:53:56 UTC (rev 151650)
@@ -0,0 +1,74 @@
+<DOCTYPE html>
+<html>
+<head>
+<script src=''></script>
+<script>
+window._onload_ = function() {
+ var fontSize = 50, width = 4 * fontSize, height = fontSize;
+ var content = 'x x', points = [0, height, 0, 0, width, 0, width, height];
+
+ generatePolygon(width, height, fontSize, points, content, 'left-single');
+ generatePolygon(width, height, fontSize, points, content, 'right-single');
+ generatePolygon(width, height, fontSize, points, content, 'center-single');
+ generatePolygon(width, height, fontSize, points, 'x x x', 'justify-single');
+
+ content = '<div>x x</div>';
+
+ generatePolygon(width, height, fontSize, points, content, 'left-single-block');
+ generatePolygon(width, height, fontSize, points, content, 'right-single-block');
+ generatePolygon(width, height, fontSize, points, content, 'center-single-block');
+ generatePolygon(width, height, fontSize, points, '<div>x x x</div>', 'justify-single-block');
+
+ width = 10 * fontSize;
+ content = 'x x x x';
+ points = [0, height, 0, 0, 4 * fontSize, 0, 4 * fontSize, fontSize, 6 * fontSize, fontSize, 6 * fontSize, 0, width, 0, width, height];
+
+ generatePolygon(width, height, fontSize, points, content, 'left-multi');
+ generatePolygon(width, height, fontSize, points, content, 'right-multi');
+ generatePolygon(width, height, fontSize, points, content, 'center-multi');
+ generatePolygon(width, height, fontSize, points, 'x x x x x', 'justify-multi');
+
+ content = '<div>x x x x</div>';
+
+ generatePolygon(width, height, fontSize, points, content, 'left-multi-block');
+ generatePolygon(width, height, fontSize, points, content, 'right-multi-block');
+ generatePolygon(width, height, fontSize, points, content, 'center-multi-block');
+ generatePolygon(width, height, fontSize, points, '<div>x x x x x</div>', 'justify-multi-block');
+}
+</script>
+<style>
+div { overflow: hidden; }
+#left-single, #left-single-block, #left-multi, #left-multi-block { text-align: left; }
+#right-single, #right-single-block, #right-multi, #right-multi-block { text-align: right; }
+#center-single, #center-single-block, #center-multi, #center-multi-block { text-align: center; }
+#justify-single, #justify-single-block, #justify-multi, #justify-multi-block { text-align: justify; }
+</style>
+</head>
+<body>
+<h1><a href=''>Bug 101086</a>: Implement text alignment for shape-inside</h1>
+<p>This test checks that different values of the text-align property work correctly for shape-inside.</p>
+<p>Below you should see 2 green squares in a line 4 squares wide, with different values of text-align. This tests that single-segment polygons work correctly.</p>
+<div id='left-single'></div>
+<div id='right-single'></div>
+<div id='center-single'></div>
+<div id='justify-single'></div>
+
+<p>You should see the same results when using block elements.</p>
+<div id='left-single-block'></div>
+<div id='right-single-block'></div>
+<div id='center-single-block'></div>
+<div id='justify-single-block'></div>
+
+<p>Below you should see 2 green squares in 2 lines 4 squares wide, separated by a 2 square space. The lines have different values of text-align. This tests that multi-segment polygons work correctly.</p>
+<div id='left-multi'></div>
+<div id='right-multi'></div>
+<div id='center-multi'></div>
+<div id='justify-multi'></div>
+
+<p>You should see the same results when using block elements.</p>
+<div id='left-multi-block'></div>
+<div id='right-multi-block'></div>
+<div id='center-multi-block'></div>
+<div id='justify-multi-block'></div>
+</body>
+</html>
\ No newline at end of file
_______________________________________________ webkit-changes mailing list [email protected] https://lists.webkit.org/mailman/listinfo/webkit-changes
