Apply CSS to slot fallback values in OOBE

Bug: 955194
Change-Id: Ida5215d2f46985370da3407df968673546aab651
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2066848Reviewed-by: Maksim Ivanov <emaxx@chromium.org>
Reviewed-by: Roman Sorokin [CET] <rsorokin@chromium.org>
Commit-Queue: Denis Kuznetsov [CET] <antrim@chromium.org>
Cr-Commit-Position: refs/heads/master@{#743952}

chrome/browser/resources/chromeos/login/oobe_buttons.html

@@ -66,7 +66,7 @@
       <div id="container"
           class="flex layout horizontal center center-justified self-stretch">
         <slot name="text">
-          <div>[[i18nDynamic(locale, textKey)]]</div>
+          <div class="fallback">[[i18nDynamic(locale, textKey)]]</div>
         </slot>
       </div>
     </cr-button>
@@ -113,7 +113,7 @@
             icon2x="oobe-buttons-40:arrow-forward">
         </hd-iron-icon>
         <slot name="text">
-          <div>[[i18nDynamic(locale, textKey)]]</div>
+          <div class="fallback">[[i18nDynamic(locale, textKey)]]</div>
         </slot>
       </div>
     </cr-button>
@@ -132,7 +132,7 @@
         aria-label$="[[labelForAria_]]" class="action-button">
       <div class="flex horizontal layout start center">
         <slot name="text">
-          <div>[[i18nDynamic(locale, textKey)]]</div>
+          <div class="fallback">[[i18nDynamic(locale, textKey)]]</div>
         </slot>
         <hd-iron-icon
             icon1x="oobe-buttons-20:arrow-forward"
@@ -179,7 +179,7 @@
               class="oobe-icon" hidden>
           </hd-iron-icon>
           <slot name="text">
-            <div>[[i18nDynamic(locale, textKey)]]</div>
+            <div class="fallback">[[i18nDynamic(locale, textKey)]]</div>
           </slot>
         </div>
       </div>

chrome/browser/resources/chromeos/login/oobe_dialog.css

@@ -35,7 +35,11 @@
   padding-top: 20px;
 }
 
-#oobe-title ::slotted(h1) {
+/*
+ * TODO(https://crbug.com/703984): remove the fallback class when fixed.
+ */
+#oobe-title ::slotted(h1),
+#oobe-title .fallback {
   color: var(--oobe-header-text-color);
   @apply --oobe-header-font;
   margin: 0;
@@ -45,7 +49,11 @@
   padding-top: 8px;
 }
 
-#oobe-subtitle ::slotted(*) {
+/*
+ * TODO(https://crbug.com/703984): remove the fallback class when fixed.
+ */
+#oobe-subtitle ::slotted(*),
+#oobe-subtitle .fallback {
   color: var(--oobe-subheader-text-color);
   line-height: var(--subtitle-line-height);
   margin: 0;

chrome/browser/resources/chromeos/login/oobe_dialog.html

@@ -83,12 +83,12 @@
         <div id="oobe-title" class="slot-container layout vertical
             end-justified">
           <slot name="title">
-            <h1>[[i18nDynamic(locale, titleKey)]]</h1>
+            <h1 class="fallback">[[i18nDynamic(locale, titleKey)]]</h1>
           </slot>
         </div>
         <div id="oobe-subtitle" class="slot-container layout vertical">
           <slot name="subtitle">
-            <div>[[i18nDynamic(locale, subtitleKey)]]</div>
+            <div class="fallback">[[i18nDynamic(locale, subtitleKey)]]</div>
           </slot>
         </div>
         <div id="oobe-progress" class="slot-container layout vertical">

chrome/browser/resources/chromeos/login/oobe_help_dialog.css

@@ -14,7 +14,8 @@
   width: 512px;
 }
 
-#help-dialog-title ::slotted(h1) {
+#help-dialog-title ::slotted(h1),
+#help-dialog-title .fallback {
   color: var(--oobe-header-text-color);
   @apply --oobe-help-dialog-header-font;
   margin: 0;

chrome/browser/resources/chromeos/login/oobe_help_dialog.html

@@ -27,7 +27,7 @@ The dialog provides two properties that can be set directly from HTML.
       <!-- Title -->
       <div id="help-dialog-title">
         <slot name="title">
-            <h1>[[i18nDynamic(locale, titleKey)]]</h1>
+            <h1 class="fallback">[[i18nDynamic(locale, titleKey)]]</h1>
         </slot>
       </div>
       <!-- Content to be shown -->

chrome/browser/resources/chromeos/login/oobe_text_buttons.css

@@ -6,11 +6,11 @@
   margin: 0 4px; /* So that two adjacent buttons are 8px separated. */
 }
 
-/* Default slot data is not selected by ::slotted() selector, see
- * https://crbug.com/703984.
+/*
+ * TODO(https://crbug.com/703984): remove the fallback class when fixed.
  */
 :host ::slotted(*),
-#text {
+.fallback {
   font-family: var(--oobe-button-font-family);
   font-size: 12px;
 }