Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"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;
}