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

Bug 700926. Tests for border-image-source gradient. r=roc

This commit is contained in:
Nicholas Cameron 2014-01-31 16:36:42 +13:00
Родитель 7c3fa1f471
Коммит 1efbd7edc2
68 изменённых файлов: 3245 добавлений и 1 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

3
layout/inspector/tests/test_bug877690.html
Просмотреть файл

@ -116,7 +116,8 @@ function do_test() {
"purple", "red", "repeat", "rgb", "rgba", "ridge", "rosybrown", "round", "royalblue", "saddlebrown", "salmon",
"sandybrown", "seagreen", "seashell", "sienna", "silver", "skyblue", "slateblue", "slategray", "slategrey",
"snow", "solid", "springgreen", "steelblue", "stretch", "tan", "teal", "thick", "thin", "thistle", "tomato",
"transparent", "turquoise", "url", "violet", "wheat", "white", "whitesmoke", "yellow", "yellowgreen" ]
"transparent", "turquoise", "-moz-element", "-moz-image-rect", "url", "violet", "wheat", "white", "whitesmoke",
"yellow", "yellowgreen" ]
ok(testValues(values, expected), "Shorthand property values.");
// test keywords only

72
layout/reftests/border-image/border-image-linear-gradient-outset-ref.html Normal file
Просмотреть файл

@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: linear-gradient with border-image-outset</title>
<style>
table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
td { padding: 0; }
</style>
</head>
<body>
<table style="margin-top: 75px; margin-right: 60px; margin-bottom: 15px; margin-left: 30px;">
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:30px 30px;"></td>
<td></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:30px 30px;"></td>
</tr>
<tr style="height: 165px">
<td></td>
<td style="background: white"></td>
<td></td>
</tr>
<tr style="height: 30px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:30px 30px;"></td>
<td></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:30px 30px;"></td>
</tr>
</table>
<table style="margin-top: 15px; margin-right: 60px; margin-bottom: 15px; margin-left: 30px;">
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 225px; background-position: 0px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 225px; background-position: -30px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 225px; background-position: -210px 0px;"></td>
</tr>
<tr style="height: 165px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 225px; background-position: 0px -30px;"></td>
<td style="background: white"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 225px; background-position: -210px -30px;"></td>
</tr>
<tr style="height: 30px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 225px; background-position: 0px -195px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 225px; background-position: -30px -195px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 225px; background-position: -210px -195px;"></td>
</tr>
</table>
<table style="margin-top: 15px; margin-right: 60px; margin-bottom: 15px; margin-left: 30px;">
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 562.5px; background-position: 0px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 360px 562.5px; background-position: -90px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 562.5px; background-position: -90px 0px;"></td>
</tr>
<tr style="height: 165px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 184.70px; background-position: 0px -9.85px;"></td>
<td style="background: white"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 184.70px; background-position: -210px -9.85px;"></td>
</tr>
<tr style="height: 30px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 562.5px; background-position: 0px -532.5px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 360px 562.5px; background-position: -90px -532.5px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 562.5px; background-position: -90px -532.5px;"></td>
</tr>
</table>
</body>
</html>

33
layout/reftests/border-image/border-image-linear-gradient-outset.html Normal file
Просмотреть файл

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: linear-gradient with border-image-outset</title>
<style>
div {
border: 30px solid black;
width: 90px;
height: 90px;
margin: 90px;
}
div.border {
border-image: linear-gradient(to bottom right, red, blue);
border-image-outset: 0.5 1 2 60px;
}
div.border30 {
border-image: linear-gradient(to bottom right, red, blue);
border-image-outset: 0.5 1 2 60px;
border-image-slice: 30 30;
}
div.border1260 {
border-image: linear-gradient(to bottom right, red, blue);
border-image-outset: 0.5 1 2 60px;
border-image-slice: 12 60;
}
</style>
</head>
<body>
<div class="border"></div>
<div class="border30"></div>
<div class="border1260"></div>
</body>
</html>

32
layout/reftests/border-image/border-image-linear-gradient-ref.html Normal file
Просмотреть файл

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: linear-gradient</title>
<style>
table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
td { padding: 0; }
</style>
</head>
<body>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:30px 30px;"></td>
<td></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:30px 30px;"></td>
</tr>
<tr style="height: 180px">
<td></td>
<td style="background: white"></td>
<td></td>
</tr>
<tr style="height: 30px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:30px 30px;"></td>
<td></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:30px 30px;"></td>
</tr>
</table>
</body>
</html>

72
layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-1-ref.html Normal file
Просмотреть файл

@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: linear-gradient with border-image-slice</title>
<style>
table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
td { padding: 0; }
</style>
</head>
<body>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:30px 30px;"></td>
<td></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:30px 30px;"></td>
</tr>
<tr style="height: 180px">
<td></td>
<td style="background: white"></td>
<td></td>
</tr>
<tr style="height: 30px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:30px 30px;"></td>
<td></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:30px 30px;"></td>
</tr>
</table>
<table>
<col style="width: 30.0px;">
<col style="width: 180.0px;">
<col style="width: 30.0px;">
<tr style="height: 30.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600.0px 600.0px; background-position: 0px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600.0px 600.0px; background-position: -210.0px -0.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600.0px 600.0px; background-position: -570.0px 0px;"></td>
</tr>
<tr style="height: 180.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600.0px 600.0px; background-position: -0.0px -210.0px;"></td>
<td style="background-image: white;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600.0px 600.0px; background-position: -570.0px -210.0px;"></td>
</tr>
<tr style="height: 30.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600.0px 600.0px; background-position: 0px -570.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600.0px 600.0px; background-position: -210.0px -570.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600.0px 600.0px; background-position: -570.0px -570.0px;"></td>
</tr>
</table>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: 0px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -30px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -210px 0px;"></td>
</tr>
<tr style="height: 180px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: 0px -30px;"></td>
<td style="background: white"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -210px -30px;"></td>
</tr>
<tr style="height: 30px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: 0px -210px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -30px -210px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -210px -210px;"></td>
</tr>
</table>
</body>
</html>

30
layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-1.html Normal file
Просмотреть файл

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: linear-gradient with border-image-repeat</title>
<style>
div {
border: 30px solid black;
border-image: linear-gradient(to bottom right, red, blue);
width: 180px;
height: 180px;
}
div.borderrepeat {
border-image-repeat: repeat;
}
div.border12repeat {
border-image-repeat: repeat;
border-image-slice: 12;
}
div.border30repeat {
border-image-repeat: repeat;
border-image-slice: 30;
}
</style>
</head>
<body>
<div class="borderrepeat"></div>
<div class="border12repeat"></div>
<div class="border30repeat"></div>
</body>
</html>

116
layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-2-ref.html Normal file
Просмотреть файл

@ -0,0 +1,116 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: linear-gradient with border-image-repeat</title>
<style>
table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
td { padding: 0; }
</style>
</head>
<body>
<table>
<col style="width: 30.0px;">
<col style="width: 60.0px;">
<col style="width: 60.0px;">
<col style="width: 60.0px;">
<col style="width: 30.0px;">
<tr style="height: 30.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: 0px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px 0px;"></td>
</tr>
<tr style="height: 60.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: white;"></td>
<td style="background-image: white;"></td>
<td style="background-image: white;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
</tr>
<tr style="height: 60.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: white;"></td>
<td style="background-image: white;"></td>
<td style="background-image: white;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
</tr>
<tr style="height: 60.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: white;"></td>
<td style="background-image: white;"></td>
<td style="background-image: white;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
</tr>
<tr style="height: 30.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: 0px -90.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -90.0px;"></td>
</tr>
</table>
<table>
<col style="width: 30.0px;">
<col style="width: 60.0px;">
<col style="width: 60.0px;">
<col style="width: 60.0px;">
<col style="width: 30.0px;">
<tr style="height: 30.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: 0px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px 0px;"></td>
</tr>
<tr style="height: 60.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
</tr>
<tr style="height: 60.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
</tr>
<tr style="height: 60.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
</tr>
<tr style="height: 30.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: 0px -90.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -90.0px;"></td>
</tr>
</table>
<table>
<col style="width: 60.0px;">
<col style="width: 120.0px;">
<col style="width: 60.0px;">
<tr style="height: 60.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 480.0px 480.0px; background-position: 0px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 480.0px 480.0px; background-position: -180.0px -0.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 480.0px 480.0px; background-position: -420.0px 0px;"></td>
</tr>
<tr style="height: 120.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 480.0px 480.0px; background-position: -0.0px -180.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 480.0px 480.0px; background-position: -180.0px -180.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 480.0px 480.0px; background-position: -420.0px -180.0px;"></td>
</tr>
<tr style="height: 60.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 480.0px 480.0px; background-position: 0px -420.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 480.0px 480.0px; background-position: -180.0px -420.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 480.0px 480.0px; background-position: -420.0px -420.0px;"></td>
</tr>
</table>
</body>
</html>

32
layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-2.html Normal file
Просмотреть файл

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: linear-gradient with border-image-repeat</title>
<style>
div {
border: 30px solid black;
border-image: linear-gradient(to bottom right, red, blue);
width: 180px;
height: 180px;
}
div.border60repeat {
border-image-repeat: repeat;
border-image-slice: 60;
}
div.border60fillrepeat {
border-image-repeat: repeat;
border-image-slice: 60 fill;
}
div.border30fill2repeat {
border-image-repeat: repeat;
border-image-slice: 30 fill;
border-image-width: 2;
}
</style>
</head>
<body>
<div class="border60repeat"></div>
<div class="border60fillrepeat"></div>
<div class="border30fill2repeat"></div>
</body>
</html>

168
layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-3-ref.html Normal file
Просмотреть файл

@ -0,0 +1,168 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: linear-gradient with border-image-slice</title>
<style>
table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
td { padding: 0; }
</style>
</head>
<body>
<table>
<col style="width: 30.0px;">
<col style="width: 30.0px;">
<col style="width: 120.0px;">
<col style="width: 30.0px;">
<col style="width: 30.0px;">
<tr style="height: 30.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: 0px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -120.0px -0.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -150.0px 0px;"></td>
</tr>
<tr style="height: 30.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -0.0px -120.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -120.0px -120.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -30.0px -120.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -30.0px -120.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -150.0px -120.0px;"></td>
</tr>
<tr style="height: 120.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -120.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -150.0px -30.0px;"></td>
</tr>
<tr style="height: 30.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -120.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -150.0px -30.0px;"></td>
</tr>
<tr style="height: 30.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: 0px -150.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -120.0px -150.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -30.0px -150.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -30.0px -150.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -150.0px -150.0px;"></td>
</tr>
</table>
<table>
<col style="width: 30.0px;">
<col style="width: 40.0px;">
<col style="width: 100.0px;">
<col style="width: 40.0px;">
<col style="width: 30.0px;">
<tr style="height: 30.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: 0px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -90.0px -0.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -130.0px 0px;"></td>
</tr>
<tr style="height: 40.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -0.0px -90.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -90.0px -90.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -30.0px -90.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -30.0px -90.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -130.0px -90.0px;"></td>
</tr>
<tr style="height: 100.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -90.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -130.0px -30.0px;"></td>
</tr>
<tr style="height: 40.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -90.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -130.0px -30.0px;"></td>
</tr>
<tr style="height: 30.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: 0px -130.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -90.0px -130.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -30.0px -130.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -30.0px -130.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -130.0px -130.0px;"></td>
</tr>
</table>
<table>
<col style="width: 30.0px;">
<col style="width: 36.0px;">
<col style="width: 36.0px;">
<col style="width: 36.0px;">
<col style="width: 36.0px;">
<col style="width: 36.0px;">
<col style="width: 30.0px;">
<tr style="height: 30.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: 0px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px 0px;"></td>
</tr>
<tr style="height: 36.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px -30.0px;"></td>
</tr>
<tr style="height: 36.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px -30.0px;"></td>
</tr>
<tr style="height: 36.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px -30.0px;"></td>
</tr>
<tr style="height: 36.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px -30.0px;"></td>
</tr>
<tr style="height: 36.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px -30.0px;"></td>
</tr>
<tr style="height: 30.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: 0px -66.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -66.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -66.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -66.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -66.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -66.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px -66.0px;"></td>
</tr>
</table>
</body>
</html>

31
layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-3.html Normal file
Просмотреть файл

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: linear-gradient with border-image-repeat</title>
<style>
div {
border: 30px solid black;
border-image: linear-gradient(to bottom right, red, blue);
width: 180px;
height: 180px;
}
div.border40repeat {
border-image-repeat: repeat;
border-image-slice: 40 fill;
}
div.border45repeat {
border-image-repeat: repeat;
border-image-slice: 45 fill;
}
div.border75repeat {
border-image-repeat: repeat;
border-image-slice: 75 fill;
}
</style>
</head>
<body>
<div class="border40repeat"></div>
<div class="border45repeat"></div>
<div class="border75repeat"></div>
</body>
</html>

72
layout/reftests/border-image/border-image-linear-gradient-repeat-round-1-ref.html Normal file
Просмотреть файл

@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: linear-gradient with border-image-slice</title>
<style>
table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
td { padding: 0; }
</style>
</head>
<body>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:30px 30px;"></td>
<td></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:30px 30px;"></td>
</tr>
<tr style="height: 180px">
<td></td>
<td style="background: white"></td>
<td></td>
</tr>
<tr style="height: 30px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:30px 30px;"></td>
<td></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:30px 30px;"></td>
</tr>
</table>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 600px; background-position: 0px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 200px 600px; background-position: -10px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 600px; background-position: -570px 0px;"></td>
</tr>
<tr style="height: 180px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 200px; background-position: 0px -10px;"></td>
<td style="background: white"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 200px; background-position: -570px -10px;"></td>
</tr>
<tr style="height: 30px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 600px; background-position: 0px -570px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 200px 600px; background-position: -10px -570px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 600px; background-position: -570px -570px;"></td>
</tr>
</table>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: 0px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -30px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -210px 0px;"></td>
</tr>
<tr style="height: 180px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: 0px -30px;"></td>
<td style="background: white"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -210px -30px;"></td>
</tr>
<tr style="height: 30px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: 0px -210px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -30px -210px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -210px -210px;"></td>
</tr>
</table>
</body>
</html>

30
layout/reftests/border-image/border-image-linear-gradient-repeat-round-1.html Normal file
Просмотреть файл

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: linear-gradient with border-image-repeat</title>
<style>
div {
border: 30px solid black;
border-image: linear-gradient(to bottom right, red, blue);
width: 180px;
height: 180px;
}
div.borderround {
border-image-repeat: round;
}
div.border12round {
border-image-repeat: round;
border-image-slice: 12;
}
div.border30round {
border-image-repeat: round;
border-image-slice: 30;
}
</style>
</head>
<body>
<div class="borderround"></div>
<div class="border12round"></div>
<div class="border30round"></div>
</body>
</html>

116
layout/reftests/border-image/border-image-linear-gradient-repeat-round-2-ref.html Normal file
Просмотреть файл

@ -0,0 +1,116 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: linear-gradient with border-image-repeat</title>
<style>
table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
td { padding: 0; }
</style>
</head>
<body>
<table>
<col style="width: 30.0px;">
<col style="width: 60.0px;">
<col style="width: 60.0px;">
<col style="width: 60.0px;">
<col style="width: 30.0px;">
<tr style="height: 30.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: 0px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px 0px;"></td>
</tr>
<tr style="height: 60.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: white;"></td>
<td style="background-image: white;"></td>
<td style="background-image: white;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
</tr>
<tr style="height: 60.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: white;"></td>
<td style="background-image: white;"></td>
<td style="background-image: white;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
</tr>
<tr style="height: 60.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: white;"></td>
<td style="background-image: white;"></td>
<td style="background-image: white;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
</tr>
<tr style="height: 30.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: 0px -90.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -90.0px;"></td>
</tr>
</table>
<table>
<col style="width: 30.0px;">
<col style="width: 60.0px;">
<col style="width: 60.0px;">
<col style="width: 60.0px;">
<col style="width: 30.0px;">
<tr style="height: 30.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: 0px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px 0px;"></td>
</tr>
<tr style="height: 60.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
</tr>
<tr style="height: 60.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
</tr>
<tr style="height: 60.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
</tr>
<tr style="height: 30.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: 0px -90.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -90.0px;"></td>
</tr>
</table>
<table>
<col style="width: 60.0px;">
<col style="width: 120.0px;">
<col style="width: 60.0px;">
<tr style="height: 60.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 480.0px 480.0px; background-position: 0px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 480.0px; background-position: -20.0px -0.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 480.0px 480.0px; background-position: -420.0px 0px;"></td>
</tr>
<tr style="height: 120.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 480.0px 160.0px; background-position: -0.0px -20.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -20.0px -20.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 480.0px 160.0px; background-position: -420.0px -20.0px;"></td>
</tr>
<tr style="height: 60.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 480.0px 480.0px; background-position: 0px -420.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 480.0px; background-position: -20.0px -420.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 480.0px 480.0px; background-position: -420.0px -420.0px;"></td>
</tr>
</table>
</body>
</html>

32
layout/reftests/border-image/border-image-linear-gradient-repeat-round-2.html Normal file
Просмотреть файл

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: linear-gradient with border-image-repeat</title>
<style>
div {
border: 30px solid black;
border-image: linear-gradient(to bottom right, red, blue);
width: 180px;
height: 180px;
}
div.border60round {
border-image-repeat: round;
border-image-slice: 60;
}
div.border60fillround {
border-image-repeat: round;
border-image-slice: 60 fill;
}
div.border30fill2round {
border-image-repeat: round;
border-image-slice: 30 fill;
border-image-width: 2;
}
</style>
</head>
<body>
<div class="border60round"></div>
<div class="border60fillround"></div>
<div class="border30fill2round"></div>
</body>
</html>

144
layout/reftests/border-image/border-image-linear-gradient-repeat-round-3-ref.html Normal file
Просмотреть файл

@ -0,0 +1,144 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: linear-gradient with border-image-slice</title>
<style>
table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
td { padding: 0; }
</style>
</head>
<body>
<table>
<col style="width: 30.0px;">
<col style="width: 90.0px;">
<col style="width: 90.0px;">
<col style="width: 30.0px;">
<tr style="height: 30.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: 0px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 135.0px 180.0px; background-position: -22.5px -0.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 135.0px 180.0px; background-position: -22.5px -0.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -150.0px 0px;"></td>
</tr>
<tr style="height: 90.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 135.0px; background-position: -0.0px -22.5px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 135.0px 135.0px; background-position: -22.5px -22.5px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 135.0px 135.0px; background-position: -22.5px -22.5px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 135.0px; background-position: -150.0px -22.5px;"></td>
</tr>
<tr style="height: 90.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 135.0px; background-position: -0.0px -22.5px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 135.0px 135.0px; background-position: -22.5px -22.5px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 135.0px 135.0px; background-position: -22.5px -22.5px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 135.0px; background-position: -150.0px -22.5px;"></td>
</tr>
<tr style="height: 30.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: 0px -150.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 135.0px 180.0px; background-position: -22.5px -150.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 135.0px 180.0px; background-position: -22.5px -150.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -150.0px -150.0px;"></td>
</tr>
</table>
<table>
<col style="width: 30.0px;">
<col style="width: 90.0px;">
<col style="width: 90.0px;">
<col style="width: 30.0px;">
<tr style="height: 30.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: 0px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 144.0px 160.0px; background-position: -27.0px -0.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 144.0px 160.0px; background-position: -27.0px -0.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -130.0px 0px;"></td>
</tr>
<tr style="height: 90.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 144.0px; background-position: -0.0px -27.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 144.0px 144.0px; background-position: -27.0px -27.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 144.0px 144.0px; background-position: -27.0px -27.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 144.0px; background-position: -130.0px -27.0px;"></td>
</tr>
<tr style="height: 90.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 144.0px; background-position: -0.0px -27.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 144.0px 144.0px; background-position: -27.0px -27.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 144.0px 144.0px; background-position: -27.0px -27.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 144.0px; background-position: -130.0px -27.0px;"></td>
</tr>
<tr style="height: 30.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: 0px -130.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 144.0px 160.0px; background-position: -27.0px -130.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 144.0px 160.0px; background-position: -27.0px -130.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -130.0px -130.0px;"></td>
</tr>
</table>
<table>
<col style="width: 30.0px;">
<col style="width: 36.0px;">
<col style="width: 36.0px;">
<col style="width: 36.0px;">
<col style="width: 36.0px;">
<col style="width: 36.0px;">
<col style="width: 30.0px;">
<tr style="height: 30.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: 0px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px 0px;"></td>
</tr>
<tr style="height: 36.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px -30.0px;"></td>
</tr>
<tr style="height: 36.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px -30.0px;"></td>
</tr>
<tr style="height: 36.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px -30.0px;"></td>
</tr>
<tr style="height: 36.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px -30.0px;"></td>
</tr>
<tr style="height: 36.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px -30.0px;"></td>
</tr>
<tr style="height: 30.0px;">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: 0px -66.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -66.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -66.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -66.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -66.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -66.0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px -66.0px;"></td>
</tr>
</table>
</body>
</html>

31
layout/reftests/border-image/border-image-linear-gradient-repeat-round-3.html Normal file
Просмотреть файл

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: linear-gradient with border-image-repeat</title>
<style>
div {
border: 30px solid black;
border-image: linear-gradient(to bottom right, red, blue);
width: 180px;
height: 180px;
}
div.border40round {
border-image-repeat: round;
border-image-slice: 40 fill;
}
div.border45round {
border-image-repeat: round;
border-image-slice: 45 fill;
}
div.border75round {
border-image-repeat: round;
border-image-slice: 75 fill;
}
</style>
</head>
<body>
<div class="border40round"></div>
<div class="border45round"></div>
<div class="border75round"></div>
</body>
</html>

72
layout/reftests/border-image/border-image-linear-gradient-slice-1-ref.html Normal file
Просмотреть файл

@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: linear-gradient with border-image-slice</title>
<style>
table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
td { padding: 0; }
</style>
</head>
<body>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 600px; background-position: 0px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 200px 600px; background-position: -10px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 600px; background-position: -570px 0px;"></td>
</tr>
<tr style="height: 180px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 200px; background-position: 0px -10px;"></td>
<td style="background: white"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 200px; background-position: -570px -10px;"></td>
</tr>
<tr style="height: 30px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 600px; background-position: 0px -570px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 200px 600px; background-position: -10px -570px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 600px; background-position: -570px -570px;"></td>
</tr>
</table>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: 0px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -30px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -210px 0px;"></td>
</tr>
<tr style="height: 180px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: 0px -30px;"></td>
<td style="background: white"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -210px -30px;"></td>
</tr>
<tr style="height: 30px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: 0px -210px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -30px -210px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -210px -210px;"></td>
</tr>
</table>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 120px; background-position: 0px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 360px 120px; background-position: -90px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 120px; background-position: -90px 0px;"></td>
</tr>
<tr style="height: 180px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 360px; background-position: 0px -90px;"></td>
<td style="background: white"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 360px; background-position: -90px -90px;"></td>
</tr>
<tr style="height: 30px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 120px; background-position: 0px -90px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 360px 120px; background-position: -90px -90px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 120px; background-position: -90px -90px;"></td>
</tr>
</table>
</body>
</html>

28
layout/reftests/border-image/border-image-linear-gradient-slice-1.html Normal file
Просмотреть файл

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: linear-gradient with border-image-slice</title>
<style>
div {
border: 30px solid black;
border-image: linear-gradient(to bottom right, red, blue);
width: 180px;
height: 180px;
}
div.border12 {
border-image-slice: 12 12;
}
div.border30 {
border-image-slice: 30 30;
}
div.border60 {
border-image-slice: 60 60;
}
</style>
</head>
<body>
<div class="border12"></div>
<div class="border30"></div>
<div class="border60"></div>
</body>
</html>

52
layout/reftests/border-image/border-image-linear-gradient-slice-2-ref.html Normal file
Просмотреть файл

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: linear-gradient with border-image-slice</title>
<style>
table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
td { padding: 0; }
</style>
</head>
<body>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 600px; background-position: 0px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 360px 600px; background-position: -90px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 600px; background-position: -90px 0px;"></td>
</tr>
<tr style="height: 180px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 200px; background-position: 0px -10px;"></td>
<td style="background: white"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 200px; background-position: -210px -10px;"></td>
</tr>
<tr style="height: 30px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 600px; background-position: 0px -570px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 360px 600px; background-position: -90px -570px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 600px; background-position: -90px -570px;"></td>
</tr>
</table>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 120px; background-position: 0px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 200px 120px; background-position: -10px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 120px; background-position: -570px 0px;"></td>
</tr>
<tr style="height: 180px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 360px; background-position: 0px -90px;"></td>
<td style="background: white"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 360px; background-position: -570px -90px;"></td>
</tr>
<tr style="height: 30px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 120px; background-position: 0px -90px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 200px 120px; background-position: -10px -210px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 120px; background-position: -570px -90px;"></td>
</tr>
</table>
</body>
</html>

24
layout/reftests/border-image/border-image-linear-gradient-slice-2.html Normal file
Просмотреть файл

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: linear-gradient with border-image-slice</title>
<style>
div {
border: 30px solid black;
border-image: linear-gradient(to bottom right, red, blue);
width: 180px;
height: 180px;
}
div.border1260 {
border-image-slice: 12 60;
}
div.border6012 {
border-image-slice: 60 12;
}
</style>
</head>
<body>
<div class="border1260"></div>
<div class="border6012"></div>
</body>
</html>

72
layout/reftests/border-image/border-image-linear-gradient-slice-fill-1-ref.html Normal file
Просмотреть файл

@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: linear-gradient with border-image-slice and fill</title>
<style>
table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
td { padding: 0; }
</style>
</head>
<body>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 600px; background-position: 0px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 200px 600px; background-position: -10px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 600px; background-position: -570px 0px;"></td>
</tr>
<tr style="height: 180px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 200px; background-position: 0px -10px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 200px 200px; background-position: -10px -10px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 200px; background-position: -570px -10px;"></td>
</tr>
<tr style="height: 30px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 600px; background-position: 0px -570px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 200px 600px; background-position: -10px -570px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 600px; background-position: -570px -570px;"></td>
</tr>
</table>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: 0px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -30px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -210px 0px;"></td>
</tr>
<tr style="height: 180px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: 0px -30px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -30px -30px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -210px -30px;"></td>
</tr>
<tr style="height: 30px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: 0px -210px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -30px -210px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -210px -210px;"></td>
</tr>
</table>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 120px; background-position: 0px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 360px 120px; background-position: -90px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 120px; background-position: -90px 0px;"></td>
</tr>
<tr style="height: 180px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 360px; background-position: 0px -90px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 360px 360px; background-position: -90px -90px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 360px; background-position: -210px -90px;"></td>
</tr>
<tr style="height: 30px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 120px; background-position: 0px -90px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 360px 120px; background-position: -90px -210px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 120px; background-position: -90px -90px;"></td>
</tr>
</table>
</body>
</html>

28
layout/reftests/border-image/border-image-linear-gradient-slice-fill-1.html Normal file
Просмотреть файл

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: linear-gradient with border-image-slice and fill</title>
<style>
div {
border: 30px solid black;
border-image: linear-gradient(to bottom right, red, blue);
width: 180px;
height: 180px;
}
div.border12 {
border-image-slice: 12 12 fill;
}
div.border30 {
border-image-slice: 30 30 fill;
}
div.border60 {
border-image-slice: 60 60 fill;
}
</style>
</head>
<body>
<div class="border12"></div>
<div class="border30"></div>
<div class="border60"></div>
</body>
</html>

52
layout/reftests/border-image/border-image-linear-gradient-slice-fill-2-ref.html Normal file
Просмотреть файл

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: linear-gradient with border-image-slice and fill</title>
<style>
table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
td { padding: 0; }
</style>
</head>
<body>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 600px; background-position: 0px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 360px 600px; background-position: -90px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 600px; background-position: -90px 0px;"></td>
</tr>
<tr style="height: 180px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 200px; background-position: 0px -10px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 360px 200px; background-position: -90px -10px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 200px; background-position: -210px -10px;"></td>
</tr>
<tr style="height: 30px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 600px; background-position: 0px -570px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 360px 600px; background-position: -90px -570px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 600px; background-position: -90px -570px;"></td>
</tr>
</table>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 120px; background-position: 0px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 200px 120px; background-position: -10px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 120px; background-position: -570px 0px;"></td>
</tr>
<tr style="height: 180px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 360px; background-position: 0px -90px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 200px 360px; background-position: -10px -90px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 360px; background-position: -570px -90px;"></td>
</tr>
<tr style="height: 30px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 120px; background-position: 0px -90px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 200px 120px; background-position: -10px -210px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 120px; background-position: -570px -90px;"></td>
</tr>
</table>
</body>
</html>

24
layout/reftests/border-image/border-image-linear-gradient-slice-fill-2.html Normal file
Просмотреть файл

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: linear-gradient with border-image-slice and fill</title>
<style>
div {
border: 30px solid black;
border-image: linear-gradient(to bottom right, red, blue);
width: 180px;
height: 180px;
}
div.border1260 {
border-image-slice: 12 60 fill;
}
div.border6012 {
border-image-slice: 60 12 fill;
}
</style>
</head>
<body>
<div class="border1260"></div>
<div class="border6012"></div>
</body>
</html>

72
layout/reftests/border-image/border-image-linear-gradient-slice-width-ref.html Normal file
Просмотреть файл

@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: linear-gradient with border-image-slice and border-image-width</title>
<style>
table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
td { padding: 0; }
</style>
</head>
<body>
<table>
<col style="width: 90px">
<col style="width: 120px">
<col style="width: 30px">
<tr style="height: 15px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 1800px 300px; background-position: 0px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 133.33px 300px; background-position: -6.67px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 300px; background-position: -570px 0px;"></td>
</tr>
<tr style="height: 165px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 1800px 183.33px; background-position: 0px -9.17px;"></td>
<td style="background: white"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 183.33px; background-position: -570px -9.17px;"></td>
</tr>
<tr style="height: 60px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 1800px 1200px; background-position: 0px -1140px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 133.33px 1200px; background-position: -6.67px -1140px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 1200px; background-position: -570px -1140px;"></td>
</tr>
</table>
<table>
<col style="width: 90px">
<col style="width: 120px">
<col style="width: 30px">
<tr style="height: 15px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:720px 120px; background-position: 0px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:160px 120px; background-position: -20px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 120px; background-position: -210px 0px;"></td>
</tr>
<tr style="height: 165px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:720px 220px; background-position: 0px -27.5px;"></td>
<td style="background: white"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 220px; background-position: -210px -27.5px;"></td>
</tr>
<tr style="height: 60px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:720px 480px; background-position: 0px -420px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:160px 480px; background-position: -20px -420px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 480px; background-position: -210px -420px;"></td>
</tr>
</table>
<table>
<col style="width: 90px">
<col style="width: 120px">
<col style="width: 30px">
<tr style="height: 15px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 360px 60px; background-position: 0px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 240px 60px; background-position: -60px 0px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 60px; background-position: -90px 0px;"></td>
</tr>
<tr style="height: 165px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 360px 330px; background-position: 0px -82.5px;"></td>
<td style="background: white"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 330px; background-position: -90px -82.5px;"></td>
</tr>
<tr style="height: 60px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 360px 240px; background-position: 0px -180px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 240px 240px; background-position: -60px -180px;"></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 240px; background-position: -90px -180px;"></td>
</tr>
</table>
</body>
</html>

29
layout/reftests/border-image/border-image-linear-gradient-slice-width.html Normal file
Просмотреть файл

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: linear-gradient with border-image-slice and border-image-width</title>
<style>
div {
border: 30px solid black;
border-image: linear-gradient(to bottom right, red, blue);
border-image-width: 0.5 1 2 3;
width: 180px;
height: 180px;
}
div.border12 {
border-image-slice: 12 12;
}
div.border30 {
border-image-slice: 30 30;
}
div.border60 {
border-image-slice: 60 60;
}
</style>
</head>
<body>
<div class="border12"></div>
<div class="border30"></div>
<div class="border60"></div>
</body>
</html>

32
layout/reftests/border-image/border-image-linear-gradient-width-ref.html Normal file
Просмотреть файл

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: linear-gradient with border-image-width</title>
<style>
table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
td { padding: 0; }
</style>
</head>
<body>
<table>
<col style="width: 90px">
<col style="width: 120px">
<col style="width: 30px">
<tr style="height: 15px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:90px 15px;"></td>
<td></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:30px 15px;"></td>
</tr>
<tr style="height: 165px">
<td></td>
<td style="background: white"></td>
<td></td>
</tr>
<tr style="height: 60px">
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:90px 60px;"></td>
<td></td>
<td style="background-image: linear-gradient(to bottom right, red, blue); background-size:30px 60px;"></td>
</tr>
</table>
</body>
</html>

18
layout/reftests/border-image/border-image-linear-gradient-width.html Normal file
Просмотреть файл

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: linear-gradient with border-image-width</title>
<style>
div.border {
border: 30px solid black;
border-image: linear-gradient(to bottom right, red, blue);
border-image-width: 0.5 1 2 3;
width: 180px;
height: 180px;
}
</style>
</head>
<body>
<div class="border"></div>
</body>
</html>

17
layout/reftests/border-image/border-image-linear-gradient.html Normal file
Просмотреть файл

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: linear-gradient</title>
<style>
div.border {
border: 30px solid black;
border-image: linear-gradient(to bottom right, red, blue);
width: 180px;
height: 180px;
}
</style>
</head>
<body>
<div class="border"></div>
</body>
</html>

32
layout/reftests/border-image/border-image-radial-gradient-ref.html Normal file
Просмотреть файл

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: radial-gradient</title>
<style>
table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
td { padding: 0; }
</style>
</head>
<body>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:30px 30px;"></td>
<td></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:30px 30px;"></td>
</tr>
<tr style="height: 180px">
<td></td>
<td style="background: white"></td>
<td></td>
</tr>
<tr style="height: 30px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:30px 30px;"></td>
<td></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:30px 30px;"></td>
</tr>
</table>
</body>
</html>

72
layout/reftests/border-image/border-image-radial-gradient-slice-1-ref.html Normal file
Просмотреть файл

@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: radial-gradient with border-image-slice</title>
<style>
table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
td { padding: 0; }
</style>
</head>
<body>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 600px; background-position: 0px 0px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 200px 600px; background-position: -10px 0px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 600px; background-position: -570px 0px;"></td>
</tr>
<tr style="height: 180px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 200px; background-position: 0px -10px;"></td>
<td style="background: white"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 200px; background-position: -570px -10px;"></td>
</tr>
<tr style="height: 30px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 600px; background-position: 0px -570px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 200px 600px; background-position: -10px -570px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 600px; background-position: -570px -570px;"></td>
</tr>
</table>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 240px; background-position: 0px 0px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 240px; background-position: -30px 0px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 240px; background-position: -210px 0px;"></td>
</tr>
<tr style="height: 180px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 240px; background-position: 0px -30px;"></td>
<td style="background: white"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 240px; background-position: -210px -30px;"></td>
</tr>
<tr style="height: 30px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 240px; background-position: 0px -210px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 240px; background-position: -30px -210px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 240px; background-position: -210px -210px;"></td>
</tr>
</table>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 120px; background-position: 0px 0px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 360px 120px; background-position: -90px 0px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 120px; background-position: -90px 0px;"></td>
</tr>
<tr style="height: 180px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 360px; background-position: 0px -90px;"></td>
<td style="background: white"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 360px; background-position: -210px -90px;"></td>
</tr>
<tr style="height: 30px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 120px; background-position: 0px -90px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 360px 120px; background-position: -90px -210px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 120px; background-position: -90px -90px;"></td>
</tr>
</table>
</body>
</html>

28
layout/reftests/border-image/border-image-radial-gradient-slice-1.html Normal file
Просмотреть файл

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: radial-gradient with border-image-slice</title>
<style>
div {
border: 30px solid black;
border-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%);
width: 180px;
height: 180px;
}
div.border12 {
border-image-slice: 12 12;
}
div.border30 {
border-image-slice: 30 30;
}
div.border60 {
border-image-slice: 60 60;
}
</style>
</head>
<body>
<div class="border12"></div>
<div class="border30"></div>
<div class="border60"></div>
</body>
</html>

52
layout/reftests/border-image/border-image-radial-gradient-slice-2-ref.html Normal file
Просмотреть файл

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: radial-gradient with border-image-slice</title>
<style>
table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
td { padding: 0; }
</style>
</head>
<body>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 600px; background-position: 0px 0px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 360px 600px; background-position: -90px 0px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 600px; background-position: -90px 0px;"></td>
</tr>
<tr style="height: 180px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 200px; background-position: 0px -10px;"></td>
<td style="background: white"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 200px; background-position: -210px -10px;"></td>
</tr>
<tr style="height: 30px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 600px; background-position: 0px -570px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 360px 600px; background-position: -90px -570px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 600px; background-position: -90px -570px;"></td>
</tr>
</table>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 120px; background-position: 0px 0px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 200px 120px; background-position: -10px 0px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 120px; background-position: -570px 0px;"></td>
</tr>
<tr style="height: 180px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 360px; background-position: 0px -90px;"></td>
<td style="background: white"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 360px; background-position: -570px -90px;"></td>
</tr>
<tr style="height: 30px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 120px; background-position: 0px -90px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 200px 120px; background-position: -10px -210px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 120px; background-position: -570px -90px;"></td>
</tr>
</table>
</body>
</html>

24
layout/reftests/border-image/border-image-radial-gradient-slice-2.html Normal file
Просмотреть файл

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: radial-gradient with border-image-slice</title>
<style>
div {
border: 30px solid black;
border-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%);
width: 180px;
height: 180px;
}
div.border1260 {
border-image-slice: 12 60;
}
div.border6012 {
border-image-slice: 60 12;
}
</style>
</head>
<body>
<div class="border1260"></div>
<div class="border6012"></div>
</body>
</html>

72
layout/reftests/border-image/border-image-radial-gradient-slice-fill-1-ref.html Normal file
Просмотреть файл

@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: radial-gradient with border-image-slice and fill</title>
<style>
table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
td { padding: 0; }
</style>
</head>
<body>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 600px; background-position: 0px 0px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 200px 600px; background-position: -10px 0px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 600px; background-position: -570px 0px;"></td>
</tr>
<tr style="height: 180px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 200px; background-position: 0px -10px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 200px 200px; background-position: -10px -10px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 200px; background-position: -570px -10px;"></td>
</tr>
<tr style="height: 30px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 600px; background-position: 0px -570px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 200px 600px; background-position: -10px -570px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 600px; background-position: -570px -570px;"></td>
</tr>
</table>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 240px; background-position: 0px 0px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 240px; background-position: -30px 0px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 240px; background-position: -210px 0px;"></td>
</tr>
<tr style="height: 180px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 240px; background-position: 0px -30px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 240px; background-position: -30px -30px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 240px; background-position: -210px -30px;"></td>
</tr>
<tr style="height: 30px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 240px; background-position: 0px -210px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 240px; background-position: -30px -210px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 240px; background-position: -210px -210px;"></td>
</tr>
</table>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 120px; background-position: 0px 0px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 360px 120px; background-position: -90px 0px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 120px; background-position: -90px 0px;"></td>
</tr>
<tr style="height: 180px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 360px; background-position: 0px -90px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 360px 360px; background-position: -90px -90px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 360px; background-position: -210px -90px;"></td>
</tr>
<tr style="height: 30px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 120px; background-position: 0px -90px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 360px 120px; background-position: -90px -210px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 120px; background-position: -90px -90px;"></td>
</tr>
</table>
</body>
</html>

28
layout/reftests/border-image/border-image-radial-gradient-slice-fill-1.html Normal file
Просмотреть файл

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: radial-gradient with border-image-slice and fill</title>
<style>
div {
border: 30px solid black;
border-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%);
width: 180px;
height: 180px;
}
div.border12 {
border-image-slice: 12 12 fill;
}
div.border30 {
border-image-slice: 30 30 fill;
}
div.border60 {
border-image-slice: 60 60 fill;
}
</style>
</head>
<body>
<div class="border12"></div>
<div class="border30"></div>
<div class="border60"></div>
</body>
</html>

52
layout/reftests/border-image/border-image-radial-gradient-slice-fill-2-ref.html Normal file
Просмотреть файл

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: radial-gradient with border-image-slice and fill</title>
<style>
table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
td { padding: 0; }
</style>
</head>
<body>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 600px; background-position: 0px 0px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 360px 600px; background-position: -90px 0px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 600px; background-position: -90px 0px;"></td>
</tr>
<tr style="height: 180px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 200px; background-position: 0px -10px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 360px 200px; background-position: -90px -10px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 200px; background-position: -210px -10px;"></td>
</tr>
<tr style="height: 30px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 600px; background-position: 0px -570px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 360px 600px; background-position: -90px -570px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 600px; background-position: -90px -570px;"></td>
</tr>
</table>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 120px; background-position: 0px 0px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 200px 120px; background-position: -10px 0px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 120px; background-position: -570px 0px;"></td>
</tr>
<tr style="height: 180px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 360px; background-position: 0px -90px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 200px 360px; background-position: -10px -90px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 360px; background-position: -570px -90px;"></td>
</tr>
<tr style="height: 30px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 120px; background-position: 0px -90px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 200px 120px; background-position: -10px -210px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 120px; background-position: -570px -90px;"></td>
</tr>
</table>
</body>
</html>

24
layout/reftests/border-image/border-image-radial-gradient-slice-fill-2.html Normal file
Просмотреть файл

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: radial-gradient with border-image-slice and fill</title>
<style>
div {
border: 30px solid black;
border-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%);
width: 180px;
height: 180px;
}
div.border1260 {
border-image-slice: 12 60 fill;
}
div.border6012 {
border-image-slice: 60 12 fill;
}
</style>
</head>
<body>
<div class="border1260"></div>
<div class="border6012"></div>
</body>
</html>

72
layout/reftests/border-image/border-image-radial-gradient-slice-width-ref.html Normal file
Просмотреть файл

@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: radial-gradient with border-image-slice and border-image-width</title>
<style>
table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
td { padding: 0; }
</style>
</head>
<body>
<table>
<col style="width: 90px">
<col style="width: 120px">
<col style="width: 30px">
<tr style="height: 15px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 1800px 300px; background-position: 0px 0px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 133.33px 300px; background-position: -6.67px 0px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 300px; background-position: -570px 0px;"></td>
</tr>
<tr style="height: 165px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 1800px 183.33px; background-position: 0px -9.17px;"></td>
<td style="background: white"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 183.33px; background-position: -570px -9.17px;"></td>
</tr>
<tr style="height: 60px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 1800px 1200px; background-position: 0px -1140px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 133.33px 1200px; background-position: -6.67px -1140px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 1200px; background-position: -570px -1140px;"></td>
</tr>
</table>
<table>
<col style="width: 90px">
<col style="width: 120px">
<col style="width: 30px">
<tr style="height: 15px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:720px 120px; background-position: 0px 0px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:160px 120px; background-position: -20px 0px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 120px; background-position: -210px 0px;"></td>
</tr>
<tr style="height: 165px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:720px 220px; background-position: 0px -27.5px;"></td>
<td style="background: white"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 220px; background-position: -210px -27.5px;"></td>
</tr>
<tr style="height: 60px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:720px 480px; background-position: 0px -420px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:160px 480px; background-position: -20px -420px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 480px; background-position: -210px -420px;"></td>
</tr>
</table>
<table>
<col style="width: 90px">
<col style="width: 120px">
<col style="width: 30px">
<tr style="height: 15px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 360px 60px; background-position: 0px 0px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 240px 60px; background-position: -60px 0px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 60px; background-position: -90px 0px;"></td>
</tr>
<tr style="height: 165px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 360px 330px; background-position: 0px -82.5px;"></td>
<td style="background: white"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 330px; background-position: -90px -82.5px;"></td>
</tr>
<tr style="height: 60px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 360px 240px; background-position: 0px -180px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 240px 240px; background-position: -60px -180px;"></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 240px; background-position: -90px -180px;"></td>
</tr>
</table>
</body>
</html>

29
layout/reftests/border-image/border-image-radial-gradient-slice-width.html Normal file
Просмотреть файл

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: radial-gradient with border-image-slice and border-image-width</title>
<style>
div {
border: 30px solid black;
border-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%);
border-image-width: 0.5 1 2 3;
width: 180px;
height: 180px;
}
div.border12 {
border-image-slice: 12 12;
}
div.border30 {
border-image-slice: 30 30;
}
div.border60 {
border-image-slice: 60 60;
}
</style>
</head>
<body>
<div class="border12"></div>
<div class="border30"></div>
<div class="border60"></div>
</body>
</html>

32
layout/reftests/border-image/border-image-radial-gradient-width-ref.html Normal file
Просмотреть файл

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: radial-gradient with border-image-width</title>
<style>
table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
td { padding: 0; }
</style>
</head>
<body>
<table>
<col style="width: 90px">
<col style="width: 120px">
<col style="width: 30px">
<tr style="height: 15px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:90px 15px;"></td>
<td></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:30px 15px;"></td>
</tr>
<tr style="height: 165px">
<td></td>
<td style="background: white"></td>
<td></td>
</tr>
<tr style="height: 60px">
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:90px 60px;"></td>
<td></td>
<td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:30px 60px;"></td>
</tr>
</table>
</body>
</html>

18
layout/reftests/border-image/border-image-radial-gradient-width.html Normal file
Просмотреть файл

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: radial-gradient with border-image-width</title>
<style>
div.border {
border: 30px solid black;
border-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%);
border-image-width: 0.5 1 2 3;
width: 180px;
height: 180px;
}
</style>
</head>
<body>
<div class="border"></div>
</body>
</html>

17
layout/reftests/border-image/border-image-radial-gradient.html Normal file
Просмотреть файл

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: radial-gradient</title>
<style>
div.border {
border: 30px solid black;
border-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%);
width: 180px;
height: 180px;
}
</style>
</head>
<body>
<div class="border"></div>
</body>
</html>

32
layout/reftests/border-image/border-image-repeating-linear-gradient-ref.html Normal file
Просмотреть файл

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: linear-gradient</title>
<style>
table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
td { padding: 0; }
</style>
</head>
<body>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size:30px 30px;"></td>
<td></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size:30px 30px;"></td>
</tr>
<tr style="height: 180px">
<td></td>
<td style="background: white"></td>
<td></td>
</tr>
<tr style="height: 30px">
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size:30px 30px;"></td>
<td></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size:30px 30px;"></td>
</tr>
</table>
</body>
</html>

116
layout/reftests/border-image/border-image-repeating-linear-gradient-repeat-round-2-ref.html Normal file
Просмотреть файл

@ -0,0 +1,116 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: linear-gradient with border-image-repeat</title>
<style>
table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
td { padding: 0; }
</style>
</head>
<body>
<table>
<col style="width: 30.0px;">
<col style="width: 60.0px;">
<col style="width: 60.0px;">
<col style="width: 60.0px;">
<col style="width: 30.0px;">
<tr style="height: 30.0px;">
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: 0px 0px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -90.0px 0px;"></td>
</tr>
<tr style="height: 60.0px;">
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: white;"></td>
<td style="background-image: white;"></td>
<td style="background-image: white;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
</tr>
<tr style="height: 60.0px;">
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: white;"></td>
<td style="background-image: white;"></td>
<td style="background-image: white;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
</tr>
<tr style="height: 60.0px;">
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: white;"></td>
<td style="background-image: white;"></td>
<td style="background-image: white;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
</tr>
<tr style="height: 30.0px;">
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: 0px -90.0px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -90.0px -90.0px;"></td>
</tr>
</table>
<table>
<col style="width: 30.0px;">
<col style="width: 60.0px;">
<col style="width: 60.0px;">
<col style="width: 60.0px;">
<col style="width: 30.0px;">
<tr style="height: 30.0px;">
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: 0px 0px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -90.0px 0px;"></td>
</tr>
<tr style="height: 60.0px;">
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
</tr>
<tr style="height: 60.0px;">
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
</tr>
<tr style="height: 60.0px;">
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
</tr>
<tr style="height: 30.0px;">
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: 0px -90.0px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -90.0px -90.0px;"></td>
</tr>
</table>
<table>
<col style="width: 60.0px;">
<col style="width: 120.0px;">
<col style="width: 60.0px;">
<tr style="height: 60.0px;">
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 480.0px 480.0px; background-position: 0px 0px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 160.0px 480.0px; background-position: -20.0px -0.0px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 480.0px 480.0px; background-position: -420.0px 0px;"></td>
</tr>
<tr style="height: 120.0px;">
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 480.0px 160.0px; background-position: -0.0px -20.0px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 160.0px 160.0px; background-position: -20.0px -20.0px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 480.0px 160.0px; background-position: -420.0px -20.0px;"></td>
</tr>
<tr style="height: 60.0px;">
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 480.0px 480.0px; background-position: 0px -420.0px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 160.0px 480.0px; background-position: -20.0px -420.0px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 480.0px 480.0px; background-position: -420.0px -420.0px;"></td>
</tr>
</table>
</body>
</html>

32
layout/reftests/border-image/border-image-repeating-linear-gradient-repeat-round-2.html Normal file
Просмотреть файл

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: linear-gradient with border-image-repeat</title>
<style>
div {
border: 30px solid black;
border-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%);
width: 180px;
height: 180px;
}
div.border60round {
border-image-repeat: round;
border-image-slice: 60;
}
div.border60fillround {
border-image-repeat: round;
border-image-slice: 60 fill;
}
div.border30fill2round {
border-image-repeat: round;
border-image-slice: 30 fill;
border-image-width: 2;
}
</style>
</head>
<body>
<div class="border60round"></div>
<div class="border60fillround"></div>
<div class="border30fill2round"></div>
</body>
</html>

52
layout/reftests/border-image/border-image-repeating-linear-gradient-slice-fill-2-ref.html Normal file
Просмотреть файл

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: linear-gradient with border-image-slice and fill</title>
<style>
table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
td { padding: 0; }
</style>
</head>
<body>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120px 600px; background-position: 0px 0px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 360px 600px; background-position: -90px 0px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120px 600px; background-position: -90px 0px;"></td>
</tr>
<tr style="height: 180px">
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120px 200px; background-position: 0px -10px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 360px 200px; background-position: -90px -10px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120px 200px; background-position: -210px -10px;"></td>
</tr>
<tr style="height: 30px">
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120px 600px; background-position: 0px -570px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 360px 600px; background-position: -90px -570px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120px 600px; background-position: -90px -570px;"></td>
</tr>
</table>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 600px 120px; background-position: 0px 0px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 200px 120px; background-position: -10px 0px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 600px 120px; background-position: -570px 0px;"></td>
</tr>
<tr style="height: 180px">
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 600px 360px; background-position: 0px -90px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 200px 360px; background-position: -10px -90px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 600px 360px; background-position: -570px -90px;"></td>
</tr>
<tr style="height: 30px">
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 600px 120px; background-position: 0px -90px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 200px 120px; background-position: -10px -210px;"></td>
<td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 600px 120px; background-position: -570px -90px;"></td>
</tr>
</table>
</body>
</html>

24
layout/reftests/border-image/border-image-repeating-linear-gradient-slice-fill-2.html Normal file
Просмотреть файл

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: linear-gradient with border-image-slice and fill</title>
<style>
div {
border: 30px solid black;
border-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%);
width: 180px;
height: 180px;
}
div.border1260 {
border-image-slice: 12 60 fill;
}
div.border6012 {
border-image-slice: 60 12 fill;
}
</style>
</head>
<body>
<div class="border1260"></div>
<div class="border6012"></div>
</body>
</html>

17
layout/reftests/border-image/border-image-repeating-linear-gradient.html Normal file
Просмотреть файл

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: linear-gradient</title>
<style>
div.border {
border: 30px solid black;
border-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%);
width: 180px;
height: 180px;
}
</style>
</head>
<body>
<div class="border"></div>
</body>
</html>

32
layout/reftests/border-image/border-image-repeating-radial-gradient-ref.html Normal file
Просмотреть файл

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: radial-gradient</title>
<style>
table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
td { padding: 0; }
</style>
</head>
<body>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:30px 30px;"></td>
<td></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:30px 30px;"></td>
</tr>
<tr style="height: 180px">
<td></td>
<td style="background: white"></td>
<td></td>
</tr>
<tr style="height: 30px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:30px 30px;"></td>
<td></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:30px 30px;"></td>
</tr>
</table>
</body>
</html>

116
layout/reftests/border-image/border-image-repeating-radial-gradient-repeat-repeat-2-ref.html Normal file
Просмотреть файл

@ -0,0 +1,116 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: linear-gradient with border-image-repeat</title>
<style>
table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
td { padding: 0; }
</style>
</head>
<body>
<table>
<col style="width: 30.0px;">
<col style="width: 60.0px;">
<col style="width: 60.0px;">
<col style="width: 60.0px;">
<col style="width: 30.0px;">
<tr style="height: 30.0px;">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: 0px 0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px 0px;"></td>
</tr>
<tr style="height: 60.0px;">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: white;"></td>
<td style="background-image: white;"></td>
<td style="background-image: white;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
</tr>
<tr style="height: 60.0px;">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: white;"></td>
<td style="background-image: white;"></td>
<td style="background-image: white;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
</tr>
<tr style="height: 60.0px;">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: white;"></td>
<td style="background-image: white;"></td>
<td style="background-image: white;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
</tr>
<tr style="height: 30.0px;">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: 0px -90.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px -90.0px;"></td>
</tr>
</table>
<table>
<col style="width: 30.0px;">
<col style="width: 60.0px;">
<col style="width: 60.0px;">
<col style="width: 60.0px;">
<col style="width: 30.0px;">
<tr style="height: 30.0px;">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: 0px 0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px 0px;"></td>
</tr>
<tr style="height: 60.0px;">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
</tr>
<tr style="height: 60.0px;">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
</tr>
<tr style="height: 60.0px;">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
</tr>
<tr style="height: 30.0px;">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: 0px -90.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px -90.0px;"></td>
</tr>
</table>
<table>
<col style="width: 60.0px;">
<col style="width: 120.0px;">
<col style="width: 60.0px;">
<tr style="height: 60.0px;">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 480.0px 480.0px; background-position: 0px 0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 480.0px 480.0px; background-position: -180.0px -0.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 480.0px 480.0px; background-position: -420.0px 0px;"></td>
</tr>
<tr style="height: 120.0px;">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 480.0px 480.0px; background-position: -0.0px -180.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 480.0px 480.0px; background-position: -180.0px -180.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 480.0px 480.0px; background-position: -420.0px -180.0px;"></td>
</tr>
<tr style="height: 60.0px;">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 480.0px 480.0px; background-position: 0px -420.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 480.0px 480.0px; background-position: -180.0px -420.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 480.0px 480.0px; background-position: -420.0px -420.0px;"></td>
</tr>
</table>
</body>
</html>

32
layout/reftests/border-image/border-image-repeating-radial-gradient-repeat-repeat-2.html Normal file
Просмотреть файл

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: linear-gradient with border-image-repeat</title>
<style>
div {
border: 30px solid black;
border-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%);
width: 180px;
height: 180px;
}
div.border60repeat {
border-image-repeat: repeat;
border-image-slice: 60;
}
div.border60fillrepeat {
border-image-repeat: repeat;
border-image-slice: 60 fill;
}
div.border30fill2repeat {
border-image-repeat: repeat;
border-image-slice: 30 fill;
border-image-width: 2;
}
</style>
</head>
<body>
<div class="border60repeat"></div>
<div class="border60fillrepeat"></div>
<div class="border30fill2repeat"></div>
</body>
</html>

116
layout/reftests/border-image/border-image-repeating-radial-gradient-repeat-round-2-ref.html Normal file
Просмотреть файл

@ -0,0 +1,116 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: linear-gradient with border-image-repeat</title>
<style>
table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
td { padding: 0; }
</style>
</head>
<body>
<table>
<col style="width: 30.0px;">
<col style="width: 60.0px;">
<col style="width: 60.0px;">
<col style="width: 60.0px;">
<col style="width: 30.0px;">
<tr style="height: 30.0px;">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: 0px 0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px 0px;"></td>
</tr>
<tr style="height: 60.0px;">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: white;"></td>
<td style="background-image: white;"></td>
<td style="background-image: white;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
</tr>
<tr style="height: 60.0px;">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: white;"></td>
<td style="background-image: white;"></td>
<td style="background-image: white;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
</tr>
<tr style="height: 60.0px;">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: white;"></td>
<td style="background-image: white;"></td>
<td style="background-image: white;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
</tr>
<tr style="height: 30.0px;">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: 0px -90.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px -90.0px;"></td>
</tr>
</table>
<table>
<col style="width: 30.0px;">
<col style="width: 60.0px;">
<col style="width: 60.0px;">
<col style="width: 60.0px;">
<col style="width: 30.0px;">
<tr style="height: 30.0px;">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: 0px 0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px 0px;"></td>
</tr>
<tr style="height: 60.0px;">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
</tr>
<tr style="height: 60.0px;">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
</tr>
<tr style="height: 60.0px;">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
</tr>
<tr style="height: 30.0px;">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: 0px -90.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px -90.0px;"></td>
</tr>
</table>
<table>
<col style="width: 60.0px;">
<col style="width: 120.0px;">
<col style="width: 60.0px;">
<tr style="height: 60.0px;">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 480.0px 480.0px; background-position: 0px 0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 160.0px 480.0px; background-position: -20.0px -0.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 480.0px 480.0px; background-position: -420.0px 0px;"></td>
</tr>
<tr style="height: 120.0px;">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 480.0px 160.0px; background-position: -0.0px -20.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 160.0px 160.0px; background-position: -20.0px -20.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 480.0px 160.0px; background-position: -420.0px -20.0px;"></td>
</tr>
<tr style="height: 60.0px;">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 480.0px 480.0px; background-position: 0px -420.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 160.0px 480.0px; background-position: -20.0px -420.0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 480.0px 480.0px; background-position: -420.0px -420.0px;"></td>
</tr>
</table>
</body>
</html>

32
layout/reftests/border-image/border-image-repeating-radial-gradient-repeat-round-2.html Normal file
Просмотреть файл

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: linear-gradient with border-image-repeat</title>
<style>
div {
border: 30px solid black;
border-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%);
width: 180px;
height: 180px;
}
div.border60round {
border-image-repeat: round;
border-image-slice: 60;
}
div.border60fillround {
border-image-repeat: round;
border-image-slice: 60 fill;
}
div.border30fill2round {
border-image-repeat: round;
border-image-slice: 30 fill;
border-image-width: 2;
}
</style>
</head>
<body>
<div class="border60round"></div>
<div class="border60fillround"></div>
<div class="border30fill2round"></div>
</body>
</html>

72
layout/reftests/border-image/border-image-repeating-radial-gradient-slice-1-ref.html Normal file
Просмотреть файл

@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: radial-gradient with border-image-slice</title>
<style>
table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
td { padding: 0; }
</style>
</head>
<body>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 600px; background-position: 0px 0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 200px 600px; background-position: -10px 0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 600px; background-position: -570px 0px;"></td>
</tr>
<tr style="height: 180px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 200px; background-position: 0px -10px;"></td>
<td style="background: white"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 200px; background-position: -570px -10px;"></td>
</tr>
<tr style="height: 30px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 600px; background-position: 0px -570px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 200px 600px; background-position: -10px -570px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 600px; background-position: -570px -570px;"></td>
</tr>
</table>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: 0px 0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: -30px 0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: -210px 0px;"></td>
</tr>
<tr style="height: 180px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: 0px -30px;"></td>
<td style="background: white"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: -210px -30px;"></td>
</tr>
<tr style="height: 30px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: 0px -210px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: -30px -210px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: -210px -210px;"></td>
</tr>
</table>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 120px; background-position: 0px 0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 360px 120px; background-position: -90px 0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 120px; background-position: -90px 0px;"></td>
</tr>
<tr style="height: 180px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 360px; background-position: 0px -90px;"></td>
<td style="background: white"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 360px; background-position: -210px -90px;"></td>
</tr>
<tr style="height: 30px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 120px; background-position: 0px -90px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 360px 120px; background-position: -90px -210px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 120px; background-position: -90px -90px;"></td>
</tr>
</table>
</body>
</html>

28
layout/reftests/border-image/border-image-repeating-radial-gradient-slice-1.html Normal file
Просмотреть файл

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: radial-gradient with border-image-slice</title>
<style>
div {
border: 30px solid black;
border-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%);
width: 180px;
height: 180px;
}
div.border12 {
border-image-slice: 12 12;
}
div.border30 {
border-image-slice: 30 30;
}
div.border60 {
border-image-slice: 60 60;
}
</style>
</head>
<body>
<div class="border12"></div>
<div class="border30"></div>
<div class="border60"></div>
</body>
</html>

52
layout/reftests/border-image/border-image-repeating-radial-gradient-slice-2-ref.html Normal file
Просмотреть файл

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: radial-gradient with border-image-slice</title>
<style>
table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
td { padding: 0; }
</style>
</head>
<body>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 600px; background-position: 0px 0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 360px 600px; background-position: -90px 0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 600px; background-position: -90px 0px;"></td>
</tr>
<tr style="height: 180px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 200px; background-position: 0px -10px;"></td>
<td style="background: white"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 200px; background-position: -210px -10px;"></td>
</tr>
<tr style="height: 30px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 600px; background-position: 0px -570px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 360px 600px; background-position: -90px -570px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 600px; background-position: -90px -570px;"></td>
</tr>
</table>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 120px; background-position: 0px 0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 200px 120px; background-position: -10px 0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 120px; background-position: -570px 0px;"></td>
</tr>
<tr style="height: 180px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 360px; background-position: 0px -90px;"></td>
<td style="background: white"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 360px; background-position: -570px -90px;"></td>
</tr>
<tr style="height: 30px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 120px; background-position: 0px -90px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 200px 120px; background-position: -10px -210px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 120px; background-position: -570px -90px;"></td>
</tr>
</table>
</body>
</html>

24
layout/reftests/border-image/border-image-repeating-radial-gradient-slice-2.html Normal file
Просмотреть файл

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: radial-gradient with border-image-slice</title>
<style>
div {
border: 30px solid black;
border-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%);
width: 180px;
height: 180px;
}
div.border1260 {
border-image-slice: 12 60;
}
div.border6012 {
border-image-slice: 60 12;
}
</style>
</head>
<body>
<div class="border1260"></div>
<div class="border6012"></div>
</body>
</html>

72
layout/reftests/border-image/border-image-repeating-radial-gradient-slice-fill-1-ref.html Normal file
Просмотреть файл

@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: radial-gradient with border-image-slice and fill</title>
<style>
table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
td { padding: 0; }
</style>
</head>
<body>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 600px; background-position: 0px 0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 200px 600px; background-position: -10px 0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 600px; background-position: -570px 0px;"></td>
</tr>
<tr style="height: 180px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 200px; background-position: 0px -10px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 200px 200px; background-position: -10px -10px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 200px; background-position: -570px -10px;"></td>
</tr>
<tr style="height: 30px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 600px; background-position: 0px -570px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 200px 600px; background-position: -10px -570px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 600px; background-position: -570px -570px;"></td>
</tr>
</table>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: 0px 0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: -30px 0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: -210px 0px;"></td>
</tr>
<tr style="height: 180px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: 0px -30px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: -30px -30px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: -210px -30px;"></td>
</tr>
<tr style="height: 30px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: 0px -210px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: -30px -210px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: -210px -210px;"></td>
</tr>
</table>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 120px; background-position: 0px 0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 360px 120px; background-position: -90px 0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 120px; background-position: -90px 0px;"></td>
</tr>
<tr style="height: 180px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 360px; background-position: 0px -90px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 360px 360px; background-position: -90px -90px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 360px; background-position: -210px -90px;"></td>
</tr>
<tr style="height: 30px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 120px; background-position: 0px -90px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 360px 120px; background-position: -90px -210px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 120px; background-position: -90px -90px;"></td>
</tr>
</table>
</body>
</html>

28
layout/reftests/border-image/border-image-repeating-radial-gradient-slice-fill-1.html Normal file
Просмотреть файл

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: radial-gradient with border-image-slice and fill</title>
<style>
div {
border: 30px solid black;
border-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%);
width: 180px;
height: 180px;
}
div.border12 {
border-image-slice: 12 12 fill;
}
div.border30 {
border-image-slice: 30 30 fill;
}
div.border60 {
border-image-slice: 60 60 fill;
}
</style>
</head>
<body>
<div class="border12"></div>
<div class="border30"></div>
<div class="border60"></div>
</body>
</html>

52
layout/reftests/border-image/border-image-repeating-radial-gradient-slice-fill-2-ref.html Normal file
Просмотреть файл

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: radial-gradient with border-image-slice and fill</title>
<style>
table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
td { padding: 0; }
</style>
</head>
<body>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 600px; background-position: 0px 0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 360px 600px; background-position: -90px 0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 600px; background-position: -90px 0px;"></td>
</tr>
<tr style="height: 180px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 200px; background-position: 0px -10px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 360px 200px; background-position: -90px -10px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 200px; background-position: -210px -10px;"></td>
</tr>
<tr style="height: 30px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 600px; background-position: 0px -570px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 360px 600px; background-position: -90px -570px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 600px; background-position: -90px -570px;"></td>
</tr>
</table>
<table>
<col style="width: 30px">
<col style="width: 180px">
<col style="width: 30px">
<tr style="height: 30px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 120px; background-position: 0px 0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 200px 120px; background-position: -10px 0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 120px; background-position: -570px 0px;"></td>
</tr>
<tr style="height: 180px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 360px; background-position: 0px -90px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 200px 360px; background-position: -10px -90px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 360px; background-position: -570px -90px;"></td>
</tr>
<tr style="height: 30px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 120px; background-position: 0px -90px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 200px 120px; background-position: -10px -210px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 120px; background-position: -570px -90px;"></td>
</tr>
</table>
</body>
</html>

24
layout/reftests/border-image/border-image-repeating-radial-gradient-slice-fill-2.html Normal file
Просмотреть файл

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: radial-gradient with border-image-slice and fill</title>
<style>
div {
border: 30px solid black;
border-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%);
width: 180px;
height: 180px;
}
div.border1260 {
border-image-slice: 12 60 fill;
}
div.border6012 {
border-image-slice: 60 12 fill;
}
</style>
</head>
<body>
<div class="border1260"></div>
<div class="border6012"></div>
</body>
</html>

72
layout/reftests/border-image/border-image-repeating-radial-gradient-slice-width-ref.html Normal file
Просмотреть файл

@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: radial-gradient with border-image-slice and border-image-width</title>
<style>
table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
td { padding: 0; }
</style>
</head>
<body>
<table>
<col style="width: 90px">
<col style="width: 120px">
<col style="width: 30px">
<tr style="height: 15px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 1800px 300px; background-position: 0px 0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 133.33px 300px; background-position: -6.67px 0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 300px; background-position: -570px 0px;"></td>
</tr>
<tr style="height: 165px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 1800px 183.33px; background-position: 0px -9.17px;"></td>
<td style="background: white"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 183.33px; background-position: -570px -9.17px;"></td>
</tr>
<tr style="height: 60px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 1800px 1200px; background-position: 0px -1140px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 133.33px 1200px; background-position: -6.67px -1140px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 1200px; background-position: -570px -1140px;"></td>
</tr>
</table>
<table>
<col style="width: 90px">
<col style="width: 120px">
<col style="width: 30px">
<tr style="height: 15px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:720px 120px; background-position: 0px 0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:160px 120px; background-position: -20px 0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 120px; background-position: -210px 0px;"></td>
</tr>
<tr style="height: 165px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:720px 220px; background-position: 0px -27.5px;"></td>
<td style="background: white"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 220px; background-position: -210px -27.5px;"></td>
</tr>
<tr style="height: 60px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:720px 480px; background-position: 0px -420px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:160px 480px; background-position: -20px -420px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 480px; background-position: -210px -420px;"></td>
</tr>
</table>
<table>
<col style="width: 90px">
<col style="width: 120px">
<col style="width: 30px">
<tr style="height: 15px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 360px 60px; background-position: 0px 0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 240px 60px; background-position: -60px 0px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 60px; background-position: -90px 0px;"></td>
</tr>
<tr style="height: 165px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 360px 330px; background-position: 0px -82.5px;"></td>
<td style="background: white"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 330px; background-position: -90px -82.5px;"></td>
</tr>
<tr style="height: 60px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 360px 240px; background-position: 0px -180px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 240px 240px; background-position: -60px -180px;"></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 240px; background-position: -90px -180px;"></td>
</tr>
</table>
</body>
</html>

29
layout/reftests/border-image/border-image-repeating-radial-gradient-slice-width.html Normal file
Просмотреть файл

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: radial-gradient with border-image-slice and border-image-width</title>
<style>
div {
border: 30px solid black;
border-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%);
border-image-width: 0.5 1 2 3;
width: 180px;
height: 180px;
}
div.border12 {
border-image-slice: 12 12;
}
div.border30 {
border-image-slice: 30 30;
}
div.border60 {
border-image-slice: 60 60;
}
</style>
</head>
<body>
<div class="border12"></div>
<div class="border30"></div>
<div class="border60"></div>
</body>
</html>

32
layout/reftests/border-image/border-image-repeating-radial-gradient-width-ref.html Normal file
Просмотреть файл

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: radial-gradient with border-image-width</title>
<style>
table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
td { padding: 0; }
</style>
</head>
<body>
<table>
<col style="width: 90px">
<col style="width: 120px">
<col style="width: 30px">
<tr style="height: 15px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:90px 15px;"></td>
<td></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:30px 15px;"></td>
</tr>
<tr style="height: 165px">
<td></td>
<td style="background: white"></td>
<td></td>
</tr>
<tr style="height: 60px">
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:90px 60px;"></td>
<td></td>
<td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:30px 60px;"></td>
</tr>
</table>
</body>
</html>

18
layout/reftests/border-image/border-image-repeating-radial-gradient-width.html Normal file
Просмотреть файл

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: radial-gradient with border-image-width</title>
<style>
div.border {
border: 30px solid black;
border-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%);
border-image-width: 0.5 1 2 3;
width: 180px;
height: 180px;
}
</style>
</head>
<body>
<div class="border"></div>
</body>
</html>

17
layout/reftests/border-image/border-image-repeating-radial-gradient.html Normal file
Просмотреть файл

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of border-image-source: radial-gradient</title>
<style>
div.border {
border: 30px solid black;
border-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%);
width: 180px;
height: 180px;
}
</style>
</head>
<body>
<div class="border"></div>
</body>
</html>

39
layout/reftests/border-image/reftest.list
Просмотреть файл

@ -38,3 +38,42 @@
== border-image-style-none.html border-image-style-none-ref.html
== border-image-style-none-length.html border-image-style-none-length-ref.html
== border-image-style-none-auto.html border-image-style-none-auto-ref.html
# border images with gradients
== border-image-linear-gradient.html border-image-linear-gradient-ref.html
fuzzy(1,98) == border-image-linear-gradient-slice-1.html border-image-linear-gradient-slice-1-ref.html
fuzzy(1,149) fuzzy-if(OSX,1,10595) == border-image-linear-gradient-slice-2.html border-image-linear-gradient-slice-2-ref.html
fuzzy(1,433) == border-image-linear-gradient-slice-fill-1.html border-image-linear-gradient-slice-fill-1-ref.html
fuzzy(1,177) fuzzy-if(OSX,1,25771) == border-image-linear-gradient-slice-fill-2.html border-image-linear-gradient-slice-fill-2-ref.html
fuzzy(1,48) fuzzy-if(OSX,5,1676) == border-image-linear-gradient-width.html border-image-linear-gradient-width-ref.html
fuzzy(1,5000) fuzzy-if(OSX,1,15000) == border-image-linear-gradient-slice-width.html border-image-linear-gradient-slice-width-ref.html
fuzzy(1,3000) fuzzy-if(OSX,1,6000) == border-image-linear-gradient-outset.html border-image-linear-gradient-outset-ref.html
fuzzy(1,12) == border-image-linear-gradient-repeat-repeat-1.html border-image-linear-gradient-repeat-repeat-1-ref.html
fuzzy(1,13) == border-image-linear-gradient-repeat-round-1.html border-image-linear-gradient-repeat-round-1-ref.html
== border-image-linear-gradient-repeat-repeat-2.html border-image-linear-gradient-repeat-repeat-2-ref.html
fuzzy(1,576) == border-image-linear-gradient-repeat-round-2.html border-image-linear-gradient-repeat-round-2-ref.html
fuzzy(1,6440) == border-image-linear-gradient-repeat-repeat-3.html border-image-linear-gradient-repeat-repeat-3-ref.html
fuzzy(1,7161) == border-image-linear-gradient-repeat-round-3.html border-image-linear-gradient-repeat-round-3-ref.html
== border-image-radial-gradient.html border-image-radial-gradient-ref.html
fuzzy(1,42) == border-image-radial-gradient-slice-1.html border-image-radial-gradient-slice-1-ref.html
fuzzy(1,46) fuzzy-if(OSX,2,4472) == border-image-radial-gradient-slice-2.html border-image-radial-gradient-slice-2-ref.html
fuzzy(1,105) == border-image-radial-gradient-slice-fill-1.html border-image-radial-gradient-slice-fill-1-ref.html
fuzzy(1,139) fuzzy-if(OSX,2,4478) == border-image-radial-gradient-slice-fill-2.html border-image-radial-gradient-slice-fill-2-ref.html
== border-image-radial-gradient-width.html border-image-radial-gradient-width-ref.html
fuzzy(1,9000) == border-image-radial-gradient-slice-width.html border-image-radial-gradient-slice-width-ref.html
# OS X failures tracked in bug 957025
fails-if(OSX) == border-image-repeating-linear-gradient.html border-image-repeating-linear-gradient-ref.html
fuzzy(1,5608) fails-if(OSX) == border-image-repeating-linear-gradient-slice-fill-2.html border-image-repeating-linear-gradient-slice-fill-2-ref.html
fuzzy(1,19200) fails-if(OSX) == border-image-repeating-linear-gradient-repeat-round-2.html border-image-repeating-linear-gradient-repeat-round-2-ref.html
fuzzy(1,657) == border-image-repeating-radial-gradient.html border-image-repeating-radial-gradient-ref.html
fuzzy(1,510) fails-if(OSX) == border-image-repeating-radial-gradient-slice-1.html border-image-repeating-radial-gradient-slice-1-ref.html
fuzzy(1,437) fails-if(OSX) == border-image-repeating-radial-gradient-slice-2.html border-image-repeating-radial-gradient-slice-2-ref.html
fuzzy(1,1357) fails-if(OSX) == border-image-repeating-radial-gradient-slice-fill-1.html border-image-repeating-radial-gradient-slice-fill-1-ref.html
fuzzy(1,1058) fails-if(OSX) == border-image-repeating-radial-gradient-slice-fill-2.html border-image-repeating-radial-gradient-slice-fill-2-ref.html
fuzzy(1,602) fails-if(OSX) == border-image-repeating-radial-gradient-width.html border-image-repeating-radial-gradient-width-ref.html
fuzzy(3,18000) fails-if(OSX) == border-image-repeating-radial-gradient-slice-width.html border-image-repeating-radial-gradient-slice-width-ref.html
fails-if(OSX) == border-image-repeating-radial-gradient-repeat-repeat-2.html border-image-repeating-radial-gradient-repeat-repeat-2-ref.html
fuzzy(1,1054) fails-if(OSX) == border-image-repeating-radial-gradient-repeat-round-2.html border-image-repeating-radial-gradient-repeat-round-2-ref.html