mirror of
https://github.com/servo/servo.git
synced 2025-10-01 09:09:15 +01:00
layout: Correctly calculate the angle for gradients with corners
The previous code assumed that the diagonals of the elements were perpendicular, which only happens with squares. tests: layout: Test linear gradient corners
This commit is contained in:
parent
5668a55ef4
commit
37d1c749aa
4 changed files with 114 additions and 26 deletions
|
@ -3120,6 +3120,18 @@
|
|||
"url": "/_mozilla/css/linear_gradients_lengths_a.html"
|
||||
}
|
||||
],
|
||||
"css/linear_gradients_non_square_a.html": [
|
||||
{
|
||||
"path": "css/linear_gradients_non_square_a.html",
|
||||
"references": [
|
||||
[
|
||||
"/_mozilla/css/linear_gradients_non_square_ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
"url": "/_mozilla/css/linear_gradients_non_square_a.html"
|
||||
}
|
||||
],
|
||||
"css/linear_gradients_parsing_a.html": [
|
||||
{
|
||||
"path": "css/linear_gradients_parsing_a.html",
|
||||
|
@ -10124,6 +10136,18 @@
|
|||
"url": "/_mozilla/css/linear_gradients_lengths_a.html"
|
||||
}
|
||||
],
|
||||
"css/linear_gradients_non_square_a.html": [
|
||||
{
|
||||
"path": "css/linear_gradients_non_square_a.html",
|
||||
"references": [
|
||||
[
|
||||
"/_mozilla/css/linear_gradients_non_square_ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
"url": "/_mozilla/css/linear_gradients_non_square_a.html"
|
||||
}
|
||||
],
|
||||
"css/linear_gradients_parsing_a.html": [
|
||||
{
|
||||
"path": "css/linear_gradients_parsing_a.html",
|
||||
|
|
|
@ -0,0 +1,29 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Linear gradients for non-square elements</title>
|
||||
<link rel="match" href="linear_gradients_non_square_ref.html">
|
||||
<style>
|
||||
.a,
|
||||
.b,
|
||||
.c,
|
||||
.d {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
}
|
||||
.a {
|
||||
background: linear-gradient(to right bottom, black 50%, lightgray 50%);
|
||||
}
|
||||
.b {
|
||||
background: linear-gradient(to left bottom, black 50%, lightgray 50%);
|
||||
}
|
||||
.c {
|
||||
background: linear-gradient(to left top, black 50%, lightgray 50%);
|
||||
}
|
||||
.d {
|
||||
background: linear-gradient(to right top, black 50%, lightgray 50%);
|
||||
}
|
||||
</style>
|
||||
<div class="a"></div>
|
||||
<div class="b"></div>
|
||||
<div class="c"></div>
|
||||
<div class="d"></div>
|
|
@ -0,0 +1,28 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Linear gradients for non-square elements reference</title>
|
||||
<style>
|
||||
.a,
|
||||
.b,
|
||||
.c,
|
||||
.d {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
}
|
||||
.a {
|
||||
background: linear-gradient(-206.56505118deg, black 50%, lightgray 50%);
|
||||
}
|
||||
.b {
|
||||
background: linear-gradient(206.56505118deg, black 50%, lightgray 50%);
|
||||
}
|
||||
.c {
|
||||
background: linear-gradient(-26.56505118deg, black 50%, lightgray 50%);
|
||||
}
|
||||
.d {
|
||||
background: linear-gradient(26.56505118deg, black 50%, lightgray 50%);
|
||||
}
|
||||
</style>
|
||||
<div class="a"></div>
|
||||
<div class="b"></div>
|
||||
<div class="c"></div>
|
||||
<div class="d"></div>
|
Loading…
Add table
Add a link
Reference in a new issue