Introduce :-internal-shadow-host-has-appearance pseudo class, and app…

…ly it to METER element. :-internal-shadow-host-has-appearance pseudo class matches to a shadow element if - it is in User-Agent ShadowRoot, and - its shadow host has -webkit-appearance value other than "none". This class is available only in UA stylesheets. Also, this CL adds PseudoBlinkInternalElement. It's similar to PseudoWebKitCustomElement. Their differences are: - Pseudo ID of PseudoBlinkInternalElement starts with "-internal-". - ::-internal-* selectors are available only in UA stylesheets. METER's fallback element uses PseudoBlinkInternalElement in order to avoid to expose new vendor-specific elements. This CL has no user-visible behavior changes. BUG=609669 Review-Url: https://codereview.chromium.org/1958073002 Cr-Commit-Position: refs/heads/master@{#393779}
FairyWorld · May 16, 2016 · 19b50f2 · 19b50f2
1 parent b8e80fb
commit 19b50f2
Show file tree

Hide file tree

Showing 20 changed files with 81 additions and 96 deletions.
diff --git a/third_party/WebKit/LayoutTests/TestExpectations b/third_party/WebKit/LayoutTests/TestExpectations
@@ -338,7 +338,7 @@ crbug.com/240374 compositing/overlap-blending/children-opacity-huge.html [ Failu
 crbug.com/240374 compositing/overlap-blending/children-opacity-no-overlap.html [ Failure ]
 
 crbug.com/410145 [ Win ] fast/table/column-in-inline.html [ Failure ]
-
+crbug.com/609669 fast/dom/HTMLMeterElement/meter-styles.html [ NeedsRebaseline ]
 crbug.com/411164 [ Win ] http/tests/security/powerfulFeatureRestrictions/serviceworker-on-insecure-origin.html [ Pass ]
 
 crbug.com/475984 [ Mac Debug ] css2.1/t100801-c544-valgn-03-d-agi.html [ Failure ]

diff --git a/third_party/WebKit/LayoutTests/fast/dom/HTMLMeterElement/meter-element-markup-expected.txt b/third_party/WebKit/LayoutTests/fast/dom/HTMLMeterElement/meter-element-markup-expected.txt
@@ -17,6 +17,8 @@ Both meter elements should have a nested shadow box with a width specified:
 |           style="width: 70%;"
 |           shadow:pseudoId="-webkit-meter-optimum-value"
 |     <div>
+|       pseudo="-internal-fallback"
+|       shadow:pseudoId="-internal-fallback"
 |       <content>
 | "
     "
@@ -39,6 +41,8 @@ Both meter elements should have a nested shadow box with a width specified:
 |           style="width: 100%;"
 |           shadow:pseudoId="-webkit-meter-suboptimum-value"
 |     <div>
+|       pseudo="-internal-fallback"
+|       shadow:pseudoId="-internal-fallback"
 |       <content>
 | "
     "
@@ -61,6 +65,8 @@ Both meter elements should have a nested shadow box with a width specified:
 |           style="width: 100%;"
 |           shadow:pseudoId="-webkit-meter-even-less-good-value"
 |     <div>
+|       pseudo="-internal-fallback"
+|       shadow:pseudoId="-internal-fallback"
 |       <content>
 | "
   "
diff --git a/third_party/WebKit/LayoutTests/fast/dom/HTMLMeterElement/meter-styles.html b/third_party/WebKit/LayoutTests/fast/dom/HTMLMeterElement/meter-styles.html
@@ -1,9 +1,6 @@
+<!DOCTYPE html>
 <html>
 <head>
-<script>
-if (window.testRunner)
-    testRunner.notifyDone();
-</script>
 <style>
   meter.tall { width: 30px; height: 40px; }
   ul, h2, p { margin: 0.2em; }
@@ -48,12 +45,19 @@ <h2>Providing appearances</h2>
   <div style="background-color: #eee">
   <ul>
     <li><meter style="-webkit-appearance: none" min="0" max="100" low="30" high="60" optimum="100" value="80" >80</meter> has "none" appearance, should render METER content.</li> 
+    <li><meter id="appearanceNoneLater" min="0" max="100" low="30" high="60" optimum="100" value="80" >80%</meter> gets "none" appearance after the initial rendering with "meter" appearance.</li>
   </ul>
   </div>
   <h2>Providing bar paddings</h2>
   <div style="background-color: #eee">
     <meter id="bar-paddings" min="0" max="100" low="30" high="60" optimum="50" value="50" ></meter> has "padding" on the bar.
   </ul>
   </div>
+<script>
+var noneLater = document.getElementById('appearanceNoneLater');
+noneLater.offsetLeft; // Force layout.
+noneLater.setAttribute('style', '-webkit-appearance:none');
+noneLater.offsetLeft; // Force layout.
+</script>
 </body>
 </html>
diff --git a/...it/LayoutTests/platform/mac/fast/dom/HTMLMeterElement/meter-styles-expected.png b/...it/LayoutTests/platform/mac/fast/dom/HTMLMeterElement/meter-styles-expected.png
diff --git a/...party/WebKit/LayoutTests/platform/mac/fast/dom/HTMLMeterElement/meter-styles-expected.txt b/...party/WebKit/LayoutTests/platform/mac/fast/dom/HTMLMeterElement/meter-styles-expected.txt
@@ -1,8 +1,8 @@
 layer at (0,0) size 800x600
   LayoutView at (0,0) size 800x600
-layer at (0,0) size 800x600
-  LayoutBlockFlow {HTML} at (0,0) size 800x600
-    LayoutBlockFlow {BODY} at (8,8) size 784x584
+layer at (0,0) size 800x449
+  LayoutBlockFlow {HTML} at (0,0) size 800x449.38
+    LayoutBlockFlow {BODY} at (8,8) size 784x433.38
       LayoutBlockFlow {H2} at (3.19,0) size 777.63x18
         LayoutText {#text} at (0,0) size 357x18
           text run at (0,0) width 357: "Horizontal meters with the non-themed default style"
@@ -113,19 +113,26 @@ layer at (0,0) size 800x600
       LayoutBlockFlow {H2} at (3.19,328.63) size 777.63x18
         LayoutText {#text} at (0,0) size 157x18
           text run at (0,0) width 157: "Providing appearances"
-      LayoutBlockFlow {DIV} at (0,349.81) size 784x19 [bgcolor=#EEEEEE]
-        LayoutBlockFlow {UL} at (3.19,0) size 777.63x19
+      LayoutBlockFlow {DIV} at (0,349.81) size 784x41.19 [bgcolor=#EEEEEE]
+        LayoutBlockFlow {UL} at (3.19,0) size 777.63x41.19
           LayoutListItem {LI} at (43.19,0) size 731.25x19
             LayoutBlockFlow {METER} at (0,3.19) size 80x16
               LayoutBlockFlow {DIV} at (0,0) size 80x18
                 LayoutText {#text} at (0,0) size 16x18
                   text run at (0,0) width 16: "80"
             LayoutText {#text} at (80,0) size 359x18
               text run at (80,0) width 359: " has \"none\" appearance, should render METER content."
-      LayoutBlockFlow {H2} at (3.19,372) size 777.63x18
+          LayoutListItem {LI} at (43.19,22.19) size 731.25x19
+            LayoutBlockFlow {METER} at (0,3.19) size 80x16
+              LayoutBlockFlow {DIV} at (0,0) size 80x18
+                LayoutText {#text} at (0,0) size 30x18
+                  text run at (0,0) width 30: "80%"
+            LayoutText {#text} at (80,0) size 484x18
+              text run at (80,0) width 484: " gets \"none\" appearance after the initial rendering with \"meter\" appearance."
+      LayoutBlockFlow {H2} at (3.19,394.19) size 777.63x18
         LayoutText {#text} at (0,0) size 162x18
           text run at (0,0) width 162: "Providing bar paddings"
-      LayoutBlockFlow {DIV} at (0,393.19) size 784x18 [bgcolor=#EEEEEE]
+      LayoutBlockFlow {DIV} at (0,415.38) size 784x18 [bgcolor=#EEEEEE]
         LayoutBlockFlow {METER} at (0,1.19) size 80x16
           LayoutBlockFlow {DIV} at (0,0) size 80x16
             LayoutBlockFlow {DIV} at (0,0) size 80x16

diff --git a/third_party/WebKit/Source/core/core.gypi b/third_party/WebKit/Source/core/core.gypi
@@ -3201,8 +3201,6 @@
             'html/parser/XSSAuditor.h',
             'html/parser/XSSAuditorDelegate.cpp',
             'html/parser/XSSAuditorDelegate.h',
-            'html/shadow/AppearanceSwitchElement.cpp',
-            'html/shadow/AppearanceSwitchElement.h',
             'html/shadow/ClearButtonElement.cpp',
             'html/shadow/ClearButtonElement.h',
             'html/shadow/DateTimeEditElement.cpp',

diff --git a/third_party/WebKit/Source/core/css/CSSSelector.cpp b/third_party/WebKit/Source/core/css/CSSSelector.cpp
@@ -252,6 +252,7 @@ PseudoId CSSSelector::pseudoId(PseudoType type)
     case PseudoInRange:
     case PseudoOutOfRange:
     case PseudoWebKitCustomElement:
+    case PseudoBlinkInternalElement:
     case PseudoCue:
     case PseudoFutureCue:
     case PseudoPastCue:
@@ -264,6 +265,7 @@ PseudoId CSSSelector::pseudoId(PseudoType type)
     case PseudoFullScreenAncestor:
     case PseudoSpatialNavigationFocus:
     case PseudoListBox:
+    case PseudoHostHasAppearance:
     case PseudoSlotted:
         return PseudoIdNone;
     }
@@ -290,6 +292,7 @@ const static NameToPseudoStruct pseudoTypeWithoutArgumentsMap[] = {
 {"-internal-media-controls-text-track-list-item-input", CSSSelector::PseudoWebKitCustomElement},
 {"-internal-media-controls-text-track-list-kind-captions", CSSSelector::PseudoWebKitCustomElement},
 {"-internal-media-controls-text-track-list-kind-subtitles", CSSSelector::PseudoWebKitCustomElement},
+{"-internal-shadow-host-has-appearance", CSSSelector::PseudoHostHasAppearance},
 {"-internal-spatial-navigation-focus", CSSSelector::PseudoSpatialNavigationFocus},
 {"-webkit-any-link",              CSSSelector::PseudoAnyLink},
 {"-webkit-autofill",              CSSSelector::PseudoAutofill},
@@ -453,6 +456,8 @@ CSSSelector::PseudoType CSSSelector::parsePseudoType(const AtomicString& name, b
 
     if (name.startsWith("-webkit-"))
         return PseudoWebKitCustomElement;
+    if (name.startsWith("-internal-"))
+        return PseudoBlinkInternalElement;
 
     return PseudoUnknown;
 }
@@ -486,6 +491,7 @@ void CSSSelector::updatePseudoType(const AtomicString& value, bool hasArguments)
     case PseudoScrollbarTrackPiece:
     case PseudoSelection:
     case PseudoWebKitCustomElement:
+    case PseudoBlinkInternalElement:
     case PseudoContent:
     case PseudoShadow:
     case PseudoSlotted:
@@ -522,6 +528,7 @@ void CSSSelector::updatePseudoType(const AtomicString& value, bool hasArguments)
     case PseudoHorizontal:
     case PseudoHost:
     case PseudoHostContext:
+    case PseudoHostHasAppearance:
     case PseudoHover:
     case PseudoInRange:
     case PseudoIncrement:
@@ -804,6 +811,7 @@ static bool validateSubSelector(const CSSSelector* selector)
     case CSSSelector::PseudoNot:
     case CSSSelector::PseudoSpatialNavigationFocus:
     case CSSSelector::PseudoListBox:
+    case CSSSelector::PseudoHostHasAppearance:
         return true;
     default:
         return false;

diff --git a/third_party/WebKit/Source/core/css/CSSSelector.h b/third_party/WebKit/Source/core/css/CSSSelector.h
@@ -193,7 +193,10 @@ class CORE_EXPORT CSSSelector {
         PseudoFullScreenAncestor,
         PseudoInRange,
         PseudoOutOfRange,
+        // Pseudo elements in UA ShadowRoots. Available in any stylesheets.
         PseudoWebKitCustomElement,
+        // Pseudo elements in UA ShadowRoots. Availble only in UA stylesheets.
+        PseudoBlinkInternalElement,
         PseudoCue,
         PseudoFutureCue,
         PseudoPastCue,
@@ -204,6 +207,7 @@ class CORE_EXPORT CSSSelector {
         PseudoShadow,
         PseudoSpatialNavigationFocus,
         PseudoListBox,
+        PseudoHostHasAppearance,
         PseudoSlotted
     };
 

diff --git a/third_party/WebKit/Source/core/css/RuleFeature.cpp b/third_party/WebKit/Source/core/css/RuleFeature.cpp
@@ -143,6 +143,7 @@ bool supportsInvalidation(CSSSelector::PseudoType type)
     case CSSSelector::PseudoInRange:
     case CSSSelector::PseudoOutOfRange:
     case CSSSelector::PseudoWebKitCustomElement:
+    case CSSSelector::PseudoBlinkInternalElement:
     case CSSSelector::PseudoCue:
     case CSSSelector::PseudoFutureCue:
     case CSSSelector::PseudoPastCue:
@@ -152,6 +153,7 @@ bool supportsInvalidation(CSSSelector::PseudoType type)
     case CSSSelector::PseudoShadow:
     case CSSSelector::PseudoSpatialNavigationFocus:
     case CSSSelector::PseudoListBox:
+    case CSSSelector::PseudoHostHasAppearance:
     case CSSSelector::PseudoSlotted:
         return true;
     case CSSSelector::PseudoUnknown:
@@ -296,7 +298,7 @@ bool RuleFeatureSet::extractInvalidationSetFeature(const CSSSelector& selector,
         features.attributes.append(selector.attribute().localName());
         return true;
     }
-    if (selector.getPseudoType() == CSSSelector::PseudoWebKitCustomElement) {
+    if (selector.getPseudoType() == CSSSelector::PseudoWebKitCustomElement || selector.getPseudoType() == CSSSelector::PseudoBlinkInternalElement) {
         features.customPseudoElement = true;
         return true;
     }

diff --git a/third_party/WebKit/Source/core/css/RuleSet.cpp b/third_party/WebKit/Source/core/css/RuleSet.cpp
@@ -144,7 +144,7 @@ static void extractValuesforSelector(const CSSSelector* selector, AtomicString&
     default:
         break;
     }
-    if (selector->getPseudoType() == CSSSelector::PseudoWebKitCustomElement)
+    if (selector->getPseudoType() == CSSSelector::PseudoWebKitCustomElement || selector->getPseudoType() == CSSSelector::PseudoBlinkInternalElement)
         customPseudoElementName = selector->value();
 }
 

diff --git a/third_party/WebKit/Source/core/css/SelectorChecker.cpp b/third_party/WebKit/Source/core/css/SelectorChecker.cpp
@@ -917,6 +917,16 @@ bool SelectorChecker::checkPseudoClass(const SelectorCheckingContext& context, M
         return m_isUARule && matchesSpatialNavigationFocusPseudoClass(element);
     case CSSSelector::PseudoListBox:
         return m_isUARule && matchesListBoxPseudoClass(element);
+    case CSSSelector::PseudoHostHasAppearance:
+        if (!m_isUARule)
+            return false;
+        if (ShadowRoot* root = element.containingShadowRoot()) {
+            if (root->type() != ShadowRootType::UserAgent)
+                return false;
+            const ComputedStyle* style = root->host()->computedStyle();
+            return style && style->hasAppearance();
+        }
+        return false;
     case CSSSelector::PseudoWindowInactive:
         if (!context.hasSelectionPseudo)
             return false;
@@ -965,6 +975,12 @@ bool SelectorChecker::checkPseudoElement(const SelectorCheckingContext& context,
                 return root->type() == ShadowRootType::UserAgent && element.shadowPseudoId() == selector.value();
             return false;
         }
+    case CSSSelector::PseudoBlinkInternalElement:
+        if (!m_isUARule)
+            return false;
+        if (ShadowRoot* root = element.containingShadowRoot())
+            return root->type() == ShadowRootType::UserAgent && element.shadowPseudoId() == selector.value();
+        return false;
     case CSSSelector::PseudoSlotted:
         {
             SelectorCheckingContext subContext(context);

diff --git a/third_party/WebKit/Source/core/css/html.css b/third_party/WebKit/Source/core/css/html.css
@@ -851,11 +851,20 @@ meter {
 meter::-webkit-meter-inner-element {
     -webkit-appearance: inherit;
     box-sizing: inherit;
+    display: none;
     -webkit-user-modify: read-only !important;
     height: 100%;
     width: 100%;
 }
 
+meter::-webkit-meter-inner-element:-internal-shadow-host-has-appearance {
+    display: block;
+}
+
+meter::-internal-fallback:-internal-shadow-host-has-appearance {
+    display: none;
+}
+
 meter::-webkit-meter-bar {
     background: linear-gradient(to bottom, #ddd, #eee 20%, #ccc 45%, #ccc 55%, #ddd);
     height: 100%;

diff --git a/third_party/WebKit/Source/core/css/parser/CSSParserSelector.h b/third_party/WebKit/Source/core/css/parser/CSSParserSelector.h
@@ -61,7 +61,7 @@ class CORE_EXPORT CSSParserSelector {
     CSSSelector::PseudoType pseudoType() const { return m_selector->getPseudoType(); }
     const CSSSelectorList* selectorList() const { return m_selector->selectorList(); }
 
-    bool needsImplicitShadowCombinatorForMatching() const { return pseudoType() == CSSSelector::PseudoWebKitCustomElement || pseudoType() == CSSSelector::PseudoCue || pseudoType() == CSSSelector::PseudoShadow || pseudoType() == CSSSelector::PseudoSlotted; }
+    bool needsImplicitShadowCombinatorForMatching() const { return pseudoType() == CSSSelector::PseudoWebKitCustomElement || pseudoType() == CSSSelector::PseudoBlinkInternalElement || pseudoType() == CSSSelector::PseudoCue || pseudoType() == CSSSelector::PseudoShadow || pseudoType() == CSSSelector::PseudoSlotted; }
 
     bool isSimple() const;
 

diff --git a/third_party/WebKit/Source/core/css/parser/CSSSelectorParser.cpp b/third_party/WebKit/Source/core/css/parser/CSSSelectorParser.cpp
@@ -248,6 +248,7 @@ bool isPseudoClassValidAfterPseudoElement(CSSSelector::PseudoType pseudoClass, C
     case CSSSelector::PseudoSelection:
         return pseudoClass == CSSSelector::PseudoWindowInactive;
     case CSSSelector::PseudoWebKitCustomElement:
+    case CSSSelector::PseudoBlinkInternalElement:
         return isUserActionPseudoClass(pseudoClass);
     default:
         return false;

diff --git a/third_party/WebKit/Source/core/dom/Element.cpp b/third_party/WebKit/Source/core/dom/Element.cpp
@@ -2765,7 +2765,7 @@ const AtomicString& Element::shadowPseudoId() const
 
 void Element::setShadowPseudoId(const AtomicString& id)
 {
-    DCHECK_EQ(CSSSelector::parsePseudoType(id, false), CSSSelector::PseudoWebKitCustomElement);
+    DCHECK(CSSSelector::parsePseudoType(id, false) == CSSSelector::PseudoWebKitCustomElement || CSSSelector::parsePseudoType(id, false) == CSSSelector::PseudoBlinkInternalElement);
     setAttribute(pseudoAttr, id);
 }
 

diff --git a/third_party/WebKit/Source/core/dom/Element.h b/third_party/WebKit/Source/core/dom/Element.h
@@ -450,6 +450,9 @@ class CORE_EXPORT Element : public ContainerNode {
     virtual String defaultToolTip() const { return String(); }
 
     virtual const AtomicString& shadowPseudoId() const;
+    // The specified string must start with "-webkit-" or "-internal-". The
+    // former can be used as a selector in any places, and the latter can be
+    // used only in UA stylesheet.
     void setShadowPseudoId(const AtomicString&);
 
     LayoutSize minimumSizeForResizing() const;

diff --git a/third_party/WebKit/Source/core/html/HTMLMeterElement.cpp b/third_party/WebKit/Source/core/html/HTMLMeterElement.cpp
@@ -30,7 +30,6 @@
 #include "core/html/HTMLContentElement.h"
 #include "core/html/HTMLDivElement.h"
 #include "core/html/parser/HTMLParserIdioms.h"
-#include "core/html/shadow/AppearanceSwitchElement.h"
 #include "core/layout/LayoutObject.h"
 #include "core/style/ComputedStyle.h"
 
@@ -195,7 +194,7 @@ void HTMLMeterElement::didAddUserAgentShadowRoot(ShadowRoot& root)
 {
     ASSERT(!m_value);
 
-    AppearanceSwitchElement* inner = AppearanceSwitchElement::create(document(), AppearanceSwitchElement::ShowIfHostHasAppearance);
+    HTMLDivElement* inner = HTMLDivElement::create(document());
     inner->setShadowPseudoId(AtomicString("-webkit-meter-inner-element"));
     root.appendChild(inner);
 
@@ -208,8 +207,9 @@ void HTMLMeterElement::didAddUserAgentShadowRoot(ShadowRoot& root)
 
     inner->appendChild(bar);
 
-    AppearanceSwitchElement* fallback = AppearanceSwitchElement::create(document(), AppearanceSwitchElement::ShowIfHostHasNoAppearance);
+    HTMLDivElement* fallback = HTMLDivElement::create(document());
     fallback->appendChild(HTMLContentElement::create(document()));
+    fallback->setShadowPseudoId(AtomicString("-internal-fallback"));
     root.appendChild(fallback);
 }
 

diff --git a/third_party/WebKit/Source/core/html/shadow/AppearanceSwitchElement.cpp b/third_party/WebKit/Source/core/html/shadow/AppearanceSwitchElement.cpp