mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1616986 - Add WPT reftests for conic-gradient and stop normalization. r=emilio 

Differential Revision: https://phabricator.services.mozilla.com/D65928

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Tim Nguyen 2020-03-09 15:31:22 +00:00
Родитель d7a0deeae7
Коммит c1be5beead
25 изменённых файлов: 307 добавлений и 5 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

1
testing/web-platform/meta/css/css-images/__dir__.ini Normal file
Просмотреть файл

@ -0,0 +1 @@
prefs: [layout.css.conic-gradient.enabled:true]

3
testing/web-platform/meta/css/css-images/gradient/color-stops-parsing.html.ini
Просмотреть файл

@ -1,3 +0,0 @@
[color-stops-parsing.html]
prefs: [layout.css.conic-gradient.enabled:true]

2
testing/web-platform/meta/css/css-images/multiple-position-color-stop-conic.html.ini
Просмотреть файл

@ -1,2 +0,0 @@
[multiple-position-color-stop-conic.html]
prefs: [layout.css.conic-gradient.enabled:true]

14
testing/web-platform/tests/css/css-images/conic-gradient-angle-negative.html Normal file
Просмотреть файл

@ -0,0 +1,14 @@
<!doctype html>
<meta charset="utf-8">
<title>Conic gradient with negative angle parameter</title>
<link rel="help" href="https://drafts.csswg.org/css-images-4/#conic-gradients">
<meta name="assert" content="Rendering of conic-gradient with negative center parameter">
<link rel="match" href="reference/200x200-blue-black-green-red.html">
<style>
#gradient {
width: 200px;
height: 200px;
background-image: conic-gradient(from -90deg, blue 0 25%, black 25% 50%, red 50% 75%, green 75% 100%);
}
</style>
<div id="gradient"></div>

14
testing/web-platform/tests/css/css-images/conic-gradient-angle.html Normal file
Просмотреть файл

@ -0,0 +1,14 @@
<!doctype html>
<meta charset="utf-8">
<title>Conic gradient with custom angle parameter</title>
<link rel="help" href="https://drafts.csswg.org/css-images-4/#conic-gradients">
<meta name="assert" content="Rendering of conic-gradient with custom center parameter">
<link rel="match" href="reference/200x200-blue-black-green-red.html">
<style>
#gradient {
width: 200px;
height: 200px;
background-image: conic-gradient(from 90deg, red 0 25%, green 25% 50%, blue 50% 75%, black 75% 100%);
}
</style>
<div id="gradient"></div>

22
testing/web-platform/tests/css/css-images/conic-gradient-center-ref.html Normal file
Просмотреть файл

@ -0,0 +1,22 @@
<!doctype html>
<meta charset="utf-8">
<style>
#box {
width: 200px;
height: 200px;
}
#top {
border-left: 50px solid black;
border-right: 150px solid red;
height: 50px;
}
#bottom {
border-left: 50px solid blue;
border-right: 150px solid green;
height: 150px;
}
</style>
<div id="box">
<div id="top"></div>
<div id="bottom"></div>
</div>

14
testing/web-platform/tests/css/css-images/conic-gradient-center.html Normal file
Просмотреть файл

@ -0,0 +1,14 @@
<!doctype html>
<meta charset="utf-8">
<title>Conic gradient with custom center parameter</title>
<link rel="help" href="https://drafts.csswg.org/css-images-4/#conic-gradients">
<meta name="assert" content="Rendering of conic-gradient with custom center parameter">
<link rel="match" href="conic-gradient-center-ref.html">
<style>
#gradient {
width: 200px;
height: 200px;
background-image: conic-gradient(at 25% 25%, red 0 25%, green 25% 50%, blue 50% 75%, black 75% 100%);
}
</style>
<div id="gradient"></div>

3
testing/web-platform/tests/css/css-images/multiple-position-color-stop-conic-2-ref.html Normal file
Просмотреть файл

@ -0,0 +1,3 @@
<!doctype html>
<meta charset=utf-8>
<div style="background: conic-gradient(red 0%, red 25%, blue 25%, blue 75%, green 75%, green 100%); width: 100px; height: 100px;"><br></div>

7
testing/web-platform/tests/css/css-images/multiple-position-color-stop-conic-2.html Normal file
Просмотреть файл

@ -0,0 +1,7 @@
<!doctype html>
<meta charset=utf-8>
<title>Conic gradient with two position color stops</title>
<link rel="help" href="https://drafts.csswg.org/css-images-4/#color-stop-syntax">
<meta name="assert" content="Color stops with two positions are equivalent to two color stops with the same color">
<link rel="match" href="multiple-position-color-stop-conic-2-ref.html">
<div style="background: conic-gradient(red 0% 25%, blue 25% 75%, green 75% 100%); width: 100px; height: 100px;"><br></div>

14
testing/web-platform/tests/css/css-images/normalization-conic-2.html Normal file
Просмотреть файл

@ -0,0 +1,14 @@
<!doctype html>
<meta charset="utf-8">
<title>Conic gradient stop normalization</title>
<link rel="help" href="https://drafts.csswg.org/css-images-4/#conic-gradients">
<meta name="assert" content="Rendering of conic-gradient with normalized color stops">
<link rel="match" href="reference/100x100-blue.html">
<style>
#gradient {
width: 100px;
height: 100px;
background-image: conic-gradient(blue 150%, red 150%);
}
</style>
<div id="gradient"></div>

14
testing/web-platform/tests/css/css-images/normalization-conic-degenerate.html Normal file
Просмотреть файл

@ -0,0 +1,14 @@
<!doctype html>
<meta charset="utf-8">
<title>Conic gradient stop normalization</title>
<link rel="help" href="https://www.w3.org/TR/css-images-3/#repeating-gradients">
<meta name="assert" content="Rendering of repeating-conic-gradient w/ stops at the same place">
<link rel="match" href="reference/100x100-blue.html">
<style>
#gradient {
width: 100px;
height: 100px;
background-image: repeating-conic-gradient(orange 50%, blue 50%);
}
</style>
<div id="gradient"></div>

14
testing/web-platform/tests/css/css-images/normalization-conic.html Normal file
Просмотреть файл

@ -0,0 +1,14 @@
<!doctype html>
<meta charset="utf-8">
<title>Conic gradient stop normalization</title>
<link rel="help" href="https://drafts.csswg.org/css-images-4/#conic-gradients">
<meta name="assert" content="Rendering of conic-gradient with normalized color stops">
<link rel="match" href="reference/100x100-blue.html">
<style>
#gradient {
width: 100px;
height: 100px;
background-image: conic-gradient(green -50%, blue -50%);
}
</style>
<div id="gradient"></div>

14
testing/web-platform/tests/css/css-images/normalization-linear-2.html Normal file
Просмотреть файл

@ -0,0 +1,14 @@
<!doctype html>
<meta charset="utf-8">
<title>Linear gradient stop normalization</title>
<link rel="help" href="https://drafts.csswg.org/css-images-3/#linear-gradients">
<meta name="assert" content="Rendering of linear-gradient with normalized color stops">
<link rel="match" href="reference/100x100-blue.html">
<style>
#gradient {
width: 100px;
height: 100px;
background-image: linear-gradient(blue 150%, red 150%);
}
</style>
<div id="gradient"></div>

14
testing/web-platform/tests/css/css-images/normalization-linear-degenerate.html Normal file
Просмотреть файл

@ -0,0 +1,14 @@
<!doctype html>
<meta charset="utf-8">
<title>Linear gradient stop normalization</title>
<link rel="help" href="https://www.w3.org/TR/css-images-3/#repeating-gradients">
<meta name="assert" content="Rendering of repeating-linear-gradient w/ stops at the same place">
<link rel="match" href="reference/100x100-blue.html">
<style>
#gradient {
width: 100px;
height: 100px;
background-image: repeating-linear-gradient(orange 50%, blue 50%);
}
</style>
<div id="gradient"></div>

14
testing/web-platform/tests/css/css-images/normalization-linear.html Normal file
Просмотреть файл

@ -0,0 +1,14 @@
<!doctype html>
<meta charset="utf-8">
<title>Linear gradient stop normalization</title>
<link rel="help" href="https://drafts.csswg.org/css-images-3/#linear-gradients">
<meta name="assert" content="Rendering of linear-gradient with normalized color stops">
<link rel="match" href="reference/100x100-blue.html">
<style>
#gradient {
width: 100px;
height: 100px;
background-image: linear-gradient(green -50%, blue -50%);
}
</style>
<div id="gradient"></div>

14
testing/web-platform/tests/css/css-images/normalization-radial-2.html Normal file
Просмотреть файл

@ -0,0 +1,14 @@
<!doctype html>
<meta charset="utf-8">
<title>Radial gradient stop normalization</title>
<link rel="help" href="https://drafts.csswg.org/css-images-3/#radial-gradients">
<meta name="assert" content="Rendering of radial-gradient with normalized color stops">
<link rel="match" href="reference/100x100-blue.html">
<style>
#gradient {
width: 100px;
height: 100px;
background-image: radial-gradient(blue 150%, red 150%);
}
</style>
<div id="gradient"></div>

14
testing/web-platform/tests/css/css-images/normalization-radial-degenerate.html Normal file
Просмотреть файл

@ -0,0 +1,14 @@
<!doctype html>
<meta charset="utf-8">
<title>Radial gradient stop normalization</title>
<link rel="help" href="https://www.w3.org/TR/css-images-3/#repeating-gradients">
<meta name="assert" content="Rendering of repeating-radial-gradient w/ stops at the same place">
<link rel="match" href="reference/100x100-blue.html">
<style>
#gradient {
width: 100px;
height: 100px;
background-image: repeating-radial-gradient(orange 50%, blue 50%);
}
</style>
<div id="gradient"></div>

14
testing/web-platform/tests/css/css-images/normalization-radial.html Normal file
Просмотреть файл

@ -0,0 +1,14 @@
<!doctype html>
<meta charset="utf-8">
<title>Radial gradient stop normalization</title>
<link rel="help" href="https://drafts.csswg.org/css-images-3/#radial-gradients">
<meta name="assert" content="Rendering of radial-gradient with normalized color stops">
<link rel="match" href="reference/100x100-blue.html">
<style>
#gradient {
width: 100px;
height: 100px;
background-image: linear-gradient(green -50%, blue -50%);
}
</style>
<div id="gradient"></div>

14
testing/web-platform/tests/css/css-images/out-of-range-color-stop-conic.html Normal file
Просмотреть файл

@ -0,0 +1,14 @@
<!doctype html>
<meta charset="utf-8">
<title>Conic gradient with out-of-range stops</title>
<link rel="help" href="https://drafts.csswg.org/css-images-4/#conic-gradients">
<meta name="assert" content="Rendering of conic-gradient with stops positioned outside of [0, 1]">
<link rel="match" href="reference/200x200-blue-black-green-red.html">
<style>
#gradient {
width: 200px;
height: 200px;
background-image: conic-gradient(orange -50% -25%, black -25% 25%, red 25% 50%, green 50% 75%, blue 75% 125%, purple 125% 150%);
}
</style>
<div id="gradient"></div>

2
testing/web-platform/tests/css/css-images/reference/100x100-blue.html Normal file
Просмотреть файл

@ -0,0 +1,2 @@
<!doctype html>
<div style="width: 100px;height: 100px;background-color: blue;"></div>

22
testing/web-platform/tests/css/css-images/reference/200x200-blue-black-green-red.html Normal file
Просмотреть файл

@ -0,0 +1,22 @@
<!doctype html>
<meta charset="utf-8">
<style>
#box {
width: 200px;
height: 200px;
}
#top {
border-left: 100px solid blue;
border-right: 100px solid black;
height: 100px;
}
#bottom {
border-left: 100px solid green;
border-right: 100px solid red;
height: 100px;
}
</style>
<div id="box">
<div id="top"></div>
<div id="bottom"></div>
</div>

10
testing/web-platform/tests/css/css-images/repeating-conic-gradient-ref.html Normal file
Просмотреть файл

@ -0,0 +1,10 @@
<!doctype html>
<meta charset="utf-8">
<style>
#gradient {
width: 200px;
height: 200px;
background-image: conic-gradient(black 25%, white 0 50%, black 0 75%, white 0);
}
</style>
<div id="gradient"></div>

14
testing/web-platform/tests/css/css-images/repeating-conic-gradient.html Normal file
Просмотреть файл

@ -0,0 +1,14 @@
<!doctype html>
<meta charset="utf-8">
<title>Repeating conic gradient</title>
<link rel="help" href="https://drafts.csswg.org/css-images-4/#conic-gradients">
<meta name="assert" content="Rendering of repeating-conic-gradient">
<link rel="match" href="repeating-conic-gradient-ref.html">
<style>
#gradient {
width: 200px;
height: 200px;
background-image: repeating-conic-gradient(black 0 25%, white 25% 50%);
}
</style>
<div id="gradient"></div>

29
testing/web-platform/tests/css/css-images/tiled-conic-gradients-ref.html Normal file
Просмотреть файл

@ -0,0 +1,29 @@
<!doctype html>
<meta charset="utf-8">
<style>
.bar {
width: 200px;
height: 40px;
}
.box {
display: inline-block;
width: 40px;
height: 40px;
background-image: conic-gradient(black 0 25%, white 0 50%, black 0 75%, white 0);
}
</style>
<div class="bar">
<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
</div>
<div class="bar">
<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
</div>
<div class="bar">
<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
</div>
<div class="bar">
<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
</div>
<div class="bar">
<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
</div>

15
testing/web-platform/tests/css/css-images/tiled-conic-gradients.html Normal file
Просмотреть файл

@ -0,0 +1,15 @@
<!doctype html>
<meta charset="utf-8">
<title>Checkerboard using conic gradients</title>
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-size">
<meta name="assert" content="Gradients are correctly repeated.">
<link rel="match" href="tiled-conic-gradients-ref.html">
<style>
#gradient {
width: 200px;
height: 200px;
background-size: 20% 20%;
background-image: conic-gradient(black 0 25%, white 0 50%, black 0 75%, white 0);
}
</style>
<div id="gradient"></div>