<!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>[201868] 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/201868">201868</a></dd>
<dt>Author</dt> <dd>simon.fraser@apple.com</dd>
<dt>Date</dt> <dd>2016-06-09 09:59:17 -0700 (Thu, 09 Jun 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>border-radius with different width and height rendered wrong
https://bugs.webkit.org/show_bug.cgi?id=158300
<rdar://problem/26672922>
Reviewed by Zalan Bujtas.
Source/WebCore:
Borders with border-radius close to 100% 100% got oddly clipped. This happened because
of the clipping we do to achieve the diagonal corner joins; RenderBoxModelObject::clipBorderSidePolygon()
created trapezoids for each side, but only extended them to the center of the inner border rect.
This clipped out parts of these borders.
Fix by computing the trapezoids by intersecting the corner diagonal line with a line that passes
through the adjacent corners of the inner rect, whose intersection is always going to be inside the
rounded border. Also fix the quads used to do the antialiased/non-antialiased clipping,
by adding a point rather than moving a corner point to ensure we don't mistakenly clip out any
parts of the border.
Finally, improve the rendering of non-renderable cases by actually doing the diagonal
corner joins rather than just giving up.
Tests: fast/borders/border-non-renderable-radius-inner-clip.html
fast/borders/border-radius-inner-clip-vertical.html
fast/borders/border-radius-inner-clip.html
* rendering/RenderBoxModelObject.cpp:
(WebCore::calculateAdjustedInnerBorder): Moved up.
(WebCore::RenderBoxModelObject::paintOneBorderSide):
(WebCore::RenderBoxModelObject::clipBorderSidePolygon):
(WebCore::findInnerVertex): Deleted.
(WebCore::calculateSideRectIncludingInner): Deleted.
(WebCore::RenderBoxModelObject::clipBorderSideForComplexInnerPath): Deleted.
* rendering/RenderBoxModelObject.h:
LayoutTests:
* fast/borders/border-non-renderable-radius-inner-clip-expected.html: Added.
* fast/borders/border-non-renderable-radius-inner-clip.html: Added.
* fast/borders/border-radius-inner-clip-expected-mismatch.html: Added.
* fast/borders/border-radius-inner-clip-vertical-expected-mismatch.html: Added.
* fast/borders/border-radius-inner-clip-vertical.html: Added.
* fast/borders/border-radius-inner-clip.html: Added.
* fast/borders/resources/border-radius-helpers.js: Added.
(createContainer):
(createReferenceContainer):</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>
<li><a href="#trunkSourceWebCorerenderingRenderBoxModelObjecth">trunk/Source/WebCore/rendering/RenderBoxModelObject.h</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastbordersbordernonrenderableradiusinnerclipexpectedhtml">trunk/LayoutTests/fast/borders/border-non-renderable-radius-inner-clip-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastbordersbordernonrenderableradiusinnercliphtml">trunk/LayoutTests/fast/borders/border-non-renderable-radius-inner-clip.html</a></li>
<li><a href="#trunkLayoutTestsfastbordersborderradiusinnerclipexpectedmismatchhtml">trunk/LayoutTests/fast/borders/border-radius-inner-clip-expected-mismatch.html</a></li>
<li><a href="#trunkLayoutTestsfastbordersborderradiusinnerclipverticalexpectedmismatchhtml">trunk/LayoutTests/fast/borders/border-radius-inner-clip-vertical-expected-mismatch.html</a></li>
<li><a href="#trunkLayoutTestsfastbordersborderradiusinnerclipverticalhtml">trunk/LayoutTests/fast/borders/border-radius-inner-clip-vertical.html</a></li>
<li><a href="#trunkLayoutTestsfastbordersborderradiusinnercliphtml">trunk/LayoutTests/fast/borders/border-radius-inner-clip.html</a></li>
<li><a href="#trunkLayoutTestsfastbordersresourcesborderradiushelpersjs">trunk/LayoutTests/fast/borders/resources/border-radius-helpers.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (201867 => 201868)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-06-09 16:49:19 UTC (rev 201867)
+++ trunk/LayoutTests/ChangeLog 2016-06-09 16:59:17 UTC (rev 201868)
</span><span class="lines">@@ -1,3 +1,21 @@
</span><ins>+2016-06-09 Simon Fraser <simon.fraser@apple.com>
+
+ border-radius with different width and height rendered wrong
+ https://bugs.webkit.org/show_bug.cgi?id=158300
+ <rdar://problem/26672922>
+
+ Reviewed by Zalan Bujtas.
+
+ * fast/borders/border-non-renderable-radius-inner-clip-expected.html: Added.
+ * fast/borders/border-non-renderable-radius-inner-clip.html: Added.
+ * fast/borders/border-radius-inner-clip-expected-mismatch.html: Added.
+ * fast/borders/border-radius-inner-clip-vertical-expected-mismatch.html: Added.
+ * fast/borders/border-radius-inner-clip-vertical.html: Added.
+ * fast/borders/border-radius-inner-clip.html: Added.
+ * fast/borders/resources/border-radius-helpers.js: Added.
+ (createContainer):
+ (createReferenceContainer):
+
</ins><span class="cx"> 2016-06-09 Per Arne Vollan <pvollan@apple.com>
</span><span class="cx">
</span><span class="cx"> Unreviewed test gardening.
</span></span></pre></div>
<a id="trunkLayoutTestsfastbordersbordernonrenderableradiusinnerclipexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/borders/border-non-renderable-radius-inner-clip-expected.html (0 => 201868)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/borders/border-non-renderable-radius-inner-clip-expected.html (rev 0)
+++ trunk/LayoutTests/fast/borders/border-non-renderable-radius-inner-clip-expected.html 2016-06-09 16:59:17 UTC (rev 201868)
</span><span class="lines">@@ -0,0 +1,68 @@
</span><ins>+<!DOCTYPE HTML>
+
+<html>
+ <head>
+ <style type="text/css">
+ body {
+ margin: 0;
+ }
+
+ div {
+ box-sizing: border-box;
+ }
+
+ .container {
+ position: relative;
+ width: 800px;
+ height: 100px;
+ margin: 10px 0;
+ padding: 20px;
+ }
+
+ .container div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: green;
+ border: 1px solid black;
+ }
+ </style>
+ <script src="resources/border-radius-helpers.js"></script>
+ <script>
+ const borderWidth = 50;
+
+ const corners = [
+ 'top-left',
+ 'top-right',
+ 'bottom-left',
+ 'bottom-right'
+ ];
+
+ const clipPaths = [
+ 'inset(10px 2px 60px 500px)',
+ 'inset(10px 500px 60px 2px)',
+ 'inset(60px 2px 10px 500px)',
+ 'inset(60px 500px 10px 20px)'
+ ];
+
+ var colors = [
+ 'transparent',
+ 'transparent'
+ ];
+
+ var radii = '1178px 178px';
+
+ function doSetup()
+ {
+ for (var index in corners)
+ document.body.appendChild(createContainer(corners[index], colors, clipPaths[index], radii));
+ }
+
+ window.addEventListener('load', doSetup, false);
+ </script>
+ </head>
+ <body>
+ </body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastbordersbordernonrenderableradiusinnercliphtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/borders/border-non-renderable-radius-inner-clip.html (0 => 201868)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/borders/border-non-renderable-radius-inner-clip.html (rev 0)
+++ trunk/LayoutTests/fast/borders/border-non-renderable-radius-inner-clip.html 2016-06-09 16:59:17 UTC (rev 201868)
</span><span class="lines">@@ -0,0 +1,67 @@
</span><ins>+<!DOCTYPE HTML>
+
+<html>
+ <head>
+ <style type="text/css">
+ body {
+ margin: 0;
+ }
+
+ div {
+ box-sizing: border-box;
+ }
+
+ .container {
+ position: relative;
+ width: 800px;
+ height: 100px;
+ margin: 10px 0;
+ padding: 20px;
+ }
+
+ .container div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ border: 1px solid black;
+ }
+ </style>
+ <script src="resources/border-radius-helpers.js"></script>
+ <script>
+ const borderWidth = 50;
+
+ const corners = [
+ 'top-left',
+ 'top-right',
+ 'bottom-left',
+ 'bottom-right'
+ ];
+
+ const clipPaths = [
+ 'inset(10px 2px 60px 500px)',
+ 'inset(10px 500px 60px 2px)',
+ 'inset(60px 2px 10px 500px)',
+ 'inset(60px 500px 10px 20px)'
+ ];
+
+ var colors = [
+ 'green',
+ 'red'
+ ];
+
+ var radii = '1178px 178px';
+
+ function doSetup()
+ {
+ for (var index in corners)
+ document.body.appendChild(createContainer(corners[index], colors, clipPaths[index], radii));
+ }
+
+ window.addEventListener('load', doSetup, false);
+ </script>
+ </head>
+ <body>
+ </body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastbordersborderradiusinnerclipexpectedmismatchhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/borders/border-radius-inner-clip-expected-mismatch.html (0 => 201868)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/borders/border-radius-inner-clip-expected-mismatch.html (rev 0)
+++ trunk/LayoutTests/fast/borders/border-radius-inner-clip-expected-mismatch.html 2016-06-09 16:59:17 UTC (rev 201868)
</span><span class="lines">@@ -0,0 +1,66 @@
</span><ins>+<!DOCTYPE HTML>
+
+<html>
+ <head>
+ <style type="text/css">
+ body {
+ margin: 0;
+ }
+
+ div {
+ box-sizing: border-box;
+ }
+
+ .container {
+ position: relative;
+ width: 800px;
+ height: 100px;
+ border: 1px solid black;
+ margin: 10px 0;
+ padding: 20px;
+ }
+
+ .container div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: silver;
+ }
+ </style>
+ <script src="resources/border-radius-helpers.js"></script>
+ <script>
+ const borderWidth = 20;
+
+ const corners = [
+ 'top-left',
+ 'top-right',
+ 'bottom-left',
+ 'bottom-right'
+ ];
+
+ const clipPaths = [
+ 'inset(60px 10px 640px 60px)',
+ 'inset(60px 60px 640px 10px)',
+ 'inset(640px 10px 60px 60px)',
+ 'inset(640px 60px 60px 10px)'
+ ];
+
+ var colors = [
+ 'green',
+ 'blue'
+ ];
+
+ function doSetup()
+ {
+ for (var index in corners)
+ document.body.appendChild(createReferenceContainer());
+ }
+
+ window.addEventListener('load', doSetup, false);
+ </script>
+ </head>
+ <body>
+ </body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastbordersborderradiusinnerclipverticalexpectedmismatchhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/borders/border-radius-inner-clip-vertical-expected-mismatch.html (0 => 201868)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/borders/border-radius-inner-clip-vertical-expected-mismatch.html (rev 0)
+++ trunk/LayoutTests/fast/borders/border-radius-inner-clip-vertical-expected-mismatch.html 2016-06-09 16:59:17 UTC (rev 201868)
</span><span class="lines">@@ -0,0 +1,67 @@
</span><ins>+<!DOCTYPE HTML>
+
+<html>
+ <head>
+ <style type="text/css">
+ body {
+ margin: 0;
+ }
+
+ div {
+ box-sizing: border-box;
+ }
+
+ .container {
+ display: inline-block;
+ position: relative;
+ width: 100px;
+ height: 800px;
+ border: 1px solid black;
+ margin: 0 10px;
+ padding: 20px;
+ }
+
+ .container div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: silver;
+ }
+ </style>
+ <script src="resources/border-radius-helpers.js"></script>
+ <script>
+ const borderWidth = 20;
+
+ const corners = [
+ 'top-left',
+ 'top-right',
+ 'bottom-left',
+ 'bottom-right'
+ ];
+
+ const clipPaths = [
+ 'inset(60px 10px 640px 60px)',
+ 'inset(60px 60px 640px 10px)',
+ 'inset(640px 10px 60px 60px)',
+ 'inset(640px 60px 60px 10px)'
+ ];
+
+ var colors = [
+ 'green',
+ 'blue'
+ ];
+
+ function doSetup()
+ {
+ for (var index in corners)
+ document.body.appendChild(createReferenceContainer());
+ }
+
+ window.addEventListener('load', doSetup, false);
+ </script>
+ </head>
+ <body>
+ </body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastbordersborderradiusinnerclipverticalhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/borders/border-radius-inner-clip-vertical.html (0 => 201868)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/borders/border-radius-inner-clip-vertical.html (rev 0)
+++ trunk/LayoutTests/fast/borders/border-radius-inner-clip-vertical.html 2016-06-09 16:59:17 UTC (rev 201868)
</span><span class="lines">@@ -0,0 +1,68 @@
</span><ins>+<!DOCTYPE HTML>
+
+<html>
+ <head>
+ <style type="text/css">
+ body {
+ margin: 0;
+ }
+
+ div {
+ box-sizing: border-box;
+ }
+
+ .container {
+ display: inline-block;
+ position: relative;
+ width: 100px;
+ height: 800px;
+ border: 1px solid black;
+ margin: 0 10px;
+ padding: 20px;
+ }
+
+ .container div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
+ </style>
+ <script src="resources/border-radius-helpers.js"></script>
+ <script>
+ const borderWidth = 20;
+
+ const corners = [
+ 'top-left',
+ 'top-right',
+ 'bottom-left',
+ 'bottom-right'
+ ];
+
+ const clipPaths = [
+ 'inset(60px 10px 640px 60px)',
+ 'inset(60px 60px 640px 10px)',
+ 'inset(640px 10px 60px 60px)',
+ 'inset(640px 60px 60px 10px)'
+ ];
+
+ var colors = [
+ 'green',
+ 'blue'
+ ];
+
+ var radii = '100% 100%';
+
+ function doSetup()
+ {
+ for (var index in corners)
+ document.body.appendChild(createContainer(corners[index], colors, clipPaths[index], radii));
+ }
+
+ window.addEventListener('load', doSetup, false);
+ </script>
+ </head>
+ <body>
+ </body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastbordersborderradiusinnercliphtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/borders/border-radius-inner-clip.html (0 => 201868)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/borders/border-radius-inner-clip.html (rev 0)
+++ trunk/LayoutTests/fast/borders/border-radius-inner-clip.html 2016-06-09 16:59:17 UTC (rev 201868)
</span><span class="lines">@@ -0,0 +1,67 @@
</span><ins>+<!DOCTYPE HTML>
+
+<html>
+ <head>
+ <style type="text/css">
+ body {
+ margin: 0;
+ }
+
+ div {
+ box-sizing: border-box;
+ }
+
+ .container {
+ position: relative;
+ width: 800px;
+ height: 100px;
+ border: 1px solid black;
+ margin: 10px 0;
+ padding: 20px;
+ }
+
+ .container div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
+ </style>
+ <script src="resources/border-radius-helpers.js"></script>
+ <script>
+ const borderWidth = 20;
+
+ const corners = [
+ 'top-left',
+ 'top-right',
+ 'bottom-left',
+ 'bottom-right'
+ ];
+
+ const clipPaths = [
+ 'inset(60px 640px 10px 60px)',
+ 'inset(60px 60px 10px 640px)',
+ 'inset(10px 640px 60px 60px)',
+ 'inset(10px 60px 60px 640px)'
+ ];
+
+ var colors = [
+ 'green',
+ 'blue'
+ ];
+
+ var radii = '100% 100%';
+
+ function doSetup()
+ {
+ for (var index in corners)
+ document.body.appendChild(createContainer(corners[index], colors, clipPaths[index], radii));
+ }
+
+ window.addEventListener('load', doSetup, false);
+ </script>
+ </head>
+ <body>
+ </body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastbordersresourcesborderradiushelpersjs"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/borders/resources/border-radius-helpers.js (0 => 201868)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/borders/resources/border-radius-helpers.js (rev 0)
+++ trunk/LayoutTests/fast/borders/resources/border-radius-helpers.js 2016-06-09 16:59:17 UTC (rev 201868)
</span><span class="lines">@@ -0,0 +1,27 @@
</span><ins>+function createContainer(corner, colors, clipPath)
+{
+ var container = document.createElement('div');
+ container.className = 'container';
+
+ var testDiv = document.createElement('div');
+ testDiv.className = 'test';
+
+ var sides = corner.split('-');
+ for (var index in sides)
+ testDiv.style['border-' + sides[index]] = borderWidth + 'px solid ' + colors[index];
+
+ testDiv.style['border-' + corner + '-radius'] = '100% 100%';
+ testDiv.style.webkitClipPath = clipPath;
+
+ container.appendChild(testDiv);
+
+ return container;
+}
+
+function createReferenceContainer()
+{
+ var container = document.createElement('div');
+ container.className = 'container';
+
+ return container;
+}
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (201867 => 201868)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2016-06-09 16:49:19 UTC (rev 201867)
+++ trunk/Source/WebCore/ChangeLog 2016-06-09 16:59:17 UTC (rev 201868)
</span><span class="lines">@@ -1,3 +1,38 @@
</span><ins>+2016-06-09 Simon Fraser <simon.fraser@apple.com>
+
+ border-radius with different width and height rendered wrong
+ https://bugs.webkit.org/show_bug.cgi?id=158300
+ <rdar://problem/26672922>
+
+ Reviewed by Zalan Bujtas.
+
+ Borders with border-radius close to 100% 100% got oddly clipped. This happened because
+ of the clipping we do to achieve the diagonal corner joins; RenderBoxModelObject::clipBorderSidePolygon()
+ created trapezoids for each side, but only extended them to the center of the inner border rect.
+ This clipped out parts of these borders.
+
+ Fix by computing the trapezoids by intersecting the corner diagonal line with a line that passes
+ through the adjacent corners of the inner rect, whose intersection is always going to be inside the
+ rounded border. Also fix the quads used to do the antialiased/non-antialiased clipping,
+ by adding a point rather than moving a corner point to ensure we don't mistakenly clip out any
+ parts of the border.
+
+ Finally, improve the rendering of non-renderable cases by actually doing the diagonal
+ corner joins rather than just giving up.
+
+ Tests: fast/borders/border-non-renderable-radius-inner-clip.html
+ fast/borders/border-radius-inner-clip-vertical.html
+ fast/borders/border-radius-inner-clip.html
+
+ * rendering/RenderBoxModelObject.cpp:
+ (WebCore::calculateAdjustedInnerBorder): Moved up.
+ (WebCore::RenderBoxModelObject::paintOneBorderSide):
+ (WebCore::RenderBoxModelObject::clipBorderSidePolygon):
+ (WebCore::findInnerVertex): Deleted.
+ (WebCore::calculateSideRectIncludingInner): Deleted.
+ (WebCore::RenderBoxModelObject::clipBorderSideForComplexInnerPath): Deleted.
+ * rendering/RenderBoxModelObject.h:
+
</ins><span class="cx"> 2016-06-09 Xabier Rodriguez Calvar <calvaris@igalia.com>
</span><span class="cx">
</span><span class="cx"> Unreviewed, fixing compilation issue with WebRTC
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderBoxModelObjectcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderBoxModelObject.cpp (201867 => 201868)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderBoxModelObject.cpp 2016-06-09 16:49:19 UTC (rev 201867)
+++ trunk/Source/WebCore/rendering/RenderBoxModelObject.cpp 2016-06-09 16:59:17 UTC (rev 201868)
</span><span class="lines">@@ -1436,6 +1436,86 @@
</span><span class="cx"> return false;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+static RoundedRect calculateAdjustedInnerBorder(const RoundedRect&innerBorder, BoxSide side)
+{
+ // Expand the inner border as necessary to make it a rounded rect (i.e. radii contained within each edge).
+ // This function relies on the fact we only get radii not contained within each edge if one of the radii
+ // for an edge is zero, so we can shift the arc towards the zero radius corner.
+ RoundedRect::Radii newRadii = innerBorder.radii();
+ LayoutRect newRect = innerBorder.rect();
+
+ float overshoot;
+ float maxRadii;
+
+ switch (side) {
+ case BSTop:
+ overshoot = newRadii.topLeft().width() + newRadii.topRight().width() - newRect.width();
+ if (overshoot > 0) {
+ ASSERT(!(newRadii.topLeft().width() && newRadii.topRight().width()));
+ newRect.setWidth(newRect.width() + overshoot);
+ if (!newRadii.topLeft().width())
+ newRect.move(-overshoot, 0);
+ }
+ newRadii.setBottomLeft(IntSize(0, 0));
+ newRadii.setBottomRight(IntSize(0, 0));
+ maxRadii = std::max(newRadii.topLeft().height(), newRadii.topRight().height());
+ if (maxRadii > newRect.height())
+ newRect.setHeight(maxRadii);
+ break;
+
+ case BSBottom:
+ overshoot = newRadii.bottomLeft().width() + newRadii.bottomRight().width() - newRect.width();
+ if (overshoot > 0) {
+ ASSERT(!(newRadii.bottomLeft().width() && newRadii.bottomRight().width()));
+ newRect.setWidth(newRect.width() + overshoot);
+ if (!newRadii.bottomLeft().width())
+ newRect.move(-overshoot, 0);
+ }
+ newRadii.setTopLeft(IntSize(0, 0));
+ newRadii.setTopRight(IntSize(0, 0));
+ maxRadii = std::max(newRadii.bottomLeft().height(), newRadii.bottomRight().height());
+ if (maxRadii > newRect.height()) {
+ newRect.move(0, newRect.height() - maxRadii);
+ newRect.setHeight(maxRadii);
+ }
+ break;
+
+ case BSLeft:
+ overshoot = newRadii.topLeft().height() + newRadii.bottomLeft().height() - newRect.height();
+ if (overshoot > 0) {
+ ASSERT(!(newRadii.topLeft().height() && newRadii.bottomLeft().height()));
+ newRect.setHeight(newRect.height() + overshoot);
+ if (!newRadii.topLeft().height())
+ newRect.move(0, -overshoot);
+ }
+ newRadii.setTopRight(IntSize(0, 0));
+ newRadii.setBottomRight(IntSize(0, 0));
+ maxRadii = std::max(newRadii.topLeft().width(), newRadii.bottomLeft().width());
+ if (maxRadii > newRect.width())
+ newRect.setWidth(maxRadii);
+ break;
+
+ case BSRight:
+ overshoot = newRadii.topRight().height() + newRadii.bottomRight().height() - newRect.height();
+ if (overshoot > 0) {
+ ASSERT(!(newRadii.topRight().height() && newRadii.bottomRight().height()));
+ newRect.setHeight(newRect.height() + overshoot);
+ if (!newRadii.topRight().height())
+ newRect.move(0, -overshoot);
+ }
+ newRadii.setTopLeft(IntSize(0, 0));
+ newRadii.setBottomLeft(IntSize(0, 0));
+ maxRadii = std::max(newRadii.topRight().width(), newRadii.bottomRight().width());
+ if (maxRadii > newRect.width()) {
+ newRect.move(newRect.width() - maxRadii, 0);
+ newRect.setWidth(maxRadii);
+ }
+ break;
+ }
+
+ return RoundedRect(newRect, newRadii);
+}
+
</ins><span class="cx"> void RenderBoxModelObject::paintOneBorderSide(GraphicsContext& graphicsContext, const RenderStyle& style, const RoundedRect& outerBorder, const RoundedRect& innerBorder,
</span><span class="cx"> const LayoutRect& sideRect, BoxSide side, BoxSide adjacentSide1, BoxSide adjacentSide2, const BorderEdge edges[], const Path* path,
</span><span class="cx"> BackgroundBleedAvoidance bleedAvoidance, bool includeLogicalLeftEdge, bool includeLogicalRightEdge, bool antialias, const Color* overrideColor)
</span><span class="lines">@@ -1455,10 +1535,12 @@
</span><span class="cx">
</span><span class="cx"> if (path) {
</span><span class="cx"> GraphicsContextStateSaver stateSaver(graphicsContext);
</span><del>- if (innerBorder.isRenderable())
- clipBorderSidePolygon(graphicsContext, outerBorder, innerBorder, side, adjacentSide1StylesMatch, adjacentSide2StylesMatch);
- else
- clipBorderSideForComplexInnerPath(graphicsContext, outerBorder, innerBorder, side, edges);
</del><ins>+
+ clipBorderSidePolygon(graphicsContext, outerBorder, innerBorder, side, adjacentSide1StylesMatch, adjacentSide2StylesMatch);
+
+ if (!innerBorder.isRenderable())
+ graphicsContext.clipOutRoundedRect(FloatRoundedRect(calculateAdjustedInnerBorder(innerBorder, side)));
+
</ins><span class="cx"> float thickness = std::max(std::max(edgeToRender.widthForPainting(), adjacentEdge1.widthForPainting()), adjacentEdge2.widthForPainting());
</span><span class="cx"> drawBoxSideFromPath(graphicsContext, outerBorder.rect(), *path, edges, edgeToRender.widthForPainting(), thickness, side, style,
</span><span class="cx"> colorToPaint, edgeToRender.style(), bleedAvoidance, includeLogicalLeftEdge, includeLogicalRightEdge);
</span><span class="lines">@@ -1907,21 +1989,6 @@
</span><span class="cx"> graphicsContext.drawRect(snapRectToDevicePixels(borderRect, document().deviceScaleFactor()));
</span><span class="cx"> }
</span><span class="cx">
</span><del>-static void findInnerVertex(const FloatPoint& outerCorner, const FloatPoint& innerCorner, const FloatPoint& centerPoint, FloatPoint& result)
-{
- // If the line between outer and inner corner is towards the horizontal, intersect with a vertical line through the center,
- // otherwise with a horizontal line through the center. The points that form this line are arbitrary (we use 0, 100).
- // Note that if findIntersection fails, it will leave result untouched.
- float diffInnerOuterX = fabs(innerCorner.x() - outerCorner.x());
- float diffInnerOuterY = fabs(innerCorner.y() - outerCorner.y());
- float diffCenterOuterX = fabs(centerPoint.x() - outerCorner.x());
- float diffCenterOuterY = fabs(centerPoint.y() - outerCorner.y());
- if (diffInnerOuterY * diffCenterOuterX < diffCenterOuterY * diffInnerOuterX)
- findIntersection(outerCorner, innerCorner, FloatPoint(centerPoint.x(), 0), FloatPoint(centerPoint.x(), 100), result);
- else
- findIntersection(outerCorner, innerCorner, FloatPoint(0, centerPoint.y()), FloatPoint(100, centerPoint.y()), result);
-}
-
</del><span class="cx"> void RenderBoxModelObject::clipBorderSidePolygon(GraphicsContext& graphicsContext, const RoundedRect& outerBorder, const RoundedRect& innerBorder,
</span><span class="cx"> BoxSide side, bool firstEdgeMatches, bool secondEdgeMatches)
</span><span class="cx"> {
</span><span class="lines">@@ -1929,8 +1996,6 @@
</span><span class="cx"> const FloatRect& outerRect = snapRectToDevicePixels(outerBorder.rect(), deviceScaleFactor);
</span><span class="cx"> const FloatRect& innerRect = snapRectToDevicePixels(innerBorder.rect(), deviceScaleFactor);
</span><span class="cx">
</span><del>- FloatPoint centerPoint(innerRect.location().x() + innerRect.width() / 2, innerRect.location().y() + innerRect.height() / 2);
-
</del><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 class="cx"> //
</span><span class="lines">@@ -1955,10 +2020,10 @@
</span><span class="cx"> quad.uncheckedAppend(outerRect.maxXMinYCorner());
</span><span class="cx">
</span><span class="cx"> if (!innerBorder.radii().topLeft().isZero())
</span><del>- findInnerVertex(outerRect.minXMinYCorner(), innerRect.minXMinYCorner(), centerPoint, quad[1]);
</del><ins>+ findIntersection(outerRect.minXMinYCorner(), innerRect.minXMinYCorner(), innerRect.minXMaxYCorner(), innerRect.maxXMinYCorner(), quad[1]);
</ins><span class="cx">
</span><span class="cx"> if (!innerBorder.radii().topRight().isZero())
</span><del>- findInnerVertex(outerRect.maxXMinYCorner(), innerRect.maxXMinYCorner(), centerPoint, quad[2]);
</del><ins>+ findIntersection(outerRect.maxXMinYCorner(), innerRect.maxXMinYCorner(), innerRect.minXMinYCorner(), innerRect.maxXMaxYCorner(), quad[2]);
</ins><span class="cx"> break;
</span><span class="cx">
</span><span class="cx"> case BSLeft:
</span><span class="lines">@@ -1968,10 +2033,10 @@
</span><span class="cx"> quad.uncheckedAppend(outerRect.minXMaxYCorner());
</span><span class="cx">
</span><span class="cx"> if (!innerBorder.radii().topLeft().isZero())
</span><del>- findInnerVertex(outerRect.minXMinYCorner(), innerRect.minXMinYCorner(), centerPoint, quad[1]);
</del><ins>+ findIntersection(outerRect.minXMinYCorner(), innerRect.minXMinYCorner(), innerRect.minXMaxYCorner(), innerRect.maxXMinYCorner(), quad[1]);
</ins><span class="cx">
</span><span class="cx"> if (!innerBorder.radii().bottomLeft().isZero())
</span><del>- findInnerVertex(outerRect.minXMaxYCorner(), innerRect.minXMaxYCorner(), centerPoint, quad[2]);
</del><ins>+ findIntersection(outerRect.minXMaxYCorner(), innerRect.minXMaxYCorner(), innerRect.minXMinYCorner(), innerRect.maxXMaxYCorner(), quad[2]);
</ins><span class="cx"> break;
</span><span class="cx">
</span><span class="cx"> case BSBottom:
</span><span class="lines">@@ -1981,10 +2046,10 @@
</span><span class="cx"> quad.uncheckedAppend(outerRect.maxXMaxYCorner());
</span><span class="cx">
</span><span class="cx"> if (!innerBorder.radii().bottomLeft().isZero())
</span><del>- findInnerVertex(outerRect.minXMaxYCorner(), innerRect.minXMaxYCorner(), centerPoint, quad[1]);
</del><ins>+ findIntersection(outerRect.minXMaxYCorner(), innerRect.minXMaxYCorner(), innerRect.minXMinYCorner(), innerRect.maxXMaxYCorner(), quad[1]);
</ins><span class="cx">
</span><span class="cx"> if (!innerBorder.radii().bottomRight().isZero())
</span><del>- findInnerVertex(outerRect.maxXMaxYCorner(), innerRect.maxXMaxYCorner(), centerPoint, quad[2]);
</del><ins>+ findIntersection(outerRect.maxXMaxYCorner(), innerRect.maxXMaxYCorner(), innerRect.maxXMinYCorner(), innerRect.minXMaxYCorner(), quad[2]);
</ins><span class="cx"> break;
</span><span class="cx">
</span><span class="cx"> case BSRight:
</span><span class="lines">@@ -1994,10 +2059,10 @@
</span><span class="cx"> quad.uncheckedAppend(outerRect.maxXMaxYCorner());
</span><span class="cx">
</span><span class="cx"> if (!innerBorder.radii().topRight().isZero())
</span><del>- findInnerVertex(outerRect.maxXMinYCorner(), innerRect.maxXMinYCorner(), centerPoint, quad[1]);
</del><ins>+ findIntersection(outerRect.maxXMinYCorner(), innerRect.maxXMinYCorner(), innerRect.minXMinYCorner(), innerRect.maxXMaxYCorner(), quad[1]);
</ins><span class="cx">
</span><span class="cx"> if (!innerBorder.radii().bottomRight().isZero())
</span><del>- findInnerVertex(outerRect.maxXMaxYCorner(), innerRect.maxXMaxYCorner(), centerPoint, quad[2]);
</del><ins>+ findIntersection(outerRect.maxXMaxYCorner(), innerRect.maxXMaxYCorner(), innerRect.maxXMinYCorner(), innerRect.minXMaxYCorner(), quad[2]);
</ins><span class="cx"> break;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -2015,6 +2080,7 @@
</span><span class="cx"> Vector<FloatPoint> firstQuad = {
</span><span class="cx"> quad[0],
</span><span class="cx"> quad[1],
</span><ins>+ quad[2],
</ins><span class="cx"> side == BSTop || side == BSBottom ? FloatPoint(quad[3].x(), quad[2].y()) : FloatPoint(quad[2].x(), quad[3].y()),
</span><span class="cx"> quad[3]
</span><span class="cx"> };
</span><span class="lines">@@ -2025,6 +2091,7 @@
</span><span class="cx"> Vector<FloatPoint> secondQuad = {
</span><span class="cx"> quad[0],
</span><span class="cx"> side == BSTop || side == BSBottom ? FloatPoint(quad[0].x(), quad[1].y()) : FloatPoint(quad[1].x(), quad[0].y()),
</span><ins>+ quad[1],
</ins><span class="cx"> quad[2],
</span><span class="cx"> quad[3]
</span><span class="cx"> };
</span><span class="lines">@@ -2035,120 +2102,6 @@
</span><span class="cx"> graphicsContext.setShouldAntialias(wasAntialiased);
</span><span class="cx"> }
</span><span class="cx">
</span><del>-static LayoutRect calculateSideRectIncludingInner(const RoundedRect& outerBorder, const BorderEdge edges[], BoxSide side)
-{
- LayoutRect sideRect = outerBorder.rect();
- LayoutUnit width;
-
- switch (side) {
- case BSTop:
- width = sideRect.height() - edges[BSBottom].widthForPainting();
- sideRect.setHeight(width);
- break;
- case BSBottom:
- width = sideRect.height() - edges[BSTop].widthForPainting();
- sideRect.shiftYEdgeTo(sideRect.maxY() - width);
- break;
- case BSLeft:
- width = sideRect.width() - edges[BSRight].widthForPainting();
- sideRect.setWidth(width);
- break;
- case BSRight:
- width = sideRect.width() - edges[BSLeft].widthForPainting();
- sideRect.shiftXEdgeTo(sideRect.maxX() - width);
- break;
- }
-
- return sideRect;
-}
-
-static RoundedRect calculateAdjustedInnerBorder(const RoundedRect&innerBorder, BoxSide side)
-{
- // Expand the inner border as necessary to make it a rounded rect (i.e. radii contained within each edge).
- // This function relies on the fact we only get radii not contained within each edge if one of the radii
- // for an edge is zero, so we can shift the arc towards the zero radius corner.
- RoundedRect::Radii newRadii = innerBorder.radii();
- LayoutRect newRect = innerBorder.rect();
-
- float overshoot;
- float maxRadii;
-
- switch (side) {
- case BSTop:
- overshoot = newRadii.topLeft().width() + newRadii.topRight().width() - newRect.width();
- if (overshoot > 0) {
- ASSERT(!(newRadii.topLeft().width() && newRadii.topRight().width()));
- newRect.setWidth(newRect.width() + overshoot);
- if (!newRadii.topLeft().width())
- newRect.move(-overshoot, 0);
- }
- newRadii.setBottomLeft(IntSize(0, 0));
- newRadii.setBottomRight(IntSize(0, 0));
- maxRadii = std::max(newRadii.topLeft().height(), newRadii.topRight().height());
- if (maxRadii > newRect.height())
- newRect.setHeight(maxRadii);
- break;
-
- case BSBottom:
- overshoot = newRadii.bottomLeft().width() + newRadii.bottomRight().width() - newRect.width();
- if (overshoot > 0) {
- ASSERT(!(newRadii.bottomLeft().width() && newRadii.bottomRight().width()));
- newRect.setWidth(newRect.width() + overshoot);
- if (!newRadii.bottomLeft().width())
- newRect.move(-overshoot, 0);
- }
- newRadii.setTopLeft(IntSize(0, 0));
- newRadii.setTopRight(IntSize(0, 0));
- maxRadii = std::max(newRadii.bottomLeft().height(), newRadii.bottomRight().height());
- if (maxRadii > newRect.height()) {
- newRect.move(0, newRect.height() - maxRadii);
- newRect.setHeight(maxRadii);
- }
- break;
-
- case BSLeft:
- overshoot = newRadii.topLeft().height() + newRadii.bottomLeft().height() - newRect.height();
- if (overshoot > 0) {
- ASSERT(!(newRadii.topLeft().height() && newRadii.bottomLeft().height()));
- newRect.setHeight(newRect.height() + overshoot);
- if (!newRadii.topLeft().height())
- newRect.move(0, -overshoot);
- }
- newRadii.setTopRight(IntSize(0, 0));
- newRadii.setBottomRight(IntSize(0, 0));
- maxRadii = std::max(newRadii.topLeft().width(), newRadii.bottomLeft().width());
- if (maxRadii > newRect.width())
- newRect.setWidth(maxRadii);
- break;
-
- case BSRight:
- overshoot = newRadii.topRight().height() + newRadii.bottomRight().height() - newRect.height();
- if (overshoot > 0) {
- ASSERT(!(newRadii.topRight().height() && newRadii.bottomRight().height()));
- newRect.setHeight(newRect.height() + overshoot);
- if (!newRadii.topRight().height())
- newRect.move(0, -overshoot);
- }
- newRadii.setTopLeft(IntSize(0, 0));
- newRadii.setBottomLeft(IntSize(0, 0));
- maxRadii = std::max(newRadii.topRight().width(), newRadii.bottomRight().width());
- if (maxRadii > newRect.width()) {
- newRect.move(newRect.width() - maxRadii, 0);
- newRect.setWidth(maxRadii);
- }
- break;
- }
-
- return RoundedRect(newRect, newRadii);
-}
-
-void RenderBoxModelObject::clipBorderSideForComplexInnerPath(GraphicsContext& graphicsContext, const RoundedRect& outerBorder, const RoundedRect& innerBorder,
- BoxSide side, const class BorderEdge edges[])
-{
- graphicsContext.clip(calculateSideRectIncludingInner(outerBorder, edges, side));
- graphicsContext.clipOutRoundedRect(FloatRoundedRect(calculateAdjustedInnerBorder(innerBorder, side)));
-}
-
</del><span class="cx"> bool RenderBoxModelObject::borderObscuresBackgroundEdge(const FloatSize& contextScale) const
</span><span class="cx"> {
</span><span class="cx"> BorderEdge edges[4];
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderBoxModelObjecth"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderBoxModelObject.h (201867 => 201868)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderBoxModelObject.h 2016-06-09 16:49:19 UTC (rev 201867)
+++ trunk/Source/WebCore/rendering/RenderBoxModelObject.h 2016-06-09 16:59:17 UTC (rev 201868)
</span><span class="lines">@@ -310,7 +310,7 @@
</span><span class="cx">
</span><span class="cx"> void clipBorderSidePolygon(GraphicsContext&, const RoundedRect& outerBorder, const RoundedRect& innerBorder,
</span><span class="cx"> BoxSide, bool firstEdgeMatches, bool secondEdgeMatches);
</span><del>- void clipBorderSideForComplexInnerPath(GraphicsContext&, const RoundedRect&, const RoundedRect&, BoxSide, const BorderEdge[]);
</del><ins>+
</ins><span class="cx"> void paintOneBorderSide(GraphicsContext&, const RenderStyle&, const RoundedRect& outerBorder, const RoundedRect& innerBorder,
</span><span class="cx"> const LayoutRect& sideRect, BoxSide, BoxSide adjacentSide1, BoxSide adjacentSide2, const BorderEdge[],
</span><span class="cx"> const Path*, BackgroundBleedAvoidance, bool includeLogicalLeftEdge, bool includeLogicalRightEdge, bool antialias, const Color* overrideColor = nullptr);
</span></span></pre>
</div>
</div>
</body>
</html>