2008-01-05 Dean Jackson <dino@apple.com>
Reviewed by David Hyatt.
Implement 'pointer-events' for HTML content. This involved
adding a new value 'auto' which behaves as 'visiblePainted'
in SVG content.
Moved the property out of the SVG CSS code and into
the general CSS (both parsing and RenderStyle).
Changes to the hit testing functionality of the Render tree,
specifically the nodeAtPoint methods. Where they used to
test for visibility, they now use a helper function defined
on base classes (RenderObject and InlineBox) that checks both
visibility and pointer-events.
https://bugs.webkit.org/show_bug.cgi?id=11395
Tests: fast/events/pointer-events-2.html
fast/events/pointer-events.html
* css/CSSComputedStyleDeclaration.cpp:
(WebCore::):
(WebCore::CSSComputedStyleDeclaration::getPropertyCSSValue):
* css/CSSParser.cpp:
(WebCore::CSSParser::parseValue):
* css/CSSPrimitiveValueMappings.h:
(WebCore::CSSPrimitiveValue::CSSPrimitiveValue):
(WebCore::CSSPrimitiveValue::operator EPointerEvents):
* css/CSSStyleSelector.cpp:
(WebCore::CSSStyleSelector::applyProperty):
* css/SVGCSSComputedStyleDeclaration.cpp:
(WebCore::CSSComputedStyleDeclaration::getSVGPropertyCSSValue):
* css/SVGCSSStyleSelector.cpp:
(WebCore::CSSStyleSelector::applySVGProperty):
* manual-tests/pointer-events.html: Added.
* rendering/EllipsisBox.cpp:
(WebCore::EllipsisBox::nodeAtPoint):
* rendering/InlineBox.h:
(WebCore::InlineBox::visibleToHitTesting):
* rendering/InlineFlowBox.cpp:
(WebCore::InlineFlowBox::nodeAtPoint):
* rendering/InlineTextBox.cpp:
(WebCore::InlineTextBox::nodeAtPoint):
* rendering/PointerEventsHitRules.cpp:
(WebCore::PointerEventsHitRules::PointerEventsHitRules):
* rendering/PointerEventsHitRules.h:
(WebCore::PointerEventsHitRules::):
* rendering/RenderBlock.cpp:
(WebCore::RenderBlock::nodeAtPoint):
* rendering/RenderBox.cpp:
(WebCore::RenderBox::nodeAtPoint):
* rendering/RenderObject.h:
(WebCore::RenderObject::visibleToHitTesting):
* rendering/RenderPath.cpp:
(WebCore::RenderPath::nodeAtPoint):
* rendering/RenderSVGImage.cpp:
(WebCore::RenderSVGImage::nodeAtPoint):
* rendering/RenderSVGText.cpp:
(WebCore::RenderSVGText::nodeAtPoint):
* rendering/RootInlineBox.cpp:
(WebCore::RootInlineBox::nodeAtPoint):
* rendering/TextControlInnerElements.cpp:
(WebCore::SearchFieldCancelButtonElement::defaultEventHandler):
* rendering/style/RenderStyle.h:
(WebCore::):
(WebCore::InheritedFlags::setBitDefaults):
(WebCore::InheritedFlags::pointerEvents):
(WebCore::InheritedFlags::setPointerEvents):
(WebCore::InheritedFlags::initialPointerEvents):
* rendering/style/RenderStyleConstants.h:
(WebCore::):
* rendering/style/SVGRenderStyle.h:
(WebCore::SVGRenderStyle::InheritedFlags::operator==):
(WebCore::SVGRenderStyle::setBitDefaults):
* rendering/style/SVGRenderStyleDefs.h:
* css/CSSValueKeywords.in:
* css/SVGCSSValueKeywords.in:
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@39634 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/LayoutTests/fast/events/pointer-events-2.html b/LayoutTests/fast/events/pointer-events-2.html
new file mode 100644
index 0000000..52013e4
--- /dev/null
+++ b/LayoutTests/fast/events/pointer-events-2.html
@@ -0,0 +1,302 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Test for pointer-events property</title>
+ <style type="text/css" media="screen">
+
+ .row {
+ position: absolute;
+ width: 300px;
+ height: 100px;
+ left: 10px;
+ }
+
+ .row1 { top: 140px; }
+ .row2 { top: 240px; }
+ .row3 { top: 340px; }
+ .row4 { top: 440px; }
+ .row5 { top: 540px; }
+ .row6 { top: 140px; left: 340px;}
+ .row7 { top: 240px; left: 340px;}
+ .row8 { top: 340px; left: 340px;}
+ .row9 { top: 440px; left: 340px;}
+ .row10 { top: 540px; left: 340px; }
+
+ .col {
+ position: absolute;
+ width: 80px;
+ height: 80px;
+ top: 0;
+ }
+
+ .col1 {
+ left: 0px;
+ }
+
+ .col2 {
+ left: 100px;
+ }
+
+ .col3 {
+ left: 200px;
+ }
+
+ div, p {
+ font-size: 16px;
+ }
+
+ div p {
+ padding: 0;
+ margin: 0;
+ position: absolute;
+ width: 80px;
+ height: 80px;
+ }
+
+ #p1 {
+ background: gray;
+ }
+
+ #p2 {
+ background: gray;
+ pointer-events: none;
+ }
+
+ #p3 {
+ background: gray;
+ pointer-events: none;
+ }
+
+ #p4 {
+ pointer-events: auto;
+ }
+
+ #p5 {
+ background: gray;
+ pointer-events: auto;
+ }
+
+ #p6 {
+ pointer-events: none;
+ }
+
+ #p7 { /* this is a div - not a p */
+ pointer-events: auto;
+ padding: 0;
+ margin: 0;
+ position: absolute;
+ width: 80px;
+ height: 80px;
+ }
+
+ #p8 {
+ background: gray;
+ pointer-events: none;
+ }
+
+ #p9 { /* this is a div - not a p */
+ pointer-events: none;
+ padding: 0;
+ margin: 0;
+ position: absolute;
+ width: 80px;
+ height: 80px;
+ }
+
+ #p10 {
+ background: gray;
+ pointer-events: auto;
+ }
+
+ #p11 {
+ position: absolute;
+ margin: 0;
+ padding: 0;
+ pointer-events: auto;
+ width: 80px;
+ height: 80px;
+ }
+
+ #p12 {
+ position: absolute;
+ margin: 0;
+ padding: 0;
+ pointer-events: none;
+ width: 80px;
+ height: 80px;
+ }
+
+ #p13 {
+ background: gray;
+ pointer-events: none;
+ }
+
+ #p14 {
+ background: yellow;
+ pointer-events: auto;
+ }
+
+ #p15 {
+ background: gray;
+ pointer-events: auto;
+ }
+
+ #p16 {
+ background: yellow;
+ pointer-events: none;
+ }
+
+
+ </style>
+ <script>
+ if (window.layoutTestController) {
+ layoutTestController.waitUntilDone();
+ }
+
+ var pointerEventsValues = ['auto', 'none'];
+
+ var topEdge = 140;
+
+ function clickHit(event) {
+ // iterate up to the containing row
+ var parent = event.target;
+ while (parent && (!parent.className || !parent.className.match(/^row/))) {
+ parent = parent.parentNode;
+ }
+ if (parent && parent.className && parent.className.match(/^row/)) {
+ var actual = parent.querySelector(".col3");
+ if (actual && event.target.id)
+ actual.innerText = event.target.id;
+ }
+ }
+
+ function testContent() {
+
+ // hit left side
+ var yOffset = topEdge;
+ for (var i=0; i < 5; i++) {
+ if (window.eventSender) {
+ eventSender.mouseMoveTo(15, yOffset + 5);
+ eventSender.mouseDown();
+ eventSender.mouseUp();
+ }
+ yOffset += 100;
+ }
+
+ // hit right side
+ yOffset = topEdge;
+ for (var i=0; i < 5; i++) {
+ if (window.eventSender) {
+ eventSender.mouseMoveTo(345, yOffset + 5);
+ eventSender.mouseDown();
+ eventSender.mouseUp();
+ }
+ yOffset += 100;
+ }
+
+ if (window.layoutTestController)
+ layoutTestController.notifyDone();
+ }
+ </script>
+
+</head>
+<body onload="testContent()" onclick="clickHit(event)">
+ <h1>Testing the values of 'pointer-events' on HTML content</h1>
+ <p>This test is expected to be run from within DumpRenderTree. If running manually, click on
+ the elements in the first column, making sure the actual result (3rd column) matches
+ the expected result (2nd column). Repeat for click target (4th column), expected result (5th column)
+ and actual result (6th column). Note: You should click on a yellow inline element if
+ one exists, otherwise anywhere in the box.</p>
+
+ <div class="row row1">
+ <div class="col col1">
+ <p id="p1">pointer-events auto</p>
+ </div>
+ <div class="col col2">p1</div>
+ <div class="col col3">none</div>
+ </div>
+
+ <div class="row row2">
+ <div class="col col1">
+ <p id="p2">pointer-events none</p>
+ </div>
+ <div class="col col2">none</div>
+ <div class="col col3">none</div>
+ </div>
+
+ <div class="row row3">
+ <div class="col col1">
+ <p id="p3">siblings - auto on top</p>
+ <p id="p4"></p>
+ </div>
+ <div class="col col2">p4</div>
+ <div class="col col3">none</div>
+ </div>
+
+ <div class="row row4">
+ <div class="col col1">
+ <p id="p5">siblings - none on top</p>
+ <p id="p6"></p>
+ </div>
+ <div class="col col2">p5</div>
+ <div class="col col3">none</div>
+ </div>
+
+ <div class="row row5">
+ <div class="col col1">
+ <div id="p7">
+ <p id="p8">nested - auto outer</p>
+ </div>
+ </div>
+ <div class="col col2">p7</div>
+ <div class="col col3">none</div>
+ </div>
+
+ <div class="row row6">
+ <div class="col col1">
+ <div id="p9">
+ <p id="p10">nested - none outer</p>
+ </div>
+ </div>
+ <div class="col col2">p10</div>
+ <div class="col col3">none</div>
+ </div>
+
+ <div class="row row7">
+ <div class="col col1">
+ <img id="p11" src="resources/abe.png">
+ </div>
+ <div class="col col2">p11</div>
+ <div class="col col3">none</div>
+ </div>
+
+ <div class="row row8">
+ <div class="col col1">
+ <img id="p12" src="resources/abe.png">
+ </div>
+ <div class="col col2">none</div>
+ <div class="col col3">none</div>
+ </div>
+
+ <div class="row row9">
+ <div class="col col1">
+ <p id="p13"><span id="p14">inline</span> has auto, parent none
+ </p>
+ </div>
+ <div class="col col2">p14</div>
+ <div class="col col3">none</div>
+ </div>
+
+ <div class="row row10">
+ <div class="col col1">
+ <p id="p15"><span id="p16">inline</span> has none, parent auto
+ </p>
+ </div>
+ <div class="col col2">p15</div>
+ <div class="col col3">none</div>
+ </div>
+
+</body>
+</html>
