2024-07-23 16:25:11 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
<head>
|
2024-08-28 19:21:32 +08:00
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>Sample HTML Page</title>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
font-family: Arial, sans-serif;
|
|
|
|
|
margin: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
table {
|
|
|
|
|
border-collapse: collapse;
|
|
|
|
|
width: 50%;
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
th,
|
|
|
|
|
td {
|
|
|
|
|
border: 1px solid #000;
|
|
|
|
|
padding: 8px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
th {
|
|
|
|
|
background-color: #f2f2f2;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
2024-07-23 16:25:11 +08:00
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
2024-08-28 19:21:32 +08:00
|
|
|
<h1>Data Record</h1>
|
|
|
|
|
<h2>1970-01-01 19:25:01</h2>
|
|
|
|
|
<h2>User Name: Stella</h2>
|
|
|
|
|
<table>
|
|
|
|
|
<thead>
|
2024-08-31 08:17:50 +08:00
|
|
|
<tr>
|
|
|
|
|
<th>ID</th>
|
|
|
|
|
<th>Field 2</th>
|
|
|
|
|
<th>Field 3</th>
|
|
|
|
|
<th>Field 4</th>
|
|
|
|
|
<th>Field 5</th>
|
|
|
|
|
</tr>
|
2024-08-28 19:21:32 +08:00
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
2024-08-31 08:17:50 +08:00
|
|
|
<tr>
|
|
|
|
|
<td>30S</td>
|
|
|
|
|
<td>Kace Cervantes</td>
|
|
|
|
|
<td>Aylin Sawyer</td>
|
|
|
|
|
<td>Jefferson Kirby</td>
|
|
|
|
|
<td>Skyla Jefferson</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>70U</td>
|
|
|
|
|
<td>Florence Davenport</td>
|
|
|
|
|
<td>Dariel Acevedo</td>
|
|
|
|
|
<td>Ashlynn Delacruz</td>
|
|
|
|
|
<td>Memphis Leal</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>3AY</td>
|
|
|
|
|
<td>Crystal Newman</td>
|
|
|
|
|
<td>Anderson Brown</td>
|
|
|
|
|
<td>Charlotte Griffith</td>
|
|
|
|
|
<td>Franklin Everett</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>YPG</td>
|
|
|
|
|
<td>Kori Payne</td>
|
|
|
|
|
<td>Edward Blevins</td>
|
|
|
|
|
<td>Aila Gill</td>
|
|
|
|
|
<td>Matthias Reed</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>ZEN</td>
|
|
|
|
|
<td>Magnolia Duke</td>
|
|
|
|
|
<td>Kalel Glover</td>
|
|
|
|
|
<td>Alessia Barton</td>
|
|
|
|
|
<td>Cassius Peck</td>
|
|
|
|
|
</tr>
|
2024-08-28 19:21:32 +08:00
|
|
|
</tbody>
|
|
|
|
|
</table>
|
2024-08-22 18:12:01 +08:00
|
|
|
<div>
|
2024-08-28 19:21:32 +08:00
|
|
|
<h3>Form</h3>
|
|
|
|
|
<label for="name">Name:</label>
|
|
|
|
|
<input id="J_input" placeholder="Hello World This is Placeholder" />
|
2024-08-31 08:17:50 +08:00
|
|
|
<input id="J_input" placeholder="Hello World This is Placeholder" value="Now I am a value, instead of placeholder" />
|
2024-08-28 19:21:32 +08:00
|
|
|
<button>Click Me</button>
|
|
|
|
|
<label>Shape</label>
|
|
|
|
|
<input placeholder="You shouldn't see this placeholder." value="Rectangle" />
|
|
|
|
|
<pre id="J_keyRecord"></pre>
|
|
|
|
|
<textarea placeholder="this_is_a_textarea"></textarea>
|
2024-08-31 08:17:50 +08:00
|
|
|
<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/vhaeh7vhabf/midscene.png" width="2" height="2" alt="small_img" />
|
|
|
|
|
</div>
|
2024-08-22 18:12:01 +08:00
|
|
|
|
2024-08-28 19:21:32 +08:00
|
|
|
<!-- Global popup to test invisible -->
|
|
|
|
|
<div style="position: absolute; top: 0px; left: 500px; width: 100%;">
|
|
|
|
|
<div>
|
2024-08-31 08:17:50 +08:00
|
|
|
<div style="left: 59px; top: 46px;">
|
2024-08-28 19:21:32 +08:00
|
|
|
<ul>
|
|
|
|
|
<li><span>English</span></li>
|
|
|
|
|
<li><span>中文</span></li>
|
|
|
|
|
<li><span>Tiếng Việt</span>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
2024-08-31 08:17:50 +08:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-08-28 19:21:32 +08:00
|
|
|
|
|
|
|
|
<!-- form -->
|
|
|
|
|
<form action="/submit-form" method="post">
|
|
|
|
|
<label for="options">Choose an option:</label>
|
|
|
|
|
<select id="options" name="options">
|
2024-08-26 11:09:39 +08:00
|
|
|
<option value="option1-value">Option 1</option>
|
|
|
|
|
<option value="option2-value">Option 2</option>
|
|
|
|
|
</select>
|
2024-08-28 19:21:32 +08:00
|
|
|
</form>
|
2024-08-22 18:12:01 +08:00
|
|
|
|
2024-09-10 07:04:27 +08:00
|
|
|
<!-- div with css zoom -->
|
|
|
|
|
<!-- From chrome v128, the API would return differently https://docs.google.com/document/d/1AcnDShjT-kEuRaMchZPm5uaIgNZ4OiYtM4JI9qiV8Po/edit -->
|
|
|
|
|
<div style="zoom: 1.2;width: 200px;height: 40px;">
|
|
|
|
|
<div style="width: 160px;height: 40px;background-color: #ccc;zoom: 1.5;">
|
|
|
|
|
This is zoomed content
|
|
|
|
|
</div>
|
|
|
|
|
Something Else
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div style="width:1px;height:120px"></div>
|
|
|
|
|
|
2024-08-28 19:21:32 +08:00
|
|
|
<!-- a label with sibiling input -->
|
|
|
|
|
<div id="gh-ac-box2">
|
|
|
|
|
<label for="gh-ac" class="gh-ar-hdn">输入搜索关键词</label>
|
2024-08-31 08:17:50 +08:00
|
|
|
<input type="text" class="gh-tb ui-autocomplete-input" aria-autocomplete="list" aria-expanded="false" size="50" maxlength="300" aria-label="搜索任何物品" placeholder="搜索任何物品" id="gh-ac" name="_nkw" autocapitalize="off" autocorrect="off" spellcheck="false" autocomplete="off"
|
|
|
|
|
aria-haspopup="true" role="combobox" aria-owns="ui-id-1">
|
2024-08-28 19:21:32 +08:00
|
|
|
<input style="display:none">
|
|
|
|
|
</div>
|
2024-08-31 08:17:50 +08:00
|
|
|
|
2024-08-28 19:21:32 +08:00
|
|
|
<!-- a label with nested input -->
|
2024-08-31 08:17:50 +08:00
|
|
|
<label class="life-core-input-inner__wrapper life-core-input-inner__wrapper-border life-core-input-inner__wrapper-size-md life-core-input-inner__wrapper-add-suffix">
|
2024-08-26 11:09:39 +08:00
|
|
|
<input placeholder="验证码" tabindex="0" type="text" class="life-core-input life-core-input-size-md" value="">
|
|
|
|
|
</label>
|
2024-08-22 18:12:01 +08:00
|
|
|
|
2024-08-28 19:21:32 +08:00
|
|
|
<!-- a checkbox drawn by div -->
|
|
|
|
|
<style>
|
|
|
|
|
.life-core-check-wrapper {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.life-core-checkbox-icon {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 16px;
|
|
|
|
|
height: 16px;
|
|
|
|
|
border: 1px solid #333;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<span class="life-core-popper-trigger life-core-popper-trigger-focus life-core-tooltip">
|
2024-08-26 11:09:39 +08:00
|
|
|
<label
|
|
|
|
|
class="life-core-checkbox life-core-checkbox-md src-pages-Login-components-LoginCard-index-module__checkbox--Npo2V--212e2">
|
|
|
|
|
<input class="life-core-check-wrapper" type="checkbox">
|
|
|
|
|
<span class="life-core-checkbox-icon">
|
|
|
|
|
</span>
|
2024-08-28 19:21:32 +08:00
|
|
|
<span class="life-core-checkbox-label life-core-checkbox-label-no">
|
2024-08-26 11:09:39 +08:00
|
|
|
</span>
|
|
|
|
|
</label>
|
2024-08-28 19:21:32 +08:00
|
|
|
</span>
|
|
|
|
|
|
2024-08-31 08:17:50 +08:00
|
|
|
<!-- a button with children -->
|
|
|
|
|
<button tabindex="0" class="btn" type="submit" aria-label="Search">
|
|
|
|
|
<img class="search-icon-dark" src="/assets/icons/search-dark.svg" alt="Search">
|
|
|
|
|
<img class="search-icon-light" src="/assets/icons/search.svg" alt="Search">
|
|
|
|
|
</button>
|
|
|
|
|
|
2024-08-28 19:21:32 +08:00
|
|
|
<!-- item hidden by css overflow: hidden -->
|
|
|
|
|
<style>
|
2024-08-31 08:17:50 +08:00
|
|
|
.item-hidden-poc {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
2024-08-28 19:21:32 +08:00
|
|
|
</style>
|
|
|
|
|
<div class="item-hidden-poc">
|
2024-08-31 08:17:50 +08:00
|
|
|
<div style="height: 30px">content 000</div>
|
|
|
|
|
<div style="height: 30px;width: 100px;"></div>
|
|
|
|
|
<div style="height: 120px">content AAA</div>
|
|
|
|
|
<div style="height: 120px">content BBBB</div>
|
2024-08-28 19:21:32 +08:00
|
|
|
</div>
|
|
|
|
|
|
2024-09-10 07:04:27 +08:00
|
|
|
<!-- item with long attribute -->
|
|
|
|
|
<div>
|
|
|
|
|
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMS42MjQ3IDYuNzc2NDhDMC45Njk5MzIgNy4zMDYyNSAwIDYuODM0NzcgMCA1Ljk4NjcyVjBMMTAgMS4wNjEwMWUtMDZMMS42MjQ3IDYuNzc2NDhaIiBmaWxsPSIjMjIyMjIyIiBmaWxsLW9wYWNpdHk9IjAuOTgiLz4KPC9zdmc+Cg=="
|
|
|
|
|
/>
|
|
|
|
|
<button very-long-attr="width: 100px; height: 100px; background-color: #ccc;width: 100px; height: 100px; background-color: #ccc;width: 100px; height: 100px; background-color: #ccc;width: 100px; height: 100px; background-color: #ccc;">long-style-content</button>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
2024-08-28 19:21:32 +08:00
|
|
|
<!-- widget wrapper defined by aria -->
|
|
|
|
|
<style>
|
|
|
|
|
.widget {
|
|
|
|
|
width: 100px;
|
|
|
|
|
height: 100px;
|
|
|
|
|
background-color: #ccc;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<div class="widget" role="button" aria-label="Click me">Click me</div>
|
|
|
|
|
<div class="widget" aria-controls="semi-select-5yxiyng"></div>
|
|
|
|
|
<div class="widget" aria-labelledby="eval_object.object_type-label"></div>
|
2024-08-31 08:17:50 +08:00
|
|
|
<!-- div with container and content children -->
|
|
|
|
|
<style>
|
|
|
|
|
.parent-container {
|
|
|
|
|
width: 100px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<div class="parent-container">
|
|
|
|
|
<div class="child-container">Content 1</div>
|
|
|
|
|
<div class="child-container-2">
|
|
|
|
|
<div class="child-container-without-content-2-1" style="width: 100px; height: 100px; background-color: #ccc;"></div>
|
|
|
|
|
<div>
|
|
|
|
|
<div>
|
|
|
|
|
<span>Content 2</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="child-container-3">
|
|
|
|
|
<div>
|
|
|
|
|
<div>
|
|
|
|
|
<span>Nested Content 3</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="child-container-4" style="width: 100px; height: 100px; background-color: #ccc;">
|
|
|
|
|
<!-- empty element -->
|
|
|
|
|
<span></span>
|
|
|
|
|
<span></span>
|
|
|
|
|
<span></span>
|
|
|
|
|
<div foo="bar">
|
|
|
|
|
<div foo="bar2"></div>
|
|
|
|
|
<div foo="bar3"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-09-10 07:04:27 +08:00
|
|
|
<!-- svg item -->
|
|
|
|
|
<span role="img" aria-label="code" tabindex="-1" class="anticon anticon-code code-box-expand-trigger"><svg
|
|
|
|
|
viewBox="64 64 896 896" focusable="false" data-icon="code" width="1em" height="1em" fill="currentColor"
|
|
|
|
|
aria-hidden="true">
|
|
|
|
|
<path
|
|
|
|
|
d="M516 673c0 4.4 3.4 8 7.5 8h185c4.1 0 7.5-3.6 7.5-8v-48c0-4.4-3.4-8-7.5-8h-185c-4.1 0-7.5 3.6-7.5 8v48zm-194.9 6.1l192-161c3.8-3.2 3.8-9.1 0-12.3l-192-160.9A7.95 7.95 0 00308 351v62.7c0 2.4 1 4.6 2.9 6.1L420.7 512l-109.8 92.2a8.1 8.1 0 00-2.9 6.1V673c0 6.8 7.9 10.5 13.1 6.1zM880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z">
|
|
|
|
|
</path>
|
|
|
|
|
</svg></span>
|
|
|
|
|
|
|
|
|
|
<!-- iframe -->
|
|
|
|
|
<iframe src="child.html" frameborder="0" width="400px" height="400px"></iframe>
|
2024-07-23 16:25:11 +08:00
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
