<!DOCTYPE HTML>
<html>
<head>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/wai-aria/scripts/aria-utils.js"></script>
</head>
<body>
<!-- 1. Label applies to descendant custom element that uses shadowrootreferencetarget -->
<label>
Input 1
<div>
<x-input1 id="x-input1">
<template shadowrootmode="open" shadowrootreferencetarget="input1">
<input id="input1">
</template>
</x-input1>
</div>
</label>
<script>
promise_test(async t => {
const x_input = document.getElementById('x-input1');
const input = x_input.shadowRoot.getElementById('input1');
// The label should apply to the input element and not the host.
assert_equals(await test_driver.get_computed_label(x_input), "");
assert_equals(await test_driver.get_computed_label(input), "Input 1");
}, "Label applies to descendant custom element that uses shadowrootreferencetarget");
</script>
<!-- 2. Label applies to multiple layers of descendant custom elements that use shadowrootreferencetarget -->
<label>
Input 2
<x-outer2 id="x-outer2">
<template shadowrootmode="open" shadowrootreferencetarget="x-inner2">
<x-inner2 id="x-inner2">
<template shadowrootmode="open" shadowrootreferencetarget="input2">
<input id="input2">
</template>
</x-inner2>
</template>
</x-outer2>
</label>
<script>
promise_test(async t => {
const outer = document.getElementById('x-outer2');
const inner = outer.shadowRoot.getElementById('x-inner2');
const input = inner.shadowRoot.getElementById('input2');
// The label should apply to the input element and not any of the hosts.
assert_equals(await test_driver.get_computed_label(outer), "");
assert_equals(await test_driver.get_computed_label(inner), "");
assert_equals(await test_driver.get_computed_label(input), "Input 2");
}, "Label applies to multiple layers of descendant custom elements that use shadowrootreferencetarget");
</script>
</body>
</html>
Codebase Browser
chromium