Changeset 145870 in webkit

Timestamp:

Mar 14, 2013 8:37:06 PM (11 years ago)

Author:

commit-queue@webkit.org

Message:

Clickable area is incorrect for elements with border-radius
​https://bugs.webkit.org/show_bug.cgi?id=95373

Patch by Xidorn Quan <​quanxunzhen@gmail.com> on 2013-03-14
Reviewed by Simon Fraser.

Source/WebCore:

As RenderBlock doesn't see rounded rect which comes from border-radius
in nodeAtPoint, the rounded corner seems to have an 'invisible' square
box which catches hits. So we added check on whether hitTestPoint also
intersects the rounded rect when hasBorderRadius is set.

This patch is based on Takashi Sakamoto's work in
​https://bugs.webkit.org/show_bug.cgi?id=95373

Test: fast/borders/border-radius-position.html

• platform/graphics/FloatQuad.cpp:

(WebCore):
(WebCore::lineIntersectsCircle):
(WebCore::FloatQuad::intersectsCircle):
(WebCore::FloatQuad::intersectsEllipse):

• platform/graphics/FloatQuad.h:

(FloatQuad):

• platform/graphics/RoundedRect.cpp:

(WebCore::RoundedRect::intersectsQuad):
(WebCore):

• platform/graphics/RoundedRect.h:

(RoundedRect):

• rendering/HitTestLocation.cpp:

(WebCore::HitTestLocation::intersects):
(WebCore):

• rendering/HitTestLocation.h:

(HitTestLocation):

• rendering/RenderBlock.cpp:

(WebCore::RenderBlock::nodeAtPoint):

LayoutTests:

This test is based on Takashi Sakamoto's work in
​https://bugs.webkit.org/show_bug.cgi?id=95373

• fast/borders/border-radius-position-expected.txt: Added.
• fast/borders/border-radius-position.html: Added.

Location:

trunk

Files:

• LayoutTests/ChangeLog (modified) (1 diff)
• LayoutTests/fast/borders/border-radius-position-expected.txt (added)
• LayoutTests/fast/borders/border-radius-position.html (added)
• Source/WebCore/ChangeLog (modified) (1 diff)
• Source/WebCore/platform/graphics/FloatQuad.cpp (modified) (2 diffs)
• Source/WebCore/platform/graphics/FloatQuad.h (modified) (1 diff)
• Source/WebCore/platform/graphics/RoundedRect.cpp (modified) (2 diffs)
• Source/WebCore/platform/graphics/RoundedRect.h (modified) (2 diffs)
• Source/WebCore/rendering/HitTestLocation.cpp (modified) (1 diff)
• Source/WebCore/rendering/HitTestLocation.h (modified) (2 diffs)
• Source/WebCore/rendering/RenderBlock.cpp (modified) (1 diff)

trunk/LayoutTests/ChangeLog

@@ +1 @@
+2013-03-14  Xidorn Quan  <quanxunzhen@gmail.com>
+
+        Clickable area is incorrect for elements with border-radius
+        https://bugs.webkit.org/show_bug.cgi?id=95373
+
+        Reviewed by Simon Fraser.
+
+        This test is based on Takashi Sakamoto's work in
+        https://bugs.webkit.org/show_bug.cgi?id=95373
+
+        * fast/borders/border-radius-position-expected.txt: Added.
+        * fast/borders/border-radius-position.html: Added.
+
 2013-03-14  Andreas Kling  <akling@apple.com>
 

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2013-03-14  Xidorn Quan  <quanxunzhen@gmail.com>
+
+        Clickable area is incorrect for elements with border-radius
+        https://bugs.webkit.org/show_bug.cgi?id=95373
+
+        Reviewed by Simon Fraser.
+
+        As RenderBlock doesn't see rounded rect which comes from border-radius
+        in nodeAtPoint, the rounded corner seems to have an 'invisible' square
+        box which catches hits. So we added check on whether hitTestPoint also
+        intersects the rounded rect when hasBorderRadius is set.
+
+        This patch is based on Takashi Sakamoto's work in
+        https://bugs.webkit.org/show_bug.cgi?id=95373
+
+        Test: fast/borders/border-radius-position.html
+
+        * platform/graphics/FloatQuad.cpp:
+        (WebCore):
+        (WebCore::lineIntersectsCircle):
+        (WebCore::FloatQuad::intersectsCircle):
+        (WebCore::FloatQuad::intersectsEllipse):
+        * platform/graphics/FloatQuad.h:
+        (FloatQuad):
+        * platform/graphics/RoundedRect.cpp:
+        (WebCore::RoundedRect::intersectsQuad):
+        (WebCore):
+        * platform/graphics/RoundedRect.h:
+        (RoundedRect):
+        * rendering/HitTestLocation.cpp:
+        (WebCore::HitTestLocation::intersects):
+        (WebCore):
+        * rendering/HitTestLocation.h:
+        (HitTestLocation):
+        * rendering/RenderBlock.cpp:
+        (WebCore::RenderBlock::nodeAtPoint):
+
 2013-03-14  Chris Fleizach  <cfleizach@apple.com>
 

trunk/Source/WebCore/platform/graphics/FloatQuad.cpp

@@ -2 +2 @@
  * Copyright (C) 2008 Apple Inc. All rights reserved.
  * Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies)
+ * Copyright (C) 2013 Xidorn Quan (quanxunzhen@gmail.com)
  *
  * Redistribution and use in source and binary forms, with or without
@@ -178 +179 @@
 }
 
+// Tests whether the line is contained by or intersected with the circle.
+static inline bool lineIntersectsCircle(const FloatPoint& center, float radius, const FloatPoint& p0, const FloatPoint& p1)
+{
+    float x0 = p0.x() - center.x(), y0 = p0.y() - center.y();
+    float x1 = p1.x() - center.x(), y1 = p1.y() - center.y();
+    float radius2 = radius * radius;
+    if ((x0 * x0 + y0 * y0) <= radius2 || (x1 * x1 + y1 * y1) <= radius2)
+        return true;
+    if (p0 == p1)
+        return false;
+
+    float a = y0 - y1;
+    float b = x1 - x0;
+    float c = x0 * y1 - x1 * y0;
+    float distance2 = c * c / (a * a + b * b);
+    // If distance between the center point and the line > the radius,
+    // the line doesn't cross (or is contained by) the ellipse.
+    if (distance2 > radius2)
+        return false;
+
+    // The nearest point on the line is between p0 and p1?
+    float x = - a * c / (a * a + b * b);
+    float y = - b * c / (a * a + b * b);
+    return (((x0 <= x && x <= x1) || (x0 >= x && x >= x1))
+        && ((y0 <= y && y <= y1) || (y1 <= y && y <= y0)));
+}
+
+bool FloatQuad::intersectsCircle(const FloatPoint& center, float radius) const
+{
+    return containsPoint(center) // The circle may be totally contained by the quad.
+        || lineIntersectsCircle(center, radius, m_p1, m_p2)
+        || lineIntersectsCircle(center, radius, m_p2, m_p3)
+        || lineIntersectsCircle(center, radius, m_p3, m_p4)
+        || lineIntersectsCircle(center, radius, m_p4, m_p1);
+}
+
+bool FloatQuad::intersectsEllipse(const FloatPoint& center, const FloatSize& radii) const
+{
+    // Transform the ellipse to an origin-centered circle whose radius is the product of major radius and minor radius.
+    // Here we apply the same transformation to the quad.
+    FloatQuad transformedQuad(*this);
+    transformedQuad.move(-center.x(), -center.y());
+    transformedQuad.scale(radii.height(), radii.width());
+
+    FloatPoint originPoint;
+    return transformedQuad.intersectsCircle(originPoint, radii.height() * radii.width());
+
+}
+
 bool FloatQuad::isCounterclockwise() const
 {

trunk/Source/WebCore/platform/graphics/FloatQuad.h

@@ -93 +93 @@
     bool intersectsRect(const FloatRect&) const;
 
+    // Test whether any part of the circle/ellipse intersects with this quad.
+    // Note that these two functions only work for convex quads.
+    bool intersectsCircle(const FloatPoint& center, float radius) const;
+    bool intersectsEllipse(const FloatPoint& center, const FloatSize& radii) const;
+
     // The center of the quad. If the quad is the result of a affine-transformed rectangle this is the same as the original center transformed.
     FloatPoint center() const

trunk/Source/WebCore/platform/graphics/RoundedRect.cpp

@@ -2 +2 @@
  * Copyright (C) 2003, 2006, 2009 Apple Inc. All rights reserved.
  * Copyright (C) 2010 Google Inc. All rights reserved.
+ * Copyright (C) 2013 Xidorn Quan (quanxunzhen@gmail.com)
  *
  * Redistribution and use in source and binary forms, with or without
@@ -182 +183 @@
 }
 
+bool RoundedRect::intersectsQuad(const FloatQuad& quad) const
+{
+    FloatRect rect(m_rect);
+    if (!quad.intersectsRect(rect))
+        return false;
+
+    const IntSize& topLeft = m_radii.topLeft();
+    if (!topLeft.isEmpty()) {
+        FloatRect rect(m_rect.x(), m_rect.y(), topLeft.width(), topLeft.height());
+        if (quad.intersectsRect(rect)) {
+            FloatPoint center(m_rect.x() + topLeft.width(), m_rect.y() + topLeft.height());
+            FloatSize size(topLeft.width(), topLeft.height());
+            if (!quad.intersectsEllipse(center, size))
+                return false;
+        }
+    }
+
+    const IntSize& topRight = m_radii.topRight();
+    if (!topRight.isEmpty()) {
+        FloatRect rect(m_rect.maxX() - topRight.width(), m_rect.y(), topRight.width(), topRight.height());
+        if (quad.intersectsRect(rect)) {
+            FloatPoint center(m_rect.maxX() - topRight.width(), m_rect.y() + topRight.height());
+            FloatSize size(topRight.width(), topRight.height());
+            if (!quad.intersectsEllipse(center, size))
+                return false;
+        }
+    }
+
+    const IntSize& bottomLeft = m_radii.bottomLeft();
+    if (!bottomLeft.isEmpty()) {
+        FloatRect rect(m_rect.x(), m_rect.maxY() - bottomLeft.height(), bottomLeft.width(), bottomLeft.height());
+        if (quad.intersectsRect(rect)) {
+            FloatPoint center(m_rect.x() + bottomLeft.width(), m_rect.maxY() - bottomLeft.height());
+            FloatSize size(bottomLeft.width(), bottomLeft.height());
+            if (!quad.intersectsEllipse(center, size))
+                return false;
+        }
+    }
+
+    const IntSize& bottomRight = m_radii.bottomRight();
+    if (!bottomRight.isEmpty()) {
+        FloatRect rect(m_rect.maxX() - bottomRight.width(), m_rect.maxY() - bottomRight.height(), bottomRight.width(), bottomRight.height());
+        if (quad.intersectsRect(rect)) {
+            FloatPoint center(m_rect.maxX() - bottomRight.width(), m_rect.maxY() - bottomRight.height());
+            FloatSize size(bottomRight.width(), bottomRight.height());
+            if (!quad.intersectsEllipse(center, size))
+                return false;
+        }
+    }
+
+    return true;
+}
+
 } // namespace WebCore

trunk/Source/WebCore/platform/graphics/RoundedRect.h

@@ -28 +28 @@
 #define RoundedRect_h
 
+#include "FloatQuad.h"
 #include "IntRect.h"
 
@@ -97 +98 @@
     void adjustRadii();
 
+    // Tests whether the quad intersects any part of this rounded rectangle.
+    // This only works for convex quads.
+    bool intersectsQuad(const FloatQuad&) const;
+
 private:
     IntRect m_rect;

trunk/Source/WebCore/rendering/HitTestLocation.cpp

@@ -181 +181 @@
 }
 
+bool HitTestLocation::intersects(const RoundedRect& rect) const
+{
+    return rect.intersectsQuad(m_transformedRect);
+}
+
 IntRect HitTestLocation::rectForPoint(const LayoutPoint& point, unsigned topPadding, unsigned rightPadding, unsigned bottomPadding, unsigned leftPadding)
 {

trunk/Source/WebCore/rendering/HitTestLocation.h

@@ -27 +27 @@
 #include "HitTestRequest.h"
 #include "LayoutRect.h"
+#include "RoundedRect.h"
 #include "TextDirection.h"
 #include <wtf/Forward.h>
@@ -79 +80 @@
     bool intersects(const LayoutRect&) const;
     bool intersects(const FloatRect&) const;
+    bool intersects(const RoundedRect&) const;
 
     const FloatPoint& transformedPoint() const { return m_transformedPoint; }

trunk/Source/WebCore/rendering/RenderBlock.cpp

@@ -4895 +4895 @@
         flipForWritingMode(overflowBox);
         overflowBox.moveBy(adjustedLocation);
+        if (style()->hasBorderRadius()) {
+            LayoutRect borderRect = borderBoxRect();
+            borderRect.moveBy(adjustedLocation);
+            RoundedRect border = style()->getRoundedBorderFor(borderRect, view());
+            if (!locationInContainer.intersects(border))
+                return false;
+        }
         if (!locationInContainer.intersects(overflowBox))
             return false;