| <!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> |
