2020-06-20 00:43:39 +00:00
<!DOCTYPE html>
< html >
< head >
< style >
input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-cancel-button {
opacity: 0;
}
input[type="search"] {
font-size: 16px;
position: absolute;
top: 0;
left: 0;
-webkit-appearance: none;
}
div {
position: absolute;
background-color: white;
}
2020-06-20 07:08:38 +00:00
p {
margin-top: 100px;
2020-06-20 00:43:39 +00:00
}
< / style >
< / head >
< body >
< input type = "search" results = "5" value = "foo" autofocus > < / input >
< div id = "cover-results" > < / div >
< div id = "cover-cancel" > < / div >
2020-06-20 07:08:38 +00:00
< 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 >
2020-06-20 00:43:39 +00:00
< / body >
< / html >
