Move WebKitSite to Websites
[WebKit-https.git] / Websites / webkit.org / specs / PointerEventsProperty.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3 <html lang="en">
4   <head>
5     <meta http-equiv="Content-type" content="text/html; charset=utf-8">
6     <title>
7       The 'pointer-events' property
8     </title>
9     <link href="CSSVisualEffects/base.css" rel="stylesheet" type="text/css">
10     <style type="text/css">
11
12     @media print {
13
14     /* the following doesn't work for now,
15     instead we rely on a patched version of html2ps which has this built-in */
16     .dlink { display: none }
17
18     /* the following doesn't work for now,
19     instead we rely on a patched version of html2ps which has this built-in */
20     div.navbar {
21     display: none;
22     }
23
24     html { margin: 0 !important }
25     body { font-family: serif }
26     th, td { font-family: inherit }
27     a { color: inherit !important }
28     div.example:before { font-family: serif !important }
29     pre.example:before { font-family: serif !important }
30     a:link, a:visited { text-decoration: none !important }
31     a:link:after, a:visited:after { /* create a cross-ref "see..." */ }
32     }
33     @page {
34     margin: 1.5cm 1.1cm;
35     }
36
37     /* html body { margin-left: 8.5em } /* Overrides 70px in base.css */
38
39     body {counter-reset: exampleno figure}
40
41     h2, h3, h5, h6 { margin-top: 2em }
42     h1, h2, h3, h4, h5, h6 { page-break-after: avoid; font-family: inherit }
43     div.figure, div.sidefigure, pre, table.propdef, table.propdef-extra,
44     div.example { page-break-inside: avoid }
45     dt { page-break-after: avoid }
46
47     span.id {float: right; font-weight: bold}
48
49     /* p, p.note + p, p.testlink + p, p.note, p.issue { */
50     p, p.testlink + p, p.issue, p.mtb {
51     /* text-indent: 2em; */
52     margin-bottom: 0.6em;
53     margin-top: 0.6em
54     }
55     p + p, p + div.sidefigure + p {
56     /* text-indent: 2em; */
57     margin-top: 0
58     }
59     dd p {
60     margin-top: 0
61     }
62
63     h1 + h2 {
64     margin-top: 0;
65     }
66
67     pre {
68     text-align: left; /* fixes justification in Mac IE 5 */
69     text-indent: 0;   /* fixes indent in Mac Netscape 6 */
70     margin-top: 1em;
71     margin-bottom: 1em;
72     font-size: 90% /*smaller*/;
73     }
74     /*
75     var {
76     font-style: normal;
77     }
78     */
79     img {
80     border-style: none;
81     color: white;
82     }
83     .toc {
84     text-indent: 0;
85     }
86
87
88     @media all { /* NS < 6 doesn't like borders around inline elements... */
89
90     body {
91     line-height: 1.3;
92     }
93
94     a:link, a:visited {
95     /*        color: inherit;*/
96     }
97     a.logo:link, a.logo:visited {
98     padding: 0;
99     border-style: none;
100     }
101
102     /* Hmm, this seems to confuse many browsers... */
103     dt { margin-left: 0; margin-top: 1em; color: #030; font-weight: bold;}
104     dd { margin-left: 2em }
105     dl, ul, ol { margin-left: 1em; padding-left: 0 }
106     li { margin-left: 2em; padding-left: 0 }
107
108     }
109     ul.indexlist { margin-left: 0; /*column-width: 13em; columns: 13em*/ }
110     ul.indexlist li { margin-left: 0; list-style: none }
111     ul.indexlist li li { margin-left: 1em }
112
113     div.example:before {
114     content: "Example";
115     content: "Example " counter(exampleno, upper-roman);
116     font: bold small sans-serif;
117     /*float: left;*/
118     position: absolute;
119     top: -0.6em;
120     left: -2.5em;
121     width: 7.5em;
122     text-align: center;
123     line-height: 1em;
124     color: #FFF8DD;
125     background: #600;
126     padding: 0.1em;
127     border: thin solid #999;
128     /*margin: -1.3em 0 0.3em -2.5em;*/
129     }
130     div.example {
131     counter-increment: exampleno;
132     }
133     pre.example:before {
134     content: "Example";
135     content: "Example " counter(exampleno, upper-roman);
136     font: bold small sans-serif;
137     /*float: left;*/
138     position: absolute;
139     top: -0.6em;
140     left: -2.5em;
141     width: 7.5em;
142     text-align: center;
143     line-height: 1em;
144     color: #FFF8DD;
145     background: #600;
146     padding: 0.1em;
147     border: thin solid #999;
148     /*margin: -1.3em 0 0.3em -2.5em;*/
149     }
150     pre.example {
151     counter-increment: exampleno;
152     }
153     div.example, div.illegal-example, div.html, div.illegal-html, div.xml,
154     div.illegal-xml, pre.example, pre.illegal-example, pre.html,
155     pre.illegal-html, pre.xml, pre.illegal-xml {
156     background: #FFF8DD;
157     padding: 0.5em;
158     margin: 1em 0;
159     border: thin solid #999;
160     position: relative;
161     }
162     pre.example, pre.illegal-example, pre.html,
163     pre.illegal-html, pre.xml, pre.illegal-xml {
164     padding-top: 1.5em;
165     }
166     div.example { color: #600 }
167     pre.example { color: #600 }
168     pre.illegal-example { color: red }
169     div.illegal-example { color: red }
170     div.illegal-example p { color: black }
171
172     div.html { color: #600 }
173     pre.html { color: #600 }
174     pre.illegal-html { color: red }
175     div.illegal-html { color: red }
176     div.illegal-html p { color: black }
177     pre.deprecated-html { color: red }
178     div.deprecated-html { color: red }
179     div.deprecated-html p { color: black }
180
181     div.xml { color: #600 }
182     pre.xml { color: #600 }
183     pre.illegal-xml { color: red }
184     div.illegal-xml { color: red }
185     div.illegal-xml p { color: black }
186
187     code { font-size: 90% }
188     .css { color: #800 }    /* inline CSS code (SPAN/CODE) */
189     code.css { font-family: inherit; font-size: 100% }
190     code.html { color: #600 } /* inline HTML */
191     code.xml { color: #600 }  /* inline XML */
192     .property { }     /* name of a CSS property (SPAN) */
193     .prop-name { color: #2A2AA5; font-weight: bold; font-size: 90%} /* name of a CSS property (SPAN) */
194     .prop-value { font-weight: bold; font-size: 90%} /* CSS property value (SPAN) */
195     .descriptor { }     /* name of a CSS descriptor (SPAN) */
196     .issue { color: #c00 }    /* editorial remark, open issue */
197     .type { font-style: italic }  /* A <type> value for a property */
198
199     dfn { font-weight: bolder; /*font-size: 1em*/ }
200
201     /* Class note is a non-normative note. May be inline or a P or DIV */
202     .note {
203       /* font-weight: bold; */
204       background-color: #cfc;
205       margin-top: 2em;
206       padding: 1em;
207       border: 1px solid #6a6;
208       border-left: 8px solid #6a6;
209     }
210     p.note, div.note {
211     /* margin: 1em 2em; */
212     }
213     p.note:before, span.note:before { content: "\25B6" " " }
214     div.note > p:first-child:before { content: "\25B6" " " }
215
216     .normref { color: red } 
217     .informref { color: green } 
218
219
220     /* ToC not indented, but font style shows hierarchy */
221     ul.toc {margin: 1em 0; padding: 0; font-weight: bold}
222     ul.toc ul {margin: 0; padding: 0; font-weight: normal}
223     ul.toc ul ul {margin: 0 /*0 0 2em*/; font-style: italic}
224     ul.toc ul ul ul {margin: 0}
225     ul.toc li {margin: 0.6em 0; padding: 0}
226     ul.toc li li {margin: 0}
227     /*
228     ul.toc li li li, ul.toc li li li ul {margin-left: 0; display: inline}
229     ul.toc li li li ul, ul.toc li li li ul li {margin-left: 0; display: inline}
230     */
231
232     @media all { /* NS4 doesn't align the floats properly :-( */
233
234     /* Section numbers in a column of their own */
235     ul.toc span.secno {margin-right: 1em} /* workaround for Opera6 */
236     ul.toc span.secno {float: left; width: 4em; margin-left: -5em}
237     /*ul.toc span.secno {text-align: right}*/
238     ul.toc li {clear: both}
239     ul.toc {margin-left: 5em}
240     /* If we had 'tab', floats would not be needed here:
241     ul.toc span.secno {tab: 5em right; margin-right: 1em}
242     ul.toc li {text-indent: 5em hanging}
243     The second line in case items wrap
244     */
245     }
246
247     ul.index {
248     list-style: disc;   /* Mac NS has problem with 'none' */
249     list-style: none;
250     }
251
252     s, del {text-decoration: line-through; color: red}
253     u, ins {text-decoration: underline; background: #bfa}
254
255     div.figure, div.sidefigure {
256     text-align: center;
257     margin: 2.5em 0;
258     }
259     div.sidefigure {
260     float: right;
261     width: 50%;
262     margin: 0 0 0.5em 0.5em
263     }
264     div.figure img, div.sidefigure img {
265     display: block;
266     margin: auto;
267     max-width: 100%
268     }
269     p.caption, caption {
270     text-align: center;
271     font-style: italic;
272     font-size: 90%;
273     margin: 1.5em 2em;
274     text-indent: 0;
275     }
276     p.caption:before {
277     content: "Figure " counter(figure) ". ";
278     font-weight: bold;
279     }
280     p.caption {
281     counter-increment: figure;
282     }
283
284     /* DL list is indented, but figure inside it is not */
285     dd { margin-left: 2em }
286     dd div.figure { margin-left: -2em }
287
288     sup {
289     vertical-align: super;
290     font-size: 80%
291     }
292
293     /* "Equations" (not real MathML, but simple HTML) are put in a
294     blockquote and may have an equation number. We make sure the
295     blockquote has enough margin on the right and then put the equation
296     number there. */
297
298     blockquote {
299     margin: 0.5em 4em 0.5em 2em;
300     text-indent: 0;
301     }
302     .eqno {
303     text-align: right;
304     float: right;
305     width: 3em;
306     margin: 0 -4em 0 0;
307     font-weight: bold;
308     /* background: silver; color: black; padding: 0.1em */
309     }
310
311     table.equiv-table { border-spacing: 0; margin: 0.5em 0 }
312     table.equiv-table th, table.equiv-table td { padding: 0.3em }
313     table.equiv-table th { text-align: left }
314     /* table.equiv-table th:first-child { text-align: right } */
315     table.equiv-table td, table.equiv-table th { border-bottom: thin solid #666 }
316     table.equiv-table { border-bottom: hidden }
317     table.equiv-table { empty-cells: show }
318     table.equiv-table caption { margin: 0.5em 0 0 0 }
319
320     /* Style for table of properties */
321     table.proptable {
322     font-size: small;
323     border-collapse: collapse;
324     border-spacing: 0;
325     text-align: left;
326     margin: 1em 0;
327     }
328
329     @media print {      /* Use the wide margin in print */
330     table.proptable {margin: 1em 0 1em -8.5em}
331     }
332
333     table.proptable td, table.proptable th {
334     padding: 0.4em;
335     border-style: solid none none dotted;
336     border-width: thin;
337     border-color: red;
338     }
339     table.proptable th:first-child, table.proptable td:first-child {
340     border-left-style: none;
341     }
342
343
344     /* Style for table that defines a property or a descriptor */
345     table.propdef, table.propdef-extra, table.descdef {
346     border-spacing: 0;
347     border-collapse: collapse;
348     width: 100%;
349     table-layout: fixed;
350     background: #DEF;
351     margin-top: 1.2em;
352     margin-bottom: 1.2em
353     }
354     table.propdef td, table.propdef-extra td, table.descdef td {
355     padding: 0 0.3em;
356     vertical-align: baseline;
357     }
358     /*
359     table.propdef dfn, table.propdef-extra dfn, table.descdef dfn {
360     font-weight: bold;
361     font-style: normal
362     }
363     */
364     table.propdef td:first-child,
365     table.propdef-extra td:first-child,
366     table.descdef td:first-child {
367     font-style: italic;
368     width: 8.1em
369     }
370     table.propdef td[colspan]:first-child,
371     table.propdef-extra td[colspan]:first-child,
372     table.descdef td[colspan]:first-child {
373     font-style: inherit
374     }
375     table.propdef tr:first-child,
376     table.propdef-extra tr:first-child,
377     table.descdef tr:first-child {
378     background: #005A9C;
379     color: white
380     }
381     /* table.propdef tr:first-child td { padding-top: 0.1em; padding-bottom: 0.1em } */
382
383     /* This would replace :first-child for Opera, but it confuses WinIE :-( */
384     /*
385     table.propdef td { width: 8em }
386     table.propdef td + td { width: auto }
387     table.propdef tr { background: #005A9C; color: white }
388     table.propdef tr + tr { background: transparent; color: black }
389     */
390
391     /* CSS modules typically don't use MUST, SHOULD etc. from RFC 2119,
392     or, if they do, they don't put them in uppercase. But the following
393     class is provided in case a spec wants to use RFC 2119 terms in
394     uppercase in the source. */
395
396     em.rfc2119 {
397     text-transform: lowercase;
398     font-variant: small-caps;
399     font-style: normal
400     }
401
402     /* In Profile specs, a table of required features: */
403
404     table.features th {
405     background: #00589f;
406     color: #fff;
407     text-align: left;
408     padding: 0.2em 0.2em 0.2em 0.5em;
409     }
410     table.features td {
411     vertical-align: top;
412     border-bottom: 1px solid #ccc;
413     padding: 0.3em 0.3em 0.3em 0.7em;
414     }
415
416     body { line-height: 1.4; }
417
418     .issue, .todo {
419     //display: none;
420     margin: 1em;
421     border: 2px solid;
422     padding: 1em;
423     }
424     span.issue, span.todo {
425     border-width: 1px;
426     margin: 0; padding: 0;
427     }
428     .issue { border-color: red; }
429     .todo  { border-color: yellow; }
430     .issue:before, .todo:before {
431     content: attr(class) ": ";
432     text-transform: uppercase;
433     font-weight: bold;
434     }
435     .issue { background: rgb(255,224,224); color: black; }
436     .todo { background: rgb(255,255,192); color: black; }
437
438     .syntax {
439     padding: 1em;
440     margin: 1em 0;
441     border: 1px black solid;
442     background: rgb(224,224,255);
443     color: black;
444     }
445     .idl-code { 
446     margin: 0;
447     font-family: monospace;
448     border: 1px solid black;
449     color: black; 
450     background-color: #dfdfdf;
451     }
452
453     table {
454       border-collapse: collapse;
455     }
456
457     th {
458       background-color: #dfdfdf;
459     }
460     
461     td, th {
462       text-align: left;
463       padding: 0.2em 1em;
464       border: 1px solid black;
465     }
466     
467     </style>
468   </head>
469   <body>
470     <h1>
471       The 'pointer-events' property
472     </h1>
473     <h2>
474       25 November 2008
475     </h2>
476     <dl>
477       <dt>
478         Authors:
479       </dt>
480       <dd>
481         Dean Jackson (<a href="mailto:dino@apple.com">dino@apple.com</a>), <a href="http://www.apple.com/">Apple</a>
482       </dd>
483     </dl>
484     <hr>
485
486     <!-- ======================================================================================================= -->
487
488     <div class="note">
489       <p>
490         NOTE: This document is a work-in-progress proposal. It should not be
491         considered complete, nor does it represent the position of Apple or
492         the WebKit project.
493       </p>
494       <p>
495         For reference:
496       </p>
497       <ul>
498         <li><a href="https://bugs.webkit.org/show_bug.cgi?id=11395">WebKit bug on implementation</a></li>
499         <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=380573">Mozilla bug on implementation</a></li>
500       </ul>
501     </div>
502
503     <h2>
504       1 Introduction
505     </h2>
506
507     <p>
508       This document describes how the <a
509       href="http://www.w3.org/TR/SVG/interact.html#PointerEventsProperty">SVG
510       pointer-events property</a> is extended for use in (X)HTML content.
511     </p>
512
513     <!-- ======================================================================================================= -->
514
515     <h2>
516       2 The <span class="prop-name">pointer-events</span> property
517     </h2>
518     
519     <p>
520       In different circumstances, authors may want to control under what
521       circumstances particular elements can become the target of pointer
522       events. For example, the author might want a given element to ignore
523       pointer events under all circumstances so that elements underneath the
524       given element will become the target of pointer events.
525     </p>
526
527     <p>
528       The 'pointer-events' property specifies under what circumstances a given
529       element can be the target element for a pointer event. It
530       affects the circumstances under which the following are processed:
531     </p>
532     
533     <ul>
534       <li>user interface events such as mouse clicks</li>
535       <li>dynamic pseudo-classes (i.e., :hover, :active and :focus)</li>
536       <li>hyperlinks</li>
537     </ul>
538     
539     <p>
540       The <span class="prop-name">pointer-events</span> property was originally defined for <a
541       href="http://www.w3.org/TR/SVG/interact.html#PointerEventsProperty">SVG content</a>
542       and, as such, accepts property values specific to vector graphics (eg. relating to
543       graphical fill and stroke). The following definition only applies to the property
544       when used with HTML content. Note that the property has a new initial value, "auto",
545       which behaves as "visiblePainted" in SVG content and "visible" in non-SVG content.
546     </p>
547     
548     <div class="propdef">
549       <dl>
550         <dt><span class="prop-name">'pointer-events'</span></dt>
551         <dd>
552           <table summary="pointer-events property">
553             <tr>
554               <td><em>Value:</em></td>
555               <td>
556                 auto | visible | none | visiblePainted | visibleFill | visibleStroke |
557                 painted | fill | stroke | all
558               </td>
559             </tr>
560             <tr>
561               <td><em>Initial:</em></td>
562               <td>auto</td>
563             </tr>
564             <tr>
565               <td><em>Applies to:</em></td>
566               <td>all
567               elements</td>
568             </tr>
569             <tr>
570               <td><em>Inherited:</em></td>
571               <td>yes</td>
572             </tr>
573             <tr>
574               <td><em>Percentages:</em></td>
575               <td>N/A</td>
576             </tr>
577             <tr>
578               <td><em>Media:</em></td>
579               <td>visual</td>
580             </tr>
581           </table>
582         </dd>
583       </dl>
584     </div>
585     <dl>
586       <dt><span class="prop-value">auto</span></dt>
587       <dd>
588         In SVG content, behave as <span class="prop-value">visiblePainted</span>.
589         Otherwise, behave as <span class="prop-value">visible</span>.
590       </dd>
591       <dt><span class="prop-value">visible</span></dt>
592       <dd>
593         The given element receives pointer events.
594       </dd>
595       <dt><span class="prop-value">none</span></dt>
596       <dd>
597         The given element does not receive pointer events.
598       </dd>
599       <dt><span class="prop-value">visiblePainted</span></dt>
600       <dt><span class="prop-value">visibleFill</span></dt>
601       <dt><span class="prop-value">visibleStroke</span></dt>
602       <dt><span class="prop-value">painted</span></dt>
603       <dt><span class="prop-value">fill</span></dt>
604       <dt><span class="prop-value">stroke</span></dt>
605       <dt><span class="prop-value">all</span></dt>
606       <dd>
607         In SVG content, behave as defined by the <a
608         href="http://www.w3.org/TR/SVG/interact.html#PointerEventsProperty">SVG
609         specification</a>. Otherwise, behave as <span
610         class="prop-value">visible</span>.
611       </dd>
612     </dl>
613     
614     
615   </body>
616 </html>