Skip to content

GitLab

T
tangled
Commit ef544317 authored by Alex Keng's avatar Alex Keng Committed by Commit Bot
Browse files
Options

[meter] re-implement rounded corner using overflow:hidden 

This CL uses a different approach to implement the rounded corner for <meter> to address
the 1 pixel gap issue.

The previous approach [1] (which uses clip-path applied on -internal-meter-clip) is reverted,
and the new approach is using [overflow: hidden] on -webkit-meter-bar,
and [display:grid] on -webkit-meter-inner-element. Note we can't just use overflow:hidden without
changing display to grid since the baseline alignment would change (per CSS 2.1 spec, see [2]
for details. (vertical-align:bottom doesn't work either)).



[1] https://chromium-review.googlesource.com/c/chromium/src/+/1858295
[2] https://stackoverflow.com/questions/20152795/making-a-span-element-inline-block-and-overflow-hidden-will-displace-him

Bug: 1021231
Change-Id: I51ffab57983c268620b6c81927dabd32043aa0c5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1980951
Commit-Queue: Alex Keng <shihken@microsoft.com>
Reviewed-by: default avatarMason Freed <masonfreed@chromium.org>
Reviewed-by: default avatarKent Tamura <tkent@chromium.org>
Cr-Commit-Position: refs/heads/master@{#728494}
parent c90c06f7
Hide whitespace changes
Inline Side-by-side
Showing with 188 additions and 40 deletions
third_party/blink/renderer/core/html/html_meter_element.cc
View file @ ef544317
...@@ -184,15 +184,7 @@ void HTMLMeterElement::DidAddUserAgentShadowRoot(ShadowRoot& root) { ...@@ -184,15 +184,7 @@ void HTMLMeterElement::DidAddUserAgentShadowRoot(ShadowRoot& root) {
value_ = MakeGarbageCollected<HTMLDivElement>(GetDocument()); value_ = MakeGarbageCollected<HTMLDivElement>(GetDocument());
UpdateValueAppearance(0); UpdateValueAppearance(0);
bar->AppendChild(value_);
if (features::IsFormControlsRefreshEnabled()) {
auto* clip = MakeGarbageCollected<HTMLDivElement>(GetDocument());
clip->SetShadowPseudoId(AtomicString("-internal-meter-clip"));
bar->AppendChild(clip);
clip->AppendChild(value_);
} else {
bar->AppendChild(value_);
}
inner->AppendChild(bar); inner->AppendChild(bar);
......
third_party/blink/renderer/core/html/resources/controls_refresh.css
View file @ ef544317
...@@ -83,26 +83,21 @@ input[type="range" i]:disabled { ...@@ -83,26 +83,21 @@ input[type="range" i]:disabled {
color: #c5c5c5; color: #c5c5c5;
} }
meter::-webkit-meter-inner-element::before, meter::-webkit-meter-inner-element:-internal-shadow-host-has-appearance {
meter::-webkit-meter-inner-element::after { display: grid;
display: block; grid-template-rows: 1fr [line1] 2fr [line2] 1fr;
content: "";
height: 25%;
} }
meter::-webkit-meter-bar { meter::-webkit-meter-bar {
background: #efefef; background: #efefef;
border-width: thin; border-width: thin;
height: 50%; grid-row-start: line1;
grid-row-end: line2;
border-style: solid; border-style: solid;
border-color: rgba(118, 118, 118, 0.3); border-color: rgba(118, 118, 118, 0.3);
border-radius: 20px; border-radius: 20px;
box-sizing: border-box; box-sizing: border-box;
} overflow: hidden;
meter::-internal-meter-clip {
clip-path: inset(0px round 20px);
height: 100%;
} }
meter::-webkit-meter-optimum-value { meter::-webkit-meter-optimum-value {
......
third_party/blink/web_tests/platform/win/fast/dom/HTMLMeterElement/meter-clone-expected.txt → third_party/blink/web_tests/platform/linux/virtual/web-components-v0-disabled/fast/dom/HTMLMeterElement/meter-clone-expected.txt
View file @ ef544317
...@@ -2,8 +2,8 @@ PASS cloned.value is target.value ...@@ -2,8 +2,8 @@ PASS cloned.value is target.value
PASS internals.shadowPseudoId(clonedShadowRoot.firstChild) is internals.shadowPseudoId(targetShadowRoot.firstChild) PASS internals.shadowPseudoId(clonedShadowRoot.firstChild) is internals.shadowPseudoId(targetShadowRoot.firstChild)
PASS internals.shadowPseudoId(clonedShadowRoot.firstChild.firstChild) is internals.shadowPseudoId(targetShadowRoot.firstChild.firstChild) PASS internals.shadowPseudoId(clonedShadowRoot.firstChild.firstChild) is internals.shadowPseudoId(targetShadowRoot.firstChild.firstChild)
PASS internals.shadowPseudoId(clonedShadowRoot.firstChild.firstChild.firstChild) is internals.shadowPseudoId(targetShadowRoot.firstChild.firstChild.firstChild) PASS internals.shadowPseudoId(clonedShadowRoot.firstChild.firstChild.firstChild) is internals.shadowPseudoId(targetShadowRoot.firstChild.firstChild.firstChild)
FAIL clonedShadowRoot.firstChild.firstChild.firstChild.style.width should be 70%. Was . PASS clonedShadowRoot.firstChild.firstChild.firstChild.style.width is "70%"
FAIL targetShadowRoot.firstChild.firstChild.firstChild.style.width should be 50%. Was . PASS targetShadowRoot.firstChild.firstChild.firstChild.style.width is "50%"
PASS successfullyParsed is true PASS successfullyParsed is true
TEST COMPLETE TEST COMPLETE
......
third_party/blink/web_tests/platform/win/fast/dom/HTMLMeterElement/meter-element-markup-expected.txt → third_party/blink/web_tests/platform/linux/virtual/web-components-v0-disabled/fast/dom/HTMLMeterElement/meter-element-markup-expected.txt
View file @ ef544317
...@@ -13,12 +13,9 @@ Both meter elements should have a nested shadow box with a width specified: ...@@ -13,12 +13,9 @@ Both meter elements should have a nested shadow box with a width specified:
| pseudo="-webkit-meter-bar" | pseudo="-webkit-meter-bar"
| shadow:pseudoId="-webkit-meter-bar" | shadow:pseudoId="-webkit-meter-bar"
| <div> | <div>
| pseudo="-internal-meter-clip" | pseudo="-webkit-meter-optimum-value"
| shadow:pseudoId="-internal-meter-clip" | style="width: 70%;"
| <div> | shadow:pseudoId="-webkit-meter-optimum-value"
| pseudo="-webkit-meter-optimum-value"
| style="width: 70%;"
| shadow:pseudoId="-webkit-meter-optimum-value"
| <div> | <div>
| pseudo="-internal-fallback" | pseudo="-internal-fallback"
| shadow:pseudoId="-internal-fallback" | shadow:pseudoId="-internal-fallback"
...@@ -41,12 +38,9 @@ Both meter elements should have a nested shadow box with a width specified: ...@@ -41,12 +38,9 @@ Both meter elements should have a nested shadow box with a width specified:
| pseudo="-webkit-meter-bar" | pseudo="-webkit-meter-bar"
| shadow:pseudoId="-webkit-meter-bar" | shadow:pseudoId="-webkit-meter-bar"
| <div> | <div>
| pseudo="-internal-meter-clip" | pseudo="-webkit-meter-suboptimum-value"
| shadow:pseudoId="-internal-meter-clip" | style="width: 100%;"
| <div> | shadow:pseudoId="-webkit-meter-suboptimum-value"
| pseudo="-webkit-meter-suboptimum-value"
| style="width: 100%;"
| shadow:pseudoId="-webkit-meter-suboptimum-value"
| <div> | <div>
| pseudo="-internal-fallback" | pseudo="-internal-fallback"
| shadow:pseudoId="-internal-fallback" | shadow:pseudoId="-internal-fallback"
...@@ -69,12 +63,9 @@ Both meter elements should have a nested shadow box with a width specified: ...@@ -69,12 +63,9 @@ Both meter elements should have a nested shadow box with a width specified:
| pseudo="-webkit-meter-bar" | pseudo="-webkit-meter-bar"
| shadow:pseudoId="-webkit-meter-bar" | shadow:pseudoId="-webkit-meter-bar"
| <div> | <div>
| pseudo="-internal-meter-clip" | pseudo="-webkit-meter-even-less-good-value"
| shadow:pseudoId="-internal-meter-clip" | style="width: 100%;"
| <div> | shadow:pseudoId="-webkit-meter-even-less-good-value"
| pseudo="-webkit-meter-even-less-good-value"
| style="width: 100%;"
| shadow:pseudoId="-webkit-meter-even-less-good-value"
| <div> | <div>
| pseudo="-internal-fallback" | pseudo="-internal-fallback"
| shadow:pseudoId="-internal-fallback" | shadow:pseudoId="-internal-fallback"
......
third_party/blink/web_tests/platform/win/virtual/web-components-v0-disabled/fast/dom/HTMLMeterElement/meter-clone-expected.txt 0 → 100644
View file @ ef544317
PASS cloned.value is target.value
PASS internals.shadowPseudoId(clonedShadowRoot.firstChild) is internals.shadowPseudoId(targetShadowRoot.firstChild)
PASS internals.shadowPseudoId(clonedShadowRoot.firstChild.firstChild) is internals.shadowPseudoId(targetShadowRoot.firstChild.firstChild)
PASS internals.shadowPseudoId(clonedShadowRoot.firstChild.firstChild.firstChild) is internals.shadowPseudoId(targetShadowRoot.firstChild.firstChild.firstChild)
PASS clonedShadowRoot.firstChild.firstChild.firstChild.style.width is "70%"
PASS targetShadowRoot.firstChild.firstChild.firstChild.style.width is "50%"
PASS successfullyParsed is true
TEST COMPLETE
third_party/blink/web_tests/platform/win/virtual/web-components-v0-disabled/fast/dom/HTMLMeterElement/meter-element-markup-expected.txt 0 → 100644
View file @ ef544317
Both meter elements should have a nested shadow box with a width specified:
| "
"
| <meter>
| max="100"
| value="70"
| <shadow:root>
| <div>
| pseudo="-webkit-meter-inner-element"
| shadow:pseudoId="-webkit-meter-inner-element"
| <div>
| pseudo="-webkit-meter-bar"
| shadow:pseudoId="-webkit-meter-bar"
| <div>
| pseudo="-webkit-meter-optimum-value"
| style="width: 70%;"
| shadow:pseudoId="-webkit-meter-optimum-value"
| <div>
| pseudo="-internal-fallback"
| shadow:pseudoId="-internal-fallback"
| <slot>
| name="user-agent-default-slot"
| "
"
| <meter>
| high="6"
| low="3"
| max="10"
| min="0"
| optimum="5"
| value="10"
| <shadow:root>
| <div>
| pseudo="-webkit-meter-inner-element"
| shadow:pseudoId="-webkit-meter-inner-element"
| <div>
| pseudo="-webkit-meter-bar"
| shadow:pseudoId="-webkit-meter-bar"
| <div>
| pseudo="-webkit-meter-suboptimum-value"
| style="width: 100%;"
| shadow:pseudoId="-webkit-meter-suboptimum-value"
| <div>
| pseudo="-internal-fallback"
| shadow:pseudoId="-internal-fallback"
| <slot>
| name="user-agent-default-slot"
| "
"
| <meter>
| high="6"
| low="3"
| max="10"
| min="0"
| optimum="0"
| value="10"
| <shadow:root>
| <div>
| pseudo="-webkit-meter-inner-element"
| shadow:pseudoId="-webkit-meter-inner-element"
| <div>
| pseudo="-webkit-meter-bar"
| shadow:pseudoId="-webkit-meter-bar"
| <div>
| pseudo="-webkit-meter-even-less-good-value"
| style="width: 100%;"
| shadow:pseudoId="-webkit-meter-even-less-good-value"
| <div>
| pseudo="-internal-fallback"
| shadow:pseudoId="-internal-fallback"
| <slot>
| name="user-agent-default-slot"
| "
"
third_party/blink/web_tests/platform/win7/virtual/web-components-v0-disabled/fast/dom/HTMLMeterElement/meter-clone-expected.txt 0 → 100644
View file @ ef544317
PASS cloned.value is target.value
PASS internals.shadowPseudoId(clonedShadowRoot.firstChild) is internals.shadowPseudoId(targetShadowRoot.firstChild)
PASS internals.shadowPseudoId(clonedShadowRoot.firstChild.firstChild) is internals.shadowPseudoId(targetShadowRoot.firstChild.firstChild)
PASS internals.shadowPseudoId(clonedShadowRoot.firstChild.firstChild.firstChild) is internals.shadowPseudoId(targetShadowRoot.firstChild.firstChild.firstChild)
PASS clonedShadowRoot.firstChild.firstChild.firstChild.style.width is "70%"
PASS targetShadowRoot.firstChild.firstChild.firstChild.style.width is "50%"
PASS successfullyParsed is true
TEST COMPLETE
third_party/blink/web_tests/platform/win7/virtual/web-components-v0-disabled/fast/dom/HTMLMeterElement/meter-element-markup-expected.txt 0 → 100644
View file @ ef544317
Both meter elements should have a nested shadow box with a width specified:
| "
"
| <meter>
| max="100"
| value="70"
| <shadow:root>
| <div>
| pseudo="-webkit-meter-inner-element"
| shadow:pseudoId="-webkit-meter-inner-element"
| <div>
| pseudo="-webkit-meter-bar"
| shadow:pseudoId="-webkit-meter-bar"
| <div>
| pseudo="-webkit-meter-optimum-value"
| style="width: 70%;"
| shadow:pseudoId="-webkit-meter-optimum-value"
| <div>
| pseudo="-internal-fallback"
| shadow:pseudoId="-internal-fallback"
| <slot>
| name="user-agent-default-slot"
| "
"
| <meter>
| high="6"
| low="3"
| max="10"
| min="0"
| optimum="5"
| value="10"
| <shadow:root>
| <div>
| pseudo="-webkit-meter-inner-element"
| shadow:pseudoId="-webkit-meter-inner-element"
| <div>
| pseudo="-webkit-meter-bar"
| shadow:pseudoId="-webkit-meter-bar"
| <div>
| pseudo="-webkit-meter-suboptimum-value"
| style="width: 100%;"
| shadow:pseudoId="-webkit-meter-suboptimum-value"
| <div>
| pseudo="-internal-fallback"
| shadow:pseudoId="-internal-fallback"
| <slot>
| name="user-agent-default-slot"
| "
"
| <meter>
| high="6"
| low="3"
| max="10"
| min="0"
| optimum="0"
| value="10"
| <shadow:root>
| <div>
| pseudo="-webkit-meter-inner-element"
| shadow:pseudoId="-webkit-meter-inner-element"
| <div>
| pseudo="-webkit-meter-bar"
| shadow:pseudoId="-webkit-meter-bar"
| <div>
| pseudo="-webkit-meter-even-less-good-value"
| style="width: 100%;"
| shadow:pseudoId="-webkit-meter-even-less-good-value"
| <div>
| pseudo="-internal-fallback"
| shadow:pseudoId="-internal-fallback"
| <slot>
| name="user-agent-default-slot"
| "
"
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