ChromeOS OOBE: default <slot> values were not styled.

This Cl fixes issue with <oobe-back-button> and <oobe-next-button> when
text styling was not applied to <slot> default values.

Bug: 865907
Change-Id: I035e0c9144527a84c6865f6fae3d86d34272c169
Reviewed-on: https://chromium-review.googlesource.com/1145870
Commit-Queue: Alexander Alekseev <alemate@chromium.org>
Reviewed-by: Wenzhao (Colin) Zang <wzang@chromium.org>
Cr-Commit-Position: refs/heads/master@{#577054}

chrome/browser/resources/chromeos/login/hd-iron-icon.html

@@ -3,6 +3,7 @@
      found in the LICENSE file. -->
 
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 
 <!--
   <iron-icon> that automatically displays one of the two icond depending on
@@ -17,9 +18,10 @@
       'icon2x' - a name of icon from material design set to show on button.
 -->
 <dom-module id="hd-iron-icon">
-  <link rel="stylesheet" href="hd-iron-icon.css">
   <template>
-    <div>
+    <style include="iron-flex iron-flex-alignment iron-positioning"></style>
+    <link rel="stylesheet" href="hd-iron-icon.css">
+    <div class="flex layout vertical center">
       <iron-icon id="icon1x" icon="[[icon1x]]"></iron-icon>
       <iron-icon id="icon2x" icon="[[icon2x]]"></iron-icon>
     </div>

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

@@ -7,10 +7,7 @@ paper-button {
   -webkit-padding-start: 8px;
 }
 
-:host ::slotted(*) {
-  -webkit-padding-start: 4px;
-}
-
 hd-iron-icon {
+  -webkit-padding-start: 4px; /* transform(180deg) will make it padding-end. */
   transform: rotate(180deg);
 }

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

@@ -54,9 +54,8 @@
 -->
 <dom-module id="oobe-text-button">
   <template>
-    <style
-        include="iron-flex iron-flex-alignment iron-positioning paper-button-style cr-icons cr-shared-style">
-    </style>
+    <style include="iron-flex iron-flex-alignment iron-positioning"></style>
+    <style include="paper-button-style cr-icons cr-shared-style"></style>
     <link rel="stylesheet" href="oobe_text_buttons.css">
     <paper-button id="textButton" on-tap="onClick_" disabled="[[disabled]]"
         inverse$="[[inverse]]" aria-label$="[[labelForAria]]"
@@ -91,8 +90,8 @@
   <template>
     <style include="iron-flex iron-flex-alignment iron-positioning"></style>
     <style include="paper-button-style cr-icons cr-shared-style"></style>
-    <link rel="stylesheet" href="oobe_text_buttons.css">
     <link rel="stylesheet" href="oobe_back_button.css">
+    <link rel="stylesheet" href="oobe_text_buttons.css">
     <paper-button id="button" on-tap="onClick_" disabled="[[disabled]]"
         aria-label$="[[labelForAria]]" class="action-button">
       <div class="flex horizontal layout start center">
@@ -112,8 +111,8 @@
   <template>
     <style include="iron-flex iron-flex-alignment iron-positioning"></style>
     <style include="paper-button-style cr-icons cr-shared-style"></style>
-    <link rel="stylesheet" href="oobe_text_buttons.css">
     <link rel="stylesheet" href="oobe_next_button.css">
+    <link rel="stylesheet" href="oobe_text_buttons.css">
     <paper-button id="button" on-tap="onClick_" disabled="[[disabled]]"
         class="action-button">
       <div class="flex horizontal layout start center">

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

@@ -7,10 +7,6 @@ paper-button {
   -webkit-padding-start: 16px;
 }
 
-slot {
-  -webkit-padding-end: 4px;
-}
-
 hd-iron-icon {
   -webkit-padding-start: 4px;
 }

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

@@ -6,6 +6,10 @@
   margin: 0 4px; /* So that two adjacent buttons are 8px separated. */
 }
 
-:host ::slotted(*) {
+/* Default slot data is not selected by ::slotted() selector, see
+ * https://crbug.com/703984.
+ */
+:host ::slotted(*),
+#text {
   font-size: 12px;
 }