<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>
      The 'pointer-events' property
    </title>
    <link href="CSSVisualEffects/base.css" rel="stylesheet" type="text/css">
    <style type="text/css">

    @media print {

    /* the following doesn't work for now,
    instead we rely on a patched version of html2ps which has this built-in */
    .dlink { display: none }

    /* the following doesn't work for now,
    instead we rely on a patched version of html2ps which has this built-in */
    div.navbar {
    display: none;
    }

    html { margin: 0 !important }
    body { font-family: serif }
    th, td { font-family: inherit }
    a { color: inherit !important }
    div.example:before { font-family: serif !important }
    pre.example:before { font-family: serif !important }
    a:link, a:visited { text-decoration: none !important }
    a:link:after, a:visited:after { /* create a cross-ref "see..." */ }
    }
    @page {
    margin: 1.5cm 1.1cm;
    }

    /* html body { margin-left: 8.5em } /* Overrides 70px in base.css */

    body {counter-reset: exampleno figure}

    h2, h3, h5, h6 { margin-top: 2em }
    h1, h2, h3, h4, h5, h6 { page-break-after: avoid; font-family: inherit }
    div.figure, div.sidefigure, pre, table.propdef, table.propdef-extra,
    div.example { page-break-inside: avoid }
    dt { page-break-after: avoid }

    span.id {float: right; font-weight: bold}

    /* p, p.note + p, p.testlink + p, p.note, p.issue { */
    p, p.testlink + p, p.issue, p.mtb {
    /* text-indent: 2em; */
    margin-bottom: 0.6em;
    margin-top: 0.6em
    }
    p + p, p + div.sidefigure + p {
    /* text-indent: 2em; */
    margin-top: 0
    }
    dd p {
    margin-top: 0
    }

    h1 + h2 {
    margin-top: 0;
    }

    pre {
    text-align: left; /* fixes justification in Mac IE 5 */
    text-indent: 0;   /* fixes indent in Mac Netscape 6 */
    margin-top: 1em;
    margin-bottom: 1em;
    font-size: 90% /*smaller*/;
    }
    /*
    var {
    font-style: normal;
    }
    */
    img {
    border-style: none;
    color: white;
    }
    .toc {
    text-indent: 0;
    }


    @media all { /* NS < 6 doesn't like borders around inline elements... */

    body {
    line-height: 1.3;
    }

    a:link, a:visited {
    /*        color: inherit;*/
    }
    a.logo:link, a.logo:visited {
    padding: 0;
    border-style: none;
    }

    /* Hmm, this seems to confuse many browsers... */
    dt { margin-left: 0; margin-top: 1em; color: #030; font-weight: bold;}
    dd { margin-left: 2em }
    dl, ul, ol { margin-left: 1em; padding-left: 0 }
    li { margin-left: 2em; padding-left: 0 }

    }
    ul.indexlist { margin-left: 0; /*column-width: 13em; columns: 13em*/ }
    ul.indexlist li { margin-left: 0; list-style: none }
    ul.indexlist li li { margin-left: 1em }

    div.example:before {
    content: "Example";
    content: "Example " counter(exampleno, upper-roman);
    font: bold small sans-serif;
    /*float: left;*/
    position: absolute;
    top: -0.6em;
    left: -2.5em;
    width: 7.5em;
    text-align: center;
    line-height: 1em;
    color: #FFF8DD;
    background: #600;
    padding: 0.1em;
    border: thin solid #999;
    /*margin: -1.3em 0 0.3em -2.5em;*/
    }
    div.example {
    counter-increment: exampleno;
    }
    pre.example:before {
    content: "Example";
    content: "Example " counter(exampleno, upper-roman);
    font: bold small sans-serif;
    /*float: left;*/
    position: absolute;
    top: -0.6em;
    left: -2.5em;
    width: 7.5em;
    text-align: center;
    line-height: 1em;
    color: #FFF8DD;
    background: #600;
    padding: 0.1em;
    border: thin solid #999;
    /*margin: -1.3em 0 0.3em -2.5em;*/
    }
    pre.example {
    counter-increment: exampleno;
    }
    div.example, div.illegal-example, div.html, div.illegal-html, div.xml,
    div.illegal-xml, pre.example, pre.illegal-example, pre.html,
    pre.illegal-html, pre.xml, pre.illegal-xml {
    background: #FFF8DD;
    padding: 0.5em;
    margin: 1em 0;
    border: thin solid #999;
    position: relative;
    }
    pre.example, pre.illegal-example, pre.html,
    pre.illegal-html, pre.xml, pre.illegal-xml {
    padding-top: 1.5em;
    }
    div.example { color: #600 }
    pre.example { color: #600 }
    pre.illegal-example { color: red }
    div.illegal-example { color: red }
    div.illegal-example p { color: black }

    div.html { color: #600 }
    pre.html { color: #600 }
    pre.illegal-html { color: red }
    div.illegal-html { color: red }
    div.illegal-html p { color: black }
    pre.deprecated-html { color: red }
    div.deprecated-html { color: red }
    div.deprecated-html p { color: black }

    div.xml { color: #600 }
    pre.xml { color: #600 }
    pre.illegal-xml { color: red }
    div.illegal-xml { color: red }
    div.illegal-xml p { color: black }

    code { font-size: 90% }
    .css { color: #800 }    /* inline CSS code (SPAN/CODE) */
    code.css { font-family: inherit; font-size: 100% }
    code.html { color: #600 } /* inline HTML */
    code.xml { color: #600 }  /* inline XML */
    .property { }     /* name of a CSS property (SPAN) */
    .prop-name { color: #2A2AA5; font-weight: bold; font-size: 90%} /* name of a CSS property (SPAN) */
    .prop-value { font-weight: bold; font-size: 90%} /* CSS property value (SPAN) */
    .descriptor { }     /* name of a CSS descriptor (SPAN) */
    .issue { color: #c00 }    /* editorial remark, open issue */
    .type { font-style: italic }  /* A <type> value for a property */

    dfn { font-weight: bolder; /*font-size: 1em*/ }

    /* Class note is a non-normative note. May be inline or a P or DIV */
    .note {
      /* font-weight: bold; */
      background-color: #cfc;
      margin-top: 2em;
      padding: 1em;
      border: 1px solid #6a6;
      border-left: 8px solid #6a6;
    }
    p.note, div.note {
    /* margin: 1em 2em; */
    }
    p.note:before, span.note:before { content: "\25B6" " " }
    div.note > p:first-child:before { content: "\25B6" " " }

    .normref { color: red } 
    .informref { color: green } 


    /* ToC not indented, but font style shows hierarchy */
    ul.toc {margin: 1em 0; padding: 0; font-weight: bold}
    ul.toc ul {margin: 0; padding: 0; font-weight: normal}
    ul.toc ul ul {margin: 0 /*0 0 2em*/; font-style: italic}
    ul.toc ul ul ul {margin: 0}
    ul.toc li {margin: 0.6em 0; padding: 0}
    ul.toc li li {margin: 0}
    /*
    ul.toc li li li, ul.toc li li li ul {margin-left: 0; display: inline}
    ul.toc li li li ul, ul.toc li li li ul li {margin-left: 0; display: inline}
    */

    @media all { /* NS4 doesn't align the floats properly :-( */

    /* Section numbers in a column of their own */
    ul.toc span.secno {margin-right: 1em} /* workaround for Opera6 */
    ul.toc span.secno {float: left; width: 4em; margin-left: -5em}
    /*ul.toc span.secno {text-align: right}*/
    ul.toc li {clear: both}
    ul.toc {margin-left: 5em}
    /* If we had 'tab', floats would not be needed here:
    ul.toc span.secno {tab: 5em right; margin-right: 1em}
    ul.toc li {text-indent: 5em hanging}
    The second line in case items wrap
    */
    }

    ul.index {
    list-style: disc;   /* Mac NS has problem with 'none' */
    list-style: none;
    }

    s, del {text-decoration: line-through; color: red}
    u, ins {text-decoration: underline; background: #bfa}

    div.figure, div.sidefigure {
    text-align: center;
    margin: 2.5em 0;
    }
    div.sidefigure {
    float: right;
    width: 50%;
    margin: 0 0 0.5em 0.5em
    }
    div.figure img, div.sidefigure img {
    display: block;
    margin: auto;
    max-width: 100%
    }
    p.caption, caption {
    text-align: center;
    font-style: italic;
    font-size: 90%;
    margin: 1.5em 2em;
    text-indent: 0;
    }
    p.caption:before {
    content: "Figure " counter(figure) ". ";
    font-weight: bold;
    }
    p.caption {
    counter-increment: figure;
    }

    /* DL list is indented, but figure inside it is not */
    dd { margin-left: 2em }
    dd div.figure { margin-left: -2em }

    sup {
    vertical-align: super;
    font-size: 80%
    }

    /* "Equations" (not real MathML, but simple HTML) are put in a
    blockquote and may have an equation number. We make sure the
    blockquote has enough margin on the right and then put the equation
    number there. */

    blockquote {
    margin: 0.5em 4em 0.5em 2em;
    text-indent: 0;
    }
    .eqno {
    text-align: right;
    float: right;
    width: 3em;
    margin: 0 -4em 0 0;
    font-weight: bold;
    /* background: silver; color: black; padding: 0.1em */
    }

    table.equiv-table { border-spacing: 0; margin: 0.5em 0 }
    table.equiv-table th, table.equiv-table td { padding: 0.3em }
    table.equiv-table th { text-align: left }
    /* table.equiv-table th:first-child { text-align: right } */
    table.equiv-table td, table.equiv-table th { border-bottom: thin solid #666 }
    table.equiv-table { border-bottom: hidden }
    table.equiv-table { empty-cells: show }
    table.equiv-table caption { margin: 0.5em 0 0 0 }

    /* Style for table of properties */
    table.proptable {
    font-size: small;
    border-collapse: collapse;
    border-spacing: 0;
    text-align: left;
    margin: 1em 0;
    }

    @media print {      /* Use the wide margin in print */
    table.proptable {margin: 1em 0 1em -8.5em}
    }

    table.proptable td, table.proptable th {
    padding: 0.4em;
    border-style: solid none none dotted;
    border-width: thin;
    border-color: red;
    }
    table.proptable th:first-child, table.proptable td:first-child {
    border-left-style: none;
    }


    /* Style for table that defines a property or a descriptor */
    table.propdef, table.propdef-extra, table.descdef {
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
    background: #DEF;
    margin-top: 1.2em;
    margin-bottom: 1.2em
    }
    table.propdef td, table.propdef-extra td, table.descdef td {
    padding: 0 0.3em;
    vertical-align: baseline;
    }
    /*
    table.propdef dfn, table.propdef-extra dfn, table.descdef dfn {
    font-weight: bold;
    font-style: normal
    }
    */
    table.propdef td:first-child,
    table.propdef-extra td:first-child,
    table.descdef td:first-child {
    font-style: italic;
    width: 8.1em
    }
    table.propdef td[colspan]:first-child,
    table.propdef-extra td[colspan]:first-child,
    table.descdef td[colspan]:first-child {
    font-style: inherit
    }
    table.propdef tr:first-child,
    table.propdef-extra tr:first-child,
    table.descdef tr:first-child {
    background: #005A9C;
    color: white
    }
    /* table.propdef tr:first-child td { padding-top: 0.1em; padding-bottom: 0.1em } */

    /* This would replace :first-child for Opera, but it confuses WinIE :-( */
    /*
    table.propdef td { width: 8em }
    table.propdef td + td { width: auto }
    table.propdef tr { background: #005A9C; color: white }
    table.propdef tr + tr { background: transparent; color: black }
    */

    /* CSS modules typically don't use MUST, SHOULD etc. from RFC 2119,
    or, if they do, they don't put them in uppercase. But the following
    class is provided in case a spec wants to use RFC 2119 terms in
    uppercase in the source. */

    em.rfc2119 {
    text-transform: lowercase;
    font-variant: small-caps;
    font-style: normal
    }

    /* In Profile specs, a table of required features: */

    table.features th {
    background: #00589f;
    color: #fff;
    text-align: left;
    padding: 0.2em 0.2em 0.2em 0.5em;
    }
    table.features td {
    vertical-align: top;
    border-bottom: 1px solid #ccc;
    padding: 0.3em 0.3em 0.3em 0.7em;
    }

    body { line-height: 1.4; }

    .issue, .todo {
    //display: none;
    margin: 1em;
    border: 2px solid;
    padding: 1em;
    }
    span.issue, span.todo {
    border-width: 1px;
    margin: 0; padding: 0;
    }
    .issue { border-color: red; }
    .todo  { border-color: yellow; }
    .issue:before, .todo:before {
    content: attr(class) ": ";
    text-transform: uppercase;
    font-weight: bold;
    }
    .issue { background: rgb(255,224,224); color: black; }
    .todo { background: rgb(255,255,192); color: black; }

    .syntax {
    padding: 1em;
    margin: 1em 0;
    border: 1px black solid;
    background: rgb(224,224,255);
    color: black;
    }
    .idl-code { 
    margin: 0;
    font-family: monospace;
    border: 1px solid black;
    color: black; 
    background-color: #dfdfdf;
    }

    table {
      border-collapse: collapse;
    }

    th {
      background-color: #dfdfdf;
    }
    
    td, th {
      text-align: left;
      padding: 0.2em 1em;
      border: 1px solid black;
    }
    
    </style>
  </head>
  <body>
    <h1>
      The 'pointer-events' property
    </h1>
    <h2>
      25 November 2008
    </h2>
    <dl>
      <dt>
        Authors:
      </dt>
      <dd>
        Dean Jackson (<a href="mailto:dino@apple.com">dino@apple.com</a>), <a href="http://www.apple.com/">Apple</a>
      </dd>
    </dl>
    <hr>

    <!-- ======================================================================================================= -->

    <div class="note">
      <p>
        NOTE: This document is a work-in-progress proposal. It should not be
        considered complete, nor does it represent the position of Apple or
        the WebKit project.
      </p>
      <p>
        For reference:
      </p>
      <ul>
        <li><a href="https://bugs.webkit.org/show_bug.cgi?id=11395">WebKit bug on implementation</a></li>
        <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=380573">Mozilla bug on implementation</a></li>
      </ul>
    </div>

    <h2>
      1 Introduction
    </h2>

    <p>
      This document describes how the <a
      href="http://www.w3.org/TR/SVG/interact.html#PointerEventsProperty">SVG
      pointer-events property</a> is extended for use in (X)HTML content.
    </p>

    <!-- ======================================================================================================= -->

    <h2>
      2 The <span class="prop-name">pointer-events</span> property
    </h2>
    
    <p>
      In different circumstances, authors may want to control under what
      circumstances particular elements can become the target of pointer
      events. For example, the author might want a given element to ignore
      pointer events under all circumstances so that elements underneath the
      given element will become the target of pointer events.
    </p>

    <p>
      The 'pointer-events' property specifies under what circumstances a given
      element can be the target element for a pointer event. It
      affects the circumstances under which the following are processed:
    </p>
    
    <ul>
      <li>user interface events such as mouse clicks</li>
      <li>dynamic pseudo-classes (i.e., :hover, :active and :focus)</li>
      <li>hyperlinks</li>
    </ul>
    
    <p>
      The <span class="prop-name">pointer-events</span> property was originally defined for <a
      href="http://www.w3.org/TR/SVG/interact.html#PointerEventsProperty">SVG content</a>
      and, as such, accepts property values specific to vector graphics (eg. relating to
      graphical fill and stroke). The following definition only applies to the property
      when used with HTML content. Note that the property has a new initial value, "auto",
      which behaves as "visiblePainted" in SVG content and "visible" in non-SVG content.
    </p>
    
    <div class="propdef">
      <dl>
        <dt><span class="prop-name">'pointer-events'</span></dt>
        <dd>
          <table summary="pointer-events property">
            <tr>
              <td><em>Value:</em></td>
              <td>
                auto | visible | none | visiblePainted | visibleFill | visibleStroke |
                painted | fill | stroke | all
              </td>
            </tr>
            <tr>
              <td><em>Initial:</em></td>
              <td>auto</td>
            </tr>
            <tr>
              <td><em>Applies to:</em></td>
              <td>all
              elements</td>
            </tr>
            <tr>
              <td><em>Inherited:</em></td>
              <td>yes</td>
            </tr>
            <tr>
              <td><em>Percentages:</em></td>
              <td>N/A</td>
            </tr>
            <tr>
              <td><em>Media:</em></td>
              <td>visual</td>
            </tr>
          </table>
        </dd>
      </dl>
    </div>
    <dl>
      <dt><span class="prop-value">auto</span></dt>
      <dd>
        In SVG content, behave as <span class="prop-value">visiblePainted</span>.
        Otherwise, behave as <span class="prop-value">visible</span>.
      </dd>
      <dt><span class="prop-value">visible</span></dt>
      <dd>
        The given element receives pointer events.
      </dd>
      <dt><span class="prop-value">none</span></dt>
      <dd>
        The given element does not receive pointer events.
      </dd>
      <dt><span class="prop-value">visiblePainted</span></dt>
      <dt><span class="prop-value">visibleFill</span></dt>
      <dt><span class="prop-value">visibleStroke</span></dt>
      <dt><span class="prop-value">painted</span></dt>
      <dt><span class="prop-value">fill</span></dt>
      <dt><span class="prop-value">stroke</span></dt>
      <dt><span class="prop-value">all</span></dt>
      <dd>
        In SVG content, behave as defined by the <a
        href="http://www.w3.org/TR/SVG/interact.html#PointerEventsProperty">SVG
        specification</a>. Otherwise, behave as <span
        class="prop-value">visible</span>.
      </dd>
    </dl>
    
    
  </body>
</html>