chrome-devtools-frontend
Version:
Chrome DevTools UI
102 lines (92 loc) • 3.3 kB
HTML
<!--
Copyright 2023 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Recording Client example</title>
<style>
html, body, * {
margin: 0;
padding: 0;
}
button {
width: 100px;
height: 20px;
}
</style>
</head>
<body>
<button aria-role="button" aria-name="testButton" id="button"></button>
<button id="buttonNoARIA"></button>
<button id="buttonWithLength11">length a 11</button>
<button id="buttonWithLength12">length aa 12</button>
<button id="buttonWithLength32">length aaaaaaaaa aaaaaaaaa aa 32</button>
<button id="buttonWithLength33">length aaaaaaaaa aaaaaaaaa aaa 33</button>
<button id="buttonWithLength64">length aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaa 64</button>
<button id="buttonWithLength65">length aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaa 65</button>
<button id="buttonWithNewLines">
with newlines
</button>
<input id="input"></input>
<script>
class ShadowCSSSelectorElement extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({mode: 'open'});
shadow.innerHTML = `
<p>sss</p>
<button id="insideShadowRoot">Login</button>
`;
}
}
customElements.define('shadow-css-selector-element', ShadowCSSSelectorElement);
class ShadowARIASelectorElement extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({mode: 'open'});
shadow.innerHTML = `
<p>sss</p>
<button aria-role="button" aria-name="login">Login</button>
`;
}
}
customElements.define('shadow-aria-selector-element', ShadowARIASelectorElement);
</script>
<header>
<shadow-css-selector-element></shadow-css-selector-element>
</header>
<main>
<shadow-css-selector-element></shadow-css-selector-element>
</main>
<div aria-role="header">
<shadow-aria-selector-element></shadow-aria-selector-element>
</div>
<div aria-role="main">
<shadow-aria-selector-element></shadow-aria-selector-element>
</div>
<div aria-name="parent-name">
<div id="no-aria-name-or-role" aria-name="" aria-role="">
</div>
<host-element id="slotted-host-element">
<template shadowrootmode="open">
<slot></slot>
</template>
text in slot
</host-element>
<button class="custom-selector-attribute" data-testid="unique">Custom selector</button>
<button class="custom-selector-attribute" data-testid="123456789">Custom selector (invalid CSS id)</button>
<host-element id="shadow-root-with-custom-selectors" data-qa="custom-id">
<template shadowrootmode="open">
<button data-testid="shadow button">Shadow button with testid</button>>
</template>
</host-element>
<div id="notunique"></div>
<div id="notunique"></div>
<script type="module" src="./basic.js"></script>
</body>
</html>