Attachment 24791 Details for Bug 21941 – Testcase to exercise most of the absolutePosition code paths

Testcase to exercise most of the absolutePosition code paths

offsetX-offsetY.html (text/html), 5.94 KB, created by Simon Fraser (smfr) on 2008-10-30 21:21:57 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Simon Fraser (smfr)

Created: 2008-10-30 21:21:57 PDT

Size: 5.94 KB

patch

obsolete

><html>
><head>
>  <title>Test offsetX/offsetY on various types of elements</title>
>  <script type="text/javascript" charset="utf-8">
>    if (window.layoutTestController) {
>        layoutTestController.dumpAsText();
>        layoutTestController.waitUntilDone();
>    }
>
>    function mousemoved(e)
>    {
>      var resultBox = document.getElementById('mousepos');
>      var offsets = 'element id: ' + e.target.id + '<br> clientX: ' + e.clientX + ' clientY: ' + e.clientY + '<br>';
>      offsets += 'offsetX: ' + e.offsetX + ' offsetY: ' + e.offsetY;
>      resultBox.innerHTML = offsets;
>    }
>
>    function log(s)
>    {
>      var resultsDiv = document.getElementById('results');
>      resultsDiv.innerHTML += s + '<br>';
>    }
>    
>    function test()
>    {
>      // Scroll so that frame view offsets are non-zero
>      window.scrollTo(20, 100);
>
>      document.getElementById('overflow').scrollLeft = 80;
>      document.getElementById('overflow').scrollTop = 60;
>      
>      // In non-test mode, show the mouse coords for testing
>      if (!window.layoutTestController)
>        document.body.addEventListener('mousemove', mousemoved, false);
>
>      dispatchEvent(111, 224, 'abs-box', 31, 124);
>      dispatchEvent(162, 112, 'rel-box', 27, 29);
>      dispatchEvent(406, 107, 'fixed-box', 6, 7);
>      dispatchEvent(94, 400, 'with-bordertopextra', 62, 12);
>      // dispatchEvent(639, 316, 'in-columns', 173, -172);  // This is buggy. See https://bugs.webkit.org/show_bug.cgi?id=21993
>      dispatchEvent(457, 466, 'overflow-contents', 72, 74);
>            
>      if (window.layoutTestController)
>        layoutTestController.notifyDone();
>    }
>    
>    function dispatchEvent(clientX, clientY, expectedElementID, expectedOffsetX, expectedOffsetY)
>    {
>      var ev = document.createEvent("MouseEvent");
>      ev.initMouseEvent("click", true, true, window, 1, 1, 1, clientX, clientY, false, false, false, false, 0, document);
>      ev.expectedElement = expectedElementID;
>      ev.expectedOffsetX = expectedOffsetX;
>      ev.expectedOffsetY = expectedOffsetY;
>      var target = document.elementFromPoint(ev.pageX, ev.pageY);
>      target.dispatchEvent(ev);
>    }
>
>    function clicked(event)
>    {
>      var element = event.target;
>      
>      var result;
>      if (element.id == event.expectedElement &&
>          event.offsetX == event.expectedOffsetX &&
>          event.offsetY == event.expectedOffsetY)
>        result = 'PASS: event at (' + event.clientX + ', ' + event.clientY + ') hit ' + element.id + ' at offset (' + event.offsetX + ', ' + event.offsetY + ')';
>      else
>        result = 'FAIL: event at (' + event.clientX + ', ' + event.clientY + ') expected to hit ' + event.expectedElement + ' at (' + event.expectedOffsetX + ', ' + event.expectedOffsetY + ') but hit ' + element.id + ' at (' + event.offsetX + ', ' + event.offsetY + ')';
>
>      log(result);
>    }
>    
>    window.addEventListener('load', function() {
>      window.setTimeout(test, 0);
>    }, false);
>  </script>
>  <style type="text/css" media="screen">
>  
>    body {
>      height: 2048px;
>      width: 2048px;
>      margin: 0;
>    }
>
>    .box {
>      height: 200px;
>      width: 200px;
>      margin: 20px;
>      background-color: gray;
>    }
>
>    #abs-box {
>      position: absolute;
>      top: 200px;
>      left: 100px;
>      height: 100px;
>      width: 200px;
>      border: 15px solid gray;
>    }
>    
>    #rel-box {
>      position: relative;
>      height: 100px;
>      width: 200px;
>      left: 40px;
>      top: -50px;
>      background-color: #CCC;
>    }
>    
>    #fixed-box {
>      position: fixed;
>      top: 100px;
>      left: 400px;
>      width: 300px;
>      height: 50px;
>      background-color: #AAA;
>    }
>    
>    #columns {
>      position: absolute;
>      -webkit-column-count: 3;
>      width: 400px;
>      top: 300px;
>      left: 460px;
>      border: 2px solid black;
>    }
>    
>    #in-columns {
>      display: block;
>      height: 40px;
>      width: 60%;
>      margin: 0 auto;
>      text-align: center;
>      background-color: gray;
>    }
>    
>    #overflow {
>      overflow: scroll;
>      position: absolute;
>      width: 300px;
>      top: 550px;
>      left: 460px;
>      height: 200px;
>      border: 2px solid black;
>    }
>    
>    #overflow-contents {
>      height: 500px;
>      width: 120%;
>      background-color: #BBB;
>    }
>    
>    #results {
>      position: absolute;
>      left: 30px;
>      top: 700px;
>    }
>    
>    #mousepos {
>      position: absolute;
>      left: 30px;
>      top: 650px;
>      color: gray;
>      font-size: smaller;
>    }
>  </style>
></head>
><body onclick="clicked(event)">
>
><div id="filler" style="position: absolute; top: 0; width: 100%; height: 100%"></div>
>
>
><div id="abs-box">
>  Absolute position
>  <div id="rel-box">
>    Relative position
>  </div>
>  <div id="fixed-box">
>    Fixed position
>  </div>
></div>
>
><table border="2" cellspacing="3" cellpadding="2" style="width: 400px; margin-top: 400px; margin-left: 40px;">
>  <tr><th>First</th><th>Second</th></tr>
>  <tr style="vertical-align: center;"><td>Blah<div class="box" id="with-bordertopextra" style="position: relative; height: 20px; margin: 4px;"></div></td><td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
>  </td></tr>
></table>
>
><div id="columns">
>  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <span id="in-columns">In columns</span> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
></div>
>
><div id="overflow">
>  <div id="overflow-contents">
>  </div>
></div>
><div id="results"></div>
><div id="mousepos"></div>
>
></body>
></html>

<html>
<head>
  <title>Test offsetX/offsetY on various types of elements</title>
  <script type="text/javascript" charset="utf-8">
    if (window.layoutTestController) {
        layoutTestController.dumpAsText();
        layoutTestController.waitUntilDone();
    }

    function mousemoved(e)
    {
      var resultBox = document.getElementById('mousepos');
      var offsets = 'element id: ' + e.target.id + '<br> clientX: ' + e.clientX + ' clientY: ' + e.clientY + '<br>';
      offsets += 'offsetX: ' + e.offsetX + ' offsetY: ' + e.offsetY;
      resultBox.innerHTML = offsets;
    }

    function log(s)
    {
      var resultsDiv = document.getElementById('results');
      resultsDiv.innerHTML += s + '<br>';
    }
    
    function test()
    {
      // Scroll so that frame view offsets are non-zero
      window.scrollTo(20, 100);

      document.getElementById('overflow').scrollLeft = 80;
      document.getElementById('overflow').scrollTop = 60;
      
      // In non-test mode, show the mouse coords for testing
      if (!window.layoutTestController)
        document.body.addEventListener('mousemove', mousemoved, false);

      dispatchEvent(111, 224, 'abs-box', 31, 124);
      dispatchEvent(162, 112, 'rel-box', 27, 29);
      dispatchEvent(406, 107, 'fixed-box', 6, 7);
      dispatchEvent(94, 400, 'with-bordertopextra', 62, 12);
      // dispatchEvent(639, 316, 'in-columns', 173, -172);  // This is buggy. See https://bugs.webkit.org/show_bug.cgi?id=21993
      dispatchEvent(457, 466, 'overflow-contents', 72, 74);
            
      if (window.layoutTestController)
        layoutTestController.notifyDone();
    }
    
    function dispatchEvent(clientX, clientY, expectedElementID, expectedOffsetX, expectedOffsetY)
    {
      var ev = document.createEvent("MouseEvent");
      ev.initMouseEvent("click", true, true, window, 1, 1, 1, clientX, clientY, false, false, false, false, 0, document);
      ev.expectedElement = expectedElementID;
      ev.expectedOffsetX = expectedOffsetX;
      ev.expectedOffsetY = expectedOffsetY;
      var target = document.elementFromPoint(ev.pageX, ev.pageY);
      target.dispatchEvent(ev);
    }

    function clicked(event)
    {
      var element = event.target;
      
      var result;
      if (element.id == event.expectedElement &&
          event.offsetX == event.expectedOffsetX &&
          event.offsetY == event.expectedOffsetY)
        result = 'PASS: event at (' + event.clientX + ', ' + event.clientY + ') hit ' + element.id + ' at offset (' + event.offsetX + ', ' + event.offsetY + ')';
      else
        result = 'FAIL: event at (' + event.clientX + ', ' + event.clientY + ') expected to hit ' + event.expectedElement + ' at (' + event.expectedOffsetX + ', ' + event.expectedOffsetY + ') but hit ' + element.id + ' at (' + event.offsetX + ', ' + event.offsetY + ')';

      log(result);
    }
    
    window.addEventListener('load', function() {
      window.setTimeout(test, 0);
    }, false);
  </script>
  <style type="text/css" media="screen">
  
    body {
      height: 2048px;
      width: 2048px;
      margin: 0;
    }

    .box {
      height: 200px;
      width: 200px;
      margin: 20px;
      background-color: gray;
    }

    #abs-box {
      position: absolute;
      top: 200px;
      left: 100px;
      height: 100px;
      width: 200px;
      border: 15px solid gray;
    }
    
    #rel-box {
      position: relative;
      height: 100px;
      width: 200px;
      left: 40px;
      top: -50px;
      background-color: #CCC;
    }
    
    #fixed-box {
      position: fixed;
      top: 100px;
      left: 400px;
      width: 300px;
      height: 50px;
      background-color: #AAA;
    }
    
    #columns {
      position: absolute;
      -webkit-column-count: 3;
      width: 400px;
      top: 300px;
      left: 460px;
      border: 2px solid black;
    }
    
    #in-columns {
      display: block;
      height: 40px;
      width: 60%;
      margin: 0 auto;
      text-align: center;
      background-color: gray;
    }
    
    #overflow {
      overflow: scroll;
      position: absolute;
      width: 300px;
      top: 550px;
      left: 460px;
      height: 200px;
      border: 2px solid black;
    }
    
    #overflow-contents {
      height: 500px;
      width: 120%;
      background-color: #BBB;
    }
    
    #results {
      position: absolute;
      left: 30px;
      top: 700px;
    }
    
    #mousepos {
      position: absolute;
      left: 30px;
      top: 650px;
      color: gray;
      font-size: smaller;
    }
  </style>
</head>
<body onclick="clicked(event)">

<div id="filler" style="position: absolute; top: 0; width: 100%; height: 100%"></div>

<!-- Test assumes offsetX/offsetY relative to border box, but see
     http://www.quirksmode.org/dom/w3c_cssom.html#mousepos -->
<div id="abs-box">
  Absolute position
  <div id="rel-box">
    Relative position
  </div>
  <div id="fixed-box">
    Fixed position
  </div>
</div>

<table border="2" cellspacing="3" cellpadding="2" style="width: 400px; margin-top: 400px; margin-left: 40px;">
  <tr><th>First</th><th>Second</th></tr>
  <tr style="vertical-align: center;"><td>Blah<div class="box" id="with-bordertopextra" style="position: relative; height: 20px; margin: 4px;"></div></td><td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </td></tr>
</table>

<div id="columns">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <span id="in-columns">In columns</span> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div id="overflow">
  <div id="overflow-contents">
  </div>
</div>
<div id="results"></div>
<div id="mousepos"></div>

</body>
</html>

Actions: View

Attachments on bug 21941: 24791 | 24793 | 24820 | 24883 | 24886