diff --git a/test/cases/components/layout/panel.mjs b/test/cases/components/layout/panel.mjs
new file mode 100644
index 0000000000000000000000000000000000000000..641980455ee5acaf952c9db5ac65f278d9b08a53
--- /dev/null
+++ b/test/cases/components/layout/panel.mjs
@@ -0,0 +1,83 @@
+import {getGlobal} from "../../../../source/types/global.mjs";
+import chai from "chai"
+import {chaiDom} from "../../../util/chai-dom.mjs";
+import {initJSDOM} from "../../../util/jsdom.mjs";
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+const global = getGlobal();
+
+
+// language=html
+let html1 = `
+    <monster-panel id="my-panel">
+       
+    </monster-panel>
+`;
+
+let SplitScreen;
+
+describe('SplitScreen', function () {
+
+    before(function (done) {
+        initJSDOM().then(() => {
+
+            import("element-internals-polyfill").catch(e => done(e));
+            
+            let promises = []
+
+            if (!global['crypto']) {
+                promises.push(import("@peculiar/webcrypto").then((m) => {
+                    const Crypto = m['Crypto'];
+                    global['crypto'] = new Crypto();
+                }));
+            }
+
+            promises.push(import("../../../../source/components/layout/panel.mjs").then((m) => {
+                SplitScreen = m['Panel'];
+            }))
+
+            Promise.all(promises).then(()=>{
+                done();
+            }).catch(e => done(e))
+
+        });
+    })
+
+    describe('document.createElement()', function () {
+
+        afterEach(() => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = "";
+        })
+
+        it('should have buttons and SplitScreen', function (done) {
+
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = html1;
+
+            setTimeout(() => {
+                try {
+                    const SplitScreen = document.getElementById('my-panel')
+                    expect(SplitScreen).is.instanceof(HTMLElement);
+
+                    setTimeout(() => {
+                        let div = SplitScreen.shadowRoot.querySelector('div');
+                        expect(div.hasChildNodes()).to.be.true;
+                        done();
+                    }, 100)
+
+                } catch (e) {
+                    return done(e);
+                }
+
+            }, 0)
+
+
+        });
+
+    });
+
+
+});
\ No newline at end of file
diff --git a/test/cases/components/layout/slit-screen.mjs b/test/cases/components/layout/slit-panel.mjs
similarity index 95%
rename from test/cases/components/layout/slit-screen.mjs
rename to test/cases/components/layout/slit-panel.mjs
index 6657423e0897391c7a8bcad75c14609c38e0afbe..b4a514600cd63ae3524bd38cbb1b2d1a5adf527f 100644
--- a/test/cases/components/layout/slit-screen.mjs
+++ b/test/cases/components/layout/slit-panel.mjs
@@ -11,9 +11,9 @@ const global = getGlobal();
 
 // language=html
 let html1 = `
-    <monster-split-screen id="my-split-screen">
+    <monster-split-panel id="my-split-panel">
        
-    </monster-split-screen>
+    </monster-split-panel>
 `;
 
 let SplitScreen;
@@ -59,7 +59,7 @@ describe('SplitScreen', function () {
 
             setTimeout(() => {
                 try {
-                    const SplitScreen = document.getElementById('my-split-screen')
+                    const SplitScreen = document.getElementById('my-split-panel')
                     expect(SplitScreen).is.instanceof(HTMLElement);
 
                     setTimeout(() => {