pointer-events.html [plain text]

<!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 in HTML</title>
  <style type="text/css" media="screen">
  #a {
    pointer-events: auto;
    background: #88f;
  }

  #a:hover {
    background: green;
  }
  
  #b {
    pointer-events: none;
    background: #88f;
  }
  
  #b:hover {
    background: red;
  }

  #c {
    pointer-events: auto;
    background: #88f;
  }

  #c span {
    pointer-events: none;
    background: #8ff;
  }

  #c:hover {
    background: green;
  }

  #d {
    pointer-events: none;
    background: #88f;
  }

  #d span {
    pointer-events: auto;
    padding: 0 10px;
    background: #8ff;
  }

  #d:hover {
    background: gray;
  }

  #e {
    padding: 10px;
    pointer-events: none;
    background: #88f;
  }

  #e div {
    pointer-events: auto;
    background: #8ff;
  }

  #e:hover {
    background: gray;
  }

  #e div:hover {
    background: green;
  }

  #f, #g, #h, #i, #k, #m {
    padding: 10px;
    background: #88f;
  }

  #f {
    pointer-events: auto;
  }
  
  #f:hover {
    background: green;
  }

  #g {
    pointer-events: none;
  }
  
  #g:hover {
    background: red;
  }

  #h {
    pointer-events: auto;
  }
  
  #h:hover {
    background: green;
  }

  #i {
    pointer-events: none;
  }
  
  #i:hover {
    background: red;
  }

  #j {
    background: #88f;
    pointer-events: none;
  }

  #j:hover {
    background: gray;
  }

  #k {
    pointer-events: auto;
  }
  
  #k:hover {
    background: green;
  }

  #l {
    background: #88f;
    pointer-events: auto;
  }

  #l:hover {
    background: green;
  }

  #m {
    pointer-events: none;
  }
  
  #m:hover {
    background: red;
  }

  </style>
  
</head>
<body>
  <h1>Testing 'pointer-events' property in HTML</h1>

  <p id="a">This whole paragraph SHOULD change background when hovered</p>

  <p id="b">This whole paragraph SHOULD NOT change background when hovered</p>

  <p id="c">This paragraph SHOULD change background when hovered anywhere including
    <span>this inline text</span> even though the inline text ignores pointer events.</p>

  <p id="d">This paragraph SHOULD NOT change when the pointer is over only it but
    <span>this inline text</span> SHOULD change and cause the parent to change also.</p>

  <div id="e">This paragraph SHOULD NOT change when the pointer is over only it (not the child)
    <div>This child element SHOULD change and cause the parent to change also</div>
  </div>

  <p>
    The following image SHOULD change when the pointer is over it.
  </p>

  <img id="f" src="../../LayoutTests/media/content/abe.png">

  <p>
    The following image SHOULD NOT change when the pointer is over it.
  </p>

  <img id="g" src="../../LayoutTests/media/content/abe.png">

  <p>
    The following image SHOULD change when the pointer is over it. It is inline
    with this paragraph.
    <img id="h" src="../../LayoutTests/media/content/abe.png">
  </p>

  <p>
    The following image SHOULD NOT change when the pointer is over it. It is inline
    with this paragraph.
    <img id="i" src="../../LayoutTests/media/content/abe.png">
  </p>

  <p id="j">
    This paragraph SHOULD NOT change when the pointer is over only it, but the child
    image SHOULD react and cause the parent to change.
    <img id="k" src="../../LayoutTests/media/content/abe.png">
  </p>

  <p id="l">
    This paragraph SHOULD change when the pointer is over it, but the child
    image SHOULD NOT react.
    <img id="m" src="../../LayoutTests/media/content/abe.png">
  </p>

  
</body>
</html>