touch-fractional-coordinates.html | Explore in Territory

<!DOCTYPE html>
<script src='../../../resources/js-test.js'></script>
<style>
#spacer {
  height: 1000px;
  width: 1000px;
}
iframe {
  width: 100px;
  height: 100px;
  border: 0;
}
#rotatedFrame {
  transform: rotate(180deg);
}
#scaledFrame {
  transform: scale(2);
  width: 50px;
  height: 50px;
  margin-left: 50px;
  margin-bottom: 20px;
}
#container {
  /* Want this at a stable place across platforms so the output co-ords are stable */
  position: absolute;
  top: 100px;
  left: 10px;
}
#console {
  margin-top: 200px;
}
</style>
<p id='description'></p>
<div id='container'>
  <iframe id=simpleFrame src='resources/frame-touchevent-forwarder.html'></iframe>
  <iframe id=rotatedFrame src='resources/frame-touchevent-forwarder.html'></iframe>
  <iframe id=scaledFrame src='resources/frame-touchevent-forwarder.html'></iframe>
</div>
<div id='console'></div>
<div id='spacer'></div>
<script>
    description('Tests non-integer TouchEvent co-ordinates and radii');

    var scrollX = 3;
    var scrollY = 10;
    scrollTo(scrollX, scrollY);

    eventCount = 0;
    function onTouchStart(e) {
        eventCount++;
        lastEvent = e;
    }
    function expectEvent(eventName) {
        shouldBeEqualToNumber('eventCount', 1);
        var origEventCount = eventCount;
        eventCount = 0;
        if (origEventCount > 0) {
            shouldBeEqualToString('lastEvent.type', eventName);
            return true;
        }
        return false;
    }

    document.addEventListener('touchstart', onTouchStart);
    var floatPrecision = 0.00001;

    function runTest() {
        if (!eventSender) {
            debug('This test requires eventSender.');
            return;
        }

        debug('Testing simple fractional touch');
        eventSender.addTouchPoint(30.33, 4.5, 5.2, 6.3);
        eventSender.touchStart();
        if (expectEvent('touchstart')) {
            shouldBeCloseTo('lastEvent.changedTouches[0].screenX', 30.33, floatPrecision);
            shouldBeCloseTo('lastEvent.changedTouches[0].screenY', 4.5, floatPrecision);
            shouldBeCloseTo('lastEvent.changedTouches[0].clientX', 30.33, floatPrecision);
            shouldBeCloseTo('lastEvent.changedTouches[0].clientY', 4.5, floatPrecision);
            shouldBeCloseTo('lastEvent.changedTouches[0].pageX', 30.33 + scrollX, floatPrecision);
            shouldBeCloseTo('lastEvent.changedTouches[0].pageY', 4.5 + scrollY, floatPrecision);
            shouldBeCloseTo('lastEvent.changedTouches[0].radiusX', 5.2, floatPrecision);
            shouldBeCloseTo('lastEvent.changedTouches[0].radiusY', 6.3, floatPrecision);
        }
        eventSender.releaseTouchPoint(0);
        eventSender.touchEnd();
        debug('');

        debug('Testing fractional touch inside simple iframe');
        frameRect = document.getElementById('simpleFrame').getBoundingClientRect();
        eventSender.addTouchPoint(frameRect.left + 4.5, frameRect.top + 2.2);
        eventSender.touchStart();
        if (expectEvent('touchstart')) {
            shouldBeCloseTo('lastEvent.changedTouches[0].screenX', frameRect.left + 4.5, floatPrecision);
            shouldBeCloseTo('lastEvent.changedTouches[0].screenY', frameRect.top + 2.2, floatPrecision);
            shouldBeCloseTo('lastEvent.changedTouches[0].clientX', 4.5, floatPrecision);
            shouldBeCloseTo('lastEvent.changedTouches[0].clientY', 2.2, floatPrecision);
            shouldBeCloseTo('lastEvent.changedTouches[0].pageX', 4.5, floatPrecision);
            shouldBeCloseTo('lastEvent.changedTouches[0].pageY', 2.2, floatPrecision);
        }
        eventSender.releaseTouchPoint(0);
        eventSender.touchEnd();
        debug('');

        debug('Testing fractional touch inside rotated iframe');
        frameRect = document.getElementById('rotatedFrame').getBoundingClientRect();
        eventSender.addTouchPoint(frameRect.left + 4.5, frameRect.top + 2.2);
        eventSender.touchStart();
        if (expectEvent('touchstart')) {
            shouldBeCloseTo('lastEvent.changedTouches[0].screenX', frameRect.left + 4.5, floatPrecision);
            shouldBeCloseTo('lastEvent.changedTouches[0].screenY', frameRect.top + 2.2, floatPrecision);
            shouldBeCloseTo('lastEvent.changedTouches[0].clientX', 100 - 4.5, floatPrecision);
            shouldBeCloseTo('lastEvent.changedTouches[0].clientY', 100 - 2.2, floatPrecision);
            shouldBeCloseTo('lastEvent.changedTouches[0].pageX', 100 - 4.5, floatPrecision);
            shouldBeCloseTo('lastEvent.changedTouches[0].pageY', 100 - 2.2, floatPrecision);
        }
        eventSender.releaseTouchPoint(0);
        eventSender.touchEnd();
        debug('');

        debug('Testing fractional touch inside scaled iframe');
        frameRect = document.getElementById('scaledFrame').getBoundingClientRect();
        eventSender.addTouchPoint(frameRect.left + 4.5, frameRect.top + 2.2);
        eventSender.touchStart();
        if (expectEvent('touchstart')) {
            shouldBeCloseTo('lastEvent.changedTouches[0].screenX', frameRect.left + 4.5, floatPrecision);
            shouldBeCloseTo('lastEvent.changedTouches[0].screenY', frameRect.top + 2.2, floatPrecision);
            shouldBeCloseTo('lastEvent.changedTouches[0].clientX', 4.5 / 2, floatPrecision);
            shouldBeCloseTo('lastEvent.changedTouches[0].clientY', 2.2 / 2, floatPrecision);
            shouldBeCloseTo('lastEvent.changedTouches[0].pageX', 4.5 / 2, floatPrecision);
            shouldBeCloseTo('lastEvent.changedTouches[0].pageY', 2.2 / 2, floatPrecision);
        }
        eventSender.releaseTouchPoint(0);
        eventSender.touchEnd();
        debug('');
    }
    
    addEventListener('load', runTest);
</script>
chromium/third_party/blink/web_tests/fast/events/touch/touch-fractional-coordinates.html
