Diff
Modified: trunk/LayoutTests/ChangeLog (165428 => 165429)
--- trunk/LayoutTests/ChangeLog 2014-03-11 04:28:49 UTC (rev 165428)
+++ trunk/LayoutTests/ChangeLog 2014-03-11 04:31:06 UTC (rev 165429)
@@ -1,3 +1,18 @@
+2014-03-10 Bem Jones-Bey <[email protected]>
+
+ [CSS Shapes] inset corner radii are not flipped for vertical writing modes
+ https://bugs.webkit.org/show_bug.cgi?id=129918
+
+ Reviewed by Dean Jackson.
+
+ Test both left and right float cases so that we cover all four
+ corners.
+
+ * fast/shapes/shape-outside-floats/shape-outside-floats-inset-rounded-different-writing-modes-left-expected.txt: Added.
+ * fast/shapes/shape-outside-floats/shape-outside-floats-inset-rounded-different-writing-modes-left.html: Added.
+ * fast/shapes/shape-outside-floats/shape-outside-floats-inset-rounded-different-writing-modes-right-expected.txt: Added.
+ * fast/shapes/shape-outside-floats/shape-outside-floats-inset-rounded-different-writing-modes-right.html: Added.
+
2014-03-10 Zsolt Borbely <[email protected]>
ASSERTION FAILED: span >= 1
Added: trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-inset-rounded-different-writing-modes-left-expected.txt (0 => 165429)
--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-inset-rounded-different-writing-modes-left-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-inset-rounded-different-writing-modes-left-expected.txt 2014-03-11 04:31:06 UTC (rev 165429)
@@ -0,0 +1,28 @@
+The block squares should wrap around the bottom of the blue shape. They should not overlap the shape.
+
+X
+X
+X
+X
+X
+X
+X
+X
+X
+X
+X
+X
+
+PASS 1st square doesn't overlap shape.
+PASS 2nd square is properly affected by shape.
+PASS 3rd square is properly affected by shape.
+PASS 4th square is properly affected by shape.
+PASS 5th square is properly affected by shape.
+PASS 6th square is properly affected by shape.
+PASS 7th square is properly affected by shape.
+PASS 8th square is properly affected by shape.
+PASS 9th square is properly affected by shape.
+PASS 10th square is properly affected by shape.
+PASS 11th square is properly affected by shape.
+PASS 12th square doesn't overlap shape.
+
Added: trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-inset-rounded-different-writing-modes-left.html (0 => 165429)
--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-inset-rounded-different-writing-modes-left.html (rev 0)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-inset-rounded-different-writing-modes-left.html 2014-03-11 04:31:06 UTC (rev 165429)
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<script src=""
+<script src=""
+<script src=""
+<style>
+#container {
+ font: 10px/1 Ahem, sans-serif;
+ width: 200px;
+ height: 200px;
+ border: 1px solid black;
+ -webkit-writing-mode: vertical-lr;
+}
+
+#rounded-rect {
+ float: left;
+ -webkit-writing-mode: horizontal-tb;
+ width: 100px;
+ height: 100px;
+ background-color: blue;
+ border-radius: 50px 40px 30px 20px / 20px 30px 40px 50px;
+ -webkit-shape-outside: inset(0px round 50px 40px 30px 20px / 20px 30px 40px 50px);
+}
+</style>
+
+<body>
+<p>The block squares should wrap around the bottom of the blue shape. They should not overlap the shape.</p>
+<div id="container">
+<span id="s1">X</span><br/>
+ <div id="rounded-rect"></div>
+<span id="s2">X</span><br/>
+<span id="s3">X</span><br/>
+<span id="s4">X</span><br/>
+<span id="s5">X</span><br/>
+<span id="s6">X</span><br/>
+<span id="s7">X</span><br/>
+<span id="s8">X</span><br/>
+<span id="s9">X</span><br/>
+<span id="s10">X</span><br/>
+<span id="s11">X</span><br/>
+<span id="s12">X</span>
+</div>
+
+</body>
+<script>
+function elementRect(elementId)
+{
+ var s = document.getElementById("container").getBoundingClientRect();
+ var r = document.getElementById(elementId).getBoundingClientRect();
+ return {left: r.left - s.left, top: r.top - s.top, width: r.width, height: r.height};
+}
+
+test(function () {
+ var rect = elementRect("s1");
+ assert_equals(rect.left, 1);
+ assert_equals(rect.top, 1);
+}, "1st square doesn't overlap shape.");
+
+test(function () {
+ var rect = elementRect("s2");
+ assert_equals(rect.left, 11);
+ assert_approx_equals(rect.top, 91, 0.1);
+}, "2nd square is properly affected by shape.");
+
+test(function () {
+ var rect = elementRect("s3");
+ assert_equals(rect.left, 21);
+ assert_approx_equals(rect.top, 97, 0.1);
+}, "3rd square is properly affected by shape.");
+
+test(function () {
+ var rect = elementRect("s4");
+ assert_equals(rect.left, 31);
+ assert_approx_equals(rect.top, 100, 0.1);
+}, "4th square is properly affected by shape.");
+
+test(function () {
+ var rect = elementRect("s5");
+ assert_equals(rect.left, 41);
+ assert_approx_equals(rect.top, 101, 0.1);
+}, "5th square is properly affected by shape.");
+
+test(function () {
+ var rect = elementRect("s6");
+ assert_equals(rect.left, 51);
+ assert_approx_equals(rect.top, 101, 0.1);
+}, "6th square is properly affected by shape.");
+
+test(function () {
+ var rect = elementRect("s7");
+ assert_equals(rect.left, 61);
+ assert_approx_equals(rect.top, 101, 0.1);
+}, "7th square is properly affected by shape.");
+
+test(function () {
+ var rect = elementRect("s8");
+ assert_equals(rect.left, 71);
+ assert_approx_equals(rect.top, 101, 0.1);
+}, "8th square is properly affected by shape.");
+
+test(function () {
+ var rect = elementRect("s9");
+ assert_equals(rect.left, 81);
+ assert_approx_equals(rect.top, 101, 0.1);
+}, "9th square is properly affected by shape.");
+
+test(function () {
+ var rect = elementRect("s10");
+ assert_equals(rect.left, 91);
+ assert_approx_equals(rect.top, 99, 0.1);
+}, "10th square is properly affected by shape.");
+
+test(function () {
+ var rect = elementRect("s11");
+ assert_equals(rect.left, 101);
+ assert_approx_equals(rect.top, 91, 0.1);
+}, "11th square is properly affected by shape.");
+
+test(function () {
+ var rect = elementRect("s12");
+ assert_equals(rect.left, 111);
+ assert_equals(rect.top, 1);
+}, "12th square doesn't overlap shape.");
+</script>
Added: trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-inset-rounded-different-writing-modes-right-expected.txt (0 => 165429)
--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-inset-rounded-different-writing-modes-right-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-inset-rounded-different-writing-modes-right-expected.txt 2014-03-11 04:31:06 UTC (rev 165429)
@@ -0,0 +1,28 @@
+The block squares should wrap around the top of the blue shape. They should not overlap the shape.
+
+X
+X
+X
+X
+X
+X
+X
+X
+X
+X
+X
+X
+
+PASS 1st square doesn't overlap shape.
+PASS 2nd square is properly affected by shape.
+PASS 3rd square is properly affected by shape.
+PASS 4th square is properly affected by shape.
+PASS 5th square is properly affected by shape.
+PASS 6th square is properly affected by shape.
+PASS 7th square is properly affected by shape.
+PASS 8th square is properly affected by shape.
+PASS 9th square is properly affected by shape.
+PASS 10th square is properly affected by shape.
+PASS 11th square is properly affected by shape.
+PASS 12th square doesn't overlap shape.
+
Added: trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-inset-rounded-different-writing-modes-right.html (0 => 165429)
--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-inset-rounded-different-writing-modes-right.html (rev 0)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-inset-rounded-different-writing-modes-right.html 2014-03-11 04:31:06 UTC (rev 165429)
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<script src=""
+<script src=""
+<script src=""
+<style>
+#container {
+ font: 10px/1 Ahem, sans-serif;
+ width: 200px;
+ height: 200px;
+ border: 1px solid black;
+ -webkit-writing-mode: vertical-lr;
+ text-align: right;
+}
+
+#rounded-rect {
+ float: right;
+ -webkit-writing-mode: horizontal-tb;
+ width: 100px;
+ height: 100px;
+ background-color: blue;
+ border-radius: 20px 30px 40px 50px / 50px 40px 30px 20px;
+ -webkit-shape-outside: inset(0px round 20px 30px 40px 50px / 50px 40px 30px 20px);
+}
+</style>
+
+<body>
+<p>The block squares should wrap around the top of the blue shape. They should not overlap the shape.</p>
+<div id="container">
+<span id="s1">X</span><br/>
+ <div id="rounded-rect"></div>
+<span id="s2">X</span><br/>
+<span id="s3">X</span><br/>
+<span id="s4">X</span><br/>
+<span id="s5">X</span><br/>
+<span id="s6">X</span><br/>
+<span id="s7">X</span><br/>
+<span id="s8">X</span><br/>
+<span id="s9">X</span><br/>
+<span id="s10">X</span><br/>
+<span id="s11">X</span><br/>
+<span id="s12">X</span>
+</div>
+
+</body>
+<script>
+function elementRect(elementId)
+{
+ var s = document.getElementById("container").getBoundingClientRect();
+ var r = document.getElementById(elementId).getBoundingClientRect();
+ return {left: r.left - s.left, top: r.top - s.top, width: r.width, height: r.height};
+}
+
+test(function () {
+ var rect = elementRect("s1");
+ assert_equals(rect.left, 1);
+ assert_equals(rect.top, 191);
+}, "1st square doesn't overlap shape.");
+
+test(function () {
+ var rect = elementRect("s2");
+ assert_equals(rect.left, 11);
+ assert_approx_equals(rect.top, 97, 0.1);
+}, "2nd square is properly affected by shape.");
+
+test(function () {
+ var rect = elementRect("s3");
+ assert_equals(rect.left, 21);
+ assert_approx_equals(rect.top, 91, 0.1);
+}, "3rd square is properly affected by shape.");
+
+test(function () {
+ var rect = elementRect("s4");
+ assert_equals(rect.left, 31);
+ assert_approx_equals(rect.top, 91, 0.1);
+}, "4th square is properly affected by shape.");
+
+test(function () {
+ var rect = elementRect("s5");
+ assert_equals(rect.left, 41);
+ assert_approx_equals(rect.top, 91, 0.1);
+}, "5th square is properly affected by shape.");
+
+test(function () {
+ var rect = elementRect("s6");
+ assert_equals(rect.left, 51);
+ assert_approx_equals(rect.top, 91, 0.1);
+}, "6th square is properly affected by shape.");
+
+test(function () {
+ var rect = elementRect("s7");
+ assert_equals(rect.left, 61);
+ assert_approx_equals(rect.top, 91, 0.1);
+}, "7th square is properly affected by shape.");
+
+test(function () {
+ var rect = elementRect("s8");
+ assert_equals(rect.left, 71);
+ assert_approx_equals(rect.top, 91, 0.1);
+}, "8th square is properly affected by shape.");
+
+test(function () {
+ var rect = elementRect("s9");
+ assert_equals(rect.left, 81);
+ assert_approx_equals(rect.top, 92, 0.1);
+}, "9th square is properly affected by shape.");
+
+test(function () {
+ var rect = elementRect("s10");
+ assert_equals(rect.left, 91);
+ assert_approx_equals(rect.top, 95, 0.1);
+}, "10th square is properly affected by shape.");
+
+test(function () {
+ var rect = elementRect("s11");
+ assert_equals(rect.left, 101);
+ assert_approx_equals(rect.top, 99, 0.1);
+}, "11th square is properly affected by shape.");
+
+test(function () {
+ var rect = elementRect("s12");
+ assert_equals(rect.left, 111);
+ assert_equals(rect.top, 191);
+}, "12th square doesn't overlap shape.");
+</script>
Modified: trunk/Source/WebCore/ChangeLog (165428 => 165429)
--- trunk/Source/WebCore/ChangeLog 2014-03-11 04:28:49 UTC (rev 165428)
+++ trunk/Source/WebCore/ChangeLog 2014-03-11 04:31:06 UTC (rev 165429)
@@ -1,3 +1,20 @@
+2014-03-10 Bem Jones-Bey <[email protected]>
+
+ [CSS Shapes] inset corner radii are not flipped for vertical writing modes
+ https://bugs.webkit.org/show_bug.cgi?id=129918
+
+ Reviewed by Dean Jackson.
+
+ When creating an inset shape, convert the radii to logical coordinates
+ as well as the box.
+
+ Tests: fast/shapes/shape-outside-floats/shape-outside-floats-inset-rounded-different-writing-modes-left.html
+ fast/shapes/shape-outside-floats/shape-outside-floats-inset-rounded-different-writing-modes-right.html
+
+ * rendering/shapes/Shape.cpp:
+ (WebCore::Shape::createShape): Convert the radii to logical
+ coordinates.
+
2014-03-10 Joseph Pecoraro <[email protected]>
Web Inspector: Frontend loaded resources from cache are not hidden as expected
Modified: trunk/Source/WebCore/rendering/shapes/Shape.cpp (165428 => 165429)
--- trunk/Source/WebCore/rendering/shapes/Shape.cpp 2014-03-11 04:28:49 UTC (rev 165428)
+++ trunk/Source/WebCore/rendering/shapes/Shape.cpp 2014-03-11 04:31:06 UTC (rev 165429)
@@ -233,11 +233,11 @@
FloatRect logicalRect = physicalRectToLogical(rect, logicalBoxSize.height(), writingMode);
FloatSize boxSize(boxWidth, boxHeight);
- FloatRoundedRect::Radii cornerRadii(
- floatSizeForLengthSize(inset.topLeftRadius(), boxSize),
- floatSizeForLengthSize(inset.topRightRadius(), boxSize),
- floatSizeForLengthSize(inset.bottomLeftRadius(), boxSize),
- floatSizeForLengthSize(inset.bottomRightRadius(), boxSize));
+ FloatSize topLeftRadius = physicalSizeToLogical(floatSizeForLengthSize(inset.topLeftRadius(), boxSize), writingMode);
+ FloatSize topRightRadius = physicalSizeToLogical(floatSizeForLengthSize(inset.topRightRadius(), boxSize), writingMode);
+ FloatSize bottomLeftRadius = physicalSizeToLogical(floatSizeForLengthSize(inset.bottomLeftRadius(), boxSize), writingMode);
+ FloatSize bottomRightRadius = physicalSizeToLogical(floatSizeForLengthSize(inset.bottomRightRadius(), boxSize), writingMode);
+ FloatRoundedRect::Radii cornerRadii(topLeftRadius, topRightRadius, bottomLeftRadius, bottomRightRadius);
cornerRadii.scale(calcBorderRadiiConstraintScaleFor(logicalRect, cornerRadii));
