mirror of
https://github.com/HeyPuter/firefox.git
synced 2026-11-13 20:14:57 -10:00
Oriol Brufau
cc4e5f60d5
Automatic update from web-platform-tests layout: Fix logic for transforms with non-invertible matrix When the the current transformation matrix of a box isn't invertible, the box and its content shouldn't be displayed. However, the logic was broken: - It was only checking the `transform` property, but not individual transform properties like `scale`. - It was treating matrices with m₁₁=0 or m₂₂=0 and non-invertible, even when they can still be invertible and have a visible outcome. - When m₁₁=0 or m₂₂=0 weren't caused by `transform`, it was replacing the matrix with the identity. Signed-off-by: Oriol Brufau <[email protected]> -- wpt-commits: b34f471ac6b81141103c4543b03acb64359f08e7 wpt-pr: 52787 Differential Revision: https://phabricator.services.mozilla.com/D252044
42 lines
1.2 KiB
HTML
42 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>CSS Test (Transforms): matrix() with zeros in the diagonal</title>
|
|
<link rel="author" title="Oriol Brufau" href="mailto:[email protected]">
|
|
<link rel="help" href="https://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix">
|
|
<link rel="help" href="https://www.w3.org/TR/css-transforms-1/#transform-function-lists">
|
|
<link rel="help" href="https://github.com/servo/servo/issues/37146">
|
|
<link rel="match" href="../reference/ref-filled-green-200px-square.html">
|
|
<meta name="assert" content="Tests that the element is still rendered,
|
|
even though the current transformation matrix has zeros in the diagonal,
|
|
as long as the matrix remains invertible.">
|
|
|
|
<style>
|
|
.wrapper {
|
|
width: 200px;
|
|
height: 200px;
|
|
background: red;
|
|
}
|
|
.test {
|
|
width: 200px;
|
|
height: 200px;
|
|
background: green;
|
|
transform: matrix(0,1, 1,0, 0,0);
|
|
/*
|
|
The resulting matrix is:
|
|
┌ ┐
|
|
│ 0 1 0 0 │
|
|
│ 1 0 0 0 │
|
|
│ 0 0 1 0 │
|
|
│ 0 0 0 1 │
|
|
└ ┘
|
|
It could result from e.g. `scaleX(-1) rotate(90deg)`.
|
|
*/
|
|
}
|
|
</style>
|
|
|
|
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
|
|
|
<div class="wrapper">
|
|
<div class="test"></div>
|
|
</div>
|