AuthorShadowDOM for meter element
https://bugs.webkit.org/show_bug.cgi?id=91970
Reviewed by Hajime Morita.
Source/WebCore:
We add support for AuthorShadowDOM for a meter element.
According to the Shadow DOM spec, a meter element should behave like having a UserAgentShadowRoot and
an element in UserAgentShadowRoot draws a real 'meter' bar. In this patch, we change the inner structure
of a meter element so that we can distribute an element having RenderMeter to AuthorShadowDOM.
Before this patch, a meter element has the following inner structure.
<meter>--UserAgentShadowRoot -- -- -- -- -- -- -- -- -- -- AuthorShadowRoot
|
+-- MeterBarElement
|
+-- MeterValueElement
After this patch, a meter element will have the following inner structure.
<meter>--UserAgentShadowRoot -- -- -- -- -- -- -- -- -- -- AuthorShadowRoot
|
+-- MeterInnerElement
|
+-- MeterBarElement
|
+-- MeterValueElement
However, if RenderTheme supports rendering meter, MeterInnerElement will not create a renderer
unless an AuthorShadowDOM is attached to it so that we can keep the current rendering style.
Tests: fast/dom/shadow/shadowdom-for-meter-dynamic.html
fast/dom/shadow/shadowdom-for-meter-multiple.html
fast/dom/shadow/shadowdom-for-meter-with-style.html
fast/dom/shadow/shadowdom-for-meter-without-appearance.html
fast/dom/shadow/shadowdom-for-meter-without-shadow-element.html
fast/dom/shadow/shadowdom-for-meter.html
* css/html.css:
(meter): Changed the display type. inline-box is not supported WebKit. inline-block is true.
(meter::-webkit-meter-inner-element):
* html/HTMLMeterElement.cpp:
(WebCore::HTMLMeterElement::HTMLMeterElement):
(WebCore::HTMLMeterElement::createRenderer):
(WebCore):
(WebCore::HTMLMeterElement::attach): Added didElementStateChange.
(WebCore::HTMLMeterElement::didElementStateChange):
(WebCore::HTMLMeterElement::willAddAuthorShadowRoot):
(WebCore::HTMLMeterElement::renderMeter):
(WebCore::HTMLMeterElement::createShadowSubtree):
* html/HTMLMeterElement.h:
(WebCore):
(WebCore::HTMLMeterElement::hasAuthorShadowRoot):
(HTMLMeterElement):
(WebCore::isHTMLMeterElement):
(WebCore::toHTMLMeterElement):
* html/shadow/MeterShadowElement.cpp:
(WebCore::MeterShadowElement::meterElement):
(WebCore::MeterShadowElement::rendererIsNeeded):
(WebCore):
(WebCore::MeterInnerElement::MeterInnerElement): We introduce a new element having RenderMeter
so that we can distribute an element having RenderMeter to AuthorShadowDOM.
(WebCore::MeterInnerElement::rendererIsNeeded): Different from a progress element, meter element will not be
rendered using a theme. So we don't need to check the style appearance.
(WebCore::MeterInnerElement::createRenderer):
(WebCore::MeterInnerElement::shadowPseudoId):
* html/shadow/MeterShadowElement.h:
(WebCore):
(MeterInnerElement):
(WebCore::MeterInnerElement::create):
* rendering/RenderMeter.cpp:
(WebCore::RenderMeter::RenderMeter):
(WebCore::RenderMeter::meterElement):
(WebCore):
(WebCore::RenderMeter::valueRatio):
* rendering/RenderMeter.h:
(RenderMeter):
* rendering/RenderThemeMac.mm:
(WebCore::RenderThemeMac::levelIndicatorFor):
LayoutTests:
Contains the following tests:
(1) meter element with AuthorShadowDOM
(2) meter element with multiple AuthorShadowDOM with a shadow element
(3) meter element with multiple AuthorShadowDOM without a shadow element
(4) meter element with AuthorShadowDOM with dynamic value update
(5) meter element with AuthorShadowDOM with style
(6) meter element with AuthorShadowDOM with -webkit-appearance: none
* fast/dom/HTMLMeterElement/meter-clone-expected.txt:
* fast/dom/HTMLMeterElement/meter-clone.html:
* fast/dom/HTMLMeterElement/meter-element-markup-expected.txt:
* fast/dom/shadow/resources/replaced-element-styles.css:
(.meter-like):
(.meter-inner-element-like):
* fast/dom/shadow/shadowdom-for-meter-dynamic-expected.html: Added.
* fast/dom/shadow/shadowdom-for-meter-dynamic.html: Added.
* fast/dom/shadow/shadowdom-for-meter-expected.html: Added.
* fast/dom/shadow/shadowdom-for-meter-multiple-expected.html: Added.
* fast/dom/shadow/shadowdom-for-meter-multiple.html: Added.
* fast/dom/shadow/shadowdom-for-meter-with-style-expected.html: Added.
* fast/dom/shadow/shadowdom-for-meter-with-style.html: Added.
* fast/dom/shadow/shadowdom-for-meter-without-appearance-expected.html: Added.
* fast/dom/shadow/shadowdom-for-meter-without-appearance.html: Added.
* fast/dom/shadow/shadowdom-for-meter-without-shadow-element-expected.html: Added.
* fast/dom/shadow/shadowdom-for-meter-without-shadow-element.html: Added.
* fast/dom/shadow/shadowdom-for-meter.html: Added.
* platform/chromium-win/fast/dom/HTMLMeterElement/meter-appearances-capacity-expected.txt:
* platform/chromium-win/fast/dom/HTMLMeterElement/meter-appearances-rating-relevancy-expected.txt:
* platform/chromium-win/fast/dom/HTMLMeterElement/meter-boundary-values-expected.txt:
* platform/chromium-win/fast/dom/HTMLMeterElement/meter-element-expected.txt:
* platform/chromium-win/fast/dom/HTMLMeterElement/meter-element-repaint-on-update-value-expected.txt:
* platform/chromium-win/fast/dom/HTMLMeterElement/meter-optimums-expected.txt:
* platform/chromium-win/fast/dom/HTMLMeterElement/meter-styles-changing-pseudo-expected.txt:
* platform/chromium-win/fast/dom/HTMLMeterElement/meter-styles-expected.txt:
* platform/chromium-win/fast/dom/HTMLMeterElement/meter-writing-mode-expected.txt:
* platform/mac/TestExpectations:
git-svn-id: svn://svn.chromium.org/blink/trunk@125659 bbb929c8-8fbe-4397-9dbb-9b2b20218538diff --git a/Source/WebCore/css/html.css b/Source/WebCore/css/html.css
index 43b65a1..0ab746d 100644
--- a/Source/WebCore/css/html.css
+++ b/Source/WebCore/css/html.css
@@ -894,12 +894,20 @@
meter {
-webkit-appearance: meter;
-webkit-box-sizing: border-box;
- display: inline-box;
+ display: inline-block;
height: 1em;
width: 5em;
vertical-align: -0.2em;
}
+meter::-webkit-meter-inner-element {
+ -webkit-appearance: inherit;
+ -webkit-box-sizing: inherit;
+ -webkit-user-modify: read-only !important;
+ height: 100%;
+ width: 100%;
+}
+
meter::-webkit-meter-bar {
background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#ddd), color-stop(0.20, #eee), color-stop(0.45, #ccc), color-stop(0.55, #ccc));
height: 100%;
