Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /web-animations/interfaces/Animatable/getAnimations-iframe.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>getAnimations in dirty iframe</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
<style>
iframe {
width: 200px;
height: 40px;
}
</style>
<body>
<script>
const createFrame = async test => {
const iframe = createElement(test, "iframe");
const contents = "" +
"<style>" +
" div { color: red; }" +
" @keyframes test {" +
" from { color: green; }" +
" to { color: green; }" +
" }" +
" @media (min-width: 300px) {" +
" div { animation: test 1s linear forwards; }" +
" }" +
"</style>" +
"<div id=div>Green</div>";
iframe.setAttribute("srcdoc", contents);
await new Promise(resolve => iframe.addEventListener("load", resolve));
return iframe;
};
const iframeTest = (getAnimations, interfaceName) => {
promise_test(async test => {
const frame = await createFrame(test);
const inner_div = frame.contentDocument.getElementById('div');
assert_equals(getComputedStyle(inner_div).color, 'rgb(255, 0, 0)');
frame.style.width = '400px';
const animations = getAnimations(inner_div);
assert_equals(animations.length, 1);
assert_equals(getComputedStyle(inner_div).color, 'rgb(0, 128, 0)');
}, `Calling ${interfaceName}.getAnimations updates layout of parent frame if needed`);
}
iframeTest(element => element.getAnimations(), 'Element');
iframeTest(element => element.ownerDocument.getAnimations(), 'Document');
</script>
</body>