<body>

<script>

    function testMedia(query) {

        function handleChanged(event) {

            document.body.appendChild(document.createElement("pre")).textContent = `${query} === ${event.matches}`;

        }

        let media = window.matchMedia(query);

        media.addListener(handleChanged);

        handleChanged(media);

    }



    testMedia("(hover)");

    testMedia("(hover: none)");

    testMedia("(hover: hover)");



    testMedia("(any-hover)");

    testMedia("(any-hover: none)");

    testMedia("(any-hover: hover)");



    testMedia("(pointer)");

    testMedia("(pointer: none)");

    testMedia("(pointer: coarse)");

    testMedia("(pointer: fine)");



    testMedia("(any-pointer)");

    testMedia("(any-pointer: none)");

    testMedia("(any-pointer: coarse)");

    testMedia("(any-pointer: fine)");



    document.addEventListener("click", (event) => {

        document.body.appendChild(document.createElement("hr"));

    });

</script>