| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <script src="../resources/testharness.js"></script> |
| 3 <script src="../resources/testharnessreport.js"></script> |
| 4 <div id="anim"></div> |
| 5 <script> |
| 6 test(() => assert_not_equals(window.internals, undefined, "Needs window.inte
rnals for testing."), "Check that window.internals is defined"); |
| 7 anim.offsetTop; |
| 8 </script> |
| 9 <style> |
| 10 @keyframes unused { |
| 11 from { color: pink } |
| 12 to { color: orange } |
| 13 } |
| 14 </style> |
| 15 <script> |
| 16 test(() => |
| 17 assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 2, "
Recalc for style and script.") |
| 18 , "Check that adding @keyframes does not cause a style recalc of the anim el
ement when no animations are running."); |
| 19 </script> |
| 20 <style> |
| 21 #anim { |
| 22 color: red; |
| 23 animation-name: later; |
| 24 animation-duration: 100s; |
| 25 animation-timing-function: step-end; |
| 26 } |
| 27 </style> |
| 28 <script> |
| 29 test(() => |
| 30 assert_equals(getComputedStyle(anim).color, "rgb(255, 0, 0)", "Initial c
olor of #anim.") |
| 31 , "Check initial color of #anim."); |
| 32 |
| 33 anim.offsetTop; |
| 34 </script> |
| 35 <style> |
| 36 @keyframes later { |
| 37 from { color: green } |
| 38 to { color: red } |
| 39 } |
| 40 </style> |
| 41 <script> |
| 42 test(() => |
| 43 assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 13,
"Full document recalc.") |
| 44 , "Check that adding @keyframes after keyframe resolution failed, recalculat
es whole document"); |
| 45 |
| 46 test(() => |
| 47 assert_equals(getComputedStyle(anim).color, "rgb(0, 128, 0)", "Color of
#anim during animation.") |
| 48 , "Check that @keyframes rule applies."); |
| 49 |
| 50 anim.offsetTop; |
| 51 </script> |
| 52 <style> |
| 53 @keyframes later { |
| 54 from { color: lime } |
| 55 to { color: red } |
| 56 } |
| 57 </style> |
| 58 <script> |
| 59 test(() => |
| 60 assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 3, "
Recalc of style, script, and #anim.") |
| 61 , "Check that adding @keyframes causes a style recalc of the #anim element w
hen an animation is running."); |
| 62 |
| 63 test(() => |
| 64 assert_equals(getComputedStyle(anim).color, "rgb(0, 255, 0)", "Color of
#anim during animation for new @keyframes.") |
| 65 , "Check that the new @keyframes rule for 'later' applies."); |
| 66 |
| 67 anim.offsetTop; |
| 68 </script> |
| 69 <style> |
| 70 @keyframes unused2 { |
| 71 from { color: pink } |
| 72 to { color: orange } |
| 73 } |
| 74 </style> |
| 75 <script> |
| 76 test(() => |
| 77 assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 3, "
Recalc of style, script, and #anim.") |
| 78 , "Check that adding unused @keyframes causes a style recalc of the #anim el
ement when an animation is running."); |
| 79 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2105743002:
Optimize style recalc when adding @keyframes. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master