<!DOCTYPE html>
<html>
<head>
    <style>
        input[type="search"] {
            font-size: 16px;
            position: absolute;
            top: 0;
            left: 0;
            -webkit-appearance: none;
        }

        div {
            position: absolute;
            background-color: white;
        }

        p {
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <input type="search" results="5" value="foo" autofocus></input>
    <div id="cover-results"></div>
    <div id="cover-cancel"></div>
    <p>This test verifies that the search and results buttons in a search field do not each draw their own focus rings. This test must be run under WebKitTestRunner or DumpRenderTree.</p>
    <script>
    if (window.internals) {
        const search = document.querySelector("input[type=search]");

        const coverCancel = document.querySelector("#cover-cancel");
        const cancelButtonBounds = internals.shadowRoot(search).querySelector("div[pseudo='-webkit-search-cancel-button']").getBoundingClientRect();
        coverCancel.style.left = `${Math.round(cancelButtonBounds.left) - 1}px`;
        coverCancel.style.top = `${Math.round(cancelButtonBounds.top) - 1}px`;
        coverCancel.style.width = `${Math.round(cancelButtonBounds.width) + 2}px`;
        coverCancel.style.height = `${Math.round(cancelButtonBounds.height) + 2}px`;

        const coverResults = document.querySelector("#cover-results");
        const resultsButtonBounds = internals.shadowRoot(search).querySelector("div[pseudo='-webkit-search-results-button']").getBoundingClientRect();
        coverResults.style.left = `${Math.round(resultsButtonBounds.left) - 1}px`;
        coverResults.style.top = `${Math.round(resultsButtonBounds.top) - 1}px`;
        coverResults.style.width = `${Math.round(resultsButtonBounds.width) + 2}px`;
        coverResults.style.height = `${Math.round(resultsButtonBounds.height) + 2}px`;
    }
    </script>
</body>
</html>