Skip to content

Commit

Permalink
Correct handling of [0px,1px) values of perspective and perspective().
Browse files Browse the repository at this point in the history
This makes a number of fixes to handling small values of the perspective
CSS property and the perspective() transform function to match the
css-transforms-2 specification (the latest updates to which come from
the resolutions in w3c/csswg-drafts#413):

 * Accept zero values of the perspective property at parse time.  (They
   were already accepted for the perspective function.)

   Zero values are currently accepted by Gecko, but it treats them as
   the identity matrix (that is, as infinite perspective) rather than
   clamping to 1px.

 * Use -1.0 rather than 0.0 as the internal representation of
   perspective: none.

 * For rendering of both the perspective property and the perspective()
   transform function, treat values smaller than 1px as 1px.

 * For interpolation of the perspective() transform function,
   treat values smaller than 1px as 1px.  This is an additional
   clarification to the resolution that I proposed in
   w3c/csswg-drafts#6320.

 * When handling the perspective() transform function when finding the
   resolved value of the transform property (which is a matrix() or
   matrix3d() value), treat values smaller than 1px as 1px.  (Resolved
   values are the results of getComputedStyle().)  This is an additional
   clarification that I proposed in
   w3c/csswg-drafts#6346.

Note that interpolation and resolved values of the perspective property
since both interpolation and resolved values match the specified values.
In the case of interpolation that was resolved specifically in
w3c/csswg-drafts#3084.

It also substantially simplifies PerspectiveTransformOperation::Blend,
although I *believe* the only substantive change is the clamping of its
inputs to be 1px or larger.

Parts of this are somewhat risky, since previously transform:
perspective(0) was treated as the identity matrix and perspective: 0 was
a syntax error, whereas this makes both be treated as very substantial
transform (perspective from 1px away).  The old behavior of transform:
perspective(0) was interoperable across browsers.  The old behavior of
perspective: 0 was different in Gecko (where it was valid syntax, but
like transform: perspective(0) was treated as the identity matrix), but
the old behaviors across browsers still had in common that they all led
to the identity matrix (whether valid or invalid syntax), which is not
true of the new behavior.  The risk for handling of values in (0px, 1px)
is probably less substantial since those were already treated as extreme
transforms, and this makes them less extreme.

There are thus three possible less-risky alternatives, from more risk
(but less than this) to lowest risk:

 * Use this patch, but omit the changes to perspective: 0 and
   perspective(0) except for the change that makes perspective: 0 valid,
   but treat perspective: 0 as an identity transform like Gecko does.

 * Use this patch, but omit all the changes to perspective: 0px and
   perspective(0).

 * Change the behavior only when DBL_TRUE_MIN <= perspective < DBL_MIN,
   by treating perspective (property or function) as DBL_MIN in those
   cases.

However, it's worth trying this riskier alternative and following the
CSS Working Group's decision because that decision was made for good
reasons.  Taking this approach has two advantages:

 (1) It eliminates the only case where the valid values of a CSS
     property are an open range (a range exclusive of its endpoint),
     which creates difficulties for defining clamping of values to the
     valid range, which is important to CSS both for calc() and for
     animations (e.g., when the timing function result is outside of
     [0, 1]).

 (2) It eliminates a discontinuity in behavior at zero.  Discontinuities
     in behavior cause animations that cross the discontinuity to behave
     poorly.

Fixed: 1205161
Change-Id: Ie11a3d27d32e6ce16c39d670f6423a6710ba0971
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2924023
Commit-Queue: David Baron <dbaron@chromium.org>
Reviewed-by: Xianzhu Wang <wangxianzhu@chromium.org>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#889344}
  • Loading branch information
dbaron authored and foolip committed Jun 7, 2021
1 parent dae8091 commit 7ad807c
Show file tree
Hide file tree
Showing 7 changed files with 78 additions and 23 deletions.
15 changes: 15 additions & 0 deletions css/css-transforms/animation/perspective-interpolation.html
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,21 @@
{at: 1.5, expect: '125px'},
]);

test_interpolation({
property: 'perspective',
from: '0px', // Test that there's no special handling of 0px, as for perspective()
to: '10px',
}, [
{at: -20, expect: '0px'}, // perspective does not accept negative values
{at: -1, expect: '0px'}, // perspective does not accept negative values
{at: -0.3, expect: '0px'},
{at: 0, expect: '0px'},
{at: 0.3, expect: '3px'},
{at: 0.6, expect: '6px'},
{at: 1, expect: '10px'},
{at: 1.5, expect: '15px'},
]);

test_no_interpolation({
property: 'perspective',
from: '50px',
Expand Down
10 changes: 7 additions & 3 deletions css/css-transforms/perspective-zero-2-ref.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,22 @@
<title>CSS transforms: perspective: 0px reference</title>
<link rel="author" title="Miko Mynttinen" href="mailto:mmynttinen@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<style type="text/css">
.parent {
transform: perspective(0px);
transform-style: preserve-3d;
transform-origin: top left;
}
.parent > div {
width: 200px;
height: 200px;
width: 100px;
height: 100px;
position: absolute;
}
.child-3d {
background: green;
transform: translateZ(1px);
transform: translateZ(0.5px);
}
</style>
</head>
Expand Down
11 changes: 8 additions & 3 deletions css/css-transforms/perspective-zero-2.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,25 +5,30 @@
<title>CSS transforms: perspective: 0px</title>
<link rel="author" title="Miko Mynttinen" href="mailto:mmynttinen@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-perspective">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/413">
<meta name="assert" content="Test checks that perspective: 0px behaves like transform: perspective(0) on parent container">
<link rel="match" href="perspective-zero-2-ref.html">
<style type="text/css">
.parent {
perspective: 0px;
perspective-origin: top left;
}
.parent > div {
width: 200px;
height: 200px;
position: absolute;
}
.child-2d {
background: red;
width: 200px;
height: 200px;
}
.child-3d {
width: 100px;
height: 100px;
background: green;
transform: translateZ(1px);
transform: translateZ(0.5px);
}
</style>
</head>
Expand Down
28 changes: 28 additions & 0 deletions css/css-transforms/perspective-zero-3.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<meta charset=UTF-8>
<title>CSS Test: perspective(0)</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#perspective-property">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/413">
<meta name="assert" content="perspective: 0 should be clamped to 1px">
<link rel="match" href="reference/green.html">
<style>
#outer {
width: 100px;
height: 100px;
background: red;
perspective: 0;
perspective-origin: top left;
}
#inner {
width: 50px;
height: 50px;
background: green;
/* perspective: 0 should be treated as perspective(1px), which should
* cause this box to be much larger. */
transform: translateZ(0.5px);
}
</style>
<p>Pass if there is NO red below:</p>
<div id="outer"><div id="inner"></div></div>
23 changes: 11 additions & 12 deletions css/css-transforms/perspective-zero.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,28 @@
<title>CSS Test: transform: perspective(0)</title>
<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#funcdef-perspective">
<meta name="assert" content="perspective(0) should behave like identity transform function.">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/413">
<meta name="assert" content="perspective(0) should be clamped to 1px">
<link rel="match" href="reference/green.html">
<style>
#cover-me, #test {
#cover-me {
width: 100px;
height: 100px;
}
#cover-me {
background: red;
position: relative;
margin-bottom: -100px;
}
#test {
background: green;
/* This should be an identity transform, since perspective(0) must be
* treated as perspective(infinity), and consequently translateZ()
* doesn't have any effect, so that it covers up #cover-me.
* If perspective(0) is invalid, #test would not create a stacking
* context, and #cover-me would be placed on top of #test showing red.
* If perspective(0) is handled as perspective(epsilon), #test would
* be invisible. */
transform: perspective(0) translateZ(50px);
transform-origin: top left;
width: 50px;
height: 50px;
/* perspective(0) should be treated as perspective(1px), which should
* cause this box to be much larger. */
transform: perspective(0) translateZ(0.5px);
}
</style>
<p>Pass if there is NO red below:</p>
Expand Down
11 changes: 7 additions & 4 deletions css/css-transforms/transform3d-perspective-005.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,19 @@
<title>CSS Test (Transforms): 'perspective: 1000px' on Grandparent and
'perspective: 0px' on Parent</title>
<link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#perspective-property">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/413">
<meta name="assert" content="This tests that 'perspective: 0px' behaves the
same as no perspective being specified at all (it's a parse error).">
same as perspective: 1px.">
<link rel="match" href="transform-lime-square-ref.html">
</head>
<body>
<div style="perspective: 1000px">
<div style="perspective: 0px">
<div style="height: 100px; width: 100px; background: lime;
transform: rotatex(45deg) scaley(1.41421356); transform-origin: top">
<div style="perspective: 0px; perspective-origin: 50px bottom">
<div style="height: 50px; width: 50px; background: lime;
transform: translate3d(25px, 25px, 0.5px)">
</div>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -1074,14 +1074,15 @@ const transformListType = {
const target = createTestElement(t, setup);
const animation = target.animate(
{
// perspective(0) is treated as perspective(1px)
[idlName]: ['perspective(0)', 'perspective(10px)'],
},
1000
);
testAnimationSampleMatrices(animation, idlName,
[{ time: 500, expected: [ 1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, -0.05,
0, 0, 1, -0.55,
0, 0, 0, 1 ] }]);
}, `${property}: perspective`);

Expand Down

0 comments on commit 7ad807c

Please sign in to comment.