third_party/WebKit/LayoutTests/animations/zoom-responsive-transform-animation-expected.html - Issue 2482753002: Fix matrix3d transform under page zoom

Side by Side Diff: third_party/WebKit/LayoutTests/animations/zoom-responsive-transform-animation-expected.html

Issue 2482753002: Fix matrix3d transform under page zoom (Closed)

Patch Set: Add a comment for zoom Created 4 years, 1 month 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/animations/zoom-responsive-transform-animation.html ('k') | third_party/WebKit/LayoutTests/fast/css/getComputedStyle/computed-style-with-zoom-expected.txt » ('j') | third_party/WebKit/Source/platform/transforms/TransformationMatrix.h » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

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

2 <style>	2 <style>

3 #container {	3 #container {

4 position: absolute;	4 position: absolute;

5 top: 0;	5 top: 0;

6 font-size: 10px;	6 font-size: 10px;

7 }	7 }

8 .target {	8 .target {

9 width: 40px;	9 width: 40px;

10 height: 40px;	10 height: 40px;

11 border-top: solid;	11 border-top: solid;

12 border-left: solid;	12 border-left: solid;

13 margin-bottom: 20px;	13 margin-bottom: 20px;

14 }	14 }

15 </style>	15 </style>

16 <div id="container"></div>	16 <div id="container"></div>

17 <script>	17 <script>

18 internals.setZoomFactor(2);	18 internals.setZoomFactor(2);

19	19

20 [	20 [

21 'perspective(200px) translate3D(10px, 10px, 10px)',	21 'perspective(200px) translate3D(10px, 10px, 10px)',

22 'matrix(0, 1, 1, 0, 10, 10)',	22 'matrix(0, 1, 1, 0, 10, 10)',

23 'matrix3d(' +	23 'matrix3d(' +

24 '0, 1, 0, 0, ' +	24 '0, 1, 0, 0, ' +

25 '1, 0, 0, 0, ' +	25 '1, 0, 0, 0, ' +

26 '0, 0, 1, 0, ' +	26 '0, 0, 1, 0, ' +

27 '10, 10, 10, 1)',	27 '10, 10, 10, 1)',

	28 'matrix3d(' +

	29 '0.707106781186548, 0.000000000000000, -0.707106781186547, 0.003535533905933 ,' +

	30 '0.000000000000000, 1.000000000000000, 0.000000000000000, 0.000000000000000, ' +

	31 '0.707106781186547, 0.000000000000000, 0.707106781186548, -0.003535533905933 ,' +

	32 '0.000000000000000, 0.000000000000000, 0.000000000000000, 1.000000000000000) ', // Equivalent to perspective(200px) rotateY(45deg)

28 'perspective(200px) rotateY(45deg)',	33 'perspective(200px) rotateY(45deg)',

29 'none', // Composited animations fail to zoom the last expectation correctly. ):	34 'none', // Composited animations fail to zoom the last expectation correctly. ):

30 ].forEach(transform => {	35 ].forEach(transform => {

31 var text = document.createElement('div');	36 var text = document.createElement('div');

32 text.textContent = transform;	37 text.textContent = transform;

33 container.appendChild(text);	38 container.appendChild(text);

34	39

35 var target = document.createElement('div');	40 var target = document.createElement('div');

36 target.classList.add('target');	41 target.classList.add('target');

37 container.appendChild(target);	42 container.appendChild(target);

38 target.animate([	43 target.animate([

39 {transform: transform},	44 {transform: transform},

40 {transform: transform},	45 {transform: transform},

41 ], 1e8);	46 ], 1e8);

42 });	47 });

43	48

44 // We must wait a frame to let compositor animations render.	49 // We must wait a frame to let compositor animations render.

45 if (window.testRunner)	50 if (window.testRunner)

46 testRunner.waitUntilDone();	51 testRunner.waitUntilDone();

47	52

48 requestAnimationFrame(() => {	53 requestAnimationFrame(() => {

49 requestAnimationFrame(() => {	54 requestAnimationFrame(() => {

50 if (window.testRunner)	55 if (window.testRunner)

51 testRunner.notifyDone();	56 testRunner.notifyDone();

52 });	57 });

53 });	58 });

54 </script>	59 </script>

OLD	NEW