Attachment 451882 Details for Bug 236584 – test case

test case

preventscroll.html (text/html), 1.73 KB, created by Alex Moore on 2022-02-14 03:47:21 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Alex Moore

Created: 2022-02-14 03:47:21 PST

Size: 1.73 KB

patch

obsolete

><!DOCTYPE html>
><html lang="en">
>    <head>
>        <meta charset="UTF-8" />
>        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
>        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
>        <title>Focus preventScroll</title>
>        <style>
>            body {
>                margin: 0;
>            }
>            p {
>                width: 100%;
>            }
>            button {
>                position: fixed;
>                left: 0;
>                bottom: 30px;
>                width: 100%;
>                height: 100px;
>            }
>            input {
>                margin: 120vh 0;
>                border: 2px solid black;
>                font-size: 20px;
>            }
>        </style>
>    </head>
>
>    <body>
>        <p>
>            Is input.focus({ preventScroll: true }) supposed to be supported?
>            <span>NO</span>
>        </p>
>        <p>
>            Click the button while the input is offscreen to see if focusing it
>            with input.focus({ preventScroll: true }) causes it to be scrolled
>            into view.
>        </p>
>        <p>It does on iOS</p>
>        <button>Click to focus text input with preventScroll: true</button>
>        <input type="text" />
>    </body>
>
>    <script>
>        const preventFocusSupported = document.querySelector("span");
>        document.createElement("div").focus({
>            get preventScroll() {
>                preventFocusSupported.innerHTML = "YES";
>                return false;
>            },
>        });
>
>        const button = document.querySelector("button");
>        const input = document.querySelector("input");
>        button.addEventListener("click", () => {
>            input.focus({ preventScroll: true });
>        });
>    </script>
></html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Focus preventScroll</title>
        <style>
            body {
                margin: 0;
            }
            p {
                width: 100%;
            }
            button {
                position: fixed;
                left: 0;
                bottom: 30px;
                width: 100%;
                height: 100px;
            }
            input {
                margin: 120vh 0;
                border: 2px solid black;
                font-size: 20px;
            }
        </style>
    </head>

    <body>
        <p>
            Is input.focus({ preventScroll: true }) supposed to be supported?
            <span>NO</span>
        </p>
        <p>
            Click the button while the input is offscreen to see if focusing it
            with input.focus({ preventScroll: true }) causes it to be scrolled
            into view.
        </p>
        <p>It does on iOS</p>
        <button>Click to focus text input with preventScroll: true</button>
        <input type="text" />
    </body>

    <script>
        const preventFocusSupported = document.querySelector("span");
        document.createElement("div").focus({
            get preventScroll() {
                preventFocusSupported.innerHTML = "YES";
                return false;
            },
        });

        const button = document.querySelector("button");
        const input = document.querySelector("input");
        button.addEventListener("click", () => {
            input.focus({ preventScroll: true });
        });
    </script>
</html>

Actions: View

Attachments on bug 236584: 451882 | 453420 | 453452 | 453453