add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / test / specs / ZIndexManager.js

describe('Ext.ZIndexManager', function() {\r
    function cancelFocus() {\r
        var task = Ext.focusTask;\r
        if (task) {\r
            task.cancel();\r
        }\r
    }\r
\r
    describe('z-index stacking', function() {\r
        var c1, c2, c3;\r
\r
        beforeEach(function() {\r
            c1 = new Ext.window.Window({\r
                title: 'c1',\r
                id: 'c1',\r
                height: 100,\r
                width: 100,\r
                focusOnToFront: false\r
            });\r
            c2 = new Ext.window.Window({\r
                title: 'c2',\r
                id: 'c2',\r
                height: 100,\r
                width: 100,\r
                focusOnToFront: false\r
            });\r
            c3 = new Ext.window.Window({\r
                title: 'c3',\r
                id: 'c3',\r
                height: 100,\r
                width: 100,\r
                focusOnToFront: false\r
            });\r
        });\r
        afterEach(function() {\r
            Ext.destroy(c1, c2, c3);\r
        });\r
        \r
        it('should order the windows as they are rendered', function() {\r
            c1.show();\r
            c2.show();\r
            c3.show();\r
            // onMousedown quits if there is a pending focus task.\r
            cancelFocus();\r
\r
            // Order bottom up should be c1, c2, c3\r
            expect(c3.el.getZIndex()).toBeGreaterThan(c2.el.getZIndex());\r
            expect(c2.el.getZIndex()).toBeGreaterThan(c1.el.getZIndex());\r
        });\r
        it('should re-order the windows on mousedown', function() {\r
            c1.showAt(0, 0);\r
            c2.showAt(50, 0);\r
            c3.showAt(100, 0);\r
            // onMousedown quits if there is a pending focus task.\r
            cancelFocus();\r
\r
            // Fake mousedown because sythetic events won't work with capture which is what Floating's listener uses\r
            c1.onMouseDown({\r
                target: c1.el.dom\r
            });\r
            \r
            // Mousedown moves to top\r
            // Order bottom up should be c2, c3, c1\r
            expect(c1.el.getZIndex()).toBeGreaterThan(c3.el.getZIndex());\r
            expect(c3.el.getZIndex()).toBeGreaterThan(c2.el.getZIndex());\r
        });\r
        it('should honour alwaysOnTop', function() {\r
            c1.setAlwaysOnTop(true);\r
            c1.showAt(0, 0);\r
            c2.showAt(50, 0);\r
            c3.showAt(100, 0);\r
            // onMousedown quits if there is a pending focus task.\r
            cancelFocus();\r
\r
            // c1 should be glued to the top\r
            // Order bottom up should be c2, c3, c1\r
            expect(c1.el.getZIndex()).toBeGreaterThan(c3.el.getZIndex());\r
            expect(c3.el.getZIndex()).toBeGreaterThan(c2.el.getZIndex());\r
\r
            // Fake mousedown because sythetic events won't work with capture which is what Floating's listener uses\r
            c2.onMouseDown({\r
                target: c2.el.dom\r
            });\r
\r
            // Because there is a visible alwaysOnTop component, that mousedown should have changed nothing\r
            // Order bottom up should still be c2, c3, c1\r
            expect(c1.el.getZIndex()).toBeGreaterThan(c3.el.getZIndex());\r
            expect(c3.el.getZIndex()).toBeGreaterThan(c2.el.getZIndex());\r
\r
        });\r
        it('should sort to the bottom of the ZIndexStack if alwaysOnTop === -1', function() {\r
            c3.setAlwaysOnTop(-1);\r
            c1.showAt(0, 0);\r
            c2.showAt(50, 0);\r
            c3.showAt(100, 0);\r
            // onMousedown quits if there is a pending focus task\r
            cancelFocus();\r
\r
            // c3 should be glued to the bottom\r
            // Order bottom up should be c3, c1, c2\r
            expect(c2.el.getZIndex()).toBeGreaterThan(c1.el.getZIndex());\r
            expect(c1.el.getZIndex()).toBeGreaterThan(c3.el.getZIndex());\r
        });\r
        it('should order parents', function() {\r
            // c2's ZIndexManager now manages C3's zIndex\r
            c2.add(c3);\r
\r
            c1.showAt(0, 0);\r
            c2.showAt(50, 0);\r
            c3.showAt(25, 25);\r
            // onMousedown quits if there is a pending focus task.\r
            cancelFocus();\r
\r
            // Fake mousedown because sythetic events won't work with capture which is what Floating's listener uses\r
            c1.onMouseDown({\r
                target: c1.el.dom\r
            });\r
\r
            // c1 moved to top\r
            // Order bottom up should be c2, c3, c1\r
            expect(c1.el.getZIndex()).toBeGreaterThan(c3.el.getZIndex());\r
            expect(c3.el.getZIndex()).toBeGreaterThan(c2.el.getZIndex());\r
            // Fake mousedown because sythetic events won't work with capture which is what Floating's listener uses\r
            c2.onMouseDown({\r
                target: c2.el.dom\r
            });\r
\r
            // onMousedown quits if there is a pending focus task.\r
            cancelFocus();\r
\r
            // Mousedown on c2 should bring both c2 and c2 above c1 because c3 is a child of c2\r
            // Order bottom up should be c1, c2, c3\r
            expect(c3.el.getZIndex()).toBeGreaterThan(c2.el.getZIndex());\r
            expect(c2.el.getZIndex()).toBeGreaterThan(c1.el.getZIndex());\r
        });\r
\r
        it("should assign a z-index to a floater that is rendered visible", function() {\r
            var c = new Ext.Component({\r
                renderTo: Ext.getBody(),\r
                floating: true,\r
                html: 'Foo'\r
            });\r
            c.show();\r
            expect(c.getEl().getZIndex()).toBe(Ext.WindowManager.zseed);\r
            c.destroy();\r
        });\r
    });\r
\r
    describe("modal masking", function() {\r
        var w, mask;\r
\r
        afterEach(function() {\r
            Ext.destroy(w);\r
            mask = w = null;\r
        });\r
\r
        function makeWindow(config) {\r
            w = new Ext.window.Window(Ext.applyIf(config || {}, {\r
                width: 200,\r
                height: 200,\r
                title: 'Foo',\r
                autoShow: true,\r
                modal: true\r
            }));\r
        }\r
\r
        describe("mask visibility", function() {\r
            beforeEach(function() {\r
                makeWindow();\r
                mask = w.zIndexManager.mask;\r
            });\r
\r
            function getMaskIndex() {\r
                return parseInt(w.zIndexManager.mask.getStyle('z-index'), 10);\r
            }\r
\r
            it("should show the mask below the floater when open", function() {\r
                expect(mask.isVisible()).toBe(true);\r
                expect(getMaskIndex()).toBeLessThan(w.getEl().getZIndex());\r
            });\r
\r
            it("should re-show the mask after hiding then showing", function() {\r
                w.hide();\r
                w.show();\r
                expect(mask.isVisible()).toBe(true);\r
            });\r
\r
            it("should hide the modal mask when hiding the last floater", function() {\r
                w.hide();\r
                expect(mask.isVisible()).toBe(false);\r
            });\r
\r
            it("should hide the modal mask when destroying the last floater", function() {\r
                w.destroy();\r
                expect(mask.isVisible()).toBe(false);\r
            });\r
        });\r
        \r
        describe("element tabbability", function() {\r
            var btn, tabbables;\r
            \r
            beforeEach(function() {\r
                btn = new Ext.button.Button({\r
                    renderTo: Ext.getBody(),\r
                    text: 'foo'\r
                });\r
            });\r
            \r
            afterEach(function() {\r
                Ext.destroy(btn);\r
                btn = null;\r
            });\r
            \r
            describe("components below mask", function() {\r
                beforeEach(function() {\r
                    makeWindow();\r
                });\r
                \r
                it("button should become untabbable on mask show", function() {\r
                    // skipSelf = true, skipChildren = false, excludeRoot = w.el\r
                    tabbables = Ext.getBody().findTabbableElements({\r
                        skipSelf: true,\r
                        excludeRoot: w.el\r
                    });\r
                    \r
                    expect(tabbables.length).toBe(0);\r
                });\r
                \r
                it("button should become tabbable on mask hide", function() {\r
                    w.hide();\r
                    \r
                    // skipSelf = true, skipChildren = false, excludeRoot = w.el\r
                    tabbables = Ext.getBody().findTabbableElements({\r
                        skipSelf: true,\r
                        excludeRoot: w.el\r
                    });\r
                    \r
                    expect(tabbables).toEqual([ btn.getFocusEl().dom ]);\r
                });\r
                \r
                it("button should become untabbable on mask show/hide/show", function() {\r
                    w.hide();\r
                    w.show();\r
                    \r
                    // skipSelf = true, skipChildren = false, excludeRoot = w.el\r
                    tabbables = Ext.getBody().findTabbableElements({\r
                        skipSelf: true,\r
                        excludeRoot: w.el\r
                    });\r
                    \r
                    expect(tabbables.length).toBe(0);\r
                });\r
            });\r
            \r
            describe("components above mask", function() {\r
                beforeEach(function() {\r
                    makeWindow({\r
                        items: [\r
                            { xtype: 'textfield', fieldLabel: 'Login' },\r
                            { xtype: 'textfield', fieldLabel: 'Password' }\r
                        ],\r
                        \r
                        buttons: [\r
                            { text: 'OK' }\r
                        ]\r
                    });\r
                });\r
                \r
                it("should keep items above the mask tabbable", function() {\r
                    tabbables = w.getEl().findTabbableElements({\r
                        skipSelf: true\r
                    });\r
                    \r
                    // 6 tababbles:\r
                    // - Top focus trap\r
                    // - Window header (it's a FocusableContainer)\r
                    // - textfield 1\r
                    // - textfield 2\r
                    // - Toolbar (FocusableContainer)\r
                    // - Bottom focus trap\r
                    expect(tabbables.length).toBe(6);\r
                });\r
            });\r
        });\r
\r
        describe("mask size", function() {\r
            // Not sure how to simulate a body resize here\r
            it("should size the mask to the body if the manager is global", function() {\r
                makeWindow();\r
                mask = w.zIndexManager.mask;\r
                expect(mask.getSize()).toEqual(Ext.Element.getViewSize());\r
                expect(mask).toHaveCls(Ext.Component.prototype.borderBoxCls);\r
            });\r
\r
            it("should set the mask to the size of the container", function() {\r
                var ct = new Ext.container.Container({\r
                    renderTo: Ext.getBody(),\r
                    width: 400,\r
                    height: 400\r
                });\r
\r
                w = ct.add({\r
                    xtype: 'window',\r
                    width: 100,\r
                    height: 100,\r
                    modal: true,\r
                    title: 'Foo'\r
                });\r
\r
                w.show();\r
                mask = w.zIndexManager.mask;\r
                expect(mask.getSize()).toEqual({\r
                    width: 400,\r
                    height: 400\r
                });\r
                ct.destroy();\r
            });\r
\r
            // This currently doesn't work, but probably should\r
            xit("should resize the mask when the container resizes", function() {\r
                var ct = new Ext.container.Container({\r
                    renderTo: Ext.getBody(),\r
                    width: 400,\r
                    height: 400\r
                });\r
\r
                w = ct.add({\r
                    xtype: 'panel',\r
                    floating: true,\r
                    width: 100,\r
                    height: 100,\r
                    modal: true,\r
                    title: 'Foo'\r
                });\r
\r
                w.show();\r
                mask = w.zIndexManager.mask;\r
                ct.setSize(200, 200);\r
                expect(mask.getSize()).toEqual({\r
                    width: 200,\r
                    height: 200\r
                });\r
                ct.destroy();\r
            });\r
        });\r
    });\r
\r
    describe("hideAll", function() {\r
        it("should hide all visible items", function() {\r
            var a = new Ext.window.Window({\r
                width: 100,\r
                height: 100,\r
                autoShow: true\r
            });\r
            var b = new Ext.window.Window({\r
                width: 100,\r
                height: 100,\r
                autoShow: true\r
            });\r
            var c = new Ext.window.Window({\r
                width: 100,\r
                height: 100,\r
                autoShow: true\r
            });\r
\r
            Ext.WindowManager.hideAll();\r
            expect(a.isVisible()).toBe(false);\r
            expect(b.isVisible()).toBe(false);\r
            expect(c.isVisible()).toBe(false);\r
\r
            Ext.destroy(a, b, c);\r
        });\r
\r
        it("should be able to show/hide the modal mask after a hideAll call", function() {\r
            var a = new Ext.window.Window({\r
                width: 100,\r
                height: 100,\r
                autoShow: true\r
            });\r
            var b = new Ext.window.Window({\r
                width: 100,\r
                height: 100,\r
                autoShow: true\r
            });\r
            var c = new Ext.window.Window({\r
                width: 100,\r
                height: 100,\r
                autoShow: true\r
            });\r
\r
            Ext.WindowManager.hideAll();\r
            expect(a.isVisible()).toBe(false);\r
            expect(b.isVisible()).toBe(false);\r
            expect(c.isVisible()).toBe(false);\r
\r
            var mask = a.zIndexManager.mask;\r
            expect(mask.isVisible()).toBe(false);\r
\r
            var d = new Ext.window.Window({\r
                width: 100,\r
                height: 100,\r
                modal: true,\r
                autoShow: true\r
            });\r
\r
            expect(mask.isVisible()).toBe(true);\r
            d.hide();\r
            expect(mask.isVisible()).toBe(false);\r
\r
            Ext.destroy(a, b, c, d);\r
        });\r
    });\r
\r
    // testcase for https://sencha.jira.com/browse/EXTJS-14046\r
    describe("picker field's pickers should stick to back if alwaysOnTop is set to -1", function() {\r
        it('should keep pickers below all other floating components', function() {\r
            var windowCombo,\r
                combo = new Ext.form.ComboBox({\r
                    store: ['A', 'b', 'C'],\r
                    editable: false,\r
                    fieldLabel: 'Combo',\r
                    renderTo: Ext.getBody(),\r
                    listConfig: {\r
                        alwaysOnTop: -1\r
                    }\r
                }),\r
                dateField = new Ext.form.Date({\r
                    editable: false,\r
                    fieldLabel: 'Date',\r
                    renderTo: Ext.getBody()\r
                }),\r
                window = new Ext.window.Window({\r
                    autoShow: true,\r
                    title: 'Test',\r
                    x:200,\r
                    y:0,\r
                    width: 400,\r
                    height: 400,\r
                    items: [\r
                        windowCombo = new Ext.form.ComboBox({\r
                            store: ['A', 'b', 'C'],\r
                            editable: false,\r
                            listCOnfig: {\r
                                alwaysOnTop: -1\r
                            }\r
                        })\r
                    ]\r
                });\r
            dateField.getPicker().setAlwaysOnTop(-1);\r
\r
            // The combo dropdown should be below the window\r
            combo.expand();\r
            expect(combo.getPicker().el.getZIndex()).toBeLessThan(window.el.getZIndex());\r
            combo.collapse();\r
\r
            // The combo dropdown should be below the window\r
            dateField.expand();\r
            expect(dateField.getPicker().el.getZIndex()).toBeLessThan(window.el.getZIndex());\r
            dateField.collapse();\r
\r
            // The combo dropdown in the window is realtive to the window's ZIndexManager.\r
            // It should go above the window\r
            windowCombo.expand();\r
            expect(windowCombo.getPicker().el.getZIndex()).toBeGreaterThan(window.el.getZIndex());\r
            windowCombo.collapse();\r
\r
            // The combo dropdown should be below the window\r
            combo.expand();\r
            expect(combo.getPicker().el.getZIndex()).toBeLessThan(window.el.getZIndex());\r
            \r
            Ext.destroy(combo, dateField, window);\r
        });\r
    });\r
\r
    describe("bringToFront", function() {\r
        it("should return false when bringing to front a non-rendered window, when passing id", function() {\r
            var win = new Ext.window.Window({\r
                title: 'Win',\r
                id: 'theWin',\r
                width: 100,\r
                height: 100\r
            });\r
            expect(Ext.WindowManager.bringToFront('theWin')).toBe(false);\r
            win.destroy();\r
        });   \r
    });\r
    \r
    // This test would better fit a Floating test suite but it's not clear\r
    // where the concerns are separated since Floating code is private\r
    // and is supposed to be called by ZIndexManager only. So let it be here.\r
    describe("focus handling", function() {\r
        var focusAndWait = jasmine.focusAndWait,\r
            waitForFocus = jasmine.waitForFocus,\r
            expectFocused = jasmine.expectFocused,\r
            btn, win, input1, input2;\r
        \r
        beforeEach(function() {\r
            btn = new Ext.button.Button({\r
                renderTo: Ext.getBody(),\r
                text: 'foo'\r
            });\r
            \r
            win = new Ext.window.Window({\r
                title: 'bar',\r
                width: 200,\r
                height: 100,\r
                x: 30,\r
                y: 30,\r
                closeAction: 'hide',\r
                \r
                items: [{\r
                    xtype: 'textfield',\r
                    itemId: 'input1'\r
                }, {\r
                    xtype: 'textfield',\r
                    itemId: 'input2',\r
                    allowBlank: false\r
                }]\r
            });\r
            \r
            input1 = win.down('#input1');\r
            input2 = win.down('#input2');\r
            \r
            focusAndWait(btn);\r
        });\r
        \r
        afterEach(function() {\r
            Ext.destroy(win, btn);\r
            \r
            btn = win = input1 = input2 = null;\r
        });\r
\r
        describe("focusable floater show/hide with no animation", function() {\r
            beforeEach(function() {\r
                win.show();\r
            \r
                waitForFocus(win);\r
            });\r
            \r
            it("should focus the window on show", function() {\r
                expectFocused(win);\r
            });\r
        \r
            it("should focus the button back on window hide", function() {\r
                win.close();\r
            \r
                expectFocused(btn);\r
            });\r
        });\r
        \r
        describe("focusable floater show/hide with animation", function() {\r
            beforeEach(function() {\r
                win.show(btn);\r
            \r
                waitForFocus(win);\r
            });\r
            \r
            it("should focus the window on show", function() {\r
                expectFocused(win);\r
            });\r
        \r
            it("should focus the button back on window hide", function() {\r
                win.close(btn);\r
            \r
                expectFocused(btn);\r
            });\r
        });\r
        \r
        describe("non-focusable floater show/hide", function() {\r
            var panel;\r
            \r
            beforeEach(function() {\r
                panel = new Ext.panel.Panel({\r
                    floating: true,\r
                    title: 'floating',\r
                    width: 100,\r
                    height: 100,\r
                    x: 300,\r
                    y: 30,\r
                    html: 'floating panel'\r
                });\r
                \r
                win.show();\r
                \r
                focusAndWait(input2);\r
            });\r
            \r
            afterEach(function() {\r
                Ext.destroy(panel);\r
            });\r
            \r
            it("should not steal focus on floater show", function() {\r
                panel.show();\r
            \r
                expectFocused(input2);\r
            });\r
            \r
            it("should not munge focus on floater hide", function() {\r
                panel.show();\r
                panel.hide();\r
                \r
                expectFocused(input2);\r
            });\r
        });\r
        \r
        describe("event order", function() {\r
            it("should fire floater hide event after sorting zIndexStack", function() {\r
                var oldOnCollectionSort = Ext.WindowManager.onCollectionSort,\r
                    events = [],\r
                    win;\r
                \r
                win = new Ext.window.Window({\r
                    title: 'foo',\r
                    width: 300,\r
                    height: 200,\r
                    x: 10,\r
                    y: 10,\r
                    closeAction: 'hide',\r
                    listeners: {\r
                        hide: function() {\r
                            events.push('hide');\r
                        }\r
                    }\r
                }).show();\r
                \r
                // Can't use jasmine spy here because it can't be chained\r
                Ext.WindowManager.onCollectionSort = function() {\r
                    events.push('sort');\r
                    oldOnCollectionSort.call(Ext.WindowManager);\r
                };\r
                \r
                // Event flow is synchronous here\r
                win.close();\r
                \r
                expect(events).toEqual(['sort', 'hide']);\r
                \r
                Ext.WindowManager.onCollectionSort = oldOnCollectionSort;\r
                \r
                win.destroy();\r
                \r
                win = null;\r
            });\r
        });\r
    });\r
\r
    describe('focus restoration after window drag', function() {\r
        var win;\r
        \r
        afterEach(function() {\r
            win.destroy();\r
            win = null;\r
        });\r
        \r
        it('should restore focus after showing', function() {\r
            var xy, x, child, text;\r
            \r
            win = new Ext.window.Window({\r
                title: 'Test Window',\r
                width: 410,\r
                height: 400\r
            });\r
\r
            win.show();\r
\r
            xy = win.getXY();\r
            x = win.header.getX();\r
\r
            child = new Ext.window.Window({\r
                width: 200,\r
                height: 100,\r
                items: {\r
                    xtype: 'textfield'\r
                }\r
            });\r
\r
            win.add(child);\r
            child.show();\r
\r
            text = child.items.first();\r
\r
            text.focus();\r
\r
            jasmine.waitForFocus(text);\r
\r
            runs(function() {\r
                expect(text.hasFocus).toBe(true);\r
                // Drag the Window by the header\r
                jasmine.fireMouseEvent(win.header.el, 'mousedown', x);\r
                jasmine.fireMouseEvent(win.header.el, 'mousemove', x + 100);\r
\r
                expect(child.isVisible()).toBe(false);\r
\r
                jasmine.fireMouseEvent(Ext.getBody(), 'mouseup');\r
\r
                // Window should have moved 100px right\r
                xy[0] += 100;\r
                expect(win.getXY()).toEqual(xy);\r
            });\r
\r
            jasmine.waitForFocus(text);\r
            runs(function() {\r
                expect(text.hasFocus).toBe(true);\r
            });\r
        });\r
    });\r
});\r