Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / compositing / backface-visibility / backface-visibility-3d.html
blobef2a7d39cc32969adb543f3b8eef7d0951a80d0a
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 .large {
6 width: 100px;
7 height: 100px;
10 .medium {
11 width: 65px;
12 height: 65px;
15 .small {
16 width: 30px;
17 height: 30px;
20 .backfaceHidden {
21 -webkit-backface-visibility: hidden;
24 .green {
25 background-color: green
28 .blue {
29 background-color: blue
32 .lime {
33 background-color: lime
36 #testCase1 {
37 position: absolute;
38 top: 50px;
39 left: 10px;
42 #testCase2 {
43 position: absolute;
44 top: 160px;
45 left: 10px;
48 #testCase3 {
49 position: absolute;
50 top: 270px;
51 left: 10px;
54 #testCase4 {
55 position: absolute;
56 top: 380px;
57 left: 10px;
59 </style>
60 </head>
61 <body>
63 <!-- This test checks various configurations of backface visibility when there is a 3d
64 rendering context. -->
66 <!-- The blue div is a 3d rendering context, containing the lime div. No back faces are
67 visible, so we should see all three divs. -->
68 <div class="large green" id="testCase1">
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; transform: rotateX(0deg)">
71 </div>
72 </div>
73 </div>
75 <!-- The blue div is a 3d rendering context, containing the lime div. The lime div should
76 inherit the blue div's transform, so both divs are showing their backface and both
77 should disappear. -->
78 <div class="large green" id="testCase2">
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; transform: rotateX(0deg)">
81 </div>
82 </div>
83 </div>
85 <!-- The blue div is a 3d rendering context, containing the lime div. The lime div should
86 become invisible when it shows its backface. -->
87 <div class="large green" id="testCase3">
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; transform: rotateX(180deg)">
90 </div>
91 </div>
92 </div>
94 <!-- The blue div is a 3d rendering context, containing the lime div. The lime div should
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 BEFORE the
97 lime div flattens to the rendering context, so the lime div should remain visible. -->
98 <div id="testCase4" class="large green">
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; transform: rotateX(180deg)">
101 </div>
102 </div>
103 </div>
105 <script>
106 if (window.testRunner) {
107 testRunner.dumpAsTextWithPixelResults(); // This is only useful as a pixel test.
108 document.write("<span style='position:absolute; top:-5000px'>This test is only useful as a pixel test</span>");
110 </script>
111 </body>
112 </html>