LayoutTests/compositing/backface-visibility/backface-visibility-3d.html - Issue 637763002: Unprefix usage of -webkit-transform in tests

Side by Side Diff: LayoutTests/compositing/backface-visibility/backface-visibility-3d.html

Issue 637763002: Unprefix usage of -webkit-transform in tests (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Created 6 years, 2 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:

View unified diff | Download patch

« no previous file with comments | « LayoutTests/compositing/backface-visibility-transformed.html ('k') | LayoutTests/compositing/backface-visibility/backface-visibility-hierarchical-transform.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

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

2 <html>	2 <html>

3 <head>	3 <head>

4 <style>	4 <style>

5 .large {	5 .large {

6 width: 100px;	6 width: 100px;

7 height: 100px;	7 height: 100px;

8 }	8 }

9	9

10 .medium {	10 .medium {

(...skipping 48 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
59 </style>	59 </style>

60 </head>	60 </head>

61 <body>	61 <body>

62	62

63 <!-- This test checks various configurations of backface visibility when there i s a 3d	63 <!-- This test checks various configurations of backface visibility when there i s a 3d

64 rendering context. -->	64 rendering context. -->

65	65

66 <!-- The blue div is a 3d rendering context, containing the lime div. No back fa ces are	66 <!-- The blue div is a 3d rendering context, containing the lime div. No back fa ces are

67 visible, so we should see all three divs. -->	67 visible, so we should see all three divs. -->

68 <div class="large green" id="testCase1">	68 <div class="large green" id="testCase1">

69 <div class="medium blue" style="-webkit-backface-visibility: hidden; -webkit-t ransform: rotateY(0deg); -webkit-transform-style: preserve-3d">	69 <div class="medium blue" style="-webkit-backface-visibility: hidden; transform : rotateY(0deg); -webkit-transform-style: preserve-3d">

70 <div class="small lime" style="-webkit-backface-visibility: hidden; -webkit- transform: rotateX(0deg)">	70 <div class="small lime" style="-webkit-backface-visibility: hidden; transfor m: rotateX(0deg)">

71 </div>	71 </div>

72 </div>	72 </div>

73 </div>	73 </div>

74	74

75 <!-- The blue div is a 3d rendering context, containing the lime div. The lime d iv should	75 <!-- The blue div is a 3d rendering context, containing the lime div. The lime d iv should

76 inherit the blue div's transform, so both divs are showing their backface a nd both	76 inherit the blue div's transform, so both divs are showing their backface a nd both

77 should disappear. -->	77 should disappear. -->

78 <div class="large green" id="testCase2">	78 <div class="large green" id="testCase2">

79 <div class="medium blue" style="-webkit-backface-visibility: hidden; -webkit-t ransform: rotateY(180deg); -webkit-transform-style: preserve-3d">	79 <div class="medium blue" style="-webkit-backface-visibility: hidden; transform : rotateY(180deg); -webkit-transform-style: preserve-3d">

80 <div class="small lime" style="-webkit-backface-visibility: hidden; -webkit- transform: rotateX(0deg)">	80 <div class="small lime" style="-webkit-backface-visibility: hidden; transfor m: rotateX(0deg)">

81 </div>	81 </div>

82 </div>	82 </div>

83 </div>	83 </div>

84	84

85 <!-- The blue div is a 3d rendering context, containing the lime div. The lime d iv should	85 <!-- The blue div is a 3d rendering context, containing the lime div. The lime d iv should

86 become invisible when it shows its backface. -->	86 become invisible when it shows its backface. -->

87 <div class="large green" id="testCase3">	87 <div class="large green" id="testCase3">

88 <div class="medium blue" style="-webkit-backface-visibility: hidden; -webkit-t ransform: rotateY(0deg); -webkit-transform-style: preserve-3d">	88 <div class="medium blue" style="-webkit-backface-visibility: hidden; transform : rotateY(0deg); -webkit-transform-style: preserve-3d">

89 <div class="small lime" style="-webkit-backface-visibility: hidden; -webkit- transform: rotateX(180deg)">	89 <div class="small lime" style="-webkit-backface-visibility: hidden; transfor m: rotateX(180deg)">

90 </div>	90 </div>

91 </div>	91 </div>

92 </div>	92 </div>

93	93

94 <!-- The blue div is a 3d rendering context, containing the lime div. The lime d iv should	94 <!-- The blue div is a 3d rendering context, containing the lime div. The lime d iv should

95 inherit the blue div's transform, but because it flips twice (once around Y , once	95 inherit the blue div's transform, but because it flips twice (once around Y , once

96 around X), its shows its front face and should be visible. This happens BEF ORE the	96 around X), its shows its front face and should be visible. This happens BEF ORE the

97 lime div flattens to the rendering context, so the lime div should remain v isible. -->	97 lime div flattens to the rendering context, so the lime div should remain v isible. -->

98 <div id="testCase4" class="large green">	98 <div id="testCase4" class="large green">

99 <div class="medium blue" style="-webkit-backface-visibility: hidden; -webkit-t ransform: rotateY(180deg); -webkit-transform-style: preserve-3d">	99 <div class="medium blue" style="-webkit-backface-visibility: hidden; transform : rotateY(180deg); -webkit-transform-style: preserve-3d">

100 <div class="small lime" style="-webkit-backface-visibility: hidden; -webkit- transform: rotateX(180deg)">	100 <div class="small lime" style="-webkit-backface-visibility: hidden; transfor m: rotateX(180deg)">

101 </div>	101 </div>

102 </div>	102 </div>

103 </div>	103 </div>

104	104

105 <script>	105 <script>

106 if (window.testRunner) {	106 if (window.testRunner) {

107 testRunner.dumpAsTextWithPixelResults(); // This is only useful as a pixe l test.	107 testRunner.dumpAsTextWithPixelResults(); // This is only useful as a pixe l test.

108 document.write("<span style='position:absolute; top:-5000px'>This test is only useful as a pixel test</span>");	108 document.write("<span style='position:absolute; top:-5000px'>This test is only useful as a pixel test</span>");

109 }	109 }

110 </script>	110 </script>

111 </body>	111 </body>

112 </html>	112 </html>

OLD	NEW