1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that keyframes are displayed for elements nested under a shadow-root.
const TEST_URI = `data:text/html;charset=utf-8,
<div></div>
<script>
document.querySelector('div').attachShadow({mode: 'open'}).innerHTML = \`
<span>text</span>
<style>
@keyframes blink {
0% {
border: rgba(255,0,0,1) 2px dashed;
}
100% {
border: rgba(255,0,0,0) 2px dashed;
}
}
span {
animation: blink .5s 0s infinite;
}
</style>\`;
</script>`;
add_task(async function () {
await addTab(TEST_URI);
const { inspector, view } = await openRuleView();
info("Expand the shadow-root parent");
const divFront = await getNodeFront("div", inspector);
await inspector.markup.expandNode(divFront);
await waitForMultipleChildrenUpdates(inspector);
const { markup } = inspector;
const divContainer = markup.getContainer(divFront);
info("Expand the shadow-root");
const shadowRootContainer = divContainer.getChildContainers()[0];
await expandContainer(inspector, shadowRootContainer);
info("Retrieve the rules displayed for the span under the shadow root");
const spanContainer = shadowRootContainer.getChildContainers()[0];
const rules = await getKeyframeRules(spanContainer.node, inspector, view);
is(
convertTextPropsToString(rules.keyframeRules[0].textProps),
"border: rgba(255,0,0,1) 2px dashed",
"Keyframe blink (0%) property is correct"
);
is(
convertTextPropsToString(rules.keyframeRules[1].textProps),
"border: rgba(255,0,0,0) 2px dashed",
"Keyframe blink (100%) property is correct"
);
});
function convertTextPropsToString(textProps) {
return textProps.map(t => t.name + ": " + t.value).join("; ");
}
async function getKeyframeRules(selector, inspector, view) {
await selectNode(selector, inspector);
const elementStyle = view._elementStyle;
const rules = {
elementRules: elementStyle.rules.filter(rule => !rule.keyframes),
keyframeRules: elementStyle.rules.filter(rule => rule.keyframes),
};
return rules;
}
|
