<!DOCTYPE html>
<html>
<body>
<p>Test passes if you see a single 200px by 200px green box below.</p>
<div id="container" style="width: 200px; height: 200px; background: green;"></div>
<script>

function style(pseudoClasses) {
    return `<style>
    .match, .not-match { display: block; float: left; width: 100px; height: 15px; color: green; font-size: 12px; overflow: hidden; }
    .match { background: red; }
    .not-match { background: green; }
    .match${pseudoClasses} { background: green; }
    .not-match${pseudoClasses} { background: red; }
</style>`;
}

function test(markup, action) {
    const host = document.createElement('div');
    const shadowRoot = host.attachShadow({mode: 'closed'});
    document.getElementById('container').appendChild(host);
    shadowRoot.innerHTML = markup;
    return () => action(shadowRoot);
}

const tests = [
    test(`<old-first></old-first><new-first class="match">newly first ${style(':first-child')}</new-first>`,
        shadowRoot => shadowRoot.querySelector('old-first').remove()),
    test(`<old-first class="not-match">old first ${style(':first-child')}</old-first>`,
        shadowRoot => shadowRoot.prepend(document.createElement('div'))),

    test(`<new-last class="match">newly last ${style(':last-child')}</new-last><old-last></old-last>`,
        shadowRoot => shadowRoot.querySelector('old-last').remove()),
    test(`<old-last class="not-match">old last ${style(':last-child')}</old-last>`,
        shadowRoot => shadowRoot.append(document.createElement('div'))),

    test(`<div></div><div class="match">only child 1 ${style(':only-child')}</div>`,
        shadowRoot => shadowRoot.firstChild.remove()),
    test(`<div class="match">only child 2 ${style(':only-child')}</div><div></div>`,
        shadowRoot => shadowRoot.lastChild.remove()),
    test(`<div class="not-match">only child 3 ${style(':only-child')}</div>`,
        shadowRoot => shadowRoot.prepend(document.createElement('div'))),
    test(`<div class="not-match">only child 4 ${style(':only-child')}</div>`,
        shadowRoot => shadowRoot.append(document.createElement('div'))),

    test(`<div></div><div class="match">1st child ${style(':nth-child(1)')}</div>`,
        shadowRoot => shadowRoot.firstChild.remove()),
    test(`<div></div><div class="not-match">2nd child ${style(':nth-child(2)')}</div>`,
        shadowRoot => shadowRoot.prepend(document.createElement('div'))),

    test(`<div class="match">3rd last child ${style(':nth-last-child(3)')}</div><div></div><div></div><div></div>`,
        shadowRoot => shadowRoot.lastChild.remove()),
    test(`<div></div><div class="not-match">4th last child ${style(':nth-last-child(4)')}</div><div></div><div></div><div></div>`,
        shadowRoot => shadowRoot.append(document.createElement('div'))),

    test(`<new-first></new-first><div></div><new-first class="match">first type 1 ${style(':first-of-type')}</new-first>`,
        shadowRoot => shadowRoot.querySelector('new-first').remove()),
    test(`<div></div><old-first class="not-match">first type 2 ${style(':first-of-type')}</old-first>`,
        shadowRoot => shadowRoot.prepend(document.createElement('old-first'))),

    test(`<new-last class="match">last of type 1 ${style(':last-of-type')}</new-last><div></div><new-last></new-last>`,
        shadowRoot => shadowRoot.lastChild.remove()),
    test(`<old-last class="not-match">last of type 2 ${style(':last-of-type')}</old-last><div></div>`,
        shadowRoot => shadowRoot.append(document.createElement('old-last'))),

    test(`<div></div><section></section><div class="match">only of type 1 ${style(':only-of-type')}</div>`,
        shadowRoot => shadowRoot.firstChild.remove()),
    test(`<section></section><div class="match">only of type 2 ${style(':only-of-type')}</div><div></div>`,
        shadowRoot => shadowRoot.lastChild.remove()),
    test(`<a-b></a-b><div class="not-match">only of type 3 ${style(':only-of-type')}</div><section></section>`,
        shadowRoot => shadowRoot.insertBefore(document.createElement('div'), shadowRoot.childNodes[2])),
    test(`<div class="not-match">only of type 4 ${style(':only-of-type')}</div><c-d></c-d>`,
        shadowRoot => shadowRoot.append(document.createElement('div'))),

    test(`<div></div><section></section><div class="match">1st of type ${style(':nth-of-type(1)')}</div>`,
        shadowRoot => shadowRoot.firstChild.remove()),
    test(`<div></div><section></section><div class="not-match">2nd of type ${style(':nth-of-type(2)')}</div>`,
        shadowRoot => shadowRoot.prepend(document.createElement('div'))),

    test(`<div class="match">3rd last of type ${style(':nth-last-of-type(3)')}</div><div></div><div></div><section></section><div></div>`,
        shadowRoot => shadowRoot.querySelector('section').previousSibling.remove()),
    test(`<div></div><div class="not-match">4th last of type ${style(':nth-last-of-type(4)')}</div><div></div><div></div><section></section><div></div>`,
        shadowRoot => shadowRoot.append(document.createElement('div'))),

    test(`<div></div><div class="match">1st, 3rd last of type ${style(':first-child:nth-last-of-type(3)')}</div><div></div><div></div><section></section><div></div>`,
        shadowRoot => { shadowRoot.querySelector('section').previousSibling.remove(); shadowRoot.firstChild.remove(); }),

    test(`<div></div><div class="match">2nd, 2rd last of type ${style(':nth-child(3):nth-of-type(2)')}</div>`,
        shadowRoot => { shadowRoot.prepend(document.createElement('a-b')); shadowRoot.append(document.createElement('div')); }),
];

if (window.internals)
    internals.updateLayoutIgnorePendingStylesheetsAndRunPostLayoutTasks();
else
    window.rect = document.body.getBoundingClientRect();

for (const test of tests)
    test();

</script>
</body>
</html>