mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1507984 [wpt PR 14099] - [css] Switch part attribute to a DOMTokenList, a=testonly 

Automatic update from web-platform-tests
[css] Switch part attribute to a DOMTokenList

Adds tests for manipulating it via the attribute.

Renames PartNames() to Part() to match with part(), the API wrapper.

This uses the same IDL as classList.

Bug: 805271
Change-Id: I9715df48478510029f5d985124e46111c41cffc3
Reviewed-on: https://chromium-review.googlesource.com/c/1333014
Commit-Queue: Fergal Daly <fergal@chromium.org>
Reviewed-by: Kent Tamura <tkent@chromium.org>
Reviewed-by: Hayato Ito <hayato@chromium.org>
Cr-Commit-Position: refs/heads/master@{#611570}

--

wpt-commits: 66710fe6fe1fccc5a4b096da62f3585452dd060c
wpt-pr: 14099
This commit is contained in:
Fergal Daly 2018-11-30 18:05:09 +00:00 коммит произвёл James Graham
Родитель 58b397c170
Коммит 70f3b8a6c5
3 изменённых файлов: 117 добавлений и 0 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

33
testing/web-platform/tests/css/css-shadow-parts/invalidation-change-part-name-idl-domtokenlist.html Normal file
Просмотреть файл

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Shadow Parts - Invalidation Change Part Name IDL DOMTokenList</title>
<meta href="mailto:fergal@chromium.org" 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>
<style>#c-e::part(partp) { color: red; }</style>
<style>#c-e::part(new-partp) { color: green; }</style>
<script>installCustomElement("custom-element", "custom-element-template");</script>
<template id="custom-element-template">
<style>span { color: blue; }</style>
<span id="part" part="partp">This text</span>
</template>
The following text should be green:
<div><custom-element id="c-e"></custom-element></div>
<script>
"use strict";
const colorGreen = "rgb(0, 128, 0)";
test(function() {
const el = getElementByShadowIds(document, ["c-e", "part"]);
el.part.remove("partp");
el.part.add("new-partp");
assert_equals(window.getComputedStyle(el).color, colorGreen);
}, "Part in selected host changed color via part IDL DOMTokenList attribute.");
</script>
</body>
</html>

31
testing/web-platform/tests/css/css-shadow-parts/invalidation-change-part-name-idl-setter.html Normal file
Просмотреть файл

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Shadow Parts - Invalidation Change Part Name IDL Setter</title>
<meta href="mailto:fergal@chromium.org" 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>
<style>#c-e::part(partp) { color: red; }</style>
<script>installCustomElement("custom-element", "custom-element-template");</script>
<template id="custom-element-template">
<style>span { color: green; }</style>
<span id="part" part="partp">This text</span>
</template>
The following text should be green:
<div><custom-element id="c-e"></custom-element></div>
<script>
"use strict";
const colorGreen = "rgb(0, 128, 0)";
test(function() {
const el = getElementByShadowIds(document, ["c-e", "part"]);
el.part = "new-partp"
assert_equals(window.getComputedStyle(el).color, colorGreen);
}, "Part in selected host changed color via part IDL attribute setter.");
</script>
</body>
</html>

53
testing/web-platform/tests/css/css-shadow-parts/part-name-idl.html Normal file
Просмотреть файл

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Shadow Parts - Part Name IDL</title>
<meta href="mailto:fergal@chromium.org" 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>