From 2bffc4c84e706043355eaf367100b60beb9cce60 Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Tue, 4 Aug 2015 18:33:04 -0700
Subject: [PATCH] Fixes #2193: Implements workaround for
 https://code.google.com/p/chromium/issues/detail?id=516550 by adding
 Polymer.RenderStatus.whenReady and using it to defer `attached`

---
 src/lib/base.html                           | 10 +++-
 src/lib/imports-status.html                 | 46 ---------------
 src/lib/render-status.html                  | 65 +++++++++++++++++++++
 src/lib/template/dom-bind.html              |  4 +-
 src/polymer-lib.html                        |  1 +
 test/runner.html                            |  1 +
 test/smoke/offsetParent-polymer-import.html | 36 ++++++++++++
 test/smoke/offsetParent.html                | 12 +---
 test/unit/attached-style-elements.html      | 32 ++++++++++
 test/unit/attached-style.html               | 62 ++++++++++++++++++++
 10 files changed, 209 insertions(+), 60 deletions(-)
 delete mode 100644 src/lib/imports-status.html
 create mode 100644 src/lib/render-status.html
 create mode 100644 test/smoke/offsetParent-polymer-import.html
 create mode 100644 test/unit/attached-style-elements.html
 create mode 100644 test/unit/attached-style.html

diff --git a/src/lib/base.html b/src/lib/base.html
index 80d62ae446..3e4a5e2fb2 100644
--- a/src/lib/base.html
+++ b/src/lib/base.html
@@ -37,8 +37,14 @@
 
     // reserved for canonical behavior
     attachedCallback: function() {
-      this.isAttached = true;
-      this._doBehavior('attached'); // abstract
+      // NOTE: workaround for:
+      // https://code.google.com/p/chromium/issues/detail?id=516550
+      // To allow querying style/layout data in attached, we defer it
+      // until we are sure rendering is ready.
+      Polymer.RenderStatus.whenReady(function() {
+        this.isAttached = true;
+        this._doBehavior('attached'); // abstract
+      }.bind(this));
     },
 
     // reserved for canonical behavior
diff --git a/src/lib/imports-status.html b/src/lib/imports-status.html
deleted file mode 100644
index 922d92c386..0000000000
--- a/src/lib/imports-status.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<!--
-@license
-Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-
-<script>
-
-  Polymer.ImportStatus = {
-
-    _ready: false,
-
-    _callbacks: [],
-
-    whenLoaded: function(cb) {
-      if (this._ready) {
-        cb();
-      } else {
-        this._callbacks.push(cb);
-      }
-    },
-
-    _importsLoaded: function() {
-      this._ready = true;
-      this._callbacks.forEach(function(cb) {
-        cb();
-      });
-      this._callbacks = [];
-    }
-  };
-
-  window.addEventListener('load', function() {
-    Polymer.ImportStatus._importsLoaded();
-  });
-
-  if (window.HTMLImports) {
-    HTMLImports.whenReady(function() {
-      Polymer.ImportStatus._importsLoaded();
-    });
-  }
-
-</script>
\ No newline at end of file
diff --git a/src/lib/render-status.html b/src/lib/render-status.html
new file mode 100644
index 0000000000..092e4bba68
--- /dev/null
+++ b/src/lib/render-status.html
@@ -0,0 +1,65 @@
+<!--
+@license
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<script>
+  /*
+   * Helper for determining when first render occurs.
+   * Call `Polymer.RenderStatus.whenReady(callback)` to be notified when
+   * first render occurs or immediately if it has already occured.
+   * Note that since HTML Imports are designed to load before rendering, 
+   * this call can also be used to guarantee that imports have loaded.
+   * This behavior is normalized to function correctly with the HTMLImports
+   * polyfill which does not otherwise maintain this rendering guarantee.
+   * Querying style and layout data before first render is currently 
+   * problematic on some browsers (Blink/Webkit) so this helper can be used
+   * to prevent doing so until a safe time.
+   */
+  Polymer.RenderStatus = {
+
+    _ready: false,
+
+    _callbacks: [],
+
+    whenReady: function(cb) {
+      if (this._ready) {
+        cb();
+      } else {
+        this._callbacks.push(cb);
+      }
+    },
+
+    _makeReady: function() {
+      this._ready = true;
+      this._callbacks.forEach(function(cb) {
+        cb();
+      });
+      this._callbacks = [];
+    },
+
+    _catchFirstRender: function() {
+      requestAnimationFrame(function() {
+        Polymer.RenderStatus._makeReady();
+      });
+    }
+  };
+
+  if (window.HTMLImports) {
+    HTMLImports.whenReady(function() {
+      Polymer.RenderStatus._catchFirstRender();
+    });
+  } else {
+    Polymer.RenderStatus._catchFirstRender();
+  }
+
+  // NOTE: for bc.
+  Polymer.ImportStatus = Polymer.RenderStatus;
+  Polymer.ImportStatus.whenLoaded = Polymer.ImportStatus.whenReady;
+
+</script>
\ No newline at end of file
diff --git a/src/lib/template/dom-bind.html b/src/lib/template/dom-bind.html
index bd86d547b6..c0064e9ce7 100644
--- a/src/lib/template/dom-bind.html
+++ b/src/lib/template/dom-bind.html
@@ -48,8 +48,6 @@
 
 -->
 
-<link rel="import" href="../imports-status.html">
-
 <script>
 
   Polymer({
@@ -68,7 +66,7 @@
     created: function() {
       // Ensure dom-bind doesn't stamp until all possible dependencies
       // have resolved
-      Polymer.ImportStatus.whenLoaded(this._markImportsReady.bind(this));
+      Polymer.RenderStatus.whenReady(this._markImportsReady.bind(this));
     },
 
     _ensureReady: function() {
diff --git a/src/polymer-lib.html b/src/polymer-lib.html
index 1e52c5e133..6622d906d0 100644
--- a/src/polymer-lib.html
+++ b/src/polymer-lib.html
@@ -12,5 +12,6 @@
 <link rel="import" href="lib/settings.html">
 <link rel="import" href="lib/polymer-bootstrap.html">
 <link rel="import" href="lib/lang.html">
+<link rel="import" href="lib/render-status.html">
 <link rel="import" href="lib/base.html">
 <link rel="import" href="lib/dom-module.html">
diff --git a/test/runner.html b/test/runner.html
index f8f32642b6..98c5616165 100644
--- a/test/runner.html
+++ b/test/runner.html
@@ -26,6 +26,7 @@
       'unit/template.html',
       'unit/ready.html',
       'unit/ready-shadow.html',
+      'unit/attached-style.html',
       'unit/configure.html',
       'unit/shady.html',
       'unit/polymer-dom.html',
diff --git a/test/smoke/offsetParent-polymer-import.html b/test/smoke/offsetParent-polymer-import.html
new file mode 100644
index 0000000000..10e912cf0e
--- /dev/null
+++ b/test/smoke/offsetParent-polymer-import.html
@@ -0,0 +1,36 @@
+<!--
+@license
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<link rel="import" href="../../polymer.html">
+
+<dom-module id="some-thing">
+  <script>
+  Polymer({
+
+    is: 'some-thing',
+
+    created: function() {
+      console.warn(this.localName, 'created');
+    },
+
+    attached: function() {
+      this.report();
+    },
+
+    report: function() {
+      console.group(this.localName, 'report');
+      console.log('offsetParent is', this.offsetParent);
+      console.log('parentNode', this.parentNode, 'has position', 
+        window.getComputedStyle(this.parentNode).position);
+      console.groupEnd(this.localName);
+    }
+
+  });
+</script>
+</dom-module>
diff --git a/test/smoke/offsetParent.html b/test/smoke/offsetParent.html
index cfa609e344..70f7fe1f59 100644
--- a/test/smoke/offsetParent.html
+++ b/test/smoke/offsetParent.html
@@ -10,15 +10,9 @@
 -->
 <html>
 <head>
-  <script>
-    function importLoaded() {
-      console.warn('import loaded');
-      document.querySelector('some-thing').report();
-    }
-
-  </script>
-  <link rel="import" href="offsetParent-import.html" onload="importLoaded()">
-
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <!-- <link rel="import" href="offsetParent-import.html" > -->
+  <link rel="import" href="offsetParent-polymer-import.html" >
 </head>
 <body style="position: relative;">
   <some-thing></some-thing>
diff --git a/test/unit/attached-style-elements.html b/test/unit/attached-style-elements.html
new file mode 100644
index 0000000000..460b8d2d8a
--- /dev/null
+++ b/test/unit/attached-style-elements.html
@@ -0,0 +1,32 @@
+<!--
+@license
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<dom-module id="attached-style">
+  <style>
+    :host {
+      display: block;
+      box-sizing: border-box;
+      border: 1px solid black;
+      height: 100px;
+    }
+  </style>
+  <template>Hi</template>
+  <script>
+    Polymer({
+
+      is: 'attached-style',
+
+      attached: function() {
+        this.offsetParentAtAttachedTime = this.offsetParent;
+        this.offsetHeightAtAttachedTime = this.offsetHeight;
+      }
+
+    });
+  </script>
+</dom-module>
diff --git a/test/unit/attached-style.html b/test/unit/attached-style.html
new file mode 100644
index 0000000000..cc8dee06c0
--- /dev/null
+++ b/test/unit/attached-style.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+  <meta charset="UTF-8">
+
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script>
+    addEventListener('WebComponentsReady', function() {
+      window.elementsReady = true;
+      // Record layout data at WebComponentsReady time for later testing
+      var el = document.querySelector('attached-style');
+      el.offsetParentAtWebComponentsReadyTime = el.offsetParent;  
+      el.offsetHeightAtWebComponentsReadyTime = el.offsetHeight;  
+    });
+  </script>
+  <script src="../../../web-component-tester/browser.js"></script>
+
+  <link rel="import" href="../../polymer.html">
+  <link rel="import" href="attached-style-elements.html">
+</head>
+<body>
+
+  <attached-style></attached-style>
+
+  <script>
+
+    suite('Attached can get computed style data', function() {
+      
+      var el = document.querySelector('attached-style');
+
+      test('style data available at attached time', function() {
+        assert.equal(el.offsetParentAtAttachedTime, document.body);
+        assert.equal(el.offsetHeightAtAttachedTime, 100);
+      });
+
+      test('style data available at WebComponentsReady time', function(done) {
+        function finish() {
+          assert.equal(el.offsetParentAtWebComponentsReadyTime, document.body);
+          assert.equal(el.offsetHeightAtWebComponentsReadyTime, 100);  
+          done();
+        }
+        if (!window.elementsReady) {
+          addEventListener('WebComponentsReady', finish);
+        } else {
+          finish();
+        }
+      })
+
+    });
+  </script>
+
+</body>
+</html>