- Revision
- 184440
- Author
- [email protected]
- Date
- 2015-05-16 16:24:00 -0700 (Sat, 16 May 2015)
Log Message
REGRESSION (Subpixel): Dashed underline is missing when box is positioned at subpixels.
https://bugs.webkit.org/show_bug.cgi?id=145097
rdar://problem/18588415
Reviewed by Simon Fraser.
Dashed and dotted border painting needs clipping in order to properly display corners.
Similarly to solid border's quad calculation, we pixelsnap the border positions before computing the clipping quad values.
Source/WebCore:
Test: fast/borders/dashed-border-on-subpixel-position.html
fast/borders/dotted-border-on-subpixel-position.html
* rendering/RenderBoxModelObject.cpp:
(WebCore::RenderBoxModelObject::clipBorderSidePolygon):
LayoutTests:
* fast/borders/dashed-border-on-subpixel-position-expected.html: Added.
* fast/borders/dashed-border-on-subpixel-position.html: Added.
* fast/borders/dotted-border-on-subpixel-position-expected.html: Added.
* fast/borders/dotted-border-on-subpixel-position.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (184439 => 184440)
--- trunk/LayoutTests/ChangeLog 2015-05-16 23:00:06 UTC (rev 184439)
+++ trunk/LayoutTests/ChangeLog 2015-05-16 23:24:00 UTC (rev 184440)
@@ -1,3 +1,19 @@
+2015-05-16 Zalan Bujtas <[email protected]>
+
+ REGRESSION (Subpixel): Dashed underline is missing when box is positioned at subpixels.
+ https://bugs.webkit.org/show_bug.cgi?id=145097
+ rdar://problem/18588415
+
+ Reviewed by Simon Fraser.
+
+ Dashed and dotted border painting needs clipping in order to properly display corners.
+ Similarly to solid border's quad calculation, we pixelsnap the border positions before computing the clipping quad values.
+
+ * fast/borders/dashed-border-on-subpixel-position-expected.html: Added.
+ * fast/borders/dashed-border-on-subpixel-position.html: Added.
+ * fast/borders/dotted-border-on-subpixel-position-expected.html: Added.
+ * fast/borders/dotted-border-on-subpixel-position.html: Added.
+
2015-05-15 Sam Weinig <[email protected]>
Add getElementById to DocumentFragment
Added: trunk/LayoutTests/fast/borders/dashed-border-on-subpixel-position-expected.html (0 => 184440)
--- trunk/LayoutTests/fast/borders/dashed-border-on-subpixel-position-expected.html (rev 0)
+++ trunk/LayoutTests/fast/borders/dashed-border-on-subpixel-position-expected.html 2015-05-16 23:24:00 UTC (rev 184440)
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>This tests that dashed border is painted properly when on subpixel position.</title>
+<style>
+ div {
+ position: absolute;
+ width: 10px;
+ height: 10px;
+ }
+
+ .border1 {
+ border-top: 1px dashed blue;
+ }
+
+ .border2 {
+ border-bottom: 1px dashed blue;
+ }
+
+ .border3 {
+ border-left: 1px dashed blue;
+ }
+
+ .border4 {
+ border-right: 1px dashed blue;
+ }
+</style>
+</head>
+<body>
+<script>
+ function createDashedBox(x, y, side) {
+ var box = document.createElement("div");
+ box.style.left = x + "px";
+ box.style.top = y + "px";
+ box.className = "border" + side;
+ document.body.appendChild(box);
+ }
+
+ for (side = 1; side <= 4; ++side) {
+ var x = 0;
+ var y = 0;
+ for (i = 0; i < 10; ++i) {
+ createDashedBox(x, 0, side);
+ x += 14;
+ }
+
+ for (i = 0; i < 40; ++i) {
+ if (!(i % 20))
+ y += 1;
+ createDashedBox(x, y, side);
+ x += 14;
+ }
+ }
+</script>
+</body>
+</html>
\ No newline at end of file
Added: trunk/LayoutTests/fast/borders/dashed-border-on-subpixel-position.html (0 => 184440)
--- trunk/LayoutTests/fast/borders/dashed-border-on-subpixel-position.html (rev 0)
+++ trunk/LayoutTests/fast/borders/dashed-border-on-subpixel-position.html 2015-05-16 23:24:00 UTC (rev 184440)
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>This tests that dashed border is painted properly when on subpixel position.</title>
+<style>
+ div {
+ position: absolute;
+ width: 10px;
+ height: 10px;
+ }
+
+ .border1 {
+ border-top: 1px dashed blue;
+ }
+
+ .border2 {
+ border-bottom: 1px dashed blue;
+ }
+
+ .border3 {
+ border-left: 1px dashed blue;
+ }
+
+ .border4 {
+ border-right: 1px dashed blue;
+ }
+</style>
+</head>
+<body>
+<script>
+ for (side = 1; side <= 4; ++side) {
+ var x = 0;
+ var y = 0;
+ for (i = 0; i < 50; ++i) {
+ var box = document.createElement("div");
+ box.style.left = x + "px";
+ box.style.top = y + "px";
+ box.className = "border" + side;
+ document.body.appendChild(box);
+ x += 14;
+ y += 0.05;
+ }
+ }
+</script>
+</body>
+</html>
\ No newline at end of file
Added: trunk/LayoutTests/fast/borders/dotted-border-on-subpixel-position-expected.html (0 => 184440)
--- trunk/LayoutTests/fast/borders/dotted-border-on-subpixel-position-expected.html (rev 0)
+++ trunk/LayoutTests/fast/borders/dotted-border-on-subpixel-position-expected.html 2015-05-16 23:24:00 UTC (rev 184440)
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>This tests that dotted border is painted properly when on subpixel position.</title>
+<style>
+ div {
+ position: absolute;
+ width: 10px;
+ height: 10px;
+ }
+
+ .border1 {
+ border-top: 1px dotted blue;
+ }
+
+ .border2 {
+ border-bottom: 1px dotted blue;
+ }
+
+ .border3 {
+ border-left: 1px dotted blue;
+ }
+
+ .border4 {
+ border-right: 1px dotted blue;
+ }
+</style>
+</head>
+<body>
+<script>
+ function createDashedBox(x, y, side) {
+ var box = document.createElement("div");
+ box.style.left = x + "px";
+ box.style.top = y + "px";
+ box.className = "border" + side;
+ document.body.appendChild(box);
+ }
+
+ for (side = 1; side <= 4; ++side) {
+ var x = 0;
+ var y = 0;
+ for (i = 0; i < 10; ++i) {
+ createDashedBox(x, 0, side);
+ x += 14;
+ }
+
+ for (i = 0; i < 40; ++i) {
+ if (!(i % 20))
+ y += 1;
+ createDashedBox(x, y, side);
+ x += 14;
+ }
+ }
+</script>
+</body>
+</html>
\ No newline at end of file
Added: trunk/LayoutTests/fast/borders/dotted-border-on-subpixel-position.html (0 => 184440)
--- trunk/LayoutTests/fast/borders/dotted-border-on-subpixel-position.html (rev 0)
+++ trunk/LayoutTests/fast/borders/dotted-border-on-subpixel-position.html 2015-05-16 23:24:00 UTC (rev 184440)
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>This tests that dotted border is painted properly when on subpixel position.</title>
+<style>
+ div {
+ position: absolute;
+ width: 10px;
+ height: 10px;
+ }
+
+ .border1 {
+ border-top: 1px dotted blue;
+ }
+
+ .border2 {
+ border-bottom: 1px dotted blue;
+ }
+
+ .border3 {
+ border-left: 1px dotted blue;
+ }
+
+ .border4 {
+ border-right: 1px dotted blue;
+ }
+</style>
+</head>
+<body>
+<script>
+ for (side = 1; side <= 4; ++side) {
+ var x = 0;
+ var y = 0;
+ for (i = 0; i < 50; ++i) {
+ var box = document.createElement("div");
+ box.style.left = x + "px";
+ box.style.top = y + "px";
+ box.className = "border" + side;
+ document.body.appendChild(box);
+ x += 14;
+ y += 0.05;
+ }
+ }
+</script>
+</body>
+</html>
Modified: trunk/Source/WebCore/ChangeLog (184439 => 184440)
--- trunk/Source/WebCore/ChangeLog 2015-05-16 23:00:06 UTC (rev 184439)
+++ trunk/Source/WebCore/ChangeLog 2015-05-16 23:24:00 UTC (rev 184440)
@@ -1,3 +1,20 @@
+2015-05-16 Zalan Bujtas <[email protected]>
+
+ REGRESSION (Subpixel): Dashed underline is missing when box is positioned at subpixels.
+ https://bugs.webkit.org/show_bug.cgi?id=145097
+ rdar://problem/18588415
+
+ Reviewed by Simon Fraser.
+
+ Dashed and dotted border painting needs clipping in order to properly display corners.
+ Similarly to solid border's quad calculation, we pixelsnap the border positions before computing the clipping quad values.
+
+ Test: fast/borders/dashed-border-on-subpixel-position.html
+ fast/borders/dotted-border-on-subpixel-position.html
+
+ * rendering/RenderBoxModelObject.cpp:
+ (WebCore::RenderBoxModelObject::clipBorderSidePolygon):
+
2015-05-16 Sungmann Cho <[email protected]>
Remove styleText() and applyStyleText() from InspectorStyle.
Modified: trunk/Source/WebCore/rendering/RenderBoxModelObject.cpp (184439 => 184440)
--- trunk/Source/WebCore/rendering/RenderBoxModelObject.cpp 2015-05-16 23:00:06 UTC (rev 184439)
+++ trunk/Source/WebCore/rendering/RenderBoxModelObject.cpp 2015-05-16 23:24:00 UTC (rev 184440)
@@ -2058,10 +2058,11 @@
{
FloatPoint quad[4];
- const LayoutRect& outerRect = outerBorder.rect();
- const LayoutRect& innerRect = innerBorder.rect();
+ float deviceScaleFactor = document().deviceScaleFactor();
+ const FloatRect& outerRect = snapRectToDevicePixels(outerBorder.rect(), deviceScaleFactor);
+ const FloatRect& innerRect = snapRectToDevicePixels(innerBorder.rect(), deviceScaleFactor);
- FloatPoint centerPoint(innerRect.location().x() + static_cast<float>(innerRect.width()) / 2, innerRect.location().y() + static_cast<float>(innerRect.height()) / 2);
+ FloatPoint centerPoint(innerRect.location().x() + innerRect.width() / 2, innerRect.location().y() + innerRect.height() / 2);
// For each side, create a quad that encompasses all parts of that side that may draw,
// including areas inside the innerBorder.
