-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
wip: add a chase like form (shadow elements in iframe)
- Loading branch information
Showing
8 changed files
with
85 additions
and
35 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<title>Shadow Elements Example</title> | ||
<p>The following form is hosted in an iframe</p> | ||
</head> | ||
<body> | ||
<h1>Shadow Elements Example</h1> | ||
<iframe src="shadow-elements.html" width="100%" height="400"></iframe> | ||
</body> | ||
</html> |
48 changes: 48 additions & 0 deletions
48
integration-test/pages/shadow-in-iframe/shadow-elements.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<title>Shadow DOM Form</title> | ||
</head> | ||
<body> | ||
<p>Replicating secure.chase.com: each of the following form elements are within a shadow root that is open. | ||
The form element itself is not in a shadow root | ||
</p> | ||
<form> | ||
<div id="usernameRoot"></div> | ||
<div id="passwordRoot"></div> | ||
<div id="submitRoot" type="submit">Sign up</div> | ||
</form> | ||
|
||
<script> | ||
// Create shadow roots for username and password inputs | ||
const usernameRoot = document.getElementById('usernameRoot').attachShadow({ mode: 'open' }); | ||
const passwordRoot = document.getElementById('passwordRoot').attachShadow({ mode: 'open' }); | ||
const submitRoot = document.getElementById('submitRoot').attachShadow({ mode: 'open' }); | ||
|
||
// Create username input element | ||
const usernameInput = document.createElement('input'); | ||
usernameInput.type = 'text'; | ||
usernameInput.placeholder = 'Username'; | ||
usernameRoot.appendChild(usernameInput); | ||
|
||
// Create password input element | ||
const passwordInput = document.createElement('input'); | ||
passwordInput.type = 'password'; | ||
passwordInput.placeholder = 'Password'; | ||
passwordRoot.appendChild(passwordInput); | ||
|
||
// Create a submit button | ||
const submitButton = document.createElement('button'); | ||
submitButton.textContent = 'Submit'; | ||
submitRoot.appendChild(submitButton); | ||
|
||
// Add event listener to submit button | ||
submitButton.addEventListener('click', function(event) { | ||
event.preventDefault(); | ||
alert('Username: ' + usernameInput.value + '\nPassword: ' + passwordInput.value); | ||
}); | ||
|
||
</script> | ||
|
||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.