51 lines
1.6 KiB
HTML
51 lines
1.6 KiB
HTML
<!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>
|