<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[184440] trunk</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/184440">184440</a></dd>
<dt>Author</dt> <dd>zalan@apple.com</dd>
<dt>Date</dt> <dd>2015-05-16 16:24:00 -0700 (Sat, 16 May 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>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.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderBoxModelObjectcpp">trunk/Source/WebCore/rendering/RenderBoxModelObject.cpp</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastbordersdashedborderonsubpixelpositionexpectedhtml">trunk/LayoutTests/fast/borders/dashed-border-on-subpixel-position-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastbordersdashedborderonsubpixelpositionhtml">trunk/LayoutTests/fast/borders/dashed-border-on-subpixel-position.html</a></li>
<li><a href="#trunkLayoutTestsfastbordersdottedborderonsubpixelpositionexpectedhtml">trunk/LayoutTests/fast/borders/dotted-border-on-subpixel-position-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastbordersdottedborderonsubpixelpositionhtml">trunk/LayoutTests/fast/borders/dotted-border-on-subpixel-position.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (184439 => 184440)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2015-05-16 23:00:06 UTC (rev 184439)
+++ trunk/LayoutTests/ChangeLog 2015-05-16 23:24:00 UTC (rev 184440)
</span><span class="lines">@@ -1,3 +1,19 @@
</span><ins>+2015-05-16 Zalan Bujtas <zalan@apple.com>
+
+ 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.
+
</ins><span class="cx"> 2015-05-15 Sam Weinig <sam@webkit.org>
</span><span class="cx">
</span><span class="cx"> Add getElementById to DocumentFragment
</span></span></pre></div>
<a id="trunkLayoutTestsfastbordersdashedborderonsubpixelpositionexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/borders/dashed-border-on-subpixel-position-expected.html (0 => 184440)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,56 @@
</span><ins>+<!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>
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkLayoutTestsfastbordersdashedborderonsubpixelpositionhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/borders/dashed-border-on-subpixel-position.html (0 => 184440)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,46 @@
</span><ins>+<!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>
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkLayoutTestsfastbordersdottedborderonsubpixelpositionexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/borders/dotted-border-on-subpixel-position-expected.html (0 => 184440)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,56 @@
</span><ins>+<!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>
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkLayoutTestsfastbordersdottedborderonsubpixelpositionhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/borders/dotted-border-on-subpixel-position.html (0 => 184440)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,46 @@
</span><ins>+<!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>
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (184439 => 184440)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -1,3 +1,20 @@
</span><ins>+2015-05-16 Zalan Bujtas <zalan@apple.com>
+
+ 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):
+
</ins><span class="cx"> 2015-05-16 Sungmann Cho <sungmann.cho@navercorp.com>
</span><span class="cx">
</span><span class="cx"> Remove styleText() and applyStyleText() from InspectorStyle.
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderBoxModelObjectcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderBoxModelObject.cpp (184439 => 184440)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -2058,10 +2058,11 @@
</span><span class="cx"> {
</span><span class="cx"> FloatPoint quad[4];
</span><span class="cx">
</span><del>- const LayoutRect& outerRect = outerBorder.rect();
- const LayoutRect& innerRect = innerBorder.rect();
</del><ins>+ float deviceScaleFactor = document().deviceScaleFactor();
+ const FloatRect& outerRect = snapRectToDevicePixels(outerBorder.rect(), deviceScaleFactor);
+ const FloatRect& innerRect = snapRectToDevicePixels(innerBorder.rect(), deviceScaleFactor);
</ins><span class="cx">
</span><del>- FloatPoint centerPoint(innerRect.location().x() + static_cast<float>(innerRect.width()) / 2, innerRect.location().y() + static_cast<float>(innerRect.height()) / 2);
</del><ins>+ FloatPoint centerPoint(innerRect.location().x() + innerRect.width() / 2, innerRect.location().y() + innerRect.height() / 2);
</ins><span class="cx">
</span><span class="cx"> // For each side, create a quad that encompasses all parts of that side that may draw,
</span><span class="cx"> // including areas inside the innerBorder.
</span></span></pre>
</div>
</div>
</body>
</html>