| OLD | NEW |
|---|
| (Empty) | |
| 1 <!doctype html> |
| 2 <style> |
| 3 |
| 4 div { |
| 5 border: 3px solid skyblue; |
| 6 width: 100px; |
| 7 height: 100px; |
| 8 background-image: linear-gradient(to right, coral, coral); |
| 9 background-size: 20px 20px; |
| 10 background-repeat: no-repeat; |
| 11 display: inline-block; |
| 12 |
| 13 animation-duration: 0s; |
| 14 animation-timing-function: linear; |
| 15 animation-iteration-count: 1; |
| 16 animation-fill-mode: forwards; |
| 17 |
| 18 background-position: center center; |
| 19 } |
| 20 |
| 21 @keyframes top_left { to { background-position: left 20px top 20px; } } |
| 22 #top_left { animation-name: top_left; } |
| 23 @keyframes top_center { to { background-position: center top 20px; } } |
| 24 #top_center { animation-name: top_center; } |
| 25 @keyframes top_right { to { background-position: right 20px top 20px; } } |
| 26 #top_right { animation-name: top_right; } |
| 27 |
| 28 @keyframes cen_left { to { background-position: left 20px center; } } |
| 29 #cen_left { animation-name: cen_left; } |
| 30 @keyframes cen_center { to { background-position: center center; } } |
| 31 #cen_center { animation-name: cen_center; } |
| 32 @keyframes cen_right { to { background-position: right 20px center; } } |
| 33 #cen_right { animation-name: cen_right; } |
| 34 |
| 35 @keyframes bot_left { to { background-position: left 20px bottom 20px; } } |
| 36 #bot_left { animation-name: bot_left; } |
| 37 @keyframes bot_center { to { background-position: center bottom 20px; } } |
| 38 #bot_center { animation-name: bot_center; } |
| 39 @keyframes bot_right { to { background-position: right 20px bottom 20px; } } |
| 40 #bot_right { animation-name: bot_right; } |
| 41 |
| 42 </style> |
| 43 <div id="top_left"></div> |
| 44 <div id="top_center"></div> |
| 45 <div id="top_right"></div> |
| 46 <br> |
| 47 <div id="cen_left"></div> |
| 48 <div id="cen_center"></div> |
| 49 <div id="cen_right"></div> |
| 50 <br> |
| 51 <div id="bot_left"></div> |
| 52 <div id="bot_center"></div> |
| 53 <div id="bot_right"></div> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 157523002:
Fix incorrect animation for some values of background-position. (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@backgroundposition