Use padding-top to get correct computed style on older safari

Because the element wasn't floating, `top: 10px` was not showing up in computed styles on Safari 9 and 10
Polymer · Dec 6, 2017 · b7c5617 · b7c5617
1 parent 0b1cd70
commit b7c5617
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/lib/mixins/element-mixin.html b/lib/mixins/element-mixin.html
@@ -417,18 +417,18 @@
     function processElementStyles(klass, template, is, baseURI) {
       const styles = Polymer.StyleGather.stylesFromModuleImports(is).concat(
         Polymer.StyleGather.stylesFromTemplate(template));
-      const templateStyles = Array.from(template.content.querySelectorAll('style'));
+      const templateStyles = template.content.querySelectorAll('style');
       // keep track of the last "concrete" style in the template we have encountered
       let templateStyleIndex = 0;
       // ensure all gathered styles are actually in this template.
       for (let i=0; i < styles.length; i++) {
         let s = styles[i];
+        let templateStyle = templateStyles[templateStyleIndex];
         // if the style is not in this template, it's been "included" and
         // we put a clone of it in the template before the style that included it
-        if (templateStyles.indexOf(s) === -1) {
+        if (templateStyle !== s) {
           s = s.cloneNode(true);
-          let importingTemplateStyle = templateStyles[templateStyleIndex];
-          importingTemplateStyle.parentNode.insertBefore(s, importingTemplateStyle);
+          templateStyle.parentNode.insertBefore(s, templateStyle);
         } else {
           templateStyleIndex++;
         }

diff --git a/test/unit/styling-scoped.html b/test/unit/styling-scoped.html
@@ -660,10 +660,20 @@
   </x-specificity-parent>
   <x-overriding></x-overriding>
 
+  <dom-module id="nested-shared-style">
+    <template>
+      <style>
+        :host {
+          padding-top: 10px;
+        }
+      </style>
+    </template>
+  </dom-module>
+
   <dom-module id="x-nested-style">
     <template>
       <div id="container">
-        <style include="shared-style">
+        <style include="nested-shared-style">
           :host {
             display: block;
             border: 10px solid black;
@@ -675,10 +685,6 @@
       addEventListener('WebComponentsReady', () => {
         class XNestedStyle extends Polymer.Element {
           static get is() {return 'x-nested-style';}
-          ready() {
-            super.ready();
-            this.classList.add('x-shared1');
-          }
         }
         customElements.define(XNestedStyle.is, XNestedStyle);
       });
@@ -946,7 +952,7 @@
       var e = document.createElement('x-nested-style');
       document.body.appendChild(e);
       assertComputed(e, '10px');
-      assertComputed(e, '10px', 'top');
+      assertComputed(e, '10px', 'padding-top');
     });
 
   });