Commit 563bd1f6 authored by dino@apple.com's avatar dino@apple.com

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
parent 88c83c2e
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. The new tests exercise 'auto' and 'none'
on HTML content. The SVG tests have been updated to include
'auto'
https://bugs.webkit.org/show_bug.cgi?id=11395
* fast/css/computed-style-expected.txt:
* fast/css/computed-style-without-renderer-expected.txt:
* fast/events/pointer-events-2-expected.txt: Added.
* fast/events/pointer-events-2.html: Added.
* fast/events/pointer-events-expected.txt: Added.
* fast/events/pointer-events.html: Added.
* platform/mac/svg/custom/pointer-events-image-expected.checksum:
* platform/mac/svg/custom/pointer-events-image-expected.png:
* platform/mac/svg/custom/pointer-events-image-expected.txt:
* platform/mac/svg/custom/pointer-events-path-expected.checksum:
* platform/mac/svg/custom/pointer-events-path-expected.png:
* platform/mac/svg/custom/pointer-events-path-expected.txt:
* platform/mac/svg/custom/pointer-events-text-expected.checksum:
* platform/mac/svg/custom/pointer-events-text-expected.png:
* platform/mac/svg/custom/pointer-events-text-expected.txt:
* svg/css/getComputedStyle-basic-expected.txt:
* svg/custom/pointer-events-image.svg:
* svg/custom/pointer-events-path.svg:
* svg/custom/pointer-events-text.svg:
2009-01-05 Darin Adler <darin@apple.com>
Reviewed by Oliver Hunt.
......
......@@ -61,6 +61,7 @@ padding-top: 0px;
page-break-after: auto;
page-break-before: auto;
page-break-inside: auto;
pointer-events: auto;
position: static;
resize: none;
right: auto;
......@@ -165,7 +166,6 @@ flood-opacity: 1;
lighting-color: rgb(255, 255, 255);
stop-color: rgb(0, 0, 0);
stop-opacity: 1;
pointer-events: visiblepainted;
color-interpolation: srgb;
color-interpolation-filters: linearrgb;
color-rendering: auto;
......
......@@ -60,6 +60,7 @@ Computed style of an element whose parent's 'display' value is 'none':
page-break-after: auto
page-break-before: auto
page-break-inside: auto
pointer-events: auto
position: static
resize: none
right: auto
......@@ -164,7 +165,6 @@ Computed style of an element whose parent's 'display' value is 'none':
lighting-color: rgb(255, 255, 255)
stop-color: rgb(0, 0, 0)
stop-opacity: 1
pointer-events: visiblepainted
color-interpolation: srgb
color-interpolation-filters: linearrgb
color-rendering: auto
......
layer at (0,0) size 785x640
RenderView at (0,0) size 785x600
layer at (0,0) size 785x167
RenderBlock {HTML} at (0,0) size 785x167
RenderBody {BODY} at (8,21) size 769x130
RenderBlock {H1} at (0,0) size 769x37
RenderText {#text} at (0,0) size 759x37
text run at (0,0) width 759: "Testing the values of 'pointer-events' on HTML content"
RenderBlock {P} at (0,58) size 769x72
RenderText {#text} at (0,0) size 768x72
text run at (0,0) width 579: "This test is expected to be run from within DumpRenderTree. If running manually, click on "
text run at (579,0) width 145: "the elements in the first"
text run at (0,18) width 379: "column, making sure the actual result (3rd column) matches "
text run at (379,18) width 382: "the expected result (2nd column). Repeat for click target (4th"
text run at (0,36) width 243: "column), expected result (5th column) "
text run at (243,36) width 525: "and actual result (6th column). Note: You should click on a yellow inline element if"
text run at (0,54) width 268: "one exists, otherwise anywhere in the box."
layer at (10,140) size 300x100
RenderBlock (positioned) {DIV} at (10,140) size 300x100
layer at (10,140) size 80x80
RenderBlock (positioned) {DIV} at (0,0) size 80x80
layer at (10,140) size 80x80
RenderBlock (positioned) {P} at (0,0) size 80x80 [bgcolor=#808080]
RenderText {#text} at (0,0) size 71x36
text run at (0,0) width 49: "pointer-"
text run at (0,18) width 71: "events auto"
layer at (110,140) size 80x80
RenderBlock (positioned) {DIV} at (100,0) size 80x80
RenderText {#text} at (0,0) size 16x18
text run at (0,0) width 16: "p1"
layer at (210,140) size 80x80
RenderBlock (positioned) {DIV} at (200,0) size 80x80
RenderText {#text} at (0,0) size 16x18
text run at (0,0) width 16: "p1"
layer at (10,240) size 300x100
RenderBlock (positioned) {DIV} at (10,240) size 300x100
layer at (10,240) size 80x80
RenderBlock (positioned) {DIV} at (0,0) size 80x80
layer at (10,240) size 80x80
RenderBlock (positioned) {P} at (0,0) size 80x80 [bgcolor=#808080]
RenderText {#text} at (0,0) size 75x36
text run at (0,0) width 49: "pointer-"
text run at (0,18) width 75: "events none"
layer at (110,240) size 80x80
RenderBlock (positioned) {DIV} at (100,0) size 80x80
RenderText {#text} at (0,0) size 31x18
text run at (0,0) width 31: "none"
layer at (210,240) size 80x80
RenderBlock (positioned) {DIV} at (200,0) size 80x80
RenderText {#text} at (0,0) size 31x18
text run at (0,0) width 31: "none"
layer at (10,340) size 300x100
RenderBlock (positioned) {DIV} at (10,340) size 300x100
layer at (10,340) size 80x80
RenderBlock (positioned) {DIV} at (0,0) size 80x80
layer at (10,340) size 80x80
RenderBlock (positioned) {P} at (0,0) size 80x80 [bgcolor=#808080]
RenderText {#text} at (0,0) size 71x36
text run at (0,0) width 57: "siblings -"
text run at (0,18) width 71: "auto on top"
layer at (10,340) size 80x80
RenderBlock (positioned) {P} at (0,0) size 80x80
layer at (110,340) size 80x80
RenderBlock (positioned) {DIV} at (100,0) size 80x80
RenderText {#text} at (0,0) size 16x18
text run at (0,0) width 16: "p4"
layer at (210,340) size 80x80
RenderBlock (positioned) {DIV} at (200,0) size 80x80
RenderText {#text} at (0,0) size 16x18
text run at (0,0) width 16: "p4"
layer at (10,440) size 300x100
RenderBlock (positioned) {DIV} at (10,440) size 300x100
layer at (10,440) size 80x80
RenderBlock (positioned) {DIV} at (0,0) size 80x80
layer at (10,440) size 80x80
RenderBlock (positioned) {P} at (0,0) size 80x80 [bgcolor=#808080]
RenderText {#text} at (0,0) size 75x36
text run at (0,0) width 57: "siblings -"
text run at (0,18) width 75: "none on top"
layer at (10,440) size 80x80
RenderBlock (positioned) {P} at (0,0) size 80x80
layer at (110,440) size 80x80
RenderBlock (positioned) {DIV} at (100,0) size 80x80
RenderText {#text} at (0,0) size 16x18
text run at (0,0) width 16: "p5"
layer at (210,440) size 80x80
RenderBlock (positioned) {DIV} at (200,0) size 80x80
RenderText {#text} at (0,0) size 16x18
text run at (0,0) width 16: "p5"
layer at (10,540) size 300x100
RenderBlock (positioned) {DIV} at (10,540) size 300x100
layer at (10,540) size 80x80
RenderBlock (positioned) {DIV} at (0,0) size 80x80
layer at (10,540) size 80x80
RenderBlock (positioned) {DIV} at (0,0) size 80x80
layer at (10,540) size 80x80
RenderBlock (positioned) {P} at (0,0) size 80x80 [bgcolor=#808080]
RenderText {#text} at (0,0) size 80x36
text run at (0,0) width 80: "nested - auto"
text run at (0,18) width 32: "outer"
layer at (110,540) size 80x80
RenderBlock (positioned) {DIV} at (100,0) size 80x80
RenderText {#text} at (0,0) size 16x18
text run at (0,0) width 16: "p7"
layer at (210,540) size 80x80
RenderBlock (positioned) {DIV} at (200,0) size 80x80
RenderText {#text} at (0,0) size 16x18
text run at (0,0) width 16: "p7"
layer at (340,140) size 300x100
RenderBlock (positioned) {DIV} at (340,140) size 300x100
layer at (340,140) size 80x80
RenderBlock (positioned) {DIV} at (0,0) size 80x80
layer at (340,140) size 80x80
RenderBlock (positioned) {DIV} at (0,0) size 80x80
layer at (340,140) size 80x80
RenderBlock (positioned) {P} at (0,0) size 80x80 [bgcolor=#808080]
RenderText {#text} at (0,0) size 67x36
text run at (0,0) width 49: "nested -"
text run at (0,18) width 67: "none outer"
layer at (440,140) size 80x80
RenderBlock (positioned) {DIV} at (100,0) size 80x80
RenderText {#text} at (0,0) size 24x18
text run at (0,0) width 24: "p10"
layer at (540,140) size 80x80
RenderBlock (positioned) {DIV} at (200,0) size 80x80
RenderText {#text} at (0,0) size 24x18
text run at (0,0) width 24: "p10"
layer at (340,240) size 300x100
RenderBlock (positioned) {DIV} at (340,240) size 300x100
layer at (340,240) size 80x80
RenderBlock (positioned) {DIV} at (0,0) size 80x80
layer at (340,240) size 80x80
RenderImage {IMG} at (0,0) size 80x80
layer at (440,240) size 80x80
RenderBlock (positioned) {DIV} at (100,0) size 80x80
RenderText {#text} at (0,0) size 24x18
text run at (0,0) width 24: "p11"
layer at (540,240) size 80x80
RenderBlock (positioned) {DIV} at (200,0) size 80x80
RenderText {#text} at (0,0) size 24x18
text run at (0,0) width 24: "p11"
layer at (340,340) size 300x100
RenderBlock (positioned) {DIV} at (340,340) size 300x100
layer at (340,340) size 80x80
RenderBlock (positioned) {DIV} at (0,0) size 80x80
layer at (340,340) size 80x80
RenderImage {IMG} at (0,0) size 80x80
layer at (440,340) size 80x80
RenderBlock (positioned) {DIV} at (100,0) size 80x80
RenderText {#text} at (0,0) size 31x18
text run at (0,0) width 31: "none"
layer at (540,340) size 80x80
RenderBlock (positioned) {DIV} at (200,0) size 80x80
RenderText {#text} at (0,0) size 31x18
text run at (0,0) width 31: "none"
layer at (340,440) size 300x100
RenderBlock (positioned) {DIV} at (340,440) size 300x100
layer at (340,440) size 80x80
RenderBlock (positioned) {DIV} at (0,0) size 80x80
layer at (340,440) size 80x80
RenderBlock (positioned) {P} at (0,0) size 80x80 [bgcolor=#808080]
RenderInline {SPAN} at (0,0) size 35x18 [bgcolor=#FFFF00]
RenderText {#text} at (0,0) size 35x18
text run at (0,0) width 35: "inline"
RenderText {#text} at (35,0) size 74x54
text run at (35,0) width 25: " has"
text run at (0,18) width 74: "auto, parent"
text run at (0,36) width 31: "none"
layer at (440,440) size 80x80
RenderBlock (positioned) {DIV} at (100,0) size 80x80
RenderText {#text} at (0,0) size 24x18
text run at (0,0) width 24: "p14"
layer at (540,440) size 80x80
RenderBlock (positioned) {DIV} at (200,0) size 80x80
RenderText {#text} at (0,0) size 24x18
text run at (0,0) width 24: "p14"
layer at (340,540) size 300x100
RenderBlock (positioned) {DIV} at (340,540) size 300x100
layer at (340,540) size 80x80
RenderBlock (positioned) {DIV} at (0,0) size 80x80
layer at (340,540) size 80x80
RenderBlock (positioned) {P} at (0,0) size 80x80 [bgcolor=#808080]
RenderInline {SPAN} at (0,0) size 35x18 [bgcolor=#FFFF00]
RenderText {#text} at (0,0) size 35x18
text run at (0,0) width 35: "inline"
RenderText {#text} at (35,0) size 78x54
text run at (35,0) width 25: " has"
text run at (0,18) width 78: "none, parent"
text run at (0,36) width 27: "auto"
layer at (440,540) size 80x80
RenderBlock (positioned) {DIV} at (100,0) size 80x80
RenderText {#text} at (0,0) size 24x18
text run at (0,0) width 24: "p15"
layer at (540,540) size 80x80
RenderBlock (positioned) {DIV} at (200,0) size 80x80
RenderText {#text} at (0,0) size 24x18
text run at (0,0) width 24: "p15"
caret: position 1 of child 0 {#text} of child 0 {SPAN} of child 1 {P} of child 1 {DIV} of child 23 {DIV} of child 1 {BODY} of child 1 {HTML} of document
<!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>
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x105
RenderBlock {HTML} at (0,0) size 800x105
RenderBody {BODY} at (8,21) size 784x76
RenderBlock {H1} at (0,0) size 784x37
RenderText {#text} at (0,0) size 759x37
text run at (0,0) width 759: "Testing the values of 'pointer-events' on HTML content"
RenderBlock {DIV} at (0,58) size 784x18
RenderText {#text} at (0,0) size 448x18
text run at (0,0) width 448: "The labels on the left will be clicked and the result is shown to the right"
RenderBlock {DIV} at (0,76) size 784x0
layer at (10,120) size 100x30
RenderBlock (positioned) {P} at (10,120) size 100x30
RenderText {#text} at (0,0) size 35x23
text run at (0,0) width 35: "auto"
layer at (140,120) size 100x30
RenderBlock (positioned) {P} at (140,120) size 100x30
RenderText {#text} at (0,0) size 33x23
text run at (0,0) width 33: "HIT"
layer at (10,160) size 100x30
RenderBlock (positioned) {P} at (10,160) size 100x30
RenderText {#text} at (0,0) size 39x23
text run at (0,0) width 39: "none"
layer at (140,160) size 100x30
RenderBlock (positioned) {P} at (140,160) size 100x30
RenderText {#text} at (0,0) size 38x23
text run at (0,0) width 38: "miss"
caret: position 0 of child 0 {#text} of child 1 {P} of child 5 {DIV} of child 1 {BODY} of child 1 {HTML} of document
<!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">
p {
position: absolute;
width: 100px;
height: 30px;
margin: 0;
padding: 0;
font-size: 20px;
}
</style>
<script>
if (window.layoutTestController)
layoutTestController.waitUntilDone();