side-effects-of-animations-none.html (1807B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title> 4 Animations not in effect nor current shouldn't have side-effects. 5 </title> 6 <link rel="help" href="https://drafts.csswg.org/web-animations-1/#side-effects-section"> 7 <link rel="author" href="mailto:bokan@chromium.org"> 8 <link rel="match" href="side-effects-of-animations-none-ref.html"> 9 <script src="/common/reftest-wait.js"></script> 10 <script src="../testcommon.js"></script> 11 <script src="resources/side-effects-common.js"></script> 12 <style> 13 .testcase { 14 position: relative; 15 margin: 2px; 16 border: 1px solid black; 17 width: 250px; 18 height: 25px; 19 } 20 .container { 21 background-color: lightgrey; 22 margin: 4px; 23 display: flex; 24 width: 600px; 25 flex-direction: row; 26 justify-content: flex-end; 27 align-items: center; 28 } 29 .label { 30 flex-grow: 1; 31 } 32 .target { 33 width: 100%; 34 height: 100%; 35 } 36 .absolutebox { 37 position: absolute; 38 top: 0; 39 left: 0; 40 width: 100%; 41 height: 100%; 42 } 43 .pass { 44 background-color: limegreen; 45 } 46 .fail { 47 background-color: red; 48 } 49 </style> 50 51 <script> 52 onload = takeScreenshotOnAnimationsReady; 53 </script> 54 55 <!-- before phase playing backwards --> 56 <div class="container"> 57 <div class="label">Before phase</div> 58 <div class="testcase" id="before"> 59 <div class="absolutebox pass"></div> 60 <div class="target fail"></div> 61 </div> 62 </div> 63 <script> 64 setupAnimation('#before', STATE_NONE, PROPERTY_OPACITY, PHASE_BEFORE); 65 </script> 66 67 <!-- after phase playing forwards--> 68 <div class="container"> 69 <div class="label">After phase</div> 70 <div class="testcase" id="after"> 71 <div class="absolutebox pass"></div> 72 <div class="target fail"></div> 73 </div> 74 </div> 75 <script> 76 setupAnimation('#after', STATE_NONE, PROPERTY_OPACITY, PHASE_AFTER); 77 </script> 78 79 </html>