Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-14 18:05:36 +01:00
Code Issues Projects Releases Packages Wiki Activity

layout: Fix logic for transforms with non-invertible matrix (#37147)

Browse source 
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.

Testing: Adding new WPT
Fixes: #37146

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Oriol Brufau 2025-05-27 20:36:33 +02:00 • committed by GitHub
parent fef1dd9ea0
commit ac06b1cfcf
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 114 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

26
tests/wpt/meta/MANIFEST.json vendored
View file

@ -279684,6 +279684,19 @@
{}
]
],
"individual-transform-3.html": [
"2c81cb12156134ee8deca6abf0043848ac8bc750",
[
null,
[
[
"/css/reference/ref-filled-green-200px-square.html",
"=="
]
],
{}
]
],
"stacking-context-001.html": [
"1a754c5d70b607396ffe2db1d04f2294aeca1041",
[
@ -284738,6 +284751,19 @@
{}
]
],
"transform-matrix-009.html": [
"81f04db0d103202180aba2625205643c376483af",
[
null,
[
[
"/css/reference/ref-filled-green-200px-square.html",
"=="
]
],
{}
]
],
"transform-origin": {
"svg-origin-length-001.html": [
"2f2256361cadd4f69aa08fd775a4305219a41fdd",

40
tests/wpt/tests/css/css-transforms/individual-transform/individual-transform-3.html vendored Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>Individual transform: non-invertible matrix</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm">
<link rel="help" href="https://drafts.csswg.org/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 isn't rendered when
the current transformation matrix is non-invertible because of `scale`.">
<style>
.wrapper {
width: 200px;
height: 200px;
background: green;
}
.wrapper > div {
width: 200px;
height: 20px;
background: red;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="wrapper">
<div style="scale: 0"></div>
<div style="scale: 0 0"></div>
<div style="scale: 0 1"></div>
<div style="scale: 1 0"></div>
<div style="scale: 0 0 0"></div>
<div style="scale: 0 0 1"></div>
<div style="scale: 0 1 0"></div>
<div style="scale: 0 1 1"></div>
<div style="scale: 1 0 0"></div>
<div style="scale: 1 0 1"></div>
<div style="scale: 1 1 0"></div>
</div>

41
tests/wpt/tests/css/css-transforms/transform-matrix-009.html vendored Normal file
View file

@ -0,0 +1,41 @@
<!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:obrufau@igalia.com">
<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>