LayoutTests/transitions/interrupted-immediately.html - Issue 110123005: Web Animations CSS: Record if style recalc is for animation

Side by Side Diff: LayoutTests/transitions/interrupted-immediately.html

Issue 110123005: Web Animations CSS: Record if style recalc is for animation (Closed) Base URL: https://chromium.googlesource.com/chromium/blink@master

Patch Set: Add test where transition is cancelled almost immediately Created 7 years ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« no previous file with comments | « LayoutTests/transitions/cancel-transition.html ('k') | LayoutTests/transitions/interrupted-immediately-expected.txt » ('j') | Source/core/animation/css/CSSAnimations.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!DOCTYPE html>	1 <!DOCTYPE html>

2	2

3 <html>	3 <html>

4 <head>	4 <head>

5 <style>	5 <style>

6 #container {	6 #container {

7 position: relative;	7 position: relative;

8 width: 400px;	8 width: 400px;

9 height: 100px;	9 height: 100px;

10 border: 1px solid black;	10 border: 1px solid black;

(...skipping 11 matching lines...) Expand all Loading...
22 <script>	22 <script>

23 if (window.testRunner) {	23 if (window.testRunner) {

24 testRunner.dumpAsText();	24 testRunner.dumpAsText();

25 testRunner.waitUntilDone();	25 testRunner.waitUntilDone();

26 }	26 }

27	27

28 function startTransition()	28 function startTransition()

29 {	29 {

30 var box = document.getElementById('box');	30 var box = document.getElementById('box');

31 box.style.left = '300px';	31 box.style.left = '300px';

32 box.style.opacity = 0.5;

33 window.setTimeout(function() {	32 window.setTimeout(function() {
	dstockwell 2013/12/16 09:54:08 Do we need the setTimeout? Can this be something Do we need the setTimeout? Can this be something like: box.style.left = '300px'; box.offsetTop; // force transition start box.style.left = '0px' box.offsetTop; // force transition interruption box.addEventListener('transitionend', function() { // Evaluate ending condition testRunner.notifyDone(); }); // Force at least one timing update and recalc after the interruption. requestAnimationFrame(function() {}); Eric Willigers 2013/12/16 23:26:50 We didn't need the first setTimeout for interrupti Show quoted text On 2013/12/16 09:54:08, dstockwell wrote: > Do we need the setTimeout? We didn't need the first setTimeout for interrupting the transition. Show quoted text > Can this be something like: > box.addEventListener('transitionend', function() { With that code, the test fails (times out). dstockwell 2013/12/17 00:15:31 Yeah, what I had is clearly wrong. Since we don't Show quoted text On 2013/12/16 23:26:50, Eric Willigers wrote: > On 2013/12/16 09:54:08, dstockwell wrote: > > Do we need the setTimeout? > > We didn't need the first setTimeout for interrupting the transition. > > > Can this be something like: > > box.addEventListener('transitionend', function() { > > With that code, the test fails (times out). Yeah, what I had is clearly wrong. Since we don't expect to start a new transition in that case. We should be able to leverage internals.numberOfActiveAnimations() here
34 box.style.left = '0px';	33 box.style.left = '0px';

35	34

36 window.setTimeout(function() {	35 window.setTimeout(function() {

37 var boxPos = parseInt(window.getComputedStyle(box).left);	36 var boxPos = parseInt(window.getComputedStyle(box).left);

38 document.getElementById('result').innerHTML = (boxPos < 200) ? "PASS" : "FAIL";	37 document.getElementById('result').innerHTML = (boxPos < 50) ? "PASS" : "FAIL";

39 if (window.testRunner)	38 if (window.testRunner)

40 testRunner.notifyDone();	39 testRunner.notifyDone();

41 }, 250);	40 }, 250);

42 }, 500);	41 }, 1);

43 }	42 }

44 window.addEventListener('load', startTransition, false)	43 window.addEventListener('load', startTransition, false)

45 </script>	44 </script>

46 </head>	45 </head>

47 <body>	46 <body>

48	47

49 <p>Box should start moving left after left style is reset after 500ms</p>	48 <p>Box should stay left as style is reset after 1ms</p>

50 <div id="container">	49 <div id="container">

51 <div id="box">	50 <div id="box">

52 </div>	51 </div>

53 </div>	52 </div>

54 <div id="result">	53 <div id="result">

55 </div>	54 </div>

56 </body>	55 </body>

57 </html>	56 </html>

OLD	NEW