aboutsummaryrefslogtreecommitdiffstats
path: root/tests/html
diff options
context:
space:
mode:
authorGlenn Watson <gw@intuitionlibrary.com>2015-06-18 13:06:31 +1000
committerGlenn Watson <gw@intuitionlibrary.com>2015-06-23 14:10:44 +1000
commit39ddbbb0e1a20e7165740860b63cdf892951a5ec (patch)
tree26d78ca5b184929c5d3859f2e3f53e8e986e3101 /tests/html
parentd86c5879255ec9ced621412d4565a9a66ee4dc72 (diff)
downloadservo-39ddbbb0e1a20e7165740860b63cdf892951a5ec.tar.gz
servo-39ddbbb0e1a20e7165740860b63cdf892951a5ec.zip
Implement enough of 3d transforms spec to run the CSS FPS demo.
Diffstat (limited to 'tests/html')
-rw-r--r--tests/html/test_3d_transform_1.html131
-rw-r--r--tests/html/test_3d_transform_2.html81
-rw-r--r--tests/html/test_3d_transform_zsort.html52
3 files changed, 264 insertions, 0 deletions
diff --git a/tests/html/test_3d_transform_1.html b/tests/html/test_3d_transform_1.html
new file mode 100644
index 00000000000..e35a7777018
--- /dev/null
+++ b/tests/html/test_3d_transform_1.html
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style type="text/css">
+ /* Shorthand classes for different perspective values */
+ .pers250 {
+ perspective: 250px;
+ }
+ .pers350 {
+ perspective: 350px;
+ }
+ .pers500 {
+ perspective: 500px;
+ }
+
+ /* Define the container div, the cube div, and a generic face */
+ .container {
+ width: 200px;
+ height: 200px;
+ margin: 75px 0 0 75px;
+ border: none;
+ }
+ .cube {
+ width: 100%;
+ height: 100%;
+ backface-visibility: visible;
+ perspective-origin: 150% 150%;
+ transform-style: preserve-3d;
+ }
+ .face {
+ display: block;
+ position: absolute;
+ width: 100px;
+ height: 100px;
+ border: none;
+ line-height: 100px;
+ font-family: sans-serif;
+ font-size: 60px;
+ color: white;
+ text-align: center;
+ }
+
+ /* Define each face based on direction */
+ .front {
+ background: rgba(0, 0, 0, 0.3);
+ transform: translateZ(50px);
+ }
+ .back {
+ background: rgba(0, 255, 0, 1);
+ color: black;
+ transform: rotateY(180deg) translateZ(50px);
+ }
+ .right {
+ background: rgba(196, 0, 0, 0.7);
+ transform: rotateY(90deg) translateZ(50px);
+ }
+ .left {
+ background: rgba(0, 0, 196, 0.7);
+ transform: rotateY(-90deg) translateZ(50px);
+ }
+ .top {
+ background: rgba(196, 196, 0, 0.7);
+ transform: rotateX(90deg) translateZ(50px);
+ }
+ .bottom {
+ background: rgba(196, 0, 196, 0.7);
+ transform: rotateX(-90deg) translateZ(50px);
+ }
+
+ /* Make the table a little nicer */
+ th, p, td {
+ background-color: #EEEEEE;
+ padding: 10px;
+ font-family: sans-serif;
+ text-align: left;
+ }
+ </style>
+ </head>
+ <body>
+ <table>
+ <tbody>
+ <tr>
+ <th><code>perspective: 250px;</code>
+ </th>
+ <th><code>perspective: 350px;</code>
+ </th>
+ <th><code>perspective: 500px;</code>
+ </th>
+ </tr>
+ <tr>
+ <td>
+ <div class="container">
+ <div class="cube pers250">
+ <div class="face front"></div>
+ <div class="face back"></div>
+ <div class="face right"></div>
+ <div class="face left"></div>
+ <div class="face top"></div>
+ <div class="face bottom"></div>
+ </div>
+ </div>
+ </td>
+ <td>
+ <div class="container">
+ <div class="cube pers350">
+ <div class="face front"></div>
+ <div class="face back"></div>
+ <div class="face right"></div>
+ <div class="face left"></div>
+ <div class="face top"></div>
+ <div class="face bottom"></div>
+ </div>
+ </div>
+ </td>
+ <td>
+ <div class="container">
+ <div class="cube pers500">
+ <div class="face front"></div>
+ <div class="face back"></div>
+ <div class="face right"></div>
+ <div class="face left"></div>
+ <div class="face top"></div>
+ <div class="face bottom"></div>
+ </div>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </body>
+</html>
diff --git a/tests/html/test_3d_transform_2.html b/tests/html/test_3d_transform_2.html
new file mode 100644
index 00000000000..b585831a52c
--- /dev/null
+++ b/tests/html/test_3d_transform_2.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style type="text/css">
+ .pers200 {
+ perspective: 200px;
+ }
+
+ .pers500 {
+ perspective: 500px;
+ }
+
+ .container {
+ //background-color: red;
+ width: 200px;
+ height: 200px;
+ margin: 75px 0 0 75px;
+ //border: 1px solid red;
+ }
+ .cube {
+ //background-color: green;
+ width: 100%;
+ height: 100%;
+ backface-visibility: visible;
+ perspective-origin: 150% 150%;
+ transform-style: preserve-3d;
+ }
+ .face {
+ display: block;
+ position: absolute;
+ width: 100px;
+ height: 100px;
+ border: none;
+ line-height: 100px;
+ font-family: sans-serif;
+ font-size: 60px;
+ color: white;
+ text-align: center;
+ }
+
+ /* Define each face based on direction */
+ .front {
+ background: rgba(1, 1, 1, 0.5);
+ transform: translateZ(50px);
+ }
+ .back {
+ background: rgba(0, 255, 0, 0.5);
+ color: black;
+ transform: rotateY(180deg) translateZ(50px);
+ }
+ .right {
+ background: rgba(196, 0, 0, 0.7);
+ transform: rotateY(90deg) translateZ(50px);
+ }
+ .left {
+ background: rgba(0, 0, 196, 0.7);
+ transform: rotateY(-90deg) translateZ(50px);
+ }
+ .top {
+ background: rgba(196, 196, 0, 0.7);
+ transform: rotateX(90deg) translateZ(50px);
+ }
+ .bottom {
+ background: rgba(196, 0, 196, 0.7);
+ transform: rotateX(-90deg) translateZ(50px);
+ }
+ </style>
+ </head>
+ <body>
+ <div class="container">
+ <div class="cube pers500">
+ <div class="face front"></div>
+ <div class="face back"></div>
+ <div class="face right"></div>
+ <div class="face left"></div>
+ <div class="face top"></div>
+ <div class="face bottom"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/tests/html/test_3d_transform_zsort.html b/tests/html/test_3d_transform_zsort.html
new file mode 100644
index 00000000000..688d717d659
--- /dev/null
+++ b/tests/html/test_3d_transform_zsort.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style type="text/css">
+ * {
+ margin: 0;
+ padding: 0;
+ }
+ .container {
+ perspective: 100px;
+ background-color: rgba(0, 0, 0, 0.5);
+ width: 600px;
+ height: 600px;
+ transform-style: preserve-3d;
+ }
+ .f1 {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 200px;
+ height: 200px;
+ background-color: red;
+ transform: translate3d(0, 0, -5px);
+ }
+ .f2 {
+ position: absolute;
+ top: 100px;
+ left: 100px;
+ width: 200px;
+ height: 200px;
+ background-color: green;
+ transform: translate3d(0, 0, 0);
+ }
+ .f3 {
+ position: absolute;
+ top: 200px;
+ left: 200px;
+ width: 200px;
+ height: 200px;
+ background-color: blue;
+ transform: translate3d(0, 0, 0);
+ }
+ </style>
+ </head>
+ <body>
+ <div class="container">AAA
+ <div class="f1"></div>
+ <div class="f2"></div>
+ <div class="f3"></div>
+ </div>
+ </body>
+</html>
generated by cgit v1.2.3 (git 2.25.1) at 2025-04-25 12:11:45 +0000