<!DOCTYPE html>
<script>
if (window.testRunner)
    window.testRunner.dumpAsText();

function getSystemPreviewData(id)
{
    const container = document.getElementById(id);
    const link = container.querySelector("a");
    let children = [];
    if (link)
        children = link.children;
    const result = container.querySelectorAll("p")[1];
    return [link, children, result];
}

function addResult(resultElement, txt)
{
    resultElement.textContent += txt;
}

const TESTS = ["valid-1", "valid-2", "valid-3", "invalid-1", "invalid-2", "invalid-3", "invalid-4", "invalid-5"];

window.addEventListener("load", () => {
    if (!window.internals)
        return;

    TESTS.forEach(id => {
        const [link, children, result] = getSystemPreviewData(id);
        if (link) {
            addResult(result, "Link element present.");

            if (internals.isSystemPreviewLink(link))
                addResult(result, " Identified as system preview.");
            else
                addResult(result, " Not identified as system preview.");

        } else
            addResult(result, "No link.");

        if (children && children.length > 0) {
            for (let i = 0; i < children.length; i++) {
                if (internals.isSystemPreviewImage(children[i]))
                    addResult(result, ` Child ${i} is an image inside a system preview.`);
                else
                    addResult(result, ` Child ${i} is not an image inside a system preview.`);
            }
        }

        // Specific test for the case that is just an image.
        if (id == "invalid-5") {
            const child = document.getElementById(id).children[0];
            if (internals.isSystemPreviewImage(child))
                addResult(result, ` Child is an image inside a system preview.`);
            else
                addResult(result, ` Child is not an image inside a system preview.`);
        }
    });
}, false);
</script>
<p>This test only works in WKTR or DRT.</p>
<div id="valid-1">
<p>Valid system preview</p>
<a href="/" rel="ar">
    <img>
</a>
<p>Result: </p>
</div>

<div id="valid-2">
<p>Valid system preview (multiple rel values)</p>
<a href="/" rel="foo ar">
    <img>
</a>
<p>Result: </p>
</div>

<div id="valid-3">
<p>Valid system preview (picture child)</p>
<a href="/" rel="ar">
    <picture></picture>
</a>
<p>Result: </p>
</div>

<div id="invalid-1">
<p>Invalid system preview (wrong rel value)</p>
<a href="/" rel="arfoo">
    <img>
</a>
<p>Result: </p>
</div>

<div id="invalid-2">
<p>Invalid system preview (wrong children)</p>
<a href="/" rel="ar">
    <span>hello</span>
</a>
<p>Result: </p>
</div>

<div id="invalid-3">
<p>Invalid system preview (too many children)</p>
<a href="/" rel="ar">
    <span>hello</span>
    <img>
</a>
<p>Result: </p>
</div>

<div id="invalid-4">
<p>Invalid system preview (no children)</p>
<a href="/" rel="ar">
</a>
<p>Result: </p>
</div>

<div id="invalid-5">
<p>Invalid system preview (just an image)</p>
<img>
<p>Result: </p>
</div>
