HighlightRegistry-highlightsFromPoint.html

<!doctype html>

<body>

<meta name="author" title="Fernando Fiori" href="mailto:ffiori@microsoft.com">

<meta name="assert" content="HighlightRegistry.highlightsFromPoint returns the Highlights present at at a given point inside the shadow roots passed as argument.">

<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/highlight/HighlightsFromPointsExplainer.md">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<style>

::highlight(example-highlight) {

    background-color: rgba(0, 255, 255, 0.5);

::highlight(example-highlight-2) {

    background-color: rgba(255, 255, 0, 0.5);

body {

    font-family: monospace;

</style>

<span id="container"></span>

<script>

    test(() => {

        assert_throws_js(TypeError, () => { CSS.highlights.highlightsFromPoint(10, 10, {shadowRoots: [container]}); });

        container.setHTMLUnsafe(`

            <div id="host">

                <template shadowrootmode=open></template>

            </div>`);

        const shadowRoot = host.shadowRoot;

        assert_throws_js(TypeError, () => { CSS.highlights.highlightsFromPoint(10, 10, {shadowRoots: [shadowRoot, container]}); });

    }, 'CSS.highlights.highlightsFromPoint() should throw when called with nodes that are not ShadowRoot objects in options.');

    test(() => {

        container.setHTMLUnsafe(`

            <div id="host">

                <template shadowrootmode=open>

                    <span>0123456789</span>

                </template>

            </div>`);

        const shadowRoot = host.shadowRoot;

        const spanInShadowDOM = shadowRoot.querySelector("span");

        let range = new Range();

        range.setStart(spanInShadowDOM.childNodes[0], 2);

        range.setEnd(spanInShadowDOM.childNodes[0], 10);

        let range2 = new Range();

        range2.setStart(spanInShadowDOM.childNodes[0], 5);

        range2.setEnd(spanInShadowDOM.childNodes[0], 10);

        // Set two Highlights in the shadow tree in this way: 01[234[56789]]

        let highlight = new Highlight(range);

        CSS.highlights.set("example-highlight", highlight);

        let highlight2 = new Highlight(range2);

        CSS.highlights.set("example-highlight-2", highlight2);

        const spanBoundingRectangle = spanInShadowDOM.getBoundingClientRect();

        const characterWidth = spanBoundingRectangle.width / spanInShadowDOM.textContent.length;

        // Get x and y coordinates between '0' and '1'.

        let x = spanBoundingRectangle.left + characterWidth;

        let y = spanBoundingRectangle.top + spanBoundingRectangle.height / 2;

        let highlights = CSS.highlights.highlightsFromPoint(x, y, {shadowRoots: [shadowRoot]});

        assert_equals(highlights.length, 0, 'CSS.highlights.highlightsFromPoint() returns no Highlights when the coordinates provided point at no Highlights');

        // Get x and y coordinates between '2' and '3'.

        x = spanBoundingRectangle.left + 3 * characterWidth;

        highlights = CSS.highlights.highlightsFromPoint(x, y, {shadowRoots: [shadowRoot]});

        assert_equals(highlights.length, 1, 'CSS.highlights.highlightsFromPoint() returns exactly one Highlight when the given coordinates point at a Highlight under the shadow root provided');

        assert_equals(highlights[0], highlight, 'CSS.highlights.highlightsFromPoint() returns the Highlight present at the given coordinates when it\'s under the shadow root provided');

        highlights = CSS.highlights.highlightsFromPoint(x, y);

        assert_equals(highlights.length, 0, 'CSS.highlights.highlightsFromPoint() returns no Highlights when the coordinates provided point at one Highlight in the shadow DOM but shadowRoots provided is empty');

        // Get x and y coordinates between '6' and '7'.

        // Same priority for the Highlights, break tie by order of registration.

        x = spanBoundingRectangle.left + 7 * characterWidth;

        highlights = CSS.highlights.highlightsFromPoint(x, y, {shadowRoots: [shadowRoot]});

        assert_equals(highlights.length, 2, 'CSS.highlights.highlightsFromPoint() returns exactly two Highlights when the coordinates provided point at two overlapping Highlights');

        assert_equals(highlights[0], highlight2, 'CSS.highlights.highlightsFromPoint() returns first the Highlight registered last when both Highlights present at the point provided have the same priority');

        assert_equals(highlights[1], highlight, 'CSS.highlights.highlightsFromPoint() returns last the Highlight registered first when both Highlights present at the point provided have the same priority');

    }, 'CSS.highlights.highlightsFromPoint() returns Highlights present at a given point inside a shadow tree in the right order.');

    test(() => {

        container.setHTMLUnsafe(

            `0123456789<div id=host>

                <template shadowrootmode=open>

                    <span>0123456789</span>

                </template>

            </div>0123456789`);

        const host = document.querySelector("#host");

        const shadowRoot = host.shadowRoot;

        const spanInShadowDOM = shadowRoot.querySelector("span");

        const spanBoundingRectangle = spanInShadowDOM.getBoundingClientRect();

        const characterWidth = spanBoundingRectangle.width / spanInShadowDOM.textContent.length;

        const characterHeight = spanBoundingRectangle.height;

        let range = new Range();

        range.setStart(container.childNodes[0], 0);

        range.setEnd(container.childNodes[2], 5);

        // Set a Highlight with a range like this one:

        // [0123456789

        //  0123456789

        //  01234]56789

        // But only the first and third lines are highlighted because the second line belongs on a shadow tree.

        const highlight = new Highlight(range);

        CSS.highlights.set("example-highlight", highlight);

        // Get x and y coordinates between '0' and '1' in the first line.

        let x = spanBoundingRectangle.left + characterWidth;

        let y = container.getBoundingClientRect().top + characterHeight / 2.0;

        let highlights = CSS.highlights.highlightsFromPoint(x, y);

        assert_equals(highlights.length, 1, 'CSS.highlights.highlightsFromPoint() returns one Highlight present at the coordinates provided');

        assert_equals(highlights[0], highlight, 'CSS.highlights.highlightsFromPoint() returns the Highlight present at the given coordinates even when no shadowRoots are provided because it\'s outside the shadow DOM');

        // Now move y to the second line (inside shadow DOM).

        y += characterHeight;

        highlights = CSS.highlights.highlightsFromPoint(x, y, {shadowRoots: [shadowRoot]});

        assert_equals(highlights.length, 0, 'CSS.highlights.highlightsFromPoint() returns no Highlights when the given coordinates point at text under the shadow root provided even when there is a Highlight set with a Range that starts and ends in the regular DOM surrounding it, even when shadowRoots are provided');

        highlights = CSS.highlights.highlightsFromPoint(x, y);

        assert_equals(highlights.length, 0, 'CSS.highlights.highlightsFromPoint() returns no Highlights when the given coordinates point at text under the shadow root provided even when there is a Highlight set with a Range that starts and ends in the regular DOM surrounding it');

        // Now move y to the third line.

        y += characterHeight;

        highlights = CSS.highlights.highlightsFromPoint(x, y);

        assert_equals(highlights.length, 1, 'CSS.highlights.highlightsFromPoint() returns one Highlight present at the coordinates provided');

        assert_equals(highlights[0], highlight, 'CSS.highlights.highlightsFromPoint() returns the Highlight present at the given coordinates because it\'s outside of the shadow DOM');

        // Set a Highlight with a range like this one:

        // [0123456789

        //  01234]56789

        //  0123456789

        // Here nothing is highlighted since the range starts in the light DOM and ends in the shadow DOM.

        CSS.highlights.clear();

        const staticRange = new StaticRange({startContainer: container.childNodes[0], startOffset: 0, endContainer: spanInShadowDOM.childNodes[0], endOffset: 5})

        CSS.highlights.set("example-highlight", new Highlight(staticRange));

        // Set x and y coordinates between '0' and '1' in the first line.

        y = container.getBoundingClientRect().top + characterHeight / 2.0;

        highlights = CSS.highlights.highlightsFromPoint(x, y, {shadowRoots: [shadowRoot]});

        assert_equals(highlights.length, 0, 'CSS.highlights.highlightsFromPoint() returns no Highlights when the given coordinates point at text in the light DOM that is not highlighted even when there is a Highlight set with a StaticRange that starts in the light DOM and ends in the shadow DOM surrounding it');

        // Now move y to the second line (inside shadow DOM).

        y += characterHeight;

        highlights = CSS.highlights.highlightsFromPoint(x, y, {shadowRoots: [shadowRoot]});

        assert_equals(highlights.length, 0, 'CSS.highlights.highlightsFromPoint() returns no Highlights when the given coordinates point at text in the shadow DOM that is not highlighted even when there is a Highlight set with a StaticRange that starts in the light DOM and ends in the shadow DOM surrounding it');

    }, 'CSS.highlights.highlightsFromPoint() doesn\'t return Highlights that are not painted at the given coordinates even when they fall inside the Highlights\' ranges');

</script>

</body>

Source code

Revision control

Copy as Markdown

Other Tools

Test Info: Warnings