| Index: LayoutTests/fast/css/background-position-animate.html
|
| diff --git a/LayoutTests/fast/css/background-position-animate.html b/LayoutTests/fast/css/background-position-animate.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..56fb76a14bc1e63109241aa9c0d573a8181b3289
|
| --- /dev/null
|
| +++ b/LayoutTests/fast/css/background-position-animate.html
|
| @@ -0,0 +1,53 @@
|
| +<!doctype html>
|
| +<style>
|
| +
|
| + div {
|
| + border: 3px solid skyblue;
|
| + width: 100px;
|
| + height: 100px;
|
| + background-image: linear-gradient(to right, coral, coral);
|
| + background-size: 20px 20px;
|
| + background-repeat: no-repeat;
|
| + display: inline-block;
|
| +
|
| + animation-duration: 0s;
|
| + animation-timing-function: linear;
|
| + animation-iteration-count: 1;
|
| + animation-fill-mode: forwards;
|
| +
|
| + background-position: center center;
|
| + }
|
| +
|
| + @keyframes top_left { to { background-position: left 20px top 20px; } }
|
| + #top_left { animation-name: top_left; }
|
| + @keyframes top_center { to { background-position: center top 20px; } }
|
| + #top_center { animation-name: top_center; }
|
| + @keyframes top_right { to { background-position: right 20px top 20px; } }
|
| + #top_right { animation-name: top_right; }
|
| +
|
| + @keyframes cen_left { to { background-position: left 20px center; } }
|
| + #cen_left { animation-name: cen_left; }
|
| + @keyframes cen_center { to { background-position: center center; } }
|
| + #cen_center { animation-name: cen_center; }
|
| + @keyframes cen_right { to { background-position: right 20px center; } }
|
| + #cen_right { animation-name: cen_right; }
|
| +
|
| + @keyframes bot_left { to { background-position: left 20px bottom 20px; } }
|
| + #bot_left { animation-name: bot_left; }
|
| + @keyframes bot_center { to { background-position: center bottom 20px; } }
|
| + #bot_center { animation-name: bot_center; }
|
| + @keyframes bot_right { to { background-position: right 20px bottom 20px; } }
|
| + #bot_right { animation-name: bot_right; }
|
| +
|
| +</style>
|
| +<div id="top_left"></div>
|
| +<div id="top_center"></div>
|
| +<div id="top_right"></div>
|
| +<br>
|
| +<div id="cen_left"></div>
|
| +<div id="cen_center"></div>
|
| +<div id="cen_right"></div>
|
| +<br>
|
| +<div id="bot_left"></div>
|
| +<div id="bot_center"></div>
|
| +<div id="bot_right"></div>
|
|
|
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