From ac1cb1e91d63135fa6f1cb8b4ba0527a98fcb996 Mon Sep 17 00:00:00 2001
From: Valdrin Koshi <valdrin@google.com>
Date: Wed, 10 Jan 2018 11:32:02 -0800
Subject: [PATCH] backdrop z-index below top overlay with-backdrop (#252)

* backdrop z-index below top overlay with-backdrop

* [skip ci] update message to reflect correct state
---
 demo/index.html                 | 10 ++++++---
 iron-overlay-manager.html       |  2 +-
 test/iron-overlay-behavior.html | 37 +++++++++++++++++----------------
 3 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 63a60a2..61be62d 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -90,15 +90,19 @@ <h3>Multiple overlays can be opened.</h3>
   <demo-snippet>
     <template>
       <button onclick="multiple.open()">Open first overlay</button>
-      <simple-overlay id="multiple" tabindex=-1>
+      <simple-overlay id="multiple" tabindex=-1 with-backdrop>
         <p>click to open another overlay</p>
         <button onclick="multiple2.open()">Open second overlay</button>
         <button onclick="multiple.close()">Close this</button>
       </simple-overlay>
-      <simple-overlay id="multiple2" tabindex=-1>
-        <h2>Hi!</h2>
+      <simple-overlay id="multiple2" tabindex=-1 with-backdrop>
+        <button onclick="multiple3.open()">Open third overlay</button>
         <button onclick="multiple2.close()">Close</button>
       </simple-overlay>
+      <simple-overlay id="multiple3" tabindex=-1>
+        <h2>Hello!</h2>
+        <button onclick="multiple3.close()">Close</button>
+      </simple-overlay>
     </template>
   </demo-snippet>
 
diff --git a/iron-overlay-manager.html b/iron-overlay-manager.html
index 3b33fe6..2b1f23a 100644
--- a/iron-overlay-manager.html
+++ b/iron-overlay-manager.html
@@ -258,7 +258,7 @@
      * @private
      */
     _overlayWithBackdrop: function() {
-      for (var i = 0; i < this._overlays.length; i++) {
+      for (var i = this._overlays.length - 1; i >= 0; i--) {
         if (this._overlays[i].withBackdrop) {
           return this._overlays[i];
         }
diff --git a/test/iron-overlay-behavior.html b/test/iron-overlay-behavior.html
index 989fe52..8a0cc0f 100644
--- a/test/iron-overlay-behavior.html
+++ b/test/iron-overlay-behavior.html
@@ -1193,11 +1193,26 @@ <h2>Focusables (with tabindex)</h2>
       test('newest overlay appear on top', function(done) {
         runAfterOpen(overlay1, function() {
           runAfterOpen(overlay2, function() {
-            var styleZ = parseInt(window.getComputedStyle(overlay1).zIndex, 10);
-            var style1Z = parseInt(window.getComputedStyle(overlay2).zIndex, 10);
+            var style1Z = parseInt(window.getComputedStyle(overlay1).zIndex, 10);
+            var style2Z = parseInt(window.getComputedStyle(overlay2).zIndex, 10);
+            var bgStyleZ = parseInt(window.getComputedStyle(overlay1.backdropElement).zIndex, 10);
+            assert.isAbove(style2Z, style1Z, 'overlay2 above overlay1');
+            assert.isAbove(style2Z, bgStyleZ, 'overlay2 above backdrop');
+            assert.isBelow(style1Z, bgStyleZ, 'overlay1 below backdrop');
+            done();
+          });
+        });
+      });
+
+      test('updating with-backdrop updates z-index', function(done) {
+        runAfterOpen(overlay1, function() {
+          runAfterOpen(overlay2, function() {
+            overlay2.withBackdrop = false;
+            var style1Z = parseInt(window.getComputedStyle(overlay1).zIndex, 10);
+            var style2Z = parseInt(window.getComputedStyle(overlay2).zIndex, 10);
             var bgStyleZ = parseInt(window.getComputedStyle(overlay1.backdropElement).zIndex, 10);
-            assert.isTrue(style1Z > styleZ, 'overlay2 has higher z-index than overlay1');
-            assert.isTrue(styleZ > bgStyleZ, 'overlay1 has higher z-index than backdrop');
+            assert.isAbove(style2Z, bgStyleZ, 'overlay2 above backdrop');
+            assert.isAbove(style1Z, bgStyleZ, 'overlay1 below backdrop');
             done();
           });
         });
@@ -1235,20 +1250,6 @@ <h2>Focusables (with tabindex)</h2>
         });
       });
 
-      test('updating with-backdrop updates z-index', function(done) {
-        runAfterOpen(overlay1, function() {
-          runAfterOpen(overlay2, function() {
-            overlay1.withBackdrop = false;
-            var styleZ = parseInt(window.getComputedStyle(overlay1).zIndex, 10);
-            var style1Z = parseInt(window.getComputedStyle(overlay2).zIndex, 10);
-            var bgStyleZ = parseInt(window.getComputedStyle(overlay1.backdropElement).zIndex, 10);
-            assert.isTrue(style1Z > bgStyleZ, 'overlay2 has higher z-index than backdrop');
-            assert.isTrue(styleZ < bgStyleZ, 'overlay1 has lower z-index than backdrop');
-            done();
-          });
-        });
-      });
-
     });
 
     suite('overlay in composed tree', function() {