<!DOCTYPE html><htmlclass="reftest-wait"><title> Animations not in effect nor current shouldn't have side-effects.</title><linkrel="help"href="https://drafts.csswg.org/web-animations-1/#side-effects-section"><linkrel="author"href="mailto:bokan@chromium.org"><linkrel="match"href="side-effects-of-animations-none-ref.html"><scriptsrc="/common/reftest-wait.js"></script><scriptsrc="../testcommon.js"></script><scriptsrc="resources/side-effects-common.js"></script><style>.testcase{position:relative;margin:2px;border:1pxsolidblack;width:250px;height:25px;}.container{background-color:lightgrey;margin:4px;display:flex;width:600px;flex-direction:row;justify-content:flex-end;align-items:center;}.label{flex-grow:1;}.target{width:100%;height:100%;}.absolutebox{position:absolute;top:0;left:0;width:100%;height:100%;}.pass{background-color:limegreen;}.fail{background-color:red;}</style><script>onload=takeScreenshotOnAnimationsReady;</script><!-- before phase playing backwards --><divclass="container"><divclass="label">Before phase</div><divclass="testcase"id="before"><divclass="absolutebox pass"></div><divclass="target fail"></div></div></div><script>setupAnimation('#before',STATE_NONE,PROPERTY_OPACITY,PHASE_BEFORE);</script><!-- after phase playing forwards--><divclass="container"><divclass="label">After phase</div><divclass="testcase"id="after"><divclass="absolutebox pass"></div><divclass="target fail"></div></div></div><script>setupAnimation('#after',STATE_NONE,PROPERTY_OPACITY,PHASE_AFTER);</script></html>
