scheduling-isInputPending-pointer-lock.html 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset=utf-8 />
  5. <title>IsInputPending: pointer locked elements may detect pending input</title>
  6. </title>
  7. <p>
  8. This test should be run under <code>--enable-blink-features=ExperimentalIsInputPending</code>.
  9. </p>
  10. <p>
  11. Verify that input is detected with and without pointer locking for each frame, and that sibling and child frames cannot observe pending input.
  12. </p>
  13. </head>
  14. <p id="text-detected" style="color: green; display: none">Input detected</p>
  15. <p id="text-not-detected" style="color: red">Input not detected</p>
  16. <p><button id="pointer-locker">Lock pointer</button></p>
  17. <script>
  18. const NUM_CHILD_FRAMES = 2;
  19. const PERIOD_MS = 20;
  20. const iipOptions = {includeContinuous: true};
  21. const detectedText = document.querySelector('#text-detected');
  22. const notDetectedText = document.querySelector('#text-not-detected');
  23. setInterval(() => {
  24. for (const end = performance.now() + PERIOD_MS; performance.now() < end;) {}
  25. const detected = navigator.scheduling.isInputPending(iipOptions);
  26. detectedText.style.display = detected ? '' : 'none';
  27. notDetectedText.style.display = detected ? 'none' : '';
  28. }, PERIOD_MS);
  29. document.querySelector('#pointer-locker').addEventListener('click', e => {
  30. e.target.requestPointerLock();
  31. });
  32. if (window.top === window.self) {
  33. for (let i = 0; i < NUM_CHILD_FRAMES; i++) {
  34. // Add child frames if we're not already one.
  35. const subframe = document.createElement('iframe');
  36. subframe.width = 640;
  37. subframe.height = 240;
  38. subframe.src = location.href;
  39. document.body.appendChild(subframe);
  40. }
  41. }
  42. </script>
  43. </html>