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
PolymerElements · Jan 10, 2018 · ac1cb1e · ac1cb1e
1 parent 3a1c21c
commit ac1cb1e
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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() {