Skip to content

GitLab

T
tangled
Commit 1f6fb0c5 authored by Ionel Popescu's avatar Ionel Popescu Committed by Commit Bot
Browse files
Options

Update the x icon for input type=search 

This CL updates the icon for input type="search" to match the spec.

Added several search appearance tests to validate the new UI.

Bug: 1099643
Change-Id: I4d44069443632f09ebbdbad6e6a670ad66a8736e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2275947Reviewed-by: default avatarKent Tamura <tkent@chromium.org>
Reviewed-by: default avatarMason Freed <masonfreed@chromium.org>
Commit-Queue: Ionel Popescu <iopopesc@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#784346}
parent 24f7513d
Hide whitespace changes
Inline Side-by-side
Showing with 51 additions and 0 deletions
third_party/blink/renderer/core/html/resources/controls_refresh.css
View file @ 1f6fb0c5
...@@ -113,6 +113,17 @@ input[type="range" i]:disabled { ...@@ -113,6 +113,17 @@ input[type="range" i]:disabled {
color: #c5c5c5; color: #c5c5c5;
} }
input[type="search" i]::-webkit-search-cancel-button {
-webkit-appearance: none;
background-image: -webkit-image-set(url(images/clear_icon.svg) 1x);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
height: 1.125em;
margin-inline-end: 1px;
width: 1.125em;
}
meter::-webkit-meter-inner-element:-internal-shadow-host-has-appearance { meter::-webkit-meter-inner-element:-internal-shadow-host-has-appearance {
display: grid; display: grid;
grid-template-rows: 1fr [line1] 2fr [line2] 1fr; grid-template-rows: 1fr [line1] 2fr [line2] 1fr;
......
third_party/blink/renderer/core/html/resources/images/clear_icon.svg 0 → 100644
View file @ 1f6fb0c5
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="WindowText" width="15px" height="15px"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
\ No newline at end of file
third_party/blink/web_tests/virtual/controls-refresh/color-scheme/search/search-appearance-basic.html 0 → 100644
View file @ 1f6fb0c5
<!DOCTYPE html>
<script src="../../../../resources/run-after-layout-and-paint.js"></script>
<script src="../../../../fast/forms/resources/common.js"></script>
<body>
<!-- no style for reference -->
<input type="search" value="foo" id="hoverTarget"><br><br>
<script>
runAfterLayoutAndPaint(function() {
let target = document.getElementById('hoverTarget');
hoverOverElement(target);
}, true);
</script>
</body>
\ No newline at end of file
third_party/blink/web_tests/virtual/controls-refresh/color-scheme/search/search-appearance-font-size-20px.html 0 → 100644
View file @ 1f6fb0c5
<!DOCTYPE html>
<script src="../../../../resources/run-after-layout-and-paint.js"></script>
<script src="../../../../fast/forms/resources/common.js"></script>
<body>
<!-- font-size -->
<input type="search" value="foo" style="font-size: 20px;" id="hoverTarget"><br><br>
<script>
runAfterLayoutAndPaint(function() {
let target = document.getElementById('hoverTarget');
hoverOverElement(target);
}, true);
</script>
</body>
\ No newline at end of file
third_party/blink/web_tests/virtual/controls-refresh/color-scheme/search/search-appearance-zoom-2x.html 0 → 100644
View file @ 1f6fb0c5
<!DOCTYPE html>
<script src="../../../../resources/run-after-layout-and-paint.js"></script>
<script src="../../../../fast/forms/resources/common.js"></script>
<body>
<!-- zoom -->
<input type="search" value="foo" style="zoom: 2;" id="hoverTarget"> <br><br>
<script>
runAfterLayoutAndPaint(function() {
let target = document.getElementById('hoverTarget');
hoverOverElement(target);
}, true);
</script>
</body>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment