KeyframeEffect-target.tentative.html (2888B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>CSSTransition.effect.target</title> 4 <!-- TODO: Add a more specific link for this once it is specified. --> 5 <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="support/helper.js"></script> 9 <div id="log"></div> 10 <script> 11 'use strict'; 12 13 test(t => { 14 const div = addDiv(t); 15 16 div.style.left = '0px'; 17 getComputedStyle(div).transitionProperty; 18 div.style.transition = 'left 100s'; 19 div.style.left = '100px'; 20 21 const animation = div.getAnimations()[0]; 22 assert_equals(animation.effect.target, div, 23 'Animation.target is the animatable div'); 24 }, 'Returned CSS transitions have the correct Animation.target'); 25 26 test(t => { 27 addStyle(t, { '.init::after': 'content: ""; width: 0px; height: 0px; ' + 28 'transition: all 10s;', 29 '.change::after': 'width: 100px; height: 100px;' }); 30 const div = addDiv(t, { class: 'init' }); 31 getComputedStyle(div).width; 32 div.classList.add('change'); 33 34 const anims = document.getAnimations(); 35 assert_equals(anims.length, 2, 36 'Got transitions running on ::after pseudo element'); 37 assert_equals(anims[0].effect.target, anims[1].effect.target, 38 'Both transitions return the same target object'); 39 }, 'effect.target should return the same CSSPseudoElement object each time'); 40 41 test(t => { 42 addStyle(t, { '.init::after': 'content: ""; width: 0px; transition: all 10s;', 43 '.change::after': 'width: 100px;' }); 44 const div = addDiv(t, { class: 'init' }); 45 getComputedStyle(div).width; 46 div.classList.add('change'); 47 const pseudoTarget = document.getAnimations()[0].effect.target; 48 const effect = new KeyframeEffect(pseudoTarget, 49 { background: ["blue", "red"] }, 50 3000); 51 const newAnim = new Animation(effect, document.timeline); 52 newAnim.play(); 53 54 const anims = document.getAnimations(); 55 assert_equals(anims.length, 2, 56 'Got animations running on ::after pseudo element'); 57 assert_not_equals(anims[0], newAnim, 58 'The scriped-generated animation appears last'); 59 assert_equals(newAnim.effect.target, pseudoTarget, 60 'The effect.target of the scripted-generated animation is ' + 61 'the same as the one from the argument of ' + 62 'KeyframeEffect constructor'); 63 assert_equals(anims[0].effect.target, newAnim.effect.target, 64 'Both the transition and the scripted-generated animation ' + 65 'return the same target object'); 66 }, 'effect.target from the script-generated animation should return the same ' + 67 'CSSPseudoElement object as that from the CSS generated transition'); 68 69 </script>