CSS: perspective and transform: perspective() accept 0px

Proposed implementation and test change for w3c/csswg-drafts#413 Change-Id: I4207cb9f91fd8743185e16fb87cd44f9b925cebd
web-platform-tests · Sep 9, 2019 · df9a395 · df9a395
1 parent 79e931c
commit df9a395
Show file tree

Hide file tree

Showing 7 changed files with 224 additions and 0 deletions.
diff --git a/css/css-transforms/animation/perspective-interpolation.html b/css/css-transforms/animation/perspective-interpolation.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>perspective interpolation</title>
+    <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-perspective">
+    <meta name="assert" content="perspective supports <length> animation.">
+    <meta name="assert" content="Negative values are clamped.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+    <style>
+      body {
+        width: 500px;
+        height: 500px;
+      }
+      div {
+        width: 10px;
+        height: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <script>
+      test_interpolation({
+        property: 'perspective',
+        from: '20px',
+        to: '100px',
+      }, [
+        {at: -1, expect: '0px'}, // clamped
+        {at: 0, expect: '20px'},
+        {at: 0.125, expect: '30px'},
+        {at: 0.875, expect: '90px'},
+        {at: 1, expect: '100px'},
+        {at: 2, expect: '180px'}
+      ]);
+
+      test_no_interpolation({
+        property: 'perspective',
+        from: 'none',
+        to: '100px',
+      });
+    </script>
+  </body>
+</html>
diff --git a/css/css-transforms/parsing/perspective-computed.html b/css/css-transforms/parsing/perspective-computed.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Transform Module Level 2: getComputedStyle().perspective</title>
+<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#perspective-property">
+<meta name="assert" content="perspective computed value is the keyword none or an absolute length.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<style>
+  #target {
+    font-size: 40px;
+  }
+</style>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("perspective", "none");
+
+test_computed_value("perspective", "10px");
+test_computed_value("perspective", "calc(10px - 0.5em)", "0px");
+test_computed_value("perspective", "calc(10px + 0.5em)", "30px");
+</script>
+</body>
+</html>
diff --git a/css/css-transforms/parsing/perspective-invalid.html b/css/css-transforms/parsing/perspective-invalid.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Transform Module Level 2: parsing perspective with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#perspective-property">
+<meta name="assert" content="perspective supports only the 'none | <length>' grammar.">
+<meta name="assert" content="Negative values are invalid.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("perspective", "auto");
+test_invalid_value("perspective", "20%");
+test_invalid_value("perspective", "-30px");
+test_invalid_value("perspective", "40");
+test_invalid_value("perspective", "calc(50% + 60px)");
+test_invalid_value("perspective", "70px 80px");
+test_invalid_value("perspective", "none 90px");
+test_invalid_value("perspective", "calc(0)");
+</script>
+</body>
+</html>
diff --git a/css/css-transforms/parsing/perspective-valid.html b/css/css-transforms/parsing/perspective-valid.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Transform Module Level 2: parsing perspective with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#perspective-property">
+<meta name="assert" content="perspective supports the full 'none | <length>' grammar.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("perspective", "none");
+
+test_valid_value("perspective", "10px");
+test_valid_value("perspective", "0", "0px");
+test_valid_value("perspective", "calc(2em + 3ex)");
+</script>
+</body>
+</html>
diff --git a/css/css-transforms/parsing/transform-computed.html b/css/css-transforms/parsing/transform-computed.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Transform Module Level 2: getComputedStyle().transform</title>
+<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#transform-property">
+<meta name="assert" content="transform resolved value is the keyword none or a matrix() or matrix3d() function.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("transform", "none");
+
+test_computed_value("transform", "translateX(10px)", "matrix(1, 0, 0, 1, 10, 0)");
+test_computed_value("transform", "translateY(10px)", "matrix(1, 0, 0, 1, 0, 10)");
+test_computed_value("transform", "translateZ(10px)", "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 10, 1)");
+test_computed_value("transform", "translateZ(0px)", "matrix(1, 0, 0, 1, 0, 0)");
+
+test_computed_value("transform", "scale(2, 3)", "matrix(2, 0, 0, 3, 0, 0)");
+
+test_computed_value("transform", "rotate(0deg)", "matrix(1, 0, 0, 1, 0, 0)");
+
+test_computed_value("transform", "perspective(0.25px)", "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -4, 0, 0, 0, 1)");
+test_computed_value("transform", "perspective(0px)", "matrix(1, 0, 0, 1, 0, 0)");
+
+// TO DO: Test additional values, test remaining functions, test lists of functions.
+</script>
+</body>
+</html>
diff --git a/css/css-transforms/transform-stacking-005.html b/css/css-transforms/transform-stacking-005.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Test (Transforms): Stacking, transform: perspective(0px)</title>
+    <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name">
+    <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering">
+    <meta name="assert" content='This tests that specifying transform perspective(0px)
+    on an element still causes it to create a new stacking context
+    (unlike transform: none).'>
+    <link rel="match" href="transform-lime-square-ref.html">
+    <style>
+      body > div:first-child {
+        transform: perspective(0px);
+      }
+      body > div:first-child > div {
+        height: 100px;
+        width: 100px;
+        background: red;
+        z-index: 1;
+        position: relative;
+      }
+      body > div:last-child {
+        height: 100px;
+        width: 100px;
+        background: lime;
+        position: relative;
+        bottom: 100px;
+      }
+    </style>
+  </head>
+  <body>
+    <div>
+      <div></div>
+    </div>
+    <div></div>
+  </body>
+</html>
diff --git a/css/css-transforms/transform-stacking-006.html b/css/css-transforms/transform-stacking-006.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Test (Transforms): Stacking, perspective: 0px</title>
+    <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name">
+    <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering">
+    <meta name="assert" content='This tests that specifying perspective: 0px
+    on an element still causes it to create a new stacking context
+    (unlike transform: none).'>
+    <link rel="match" href="transform-lime-square-ref.html">
+    <style>
+      body > div:first-child {
+        perspective: 0px;
+      }
+      body > div:first-child > div {
+        height: 100px;
+        width: 100px;
+        background: red;
+        z-index: 1;
+        position: relative;
+      }
+      body > div:last-child {
+        height: 100px;
+        width: 100px;
+        background: lime;
+        position: relative;
+        bottom: 100px;
+      }
+    </style>
+  </head>
+  <body>
+    <div>
+      <div></div>
+    </div>
+    <div></div>
+  </body>
+</html>