third_party/WebKit/LayoutTests/transitions/opacity-transition-zindex.html - Issue 2591623002: CSS Transition: Fix flaky opacity-transition-zindex.html

Side by Side Diff: third_party/WebKit/LayoutTests/transitions/opacity-transition-zindex.html

Issue 2591623002: CSS Transition: Fix flaky opacity-transition-zindex.html (Closed)

Patch Set: png Created 3 years, 12 months ago

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

Jump to:

« no previous file with comments | « third_party/WebKit/LayoutTests/platform/win/virtual/threaded/transitions/opacity-transition-zindex-expected.png ('k') | third_party/WebKit/LayoutTests/transitions/opacity-transition-zindex-expected.png » ('j') | third_party/WebKit/LayoutTests/transitions/opacity-transition-zindex-expected.txt » ('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 * {
	suzyh_UTC10 (ex-contributor) 2016/12/21 00:37:45 What is the purpose of adding this clause? What is the purpose of adding this clause? Eric Willigers 2016/12/21 01:22:36 The test expectations previously depended on the f Show quoted text On 2016/12/21 00:37:45, suzyh wrote: > What is the purpose of adding this clause? The test expectations previously depended on the following margin in Blink's user-agent stylesheet html.css body { display: block; margin: 8px } This made the expectations in the .txt more complex to understand. There is no need for the test to be dependent on Blink's user-agent stylesheet.
	7 border: 0;

	8 margin: 0;

	9 padding: 0;

	10 }

6 .container {	11 .container {
	suzyh_UTC10 (ex-contributor) 2016/12/21 00:37:45 Why are there separate .container and #first claus Why are there separate .container and #first clauses? This test setup seems unnecessarily complex, obscuring the purpose of the test. Eric Willigers 2016/12/21 01:51:12 Now consolidated. There is no need for .class when Show quoted text On 2016/12/21 00:37:45, suzyh wrote: > Why are there separate .container and #first clauses? This test setup seems > unnecessarily complex, obscuring the purpose of the test. Now consolidated. There is no need for .class when #id suffices.
7 position: relative;	12 position: relative;

8 height: 300px;	13 height: 300px;

9 width: 300px;	14 width: 300px;

10 margin: 10px;	15 margin: 10px;

11 background-color: green;	16 background-color: green;

12 transition-property: opacity;	17 transition-property: opacity;

13 transition-timing-function: linear;	18 transition-timing-function: linear;

14 transition-duration: 5s;	19 transition-duration: 5s;

15 }	20 }

16	21

(...skipping 17 matching lines...) Expand all Loading...
34 height: 100px;	39 height: 100px;

35 width: 100px;	40 width: 100px;

36 background-color: orange;	41 background-color: orange;

37 z-index: -1;	42 z-index: -1;

38 }	43 }

39 </style>	44 </style>

40 <script>	45 <script>

41 if (window.testRunner)	46 if (window.testRunner)

42 testRunner.waitUntilDone();	47 testRunner.waitUntilDone();

43	48

	49 function waitForCompositor() {

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

	51 return box.animate({transform: ['scale(1)', 'scale(1)']}, 1).ready;

	52 }

	53

44 function runTest()	54 function runTest()

45 {	55 {

46 var container = document.getElementById('first');	56 var container = document.getElementById('first');

47 container.style.opacity = 1;	57 container.style.opacity = 1;

48	58

49 // dump the tree in the middle of the transition	59 // dump the tree in the middle of the transition

50 if (window.internals) {	60 if (window.internals) {

51 window.internals.forceCompositingUpdate(document);	61 window.internals.forceCompositingUpdate(document);

52 window.internals.pauseAnimations(2.5);	62 window.internals.pauseAnimations(2.5);

53 }	63 }

54 if (window.testRunner) {	64 if (window.testRunner) {

	65 waitForCompositor().then(() => {

55 testRunner.notifyDone();	66 testRunner.notifyDone();

	67 });

56 }	68 }

57 }	69 }

58 // FIXME: this should use runTransitionTest().	70 // FIXME: this should use runTransitionTest().

59 window.addEventListener('load', runTest, false);	71 window.addEventListener('load', runTest, false);

60 </script>	72 </script>

61 </head>	73 </head>

62 <body>	74 <body>

63	75

64 <div class="container" id="first">	76 <div class="container" id="first">

65 <div class="box"></div>	77 <div class="box" id="box"></div>

66 <div class="indicator"></div>	78 <div class="indicator"></div>

67 </div>	79 </div>

68	80

69 </body>	81 </body>

70 </html>	82 </html>

OLD	NEW