<!DOCTYPE html>
<html>
<head>
<title>CSS Shadow Parts - Part Name IDL</title>
<meta href="mailto:[email protected]" rel="author" title="Fergal Daly">
<link href="http://www.google.com/" rel="author" title="Google">
<link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/shadow-helper.js"></script>
</head>
<body>
<span id="s_no_part"></span>
<span id="s_part" part="part1"></span>
<span id="s_2_parts" part="part1 part2"></span>
<script>
"use strict";
test(function() {
const parts = s_no_part.part;
assert_equals(parts.length, 0);
assert_equals(parts.value, "");
}, "Access to .part returns an empty DOMTokenList.");
test(function() {
const parts = s_2_parts.part;
assert_equals(parts.length, 2);
assert_equals(parts[0], "part1");
assert_equals(parts[1], "part2");
assert_equals(parts.value, "part1 part2");
}, "Multiple names give a DOMTokenList with multiple entries.");
test(function() {
const parts = s_no_part.part;
assert_equals(parts.length, 0);
assert_equals(parts.value, "");
parts.add("part1");
assert_equals(parts.length, 1);
assert_equals(parts.value, "part1");
}, "DOMTokenList created by access is persisted.");
test(function() {
const parts = s_part.part;
assert_equals(parts.length, 1);
assert_equals(parts.value, "part1");
parts.add("part2");
assert_equals(parts.length, 2);
assert_equals(parts.value, "part1 part2");
assert_equals(s_part.getAttribute("part"), parts.value);
parts.remove("part1");
assert_equals(parts.length, 1);
assert_equals(parts.value, "part2");
assert_equals(s_part.getAttribute("part"), parts.value);
}, "Changes in DOMTokenList are refected in attribute.");
</script>
</body>
</html>
Codebase Browser
chromium