<!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>[168463] 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/168463">168463</a></dd>
<dt>Author</dt> <dd>zoltan@webkit.org</dd>
<dt>Date</dt> <dd>2014-05-08 00:57:10 -0700 (Thu, 08 May 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>[CSS Shapes] Can't select content within the area of the floating box when clip-path is applied
https://bugs.webkit.org/show_bug.cgi?id=131375
Reviewed by Dirk Schulze.
Source/WebCore:
According to http://www.w3.org/TR/css-masking-1/, the clipped part of the element should
not have pointer event dispatching. So add this logic to RenderBlock::nodeAtPoint. This
fixes the bug as it disallows selection on any clipped parts.
I implemented the proper selection for the various CSS box types and added testing
for them. Also, I made and run performance tests for exposing mouse events over the
clipped/non-clipped area, which results can be seen in bugzilla.
Based on the patch made by Rob Buis <rob.buis@samsung.com>
Blink revision: http://src.chromium.org/viewvc/blink?view=revision&revision=172619
Tests: fast/masking/clip-path-selection.html
fast/shapes/shape-outside-floats/shape-outside-clip-path-selection.html
* rendering/RenderBlock.cpp:
(WebCore::RenderBlock::nodeAtPoint):
LayoutTests:
* fast/masking/clip-path-selection-expected.txt: Added.
* fast/masking/clip-path-selection.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-clip-path-selection-expected.txt: Added.
* fast/shapes/shape-outside-floats/shape-outside-clip-path-selection.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="#trunkSourceWebCorerenderingRenderBlockcpp">trunk/Source/WebCore/rendering/RenderBlock.cpp</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastmaskingclippathselectionexpectedtxt">trunk/LayoutTests/fast/masking/clip-path-selection-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastmaskingclippathselectionhtml">trunk/LayoutTests/fast/masking/clip-path-selection.html</a></li>
<li><a href="#trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsideclippathselectionexpectedtxt">trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-clip-path-selection-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsideclippathselectionhtml">trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-clip-path-selection.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (168462 => 168463)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2014-05-08 05:42:21 UTC (rev 168462)
+++ trunk/LayoutTests/ChangeLog 2014-05-08 07:57:10 UTC (rev 168463)
</span><span class="lines">@@ -1,3 +1,15 @@
</span><ins>+2014-05-08 Zoltan Horvath <zoltan@webkit.org>
+
+ [CSS Shapes] Can't select content within the area of the floating box when clip-path is applied
+ https://bugs.webkit.org/show_bug.cgi?id=131375
+
+ Reviewed by Dirk Schulze.
+
+ * fast/masking/clip-path-selection-expected.txt: Added.
+ * fast/masking/clip-path-selection.html: Added.
+ * fast/shapes/shape-outside-floats/shape-outside-clip-path-selection-expected.txt: Added.
+ * fast/shapes/shape-outside-floats/shape-outside-clip-path-selection.html: Added.
+
</ins><span class="cx"> 2014-05-07 Ion Rosca <rosca@adobe.com>
</span><span class="cx">
</span><span class="cx"> [CSS Blending] Blending doesn't work if the parent stacking context is not a self painting layer
</span></span></pre></div>
<a id="trunkLayoutTestsfastmaskingclippathselectionexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/masking/clip-path-selection-expected.txt (0 => 168463)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/masking/clip-path-selection-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/masking/clip-path-selection-expected.txt 2014-05-08 07:57:10 UTC (rev 168463)
</span><span class="lines">@@ -0,0 +1,12 @@
</span><ins>+PASS selection.toString() is ""
+PASS selection.toString() is 'was'
+PASS selection.toString() is ""
+PASS selection.toString() is 'was'
+PASS selection.toString() is ""
+PASS selection.toString() is 'was'
+PASS selection.toString() is ""
+PASS selection.toString() is 'was'
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastmaskingclippathselectionhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/masking/clip-path-selection.html (0 => 168463)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/masking/clip-path-selection.html (rev 0)
+++ trunk/LayoutTests/fast/masking/clip-path-selection.html 2014-05-08 07:57:10 UTC (rev 168463)
</span><span class="lines">@@ -0,0 +1,93 @@
</span><ins>+<!DOCTYPE html>
+<style>
+body {
+ width: 600px;
+ font-family: "Arial";
+ font-size: 20px;
+ line-height: 20px;
+}
+
+.polygonContainer {
+ width: 200px;
+ height: 200px;
+ margin: 5px;
+ padding: 8px;
+ border: 10px solid yellow;
+ background: green;
+}
+
+#polygonLeftBorderBox {
+ position: absolute;
+ top: 200px;
+ left: 0px;
+ -webkit-clip-path: polygon(0 0, 50% 0, 50% 25%, 100% 25%, 100% 75%, 50% 75%, 50% 100%, 0 100%) border-box;
+}
+
+#polygonLeftMarginBox {
+ position: absolute;
+ top: 200px;
+ left: 300px;
+ -webkit-clip-path: polygon(0 0, 50% 0, 50% 25%, 100% 25%, 100% 75%, 50% 75%, 50% 100%, 0 100%) margin-box;
+}
+
+#polygonLeftPaddingBox {
+ position: absolute;
+ top: 450px;
+ left: 0px;
+ -webkit-clip-path: polygon(0 0, 50% 0, 50% 25%, 100% 25%, 100% 75%, 50% 75%, 50% 100%, 0 100%) padding-box;
+}
+
+#polygonLeftContentBox {
+ position: absolute;
+ top: 450px;
+ left: 300px;
+ -webkit-clip-path: polygon(0 0, 50% 0, 50% 25%, 100% 25%, 100% 75%, 50% 75%, 50% 100%, 0 100%) content-box;
+}
+</style>
+
+<div id="polygonLeftBorderBox" class="polygonContainer">Although the Culture was originated by humanoid species...</div>
+<div id="polygonLeftMarginBox" class="polygonContainer">Although the Culture was originated by humanoid species...</div>
+<div id="polygonLeftPaddingBox" class="polygonContainer">Although the Culture was originated by humanoid species...</div>
+<div id="polygonLeftContentBox" class="polygonContainer">Although the Culture was originated by humanoid species...</div>
+
+<script src="../../resources/js-test.js"></script>
+<script>
+ var selection = window.getSelection();
+
+ function compareSelectionWithText(startX, startY, endX, endY, expectedText) {
+ if (!window.testRunner)
+ return;
+
+ selection.removeAllRanges();
+ eventSender.mouseMoveTo(startX, startY);
+ eventSender.mouseDown();
+ eventSender.mouseMoveTo(endX, endY);
+ eventSender.mouseUp();
+ shouldBe('selection.toString()', expectedText);
+ }
+
+ // polygonLeftBorderBox, select part of the polygon, not the text
+ compareSelectionWithText(160, 222, 180, 242, '""');
+ // polygonLeftBorderBox, select 'was' using select drag
+ compareSelectionWithText(23, 242, 59, 260, "'was'");
+
+ // polygonLeftMarginBox, select part of the polygon, not the text
+ compareSelectionWithText(460, 160, 480, 180, '""');
+ // polygonLeftMarginBox, select 'was' using select drag
+ compareSelectionWithText(323, 242, 359, 260, "'was'");
+
+ // polygonLeftPaddingBox, select part of the polygon, not the text
+ compareSelectionWithText(160, 472, 180, 492, '""');
+ // polygonLeftPaddingBox, select 'was' using select drag
+ compareSelectionWithText(23, 492, 59, 510, "'was'");
+
+ // polygonLeftContentBox, select part of the polygon, not the text
+ compareSelectionWithText(460, 472, 480, 492, '""');
+ // polygonLeftContentBox, select 'was' using select drag
+ compareSelectionWithText(323, 492, 359, 510, "'was'");
+
+ // Remove testing content from output.
+ var polygons = document.getElementsByClassName('polygonContainer');
+ for (var i = polygons.length -1 ; i >= 0; --i)
+ polygons[i].remove();
+</script>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsideclippathselectionexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-clip-path-selection-expected.txt (0 => 168463)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-clip-path-selection-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-clip-path-selection-expected.txt 2014-05-08 07:57:10 UTC (rev 168463)
</span><span class="lines">@@ -0,0 +1,6 @@
</span><ins>+PASS sel.toString() is ""
+PASS sel.toString() is "originated"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+Although the Culture was originated by humanoid species, subsequent interactions with other civilizations have introduced many non-humanoid species into the Culture (including some former enemy civilizations), though the majority of the biological Culture is still pan-human. Little uniformity exists in the Culture, and its citizens are such by choice, free to change physical form and even species (though some stranger biological conversions are irreversible, and conversion from biological to artificial sentience is considered to be what is known as an Unusual Life Choice). All members are also free to join, leave, and rejoin, or indeed declare themselves to be, say, 80% Culture.
</ins></span></pre></div>
<a id="trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsideclippathselectionhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-clip-path-selection.html (0 => 168463)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-clip-path-selection.html (rev 0)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-clip-path-selection.html 2014-05-08 07:57:10 UTC (rev 168463)
</span><span class="lines">@@ -0,0 +1,49 @@
</span><ins>+<style>
+body {
+ width: 600px;
+ font: 18px/1 Ahem;
+}
+
+#background {
+ position: absolute;
+ top: 8px;
+ left: 8px;
+ z-index: -1;
+ width: 200px;
+ height: 200px;
+ background: lightgreen;
+}
+
+#triangleLeft {
+ width: 200px;
+ height: 200px;
+ float: left;
+ -webkit-shape-outside: polygon(0 0, 100% 50%, 0 100%);
+ -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
+ shape-margin: 4px;
+ background-color: yellow;
+}
+</style>
+
+<div id="triangleLeft"></div>Although the Culture was originated by humanoid species, subsequent interactions with other civilizations have introduced many non-humanoid species into the Culture (including some former enemy civilizations), though the majority of the biological Culture is still pan-human. Little uniformity exists in the Culture, and its citizens are such by choice, free to change physical form and even species (though some stranger biological conversions are irreversible, and conversion from biological to artificial sentience is considered to be what is known as an Unusual Life Choice). All members are also free to join, leave, and rejoin, or indeed declare themselves to be, say, 80% Culture.
+
+<script src="../../../resources/js-test.js"></script>
+<script>
+ var sel = window.getSelection();
+ sel.removeAllRanges();
+ // select part of the polygon, not the text
+ eventSender.mouseMoveTo(80, 100);
+ eventSender.mouseDown();
+ eventSender.mouseMoveTo(140, 100);
+ eventSender.mouseUp();
+ shouldBe('sel.toString()', '""');
+
+ // select 'other' using select drag.
+ sel.removeAllRanges();
+ eventSender.mouseMoveTo(80, 50);
+ eventSender.mouseDown();
+ eventSender.mouseMoveTo(260, 50);
+ eventSender.mouseUp();
+ // verify that 'other' was selected
+ shouldBe('sel.toString()', '"originated"');
+</script>
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (168462 => 168463)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2014-05-08 05:42:21 UTC (rev 168462)
+++ trunk/Source/WebCore/ChangeLog 2014-05-08 07:57:10 UTC (rev 168463)
</span><span class="lines">@@ -1,3 +1,27 @@
</span><ins>+2014-05-08 Zoltan Horvath <zoltan@webkit.org>
+
+ [CSS Shapes] Can't select content within the area of the floating box when clip-path is applied
+ https://bugs.webkit.org/show_bug.cgi?id=131375
+
+ Reviewed by Dirk Schulze.
+
+ According to http://www.w3.org/TR/css-masking-1/, the clipped part of the element should
+ not have pointer event dispatching. So add this logic to RenderBlock::nodeAtPoint. This
+ fixes the bug as it disallows selection on any clipped parts.
+
+ I implemented the proper selection for the various CSS box types and added testing
+ for them. Also, I made and run performance tests for exposing mouse events over the
+ clipped/non-clipped area, which results can be seen in bugzilla.
+
+ Based on the patch made by Rob Buis <rob.buis@samsung.com>
+ Blink revision: http://src.chromium.org/viewvc/blink?view=revision&revision=172619
+
+ Tests: fast/masking/clip-path-selection.html
+ fast/shapes/shape-outside-floats/shape-outside-clip-path-selection.html
+
+ * rendering/RenderBlock.cpp:
+ (WebCore::RenderBlock::nodeAtPoint):
+
</ins><span class="cx"> 2014-05-07 Ion Rosca <rosca@adobe.com>
</span><span class="cx">
</span><span class="cx"> [CSS Blending] Blending doesn't work if the parent stacking context is not a self painting layer
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderBlockcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderBlock.cpp (168462 => 168463)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderBlock.cpp 2014-05-08 05:42:21 UTC (rev 168462)
+++ trunk/Source/WebCore/rendering/RenderBlock.cpp 2014-05-08 07:57:10 UTC (rev 168463)
</span><span class="lines">@@ -2482,6 +2482,42 @@
</span><span class="cx"> return true;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ if (style().clipPath()) {
+ switch (style().clipPath()->type()) {
+ case ClipPathOperation::Shape: {
+ ShapeClipPathOperation* clipPath = toShapeClipPathOperation(style().clipPath());
+
+ LayoutRect referenceBoxRect;
+ switch (clipPath->referenceBox()) {
+ case CSSBoxType::MarginBox:
+ referenceBoxRect = marginBoxRect();
+ break;
+ case CSSBoxType::BorderBox:
+ referenceBoxRect = borderBoxRect();
+ break;
+ case CSSBoxType::PaddingBox:
+ referenceBoxRect = paddingBoxRect();
+ break;
+ case CSSBoxType::ContentBox:
+ referenceBoxRect = contentBoxRect();
+ break;
+ case CSSBoxType::BoxMissing:
+ case CSSBoxType::Fill:
+ case CSSBoxType::Stroke:
+ case CSSBoxType::ViewBox:
+ referenceBoxRect = borderBoxRect();
+ }
+ if (!clipPath->pathForReferenceRect(referenceBoxRect).contains(locationInContainer.point() - localOffset, clipPath->windRule()))
+ return false;
+ break;
+ }
+ // FIXME: handle Reference/Box
+ case ClipPathOperation::Reference:
+ case ClipPathOperation::Box:
+ break;
+ }
+ }
+
</ins><span class="cx"> // If we have clipping, then we can't have any spillout.
</span><span class="cx"> bool useOverflowClip = hasOverflowClip() && !hasSelfPaintingLayer();
</span><span class="cx"> bool useClip = (hasControlClip() || useOverflowClip);
</span></span></pre>
</div>
</div>
</body>
</html>