52 lines
2.1 KiB
HTML
52 lines
2.1 KiB
HTML
<!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;
|
|
}
|
|
|
|
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> |