transition-background-position-with-edge-offset.html (1591B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Transitions Test: transition-property - background-position</title> 4 <link rel="author" title="Zhuoyu Qian" href="mailto:zhuoyu.qian@samsung.com"> 5 <link rel="help" href="https://drafts.csswg.org/web-animations-1/#animation-type"> 6 <link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-position"> 7 <meta name="assert" content="Test checks that the 'background-position' property with edge offset is animatable."> 8 <script src="/resources/testharness.js" type="text/javascript"></script> 9 <script src="/resources/testharnessreport.js" type="text/javascript"></script> 10 <style> 11 #test { 12 border: 1px solid; 13 background-image: url("support/cat.png"); 14 background-repeat: no-repeat; 15 height: 200px; 16 transition-duration: 100s; 17 transition-property: background-position; 18 transition-timing-function: step-end; 19 } 20 </style> 21 <body> 22 <div id="test"></div> 23 </body> 24 <script> 25 var startValue = "left 10px top 10px"; 26 var endValue = "right 10px bottom 10px"; 27 var div = document.getElementById("test"); 28 29 // getComputedStyle helper 30 function gCS(aProperty) { 31 return document.defaultView 32 .getComputedStyle(div, "") 33 .getPropertyValue(aProperty); 34 } 35 36 (function() { 37 div.style.backgroundPosition = startValue; 38 39 // flush styles 40 gCS("background-position"); 41 42 // set property to endValue 43 div.setAttribute("style", "background-position: " + endValue); 44 45 test(function() { 46 assert_true(gCS("background-position") != endValue); 47 }, "background-position not equals to end value"); 48 })(); 49 </script>