Skip to content

add iframe and shadow root pages into demo app #143

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
paweltomaszewskisaucelabs wants to merge 1 commit into
base: main
Choose a base branch
from
Open

add iframe and shadow root pages into demo app #143

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
.DS_Store
node_modules/
build/
.npmrc
3 changes: 3 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,5 +116,8 @@
"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
"prettier --write"
]
},
"volta": {
"node": "18.20.8"
}
}
2 changes: 1 addition & 1 deletion public/frames/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!-- Created for Visual testing -->
<!-- Created for Visual testing and AI Authoring -->

<!DOCTYPE html>
<html>
Expand Down
54 changes: 54 additions & 0 deletions public/mixed-nesting/deep-level-2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Deep Nesting — Level 2 iframe document</title>
<meta charset="UTF-8">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 12px;
background-color: #fff;
}
</style>
</head>
<body>
<div class="level-2-label" data-level="2">Level 2 — Iframe</div>
<div id="level-3-host" data-level="3"></div>

<script src="/shadow-dom/_mode.js"></script>
<script>
const mode = resolveShadowMode();

const host = document.getElementById('level-3-host');
const shadow = host.attachShadow({ mode });
shadow.innerHTML = `
<style>
.level {
background: #e8f5e9;
border: 2px solid #2e7d32;
padding: 12px;
border-radius: 6px;
margin-top: 6px;
}
.label {
font-weight: bold;
color: #1b5e20;
margin-bottom: 8px;
}
iframe {
width: 100%;
height: 380px;
border: 2px dashed #2e7d32;
border-radius: 4px;
background: #fff;
}
</style>
<div class="level">
<div class="label">Level 3 — Shadow Root (${mode})</div>
<iframe id="level-4-iframe" data-level="4" src="deep-level-4.html${window.location.search}"></iframe>
</div>
`;
</script>
</body>
</html>
106 changes: 106 additions & 0 deletions public/mixed-nesting/deep-level-4.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Deep Nesting — Level 4 iframe document</title>
<meta charset="UTF-8">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 12px;
background-color: #fff;
}

.scroll-area {
margin: 8px 0;
height: 100px;
overflow-y: auto;
border: 1px solid #555;
border-radius: 4px;
background: #fafafa;
padding: 8px;
}

.scroll-area ol {
margin: 0;
padding-left: 22px;
}
</style>
</head>
<body>
<div class="level-4-label" data-level="4">Level 4 — Iframe</div>
<div id="level-4-scroll" class="scroll-area" data-scrollable="true">
<ol>
<li>L4 iframe scroll item 1</li><li>L4 iframe scroll item 2</li>
<li>L4 iframe scroll item 3</li><li>L4 iframe scroll item 4</li>
<li>L4 iframe scroll item 5</li><li>L4 iframe scroll item 6</li>
<li>L4 iframe scroll item 7</li><li>L4 iframe scroll item 8</li>
<li>L4 iframe scroll item 9</li><li>L4 iframe scroll item 10</li>
<li>L4 iframe scroll item 11</li><li>L4 iframe scroll item 12</li>
<li>L4 iframe scroll item 13</li><li>L4 iframe scroll item 14</li>
<li>L4 iframe scroll item 15</li>
</ol>
</div>
<div id="level-5-host" data-level="5"></div>

<script src="/shadow-dom/_mode.js"></script>
<script>
const mode = resolveShadowMode();

const host = document.getElementById('level-5-host');
const shadow = host.attachShadow({ mode });
shadow.innerHTML = `
<style>
.level {
background: #fff3e0;
border: 2px solid #ef6c00;
padding: 12px;
border-radius: 6px;
margin-top: 6px;
}
.label {
font-weight: bold;
color: #e65100;
margin-bottom: 8px;
}
iframe {
width: 100%;
height: 240px;
border: 2px dashed #ef6c00;
border-radius: 4px;
background: #fff;
}
.scroll-area {
margin-bottom: 8px;
height: 100px;
overflow-y: auto;
border: 1px solid #ef6c00;
border-radius: 4px;
background: #fff;
padding: 8px;
}
.scroll-area ol {
margin: 0;
padding-left: 22px;
}
</style>
<div class="level">
<div class="label">Level 5 — Shadow Root (${mode})</div>
<div id="level-5-scroll" class="scroll-area" data-scrollable="true">
<ol>
<li>L5 shadow scroll item 1</li><li>L5 shadow scroll item 2</li>
<li>L5 shadow scroll item 3</li><li>L5 shadow scroll item 4</li>
<li>L5 shadow scroll item 5</li><li>L5 shadow scroll item 6</li>
<li>L5 shadow scroll item 7</li><li>L5 shadow scroll item 8</li>
<li>L5 shadow scroll item 9</li><li>L5 shadow scroll item 10</li>
<li>L5 shadow scroll item 11</li><li>L5 shadow scroll item 12</li>
<li>L5 shadow scroll item 13</li><li>L5 shadow scroll item 14</li>
<li>L5 shadow scroll item 15</li>
</ol>
</div>
<iframe id="level-6-iframe" data-level="6" src="deep-level-6.html${window.location.search}"></iframe>
</div>
`;
</script>
</body>
</html>
47 changes: 47 additions & 0 deletions public/mixed-nesting/deep-level-6.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Deep Nesting — Level 6 final content</title>
<meta charset="UTF-8">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 16px;
background-color: #fce4ec;
}

h3 {
color: #ad1457;
margin: 0 0 8px;
}

p {
color: #880e4f;
margin: 4px 0;
}

button {
padding: 6px 12px;
background-color: #ad1457;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<h3 data-level="6">Level 6 — Iframe (deepest)</h3>
<p id="deepest-paragraph">You reached the deepest level. Path from the top:</p>
<ol>
<li>Level 1 — Shadow Root</li>
<li>Level 2 — Iframe</li>
<li>Level 3 — Shadow Root</li>
<li>Level 4 — Iframe</li>
<li>Level 5 — Shadow Root</li>
<li>Level 6 — Iframe (this document)</li>
</ol>
<button id="deepest-button">Deepest Button</button>
</body>
</html>
60 changes: 60 additions & 0 deletions public/mixed-nesting/deep-nested.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>6 Levels Deep — Shadow + Iframe</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta charset="UTF-8">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
</style>
</head>
<body>
<h1>6-Level Nested: Shadow ➜ Iframe ➜ Shadow ➜ Iframe ➜ Shadow ➜ Iframe</h1>
<p>Each step alternates between a Shadow Root and an Iframe. Click into the deepest
iframe to see content rendered at nesting depth 6.</p>

<div id="level-1-host" data-level="1"></div>

<p>Shadow root mode: <strong id="mode-indicator"></strong>
(toggle via <code>?modeOpen=true</code> or <code>?modeOpen=false</code> — propagates through all 6 levels).</p>

<script src="/shadow-dom/_mode.js"></script>
<script>
const mode = resolveShadowMode();

const host = document.getElementById('level-1-host');
const shadow = host.attachShadow({ mode });
shadow.innerHTML = `
<style>
.level {
background: #e3f2fd;
border: 2px solid #1565c0;
padding: 12px;
border-radius: 6px;
}
.label {
font-weight: bold;
color: #0d47a1;
margin-bottom: 8px;
}
iframe {
width: 100%;
height: 520px;
border: 2px dashed #1565c0;
border-radius: 4px;
background: #fff;
}
</style>
<div class="level">
<div class="label">Level 1 — Shadow Root (${mode})</div>
<iframe id="level-2-iframe" data-level="2" src="deep-level-2.html${window.location.search}"></iframe>
</div>
`;
</script>
</body>
</html>
60 changes: 60 additions & 0 deletions public/mixed-nesting/iframe-in-shadow.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Iframe in Shadow Root</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta charset="UTF-8">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
</style>
</head>
<body>
<h1>Iframe in Shadow Root</h1>
<p>The host below has a shadow root, and inside that shadow root there is an iframe
loading a separate document.</p>

<div id="shadow-host"></div>

<p>Shadow root mode: <strong id="mode-indicator"></strong>
(toggle via <code>?modeOpen=true</code> or <code>?modeOpen=false</code> — propagates into the iframe).</p>

<script src="/shadow-dom/_mode.js"></script>
<script>
const mode = resolveShadowMode();

const host = document.getElementById('shadow-host');
const shadow = host.attachShadow({ mode });
shadow.innerHTML = `
<style>
.wrap {
background: #fff8e1;
border: 2px solid #ff8f00;
padding: 12px;
border-radius: 6px;
font-family: Arial, sans-serif;
}
p {
color: #ff8f00;
margin: 4px 0 10px;
}
iframe {
width: 100%;
height: 220px;
border: 2px dashed #ff8f00;
border-radius: 4px;
background: #fff;
}
</style>
<div class="wrap">
<p id="shadow-paragraph">I am inside the shadow root. The iframe below is my child.</p>
<iframe id="nested-iframe" src="shadow-iframe-content.html${window.location.search}"></iframe>
</div>
`;
</script>
</body>
</html>
22 changes: 22 additions & 0 deletions public/mixed-nesting/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!-- Created for Visual testing and AI Authoring -->

<!DOCTYPE html>
<html>
<head>
<title>Mixed Nesting test page</title>
</head>

<body>
<ul>
<li>
<a href="shadow-in-iframe.html" id="shadow-in-iframe">shadow root in iframe</a>
</li>
<li>
<a href="iframe-in-shadow.html" id="iframe-in-shadow">iframe in shadow root</a>
</li>
<li>
<a href="deep-nested.html" id="deep-nested">6 levels deep (shadow + iframe)</a>
</li>
</ul>
</body>
</html>
Loading
Loading