Currently, when calling showModal(), a dialog element would be added to both the pending dialog stack and the stack of the top layer. An element appearing in two stacks usually indicates potential problems as shown previous for having both the fullscreen element stack and the top layer. And there is problem for this as well, again.

The problem is that, when adding an element to the top layer which already presents there, it is moved to the top of the top layer (rather than a no-op), and there are currently (at least) two ways to add an element there, one is via adding the element to the pending dialog stack, the other is via fullscreen the element, so one can do something like:

1. calling showModal() on dialog #a
2. calling showModal() on dialog #b
3. calling requestFullscreen() on dialog #a

After this, the stack of the top layer would be (from bottom to top) [#b, #a], while the pending dialog stack would be [#a, #b], which is unsync.

Even worse, the top layer renders in a way that the later an element is added, the higher its z-order would be, so in this case, user would actually see #a rather than #b, but every algorithm in the HTML spec which depends on the pending dialog stack treats #b as the current dialog.

In addition to the issue above, at that state, the document is considered to be blocked by dialog #b which makes the whole viewport non-operable because the fullscreened #a is inerted.

(Note that, the last issue happens whenever an element outside the current modal dialog enters fullscreen, no matter whether that element is another modal dialog.)

Given this, I suggest that we merge the pending dialog stack into the top layer, then use a flag to indicate that the element is a modal dialog, and change the blocked by a modal dialog concept to blocked by the top layer, which inerts everything outside the top element of the top layer.

(I think I, or someone else, should have filed a similiar issue before... but I didn't find it, so file again.)

cc @foolip @annevk @domenic