97 lines
3.6 KiB
HTML
97 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Element Checking Test Page</title>
|
|
<style>
|
|
.hidden { display: none; }
|
|
.invisible { visibility: hidden; }
|
|
.container { margin: 20px; padding: 10px; border: 1px solid #ccc; }
|
|
.red { color: red; }
|
|
.blue { background-color: blue; color: white; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1 id="main-title" class="red">Element Checking Test Page</h1>
|
|
|
|
<div class="container">
|
|
<h2>Visibility Tests</h2>
|
|
<p id="visible-paragraph">This paragraph is visible</p>
|
|
<p id="hidden-paragraph" class="hidden">This paragraph is hidden with display:none</p>
|
|
<p id="invisible-paragraph" class="invisible">This paragraph is invisible with visibility:hidden</p>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<h2>Form Elements</h2>
|
|
<form id="test-form">
|
|
<label for="text-input">Text Input:</label>
|
|
<input type="text" id="text-input" name="text-input" value="default value" placeholder="Enter text">
|
|
|
|
<label for="disabled-input">Disabled Input:</label>
|
|
<input type="text" id="disabled-input" name="disabled-input" disabled value="disabled">
|
|
|
|
<label for="checkbox1">Checkbox 1 (checked):</label>
|
|
<input type="checkbox" id="checkbox1" name="checkbox1" checked>
|
|
|
|
<label for="checkbox2">Checkbox 2 (unchecked):</label>
|
|
<input type="checkbox" id="checkbox2" name="checkbox2">
|
|
|
|
<label for="radio1">Radio 1 (selected):</label>
|
|
<input type="radio" id="radio1" name="radio-group" value="option1" checked>
|
|
|
|
<label for="radio2">Radio 2 (not selected):</label>
|
|
<input type="radio" id="radio2" name="radio-group" value="option2">
|
|
|
|
<select id="dropdown" name="dropdown">
|
|
<option value="option1">Option 1</option>
|
|
<option value="option2" selected>Option 2 (selected)</option>
|
|
<option value="option3">Option 3</option>
|
|
</select>
|
|
|
|
<button type="button" id="test-button" class="blue">Test Button</button>
|
|
<button type="submit" id="submit-button" disabled>Submit (disabled)</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<h2>Multiple Elements</h2>
|
|
<div class="item" data-id="1">Item 1</div>
|
|
<div class="item" data-id="2">Item 2</div>
|
|
<div class="item" data-id="3">Item 3</div>
|
|
<span class="item" data-id="4">Item 4 (span)</span>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<h2>Custom Attributes</h2>
|
|
<div id="custom-element"
|
|
data-test="test-value"
|
|
data-number="42"
|
|
aria-label="Custom element"
|
|
title="This is a tooltip"
|
|
custom-attr="custom-value">
|
|
Element with custom attributes
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Add some dynamic behavior for testing
|
|
document.getElementById('test-button').addEventListener('click', function() {
|
|
this.focus();
|
|
console.log('Button clicked and focused');
|
|
});
|
|
|
|
// Function to toggle visibility for testing
|
|
function toggleVisibility(elementId) {
|
|
const element = document.getElementById(elementId);
|
|
element.classList.toggle('hidden');
|
|
}
|
|
|
|
// Function to focus an element for testing
|
|
function focusElement(elementId) {
|
|
document.getElementById(elementId).focus();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|