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:
Emilio Cobos Álvarez 2016-05-28 18:06:59 +02:00
parent 5668a55ef4
commit 37d1c749aa
No known key found for this signature in database
GPG key ID: 056B727BB9C1027C
4 changed files with 114 additions and 26 deletions

View file

@ -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",

View file

@ -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>

View file

@ -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>