side-effects-of-animations-current-ref.html (2642B)
1 <!DOCTYPE html> 2 <title> 3 Current animations should effectively apply will-change (i.e. force a 4 stacking context) (ref) 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 <style> 9 .testcase { 10 position: relative; 11 margin: 2px; 12 border: 1px solid black; 13 width: 250px; 14 height: 25px; 15 } 16 .label { 17 flex-grow: 1; 18 } 19 .container { 20 background-color: lightgrey; 21 margin: 4px; 22 display: flex; 23 width: 600px; 24 flex-direction: row; 25 justify-content: flex-end; 26 align-items: center; 27 } 28 .pass { 29 width: 100%; 30 height: 100%; 31 background-color: limegreen; 32 } 33 </style> 34 35 <!-- OPACITY --> 36 37 <!-- Is current - before phase playing forwards --> 38 <div class="container"> 39 <div class="label">Opacity - before phase</div> 40 <div class="testcase" id="opacity-before"> 41 <div class="pass"></div> 42 </div> 43 </div> 44 45 <!-- Is current - in play--> 46 <div class="container"> 47 <div class="label">Opacity - active phase</div> 48 <div class="testcase" id="opacity-active"> 49 <div class="pass"></div> 50 </div> 51 </div> 52 53 <!-- Is current - after phase playing backwards--> 54 <div class="container"> 55 <div class="label">Opacity - after phase</div> 56 <div class="testcase" id="opacity-after"> 57 <div class="pass"></div> 58 </div> 59 </div> 60 61 <!-- TRANSFORM --> 62 63 <!-- Is current - before phase playing forwards --> 64 <div class="container"> 65 <div class="label">Transform - before phase</div> 66 <div class="testcase" id="transform-before"> 67 <div class="pass"></div> 68 </div> 69 </div> 70 71 <!-- Is current - in play--> 72 <div class="container"> 73 <div class="label">Transform - active phase</div> 74 <div class="testcase" id="transform-active"> 75 <div class="pass"></div> 76 </div> 77 </div> 78 79 <!-- Is current - after phase playing backwards--> 80 <div class="container"> 81 <div class="label">Transform - after phase</div> 82 <div class="testcase" id="transform-after"> 83 <div class="pass"></div> 84 </div> 85 </div> 86 87 <!-- BACKGROUND COLOR --> 88 <div class="container"> 89 <div class="label">Background-color - before phase</div> 90 <div class="testcase" id="bgcolor-before"> 91 <div class="pass"></div> 92 </div> 93 </div> 94 95 <!-- Is current - in play--> 96 <div class="container"> 97 <div class="label">Background-color - active phase</div> 98 <div class="testcase" id="bgcolor-active"> 99 <div class="pass"></div> 100 </div> 101 </div> 102 103 <!-- Is current - after phase playing backwards--> 104 <div class="container"> 105 <div class="label">Background-color - after phase</div> 106 <div class="testcase" id="bgcolor-after"> 107 <div class="pass"></div> 108 </div> 109 </div>