diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
| commit | 36d22d82aa202bb199967e9512281e9a53db42c9 (patch) | |
| tree | 105e8c98ddea1c1e4784a60a5a6410fa416be2de /layout/reftests/border-image | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-upstream.tar.xz firefox-esr-upstream.zip | |
Adding upstream version 115.7.0esr.upstream/115.7.0esrupstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/border-image')
172 files changed, 6697 insertions, 0 deletions
diff --git a/layout/reftests/border-image/10x5multicolor.png b/layout/reftests/border-image/10x5multicolor.png Binary files differnew file mode 100644 index 0000000000..7940d1abc7 --- /dev/null +++ b/layout/reftests/border-image/10x5multicolor.png diff --git a/layout/reftests/border-image/3x3green-1DD813.png b/layout/reftests/border-image/3x3green-1DD813.png Binary files differnew file mode 100644 index 0000000000..bb7a3cf21f --- /dev/null +++ b/layout/reftests/border-image/3x3green-1DD813.png diff --git a/layout/reftests/border-image/3x3multicolor.png b/layout/reftests/border-image/3x3multicolor.png Binary files differnew file mode 100644 index 0000000000..586102670a --- /dev/null +++ b/layout/reftests/border-image/3x3multicolor.png diff --git a/layout/reftests/border-image/3x3transparent.png b/layout/reftests/border-image/3x3transparent.png Binary files differnew file mode 100644 index 0000000000..6528a9f036 --- /dev/null +++ b/layout/reftests/border-image/3x3transparent.png diff --git a/layout/reftests/border-image/470250-1-ref.html b/layout/reftests/border-image/470250-1-ref.html new file mode 100644 index 0000000000..bf1cffcb0d --- /dev/null +++ b/layout/reftests/border-image/470250-1-ref.html @@ -0,0 +1,6 @@ +<!doctype html> +<html><head> +<title>border-image, only middle part, reference</title> +</head><body> +<img src="3x3green-1DD813.png" width="48" height="48"> +</body></html> diff --git a/layout/reftests/border-image/470250-1.html b/layout/reftests/border-image/470250-1.html new file mode 100644 index 0000000000..32c2eb0431 --- /dev/null +++ b/layout/reftests/border-image/470250-1.html @@ -0,0 +1,15 @@ +<!doctype html> +<html><head> +<title>border-image, only middle part, testcase</title> +<style> +div { + width: 48px; + height: 48px; + border-width: 0; + border-style: solid; + border-image: url(3x3green-1DD813.png) 0 fill; +} +</style> +</head><body> +<div></div> +</body></html> diff --git a/layout/reftests/border-image/470250-2-ref.html b/layout/reftests/border-image/470250-2-ref.html new file mode 100644 index 0000000000..df01ba3366 --- /dev/null +++ b/layout/reftests/border-image/470250-2-ref.html @@ -0,0 +1,6 @@ +<!doctype html> +<html><head> +<title>border-image, only middle part, table cell, reference</title> +</head><body> +<img src="3x3green-1DD813.png" width="48" height="48"> +</body></html> diff --git a/layout/reftests/border-image/470250-2.html b/layout/reftests/border-image/470250-2.html new file mode 100644 index 0000000000..962caff73f --- /dev/null +++ b/layout/reftests/border-image/470250-2.html @@ -0,0 +1,28 @@ +<!doctype html> +<html class="reftest-wait"><head> +<title>border-image, only middle part, table cell, testcase</title> +<style> +table { + width: 48px; + height: 48px; + border-collapse: separate; + border-width: 0; + border-style: solid; + border-image: url(3x3green-1DD813.png) 0 fill; +} +</style> +</head><body> +<iframe src="3x3green-1DD813.png" width="48" height="48"></iframe> +<table> +</table> +<script> + // This is a wallpaper for bug 688897 until bug 697230 is fixed. + // MozReftestInvalidate is called after onload of all frames so it + // delays the snapshot until the used border image is loaded. + window.addEventListener("MozReftestInvalidate", + function() { + document.getElementsByTagName("iframe")[0].style.display = "none"; + document.documentElement.className = ""; + }); +</script> +</body></html> diff --git a/layout/reftests/border-image/4x4multicolor.png b/layout/reftests/border-image/4x4multicolor.png Binary files differnew file mode 100644 index 0000000000..4b817a1264 --- /dev/null +++ b/layout/reftests/border-image/4x4multicolor.png diff --git a/layout/reftests/border-image/border-image-element-ref.html b/layout/reftests/border-image/border-image-element-ref.html new file mode 100644 index 0000000000..865d706d1e --- /dev/null +++ b/layout/reftests/border-image/border-image-element-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> +<title>test of border-image-source: element</title> +<style> +div.border { + border: 30px solid black; + border-image: url('diamonds.png'); + width: 180px; + height: 180px; +} +div.border2 { + border: 30px solid black; + border-image: url('diamonds.png'); + border-image-slice: 5; + width: 180px; + height: 180px; +} +</style> +</head> +<body> +<div class="border"></div><br> +<div class="border2"></div><br> +<img id="src" src="diamonds.png"> +</body> +</html> diff --git a/layout/reftests/border-image/border-image-element.html b/layout/reftests/border-image/border-image-element.html new file mode 100644 index 0000000000..c9c0429700 --- /dev/null +++ b/layout/reftests/border-image/border-image-element.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> +<title>test of border-image-source: element</title> +<style> +div.border { + border: 30px solid black; + border-image: -moz-element(#src); + width: 180px; + height: 180px; +} +div.border2 { + border: 30px solid black; + border-image: -moz-element(#src); + border-image-slice: 5; + width: 180px; + height: 180px; +} +</style> +</head> +<body> +<div class="border"></div><br> +<div class="border2"></div><br> +<img id="src" src="diamonds.png"> +</body> +</html> diff --git a/layout/reftests/border-image/border-image-linear-gradient-outset-ref.html b/layout/reftests/border-image/border-image-linear-gradient-outset-ref.html new file mode 100644 index 0000000000..8156698c1c --- /dev/null +++ b/layout/reftests/border-image/border-image-linear-gradient-outset-ref.html @@ -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> diff --git a/layout/reftests/border-image/border-image-linear-gradient-outset.html b/layout/reftests/border-image/border-image-linear-gradient-outset.html new file mode 100644 index 0000000000..b21379f4e6 --- /dev/null +++ b/layout/reftests/border-image/border-image-linear-gradient-outset.html @@ -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> diff --git a/layout/reftests/border-image/border-image-linear-gradient-ref.html b/layout/reftests/border-image/border-image-linear-gradient-ref.html new file mode 100644 index 0000000000..cfe4252bd4 --- /dev/null +++ b/layout/reftests/border-image/border-image-linear-gradient-ref.html @@ -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> diff --git a/layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-1-ref.html b/layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-1-ref.html new file mode 100644 index 0000000000..905d757e73 --- /dev/null +++ b/layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-1-ref.html @@ -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> diff --git a/layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-1.html b/layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-1.html new file mode 100644 index 0000000000..339a1fd3bf --- /dev/null +++ b/layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-1.html @@ -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> diff --git a/layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-2-ref.html b/layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-2-ref.html new file mode 100644 index 0000000000..e9fd188268 --- /dev/null +++ b/layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-2-ref.html @@ -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> diff --git a/layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-2.html b/layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-2.html new file mode 100644 index 0000000000..ee57589671 --- /dev/null +++ b/layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-2.html @@ -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> diff --git a/layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-3-ref.html b/layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-3-ref.html new file mode 100644 index 0000000000..8c9b7af812 --- /dev/null +++ b/layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-3-ref.html @@ -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> diff --git a/layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-3.html b/layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-3.html new file mode 100644 index 0000000000..d40b746420 --- /dev/null +++ b/layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-3.html @@ -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> diff --git a/layout/reftests/border-image/border-image-linear-gradient-repeat-round-1-ref.html b/layout/reftests/border-image/border-image-linear-gradient-repeat-round-1-ref.html new file mode 100644 index 0000000000..64075ff2a7 --- /dev/null +++ b/layout/reftests/border-image/border-image-linear-gradient-repeat-round-1-ref.html @@ -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> diff --git a/layout/reftests/border-image/border-image-linear-gradient-repeat-round-1.html b/layout/reftests/border-image/border-image-linear-gradient-repeat-round-1.html new file mode 100644 index 0000000000..a170eae792 --- /dev/null +++ b/layout/reftests/border-image/border-image-linear-gradient-repeat-round-1.html @@ -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> diff --git a/layout/reftests/border-image/border-image-linear-gradient-repeat-round-2-ref.html b/layout/reftests/border-image/border-image-linear-gradient-repeat-round-2-ref.html new file mode 100644 index 0000000000..b4eb129e0a --- /dev/null +++ b/layout/reftests/border-image/border-image-linear-gradient-repeat-round-2-ref.html @@ -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> diff --git a/layout/reftests/border-image/border-image-linear-gradient-repeat-round-2.html b/layout/reftests/border-image/border-image-linear-gradient-repeat-round-2.html new file mode 100644 index 0000000000..562c3db211 --- /dev/null +++ b/layout/reftests/border-image/border-image-linear-gradient-repeat-round-2.html @@ -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> diff --git a/layout/reftests/border-image/border-image-linear-gradient-repeat-round-3-ref.html b/layout/reftests/border-image/border-image-linear-gradient-repeat-round-3-ref.html new file mode 100644 index 0000000000..021e31026c --- /dev/null +++ b/layout/reftests/border-image/border-image-linear-gradient-repeat-round-3-ref.html @@ -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> diff --git a/layout/reftests/border-image/border-image-linear-gradient-repeat-round-3.html b/layout/reftests/border-image/border-image-linear-gradient-repeat-round-3.html new file mode 100644 index 0000000000..925b34f095 --- /dev/null +++ b/layout/reftests/border-image/border-image-linear-gradient-repeat-round-3.html @@ -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> diff --git a/layout/reftests/border-image/border-image-linear-gradient-slice-1-ref.html b/layout/reftests/border-image/border-image-linear-gradient-slice-1-ref.html new file mode 100644 index 0000000000..a87e62a30d --- /dev/null +++ b/layout/reftests/border-image/border-image-linear-gradient-slice-1-ref.html @@ -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> diff --git a/layout/reftests/border-image/border-image-linear-gradient-slice-1.html b/layout/reftests/border-image/border-image-linear-gradient-slice-1.html new file mode 100644 index 0000000000..8940ea057e --- /dev/null +++ b/layout/reftests/border-image/border-image-linear-gradient-slice-1.html @@ -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> diff --git a/layout/reftests/border-image/border-image-linear-gradient-slice-2-ref.html b/layout/reftests/border-image/border-image-linear-gradient-slice-2-ref.html new file mode 100644 index 0000000000..de7874d17f --- /dev/null +++ b/layout/reftests/border-image/border-image-linear-gradient-slice-2-ref.html @@ -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> diff --git a/layout/reftests/border-image/border-image-linear-gradient-slice-2.html b/layout/reftests/border-image/border-image-linear-gradient-slice-2.html new file mode 100644 index 0000000000..601e0e3247 --- /dev/null +++ b/layout/reftests/border-image/border-image-linear-gradient-slice-2.html @@ -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> diff --git a/layout/reftests/border-image/border-image-linear-gradient-slice-fill-1-ref.html b/layout/reftests/border-image/border-image-linear-gradient-slice-fill-1-ref.html new file mode 100644 index 0000000000..1ab89e535d --- /dev/null +++ b/layout/reftests/border-image/border-image-linear-gradient-slice-fill-1-ref.html @@ -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> diff --git a/layout/reftests/border-image/border-image-linear-gradient-slice-fill-1.html b/layout/reftests/border-image/border-image-linear-gradient-slice-fill-1.html new file mode 100644 index 0000000000..7ace7074c3 --- /dev/null +++ b/layout/reftests/border-image/border-image-linear-gradient-slice-fill-1.html @@ -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> diff --git a/layout/reftests/border-image/border-image-linear-gradient-slice-fill-2-ref.html b/layout/reftests/border-image/border-image-linear-gradient-slice-fill-2-ref.html new file mode 100644 index 0000000000..fbbf8d6df6 --- /dev/null +++ b/layout/reftests/border-image/border-image-linear-gradient-slice-fill-2-ref.html @@ -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> diff --git a/layout/reftests/border-image/border-image-linear-gradient-slice-fill-2.html b/layout/reftests/border-image/border-image-linear-gradient-slice-fill-2.html new file mode 100644 index 0000000000..e97e5e1461 --- /dev/null +++ b/layout/reftests/border-image/border-image-linear-gradient-slice-fill-2.html @@ -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> diff --git a/layout/reftests/border-image/border-image-linear-gradient-slice-width-ref.html b/layout/reftests/border-image/border-image-linear-gradient-slice-width-ref.html new file mode 100644 index 0000000000..db4a91385f --- /dev/null +++ b/layout/reftests/border-image/border-image-linear-gradient-slice-width-ref.html @@ -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> diff --git a/layout/reftests/border-image/border-image-linear-gradient-slice-width.html b/layout/reftests/border-image/border-image-linear-gradient-slice-width.html new file mode 100644 index 0000000000..266e6a1050 --- /dev/null +++ b/layout/reftests/border-image/border-image-linear-gradient-slice-width.html @@ -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> diff --git a/layout/reftests/border-image/border-image-linear-gradient-width-ref.html b/layout/reftests/border-image/border-image-linear-gradient-width-ref.html new file mode 100644 index 0000000000..dfa38d967b --- /dev/null +++ b/layout/reftests/border-image/border-image-linear-gradient-width-ref.html @@ -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> diff --git a/layout/reftests/border-image/border-image-linear-gradient-width.html b/layout/reftests/border-image/border-image-linear-gradient-width.html new file mode 100644 index 0000000000..8be90efaae --- /dev/null +++ b/layout/reftests/border-image/border-image-linear-gradient-width.html @@ -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> diff --git a/layout/reftests/border-image/border-image-linear-gradient.html b/layout/reftests/border-image/border-image-linear-gradient.html new file mode 100644 index 0000000000..eb081e1864 --- /dev/null +++ b/layout/reftests/border-image/border-image-linear-gradient.html @@ -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> diff --git a/layout/reftests/border-image/border-image-nofill-1-ref.html b/layout/reftests/border-image/border-image-nofill-1-ref.html new file mode 100644 index 0000000000..61608e3276 --- /dev/null +++ b/layout/reftests/border-image/border-image-nofill-1-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>border-image-slice without fill reference</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; } + td { padding: 0; } + + </style> +</head> +<body> +<table> + <col style="width: 7px"> + <col style="width: 100px"> + <col style="width: 7px"> + + <tr style="height: 7px"> + <td style="background: #87f0b4"></td> + <td style="background: #4a298e"></td> + <td style="background: #c98bb7"></td> + </tr> + <tr style="height: 5px"> + <td style="background: #90a213"></td> + <td></td> + <td style="background: #90c157"></td> + </tr> + <tr style="height: 7px"> + <td style="background: #9d57c1"></td> + <td style="background: #3a8e20"></td> + <td style="background: #0e6f6c"></td> + </tr> +</table> +</body> +</html> diff --git a/layout/reftests/border-image/border-image-nofill-1.html b/layout/reftests/border-image/border-image-nofill-1.html new file mode 100644 index 0000000000..0184adff03 --- /dev/null +++ b/layout/reftests/border-image/border-image-nofill-1.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>test of border-image-slice without fill</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + div { + border-width: 7px; + border-style: solid; + border-image: url('3x3multicolor.png') 1 1 1 1; + } + + </style> +</head> +<body> +<div style="width: 100px; height: 5px"></div> +</body> +</html> diff --git a/layout/reftests/border-image/border-image-outset-1-ref.html b/layout/reftests/border-image/border-image-outset-1-ref.html new file mode 100644 index 0000000000..586fe96209 --- /dev/null +++ b/layout/reftests/border-image/border-image-outset-1-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>border-image-outset: 1em reference</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> +</head> +<body> +<div style="border: solid #1DD813 1em; margin: 1em;"> +<div style="padding: 1em;"> +border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line +</div> +</div> +</body> +</html> diff --git a/layout/reftests/border-image/border-image-outset-1a.html b/layout/reftests/border-image/border-image-outset-1a.html new file mode 100644 index 0000000000..51e7e7f50b --- /dev/null +++ b/layout/reftests/border-image/border-image-outset-1a.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>-moz-border-outset-width: 1em</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + div { + margin: 2em; + border-width: 1em; + border-style: solid; + border-image: url('3x3green-1DD813.png') 1 1 1 1 / / 1em; + } + </style> +</head> +<body> +<div> +border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line +</div> +</body> +</html> diff --git a/layout/reftests/border-image/border-image-outset-1b.html b/layout/reftests/border-image/border-image-outset-1b.html new file mode 100644 index 0000000000..9a84c37771 --- /dev/null +++ b/layout/reftests/border-image/border-image-outset-1b.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>-moz-border-outset-width: 1em</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + div { + margin: 2em; + border-width: 1em; + border-style: solid; + border-image: url('3x3green-1DD813.png') 1 1 1 1; + border-image-outset: 1em; + } + </style> +</head> +<body> +<div> +border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line +</div> +</body> +</html> diff --git a/layout/reftests/border-image/border-image-outset-1c.html b/layout/reftests/border-image/border-image-outset-1c.html new file mode 100644 index 0000000000..e431d6eb74 --- /dev/null +++ b/layout/reftests/border-image/border-image-outset-1c.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>-moz-border-outset-width: 1em</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + div { + margin: 2em; + border-width: 1em; + border-style: solid; + border-image: 1 1 1 1 / / 1em url('3x3green-1DD813.png'); + } + </style> +</head> +<body> +<div> +border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line +</div> +</body> +</html> diff --git a/layout/reftests/border-image/border-image-outset-move-1-ref.html b/layout/reftests/border-image/border-image-outset-move-1-ref.html new file mode 100644 index 0000000000..7cc063f122 --- /dev/null +++ b/layout/reftests/border-image/border-image-outset-move-1-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>border-image-outset move reference</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> +</head> +<body> +<div style="width: 100px; border: solid #1DD813 10px; margin: 10px;"> +<div style="padding: 10px;"> +Hello World! +</div> +</div> +</body> +</html> diff --git a/layout/reftests/border-image/border-image-outset-move-1.html b/layout/reftests/border-image/border-image-outset-move-1.html new file mode 100644 index 0000000000..0c8ade8075 --- /dev/null +++ b/layout/reftests/border-image/border-image-outset-move-1.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html class="reftest-wait" lang="en-US"> +<head> + <title>-moz-border-outset move</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + div { + margin: 20px; + border-width: 10px; + border-style: solid; + border-image: url('3x3green-1DD813.png') 1 1 1 1; + border-image-outset: 10px; + } + </style> +</head> +<body> +<div id="container" style="width: 80px; margin-left: 60px;"> +Hello World! +</div> +<script type="text/javascript"> +// The purpose of this test is to move the border and ensure that the +// overflow area caused by border-image-outset is redrawn. +setTimeout(function() { + document.getElementById("container").style.marginLeft = "20px"; + document.documentElement.className = ""; + }, 100); +</script> +</body> +</html> diff --git a/layout/reftests/border-image/border-image-outset-resize-1-ref.html b/layout/reftests/border-image/border-image-outset-resize-1-ref.html new file mode 100644 index 0000000000..1c310c023d --- /dev/null +++ b/layout/reftests/border-image/border-image-outset-resize-1-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>border-image-outset resize reference</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> +</head> +<body> +<div style="width: 100px; border: solid #1DD813 10px; margin: 10px;"> +<div style="padding: 10px;"> +Hello World! +</div> +</div> +</body> +</html> diff --git a/layout/reftests/border-image/border-image-outset-resize-1.html b/layout/reftests/border-image/border-image-outset-resize-1.html new file mode 100644 index 0000000000..284b0d01d1 --- /dev/null +++ b/layout/reftests/border-image/border-image-outset-resize-1.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html class="reftest-wait" lang="en-US"> +<head> + <title>-moz-border-outset resize</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + div { + margin: 20px; + border-width: 10px; + border-style: solid; + border-image: url('3x3green-1DD813.png') 1 1 1 1; + border-image-outset: 10px; + } + </style> +</head> +<body> +<div id="container" style="width: 180px;"> +Hello World! +</div> +<script type="text/javascript"> +// The purpose of this test is to resize the border and ensure that the +// overflow area caused by border-image-outset is redrawn. +setTimeout(function() { + document.getElementById("container").style.width = "80px"; + document.documentElement.className = ""; + }, 100); +</script> +</body> +</html> diff --git a/layout/reftests/border-image/border-image-radial-gradient-ref.html b/layout/reftests/border-image/border-image-radial-gradient-ref.html new file mode 100644 index 0000000000..b36074fba4 --- /dev/null +++ b/layout/reftests/border-image/border-image-radial-gradient-ref.html @@ -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> diff --git a/layout/reftests/border-image/border-image-radial-gradient-slice-1-ref.html b/layout/reftests/border-image/border-image-radial-gradient-slice-1-ref.html new file mode 100644 index 0000000000..64029d6647 --- /dev/null +++ b/layout/reftests/border-image/border-image-radial-gradient-slice-1-ref.html @@ -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> diff --git a/layout/reftests/border-image/border-image-radial-gradient-slice-1.html b/layout/reftests/border-image/border-image-radial-gradient-slice-1.html new file mode 100644 index 0000000000..88f60e8d32 --- /dev/null +++ b/layout/reftests/border-image/border-image-radial-gradient-slice-1.html @@ -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> diff --git a/layout/reftests/border-image/border-image-radial-gradient-slice-2-ref.html b/layout/reftests/border-image/border-image-radial-gradient-slice-2-ref.html new file mode 100644 index 0000000000..720221b502 --- /dev/null +++ b/layout/reftests/border-image/border-image-radial-gradient-slice-2-ref.html @@ -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> diff --git a/layout/reftests/border-image/border-image-radial-gradient-slice-2.html b/layout/reftests/border-image/border-image-radial-gradient-slice-2.html new file mode 100644 index 0000000000..952cd10de0 --- /dev/null +++ b/layout/reftests/border-image/border-image-radial-gradient-slice-2.html @@ -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> diff --git a/layout/reftests/border-image/border-image-radial-gradient-slice-fill-1-ref.html b/layout/reftests/border-image/border-image-radial-gradient-slice-fill-1-ref.html new file mode 100644 index 0000000000..59068a8cd1 --- /dev/null +++ b/layout/reftests/border-image/border-image-radial-gradient-slice-fill-1-ref.html @@ -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> diff --git a/layout/reftests/border-image/border-image-radial-gradient-slice-fill-1.html b/layout/reftests/border-image/border-image-radial-gradient-slice-fill-1.html new file mode 100644 index 0000000000..8a0a42c016 --- /dev/null +++ b/layout/reftests/border-image/border-image-radial-gradient-slice-fill-1.html @@ -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> diff --git a/layout/reftests/border-image/border-image-radial-gradient-slice-fill-2-ref.html b/layout/reftests/border-image/border-image-radial-gradient-slice-fill-2-ref.html new file mode 100644 index 0000000000..aaff661e73 --- /dev/null +++ b/layout/reftests/border-image/border-image-radial-gradient-slice-fill-2-ref.html @@ -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> diff --git a/layout/reftests/border-image/border-image-radial-gradient-slice-fill-2.html b/layout/reftests/border-image/border-image-radial-gradient-slice-fill-2.html new file mode 100644 index 0000000000..65461db8a9 --- /dev/null +++ b/layout/reftests/border-image/border-image-radial-gradient-slice-fill-2.html @@ -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> diff --git a/layout/reftests/border-image/border-image-radial-gradient-slice-width-ref.html b/layout/reftests/border-image/border-image-radial-gradient-slice-width-ref.html new file mode 100644 index 0000000000..d59e19f42c --- /dev/null +++ b/layout/reftests/border-image/border-image-radial-gradient-slice-width-ref.html @@ -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> diff --git a/layout/reftests/border-image/border-image-radial-gradient-slice-width.html b/layout/reftests/border-image/border-image-radial-gradient-slice-width.html new file mode 100644 index 0000000000..91803a6271 --- /dev/null +++ b/layout/reftests/border-image/border-image-radial-gradient-slice-width.html @@ -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> diff --git a/layout/reftests/border-image/border-image-radial-gradient-width-ref.html b/layout/reftests/border-image/border-image-radial-gradient-width-ref.html new file mode 100644 index 0000000000..9c8e6e3352 --- /dev/null +++ b/layout/reftests/border-image/border-image-radial-gradient-width-ref.html @@ -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> diff --git a/layout/reftests/border-image/border-image-radial-gradient-width.html b/layout/reftests/border-image/border-image-radial-gradient-width.html new file mode 100644 index 0000000000..298211cb69 --- /dev/null +++ b/layout/reftests/border-image/border-image-radial-gradient-width.html @@ -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> diff --git a/layout/reftests/border-image/border-image-radial-gradient.html b/layout/reftests/border-image/border-image-radial-gradient.html new file mode 100644 index 0000000000..8a93acedd0 --- /dev/null +++ b/layout/reftests/border-image/border-image-radial-gradient.html @@ -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> diff --git a/layout/reftests/border-image/border-image-repeat-space-8z-ref.html b/layout/reftests/border-image/border-image-repeat-space-8z-ref.html new file mode 100644 index 0000000000..9eacbb0527 --- /dev/null +++ b/layout/reftests/border-image/border-image-repeat-space-8z-ref.html @@ -0,0 +1,22 @@ +<!doctype html> +<html reftest-zoom="0.6"> +<title>Reference: border-image-repeat:space with non-initial border-image-width</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + +<style> + div { + border: 27px solid transparent; + border-image: url("border.png") 27 space; + border-image-width: 1; + } +</style> + +<div style="width: 505px; height: 50px"></div> +<div style="width: 475px; height: 0px"></div> +<div style="width: 475px; height: 1px"></div> +<div style="width: 26px; height: 26px"></div> +<div style="width: 53px; height: 53px"></div> +<div style="width: 55px; height: 55px"></div> +<div style="width: 505px; height: 50px; writing-mode: vertical-rl"></div> + +</html> diff --git a/layout/reftests/border-image/border-image-repeat-space-8z.html b/layout/reftests/border-image/border-image-repeat-space-8z.html new file mode 100644 index 0000000000..82dbb30235 --- /dev/null +++ b/layout/reftests/border-image/border-image-repeat-space-8z.html @@ -0,0 +1,27 @@ +<!doctype html> +<html reftest-zoom="0.6"> +<title>CSS Border Image: border-image-repeat:space with non-initial border-image-width</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://www.w3.org/TR/css3-background/#the-border-image-repeat"> +<link rel="match" href="border-image-repeat-space-8z-ref.html"> +<meta name="assert" content="An explicit 'border-image-width' which is exactly the same size as 'border-width' should render the same as 'border-image-width:1' (the initial value)."> + +<!-- NOTE: this is a copy of /css/css-backgrounds/border-image-repeat-space-8.html with an added "reftest-zoom" --> + +<style> + div { + border: 27px solid; + border-image: url("border.png") 27 space; + border-image-width: 27px; + } +</style> + +<div style="width: 505px; height: 50px"></div> +<div style="width: 475px; height: 0px"></div> +<div style="width: 475px; height: 1px"></div> +<div style="width: 26px; height: 26px"></div> +<div style="width: 53px; height: 53px"></div> +<div style="width: 55px; height: 55px"></div> +<div style="width: 505px; height: 50px; writing-mode: vertical-rl"></div> + +</html> diff --git a/layout/reftests/border-image/border-image-repeating-linear-gradient-ref.html b/layout/reftests/border-image/border-image-repeating-linear-gradient-ref.html new file mode 100644 index 0000000000..1edafefe6d --- /dev/null +++ b/layout/reftests/border-image/border-image-repeating-linear-gradient-ref.html @@ -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> diff --git a/layout/reftests/border-image/border-image-repeating-linear-gradient-repeat-round-2-ref.html b/layout/reftests/border-image/border-image-repeating-linear-gradient-repeat-round-2-ref.html new file mode 100644 index 0000000000..48fcf7e10a --- /dev/null +++ b/layout/reftests/border-image/border-image-repeating-linear-gradient-repeat-round-2-ref.html @@ -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> diff --git a/layout/reftests/border-image/border-image-repeating-linear-gradient-repeat-round-2.html b/layout/reftests/border-image/border-image-repeating-linear-gradient-repeat-round-2.html new file mode 100644 index 0000000000..dfac15059e --- /dev/null +++ b/layout/reftests/border-image/border-image-repeating-linear-gradient-repeat-round-2.html @@ -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> diff --git a/layout/reftests/border-image/border-image-repeating-linear-gradient-slice-fill-2-ref.html b/layout/reftests/border-image/border-image-repeating-linear-gradient-slice-fill-2-ref.html new file mode 100644 index 0000000000..7735c44115 --- /dev/null +++ b/layout/reftests/border-image/border-image-repeating-linear-gradient-slice-fill-2-ref.html @@ -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> diff --git a/layout/reftests/border-image/border-image-repeating-linear-gradient-slice-fill-2.html b/layout/reftests/border-image/border-image-repeating-linear-gradient-slice-fill-2.html new file mode 100644 index 0000000000..b3d4791064 --- /dev/null +++ b/layout/reftests/border-image/border-image-repeating-linear-gradient-slice-fill-2.html @@ -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> diff --git a/layout/reftests/border-image/border-image-repeating-linear-gradient.html b/layout/reftests/border-image/border-image-repeating-linear-gradient.html new file mode 100644 index 0000000000..5c4d073f02 --- /dev/null +++ b/layout/reftests/border-image/border-image-repeating-linear-gradient.html @@ -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> diff --git a/layout/reftests/border-image/border-image-repeating-radial-gradient-ref.html b/layout/reftests/border-image/border-image-repeating-radial-gradient-ref.html new file mode 100644 index 0000000000..eb4c61480b --- /dev/null +++ b/layout/reftests/border-image/border-image-repeating-radial-gradient-ref.html @@ -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> diff --git a/layout/reftests/border-image/border-image-repeating-radial-gradient-repeat-repeat-2-ref.html b/layout/reftests/border-image/border-image-repeating-radial-gradient-repeat-repeat-2-ref.html new file mode 100644 index 0000000000..8ddeffa628 --- /dev/null +++ b/layout/reftests/border-image/border-image-repeating-radial-gradient-repeat-repeat-2-ref.html @@ -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> diff --git a/layout/reftests/border-image/border-image-repeating-radial-gradient-repeat-repeat-2.html b/layout/reftests/border-image/border-image-repeating-radial-gradient-repeat-repeat-2.html new file mode 100644 index 0000000000..249679b220 --- /dev/null +++ b/layout/reftests/border-image/border-image-repeating-radial-gradient-repeat-repeat-2.html @@ -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> diff --git a/layout/reftests/border-image/border-image-repeating-radial-gradient-repeat-round-2-ref.html b/layout/reftests/border-image/border-image-repeating-radial-gradient-repeat-round-2-ref.html new file mode 100644 index 0000000000..f66c2b87c1 --- /dev/null +++ b/layout/reftests/border-image/border-image-repeating-radial-gradient-repeat-round-2-ref.html @@ -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> diff --git a/layout/reftests/border-image/border-image-repeating-radial-gradient-repeat-round-2.html b/layout/reftests/border-image/border-image-repeating-radial-gradient-repeat-round-2.html new file mode 100644 index 0000000000..3305416cee --- /dev/null +++ b/layout/reftests/border-image/border-image-repeating-radial-gradient-repeat-round-2.html @@ -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> diff --git a/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-1-ref.html b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-1-ref.html new file mode 100644 index 0000000000..6c64ba43ce --- /dev/null +++ b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-1-ref.html @@ -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> diff --git a/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-1.html b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-1.html new file mode 100644 index 0000000000..e82c3aa6f4 --- /dev/null +++ b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-1.html @@ -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> diff --git a/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-2-ref.html b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-2-ref.html new file mode 100644 index 0000000000..c38efac8b9 --- /dev/null +++ b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-2-ref.html @@ -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> diff --git a/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-2.html b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-2.html new file mode 100644 index 0000000000..e4d31c78b8 --- /dev/null +++ b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-2.html @@ -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> diff --git a/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-fill-1-ref.html b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-fill-1-ref.html new file mode 100644 index 0000000000..6d63b73000 --- /dev/null +++ b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-fill-1-ref.html @@ -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> diff --git a/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-fill-1.html b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-fill-1.html new file mode 100644 index 0000000000..76c396cb0d --- /dev/null +++ b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-fill-1.html @@ -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> diff --git a/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-fill-2-ref.html b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-fill-2-ref.html new file mode 100644 index 0000000000..26a4b30f93 --- /dev/null +++ b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-fill-2-ref.html @@ -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> diff --git a/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-fill-2.html b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-fill-2.html new file mode 100644 index 0000000000..ce707ea939 --- /dev/null +++ b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-fill-2.html @@ -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> diff --git a/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-width-ref.html b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-width-ref.html new file mode 100644 index 0000000000..308621c697 --- /dev/null +++ b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-width-ref.html @@ -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> diff --git a/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-width.html b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-width.html new file mode 100644 index 0000000000..508d95e298 --- /dev/null +++ b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-width.html @@ -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> diff --git a/layout/reftests/border-image/border-image-repeating-radial-gradient-width-ref.html b/layout/reftests/border-image/border-image-repeating-radial-gradient-width-ref.html new file mode 100644 index 0000000000..3b977f4541 --- /dev/null +++ b/layout/reftests/border-image/border-image-repeating-radial-gradient-width-ref.html @@ -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> diff --git a/layout/reftests/border-image/border-image-repeating-radial-gradient-width.html b/layout/reftests/border-image/border-image-repeating-radial-gradient-width.html new file mode 100644 index 0000000000..df766ffa5e --- /dev/null +++ b/layout/reftests/border-image/border-image-repeating-radial-gradient-width.html @@ -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> diff --git a/layout/reftests/border-image/border-image-repeating-radial-gradient.html b/layout/reftests/border-image/border-image-repeating-radial-gradient.html new file mode 100644 index 0000000000..6673000288 --- /dev/null +++ b/layout/reftests/border-image/border-image-repeating-radial-gradient.html @@ -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> diff --git a/layout/reftests/border-image/border-image-style-none-auto-ref.html b/layout/reftests/border-image/border-image-style-none-auto-ref.html new file mode 100644 index 0000000000..0404acf81c --- /dev/null +++ b/layout/reftests/border-image/border-image-style-none-auto-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>border-image-width: auto with border-bottom: none reference</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; } + td { padding: 0; } + + </style> +</head> +<body> +<table> + <col style="width: 1px"> + <col style="width: 112px"> <!-- 100px + 7px + 7px - 1px - 1px --> + <col style="width: 1px"> + + <tr style="height: 1px"> + <td style="background: #87f0b4"></td> + <td style="background: #4a298e"></td> + <td style="background: #c98bb7"></td> + </tr> + <tr style="height: 10px"> <!-- 5px + 7px - 1px - 1px --> + <td style="background: #90a213"></td> + <td></td> + <td style="background: #90c157"></td> + </tr> + <tr style="height: 1px"> + <td style="background: #9d57c1"></td> + <td style="background: #3a8e20"></td> + <td style="background: #0e6f6c"></td> + </tr> +</table> +</body> +</html> +<!DOCTYPE html> diff --git a/layout/reftests/border-image/border-image-style-none-auto.html b/layout/reftests/border-image/border-image-style-none-auto.html new file mode 100644 index 0000000000..d8e084faf7 --- /dev/null +++ b/layout/reftests/border-image/border-image-style-none-auto.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>test of border-image-width: auto with border-bottom: none</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + div { + border-width: 7px; + border-style: solid; + border-bottom: none; + border-image: url('3x3multicolor.png') 1 1 1 1 / auto; + } + + </style> +</head> +<body> +<div style="width: 100px; height: 5px"></div> +</body> +</html> diff --git a/layout/reftests/border-image/border-image-style-none-length-ref.html b/layout/reftests/border-image/border-image-style-none-length-ref.html new file mode 100644 index 0000000000..9ba599d324 --- /dev/null +++ b/layout/reftests/border-image/border-image-style-none-length-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>border-image-width: length with border-bottom: none reference</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; } + td { padding: 0; } + + </style> +</head> +<body> +<table> + <col style="width: 7px"> + <col style="width: 92px"> <!-- 100px + 3px + 3px - 7px - 7px --> + <col style="width: 7px"> + + <tr style="height: 7px"> + <td style="background: #87f0b4"></td> + <td style="background: #4a298e"></td> + <td style="background: #c98bb7"></td> + </tr> + <tr style="height: 9px"> <!-- 20px + 3px - 7px - 7px --> + <td style="background: #90a213"></td> + <td></td> + <td style="background: #90c157"></td> + </tr> + <tr style="height: 7px"> + <td style="background: #9d57c1"></td> + <td style="background: #3a8e20"></td> + <td style="background: #0e6f6c"></td> + </tr> +</table> +</body> +</html> diff --git a/layout/reftests/border-image/border-image-style-none-length.html b/layout/reftests/border-image/border-image-style-none-length.html new file mode 100644 index 0000000000..04e9659533 --- /dev/null +++ b/layout/reftests/border-image/border-image-style-none-length.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>test of border-image-width: length with border-bottom: none</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + div { + border-width: 3px; + border-style: solid; + border-bottom: none; + border-image: url('3x3multicolor.png') 1 1 1 1 / 7px; + } + + </style> +</head> +<body> +<div style="width: 100px; height: 20px"></div> +</body> +</html> diff --git a/layout/reftests/border-image/border-image-style-none-ref.html b/layout/reftests/border-image/border-image-style-none-ref.html new file mode 100644 index 0000000000..de366e3fd7 --- /dev/null +++ b/layout/reftests/border-image/border-image-style-none-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>border-image with border-bottom: none reference</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; } + td { padding: 0; } + + </style> +</head> +<body> +<table> + <col style="width: 7px"> + <col style="width: 100px"> + <col style="width: 7px"> + + <tr style="height: 7px"> + <td style="background: #87f0b4"></td> + <td style="background: #4a298e"></td> + <td style="background: #c98bb7"></td> + </tr> + <tr style="height: 5px"> + <td style="background: #90a213"></td> + <td></td> + <td style="background: #90c157"></td> + </tr> +</table> +</body> +</html> diff --git a/layout/reftests/border-image/border-image-style-none.html b/layout/reftests/border-image/border-image-style-none.html new file mode 100644 index 0000000000..3868579303 --- /dev/null +++ b/layout/reftests/border-image/border-image-style-none.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>test of border-image with border-bottom: none</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + div { + border-width: 7px; + border-style: solid; + border-bottom: none; + border-image: url('3x3multicolor.png') 1 1 1 1 / 1; + } + + </style> +</head> +<body> +<div style="width: 100px; height: 5px"></div> +</body> +</html> diff --git a/layout/reftests/border-image/border-image-width-1-ref.html b/layout/reftests/border-image/border-image-width-1-ref.html new file mode 100644 index 0000000000..8f0497446b --- /dev/null +++ b/layout/reftests/border-image/border-image-width-1-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>border-image-width: 1em reference</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> +</head> +<body> +<div style="border: solid #1DD813 2em"> +<div style="margin: -1em;"> +border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line +</div> +</div> +</body> +</html> diff --git a/layout/reftests/border-image/border-image-width-1a.html b/layout/reftests/border-image/border-image-width-1a.html new file mode 100644 index 0000000000..2c6c443de3 --- /dev/null +++ b/layout/reftests/border-image/border-image-width-1a.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>border-image-width: 2em</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + div { + border-width: 1em; + border-style: solid; + border-image: url('3x3green-1DD813.png') 1 1 1 1 / 2em; + } + </style> +</head> +<body> +<div> +border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line +</div> +</body> +</html> diff --git a/layout/reftests/border-image/border-image-width-1b.html b/layout/reftests/border-image/border-image-width-1b.html new file mode 100644 index 0000000000..d8f6431581 --- /dev/null +++ b/layout/reftests/border-image/border-image-width-1b.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>border-image-width: 2</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + div { + border-width: 1em; + border-style: solid; + border-image: url('3x3green-1DD813.png') 1 1 1 1 / 2; + } + </style> +</head> +<body> +<div> +border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line +</div> +</body> +</html> diff --git a/layout/reftests/border-image/border-image-width-1c.html b/layout/reftests/border-image/border-image-width-1c.html new file mode 100644 index 0000000000..321a3c6fdc --- /dev/null +++ b/layout/reftests/border-image/border-image-width-1c.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>border-image-width: 2</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + div { + border-width: 1em; + border-style: solid; + border-image: url('3x3green-1DD813.png') 1 1 1 1; + border-image-width: 2; + } + </style> +</head> +<body> +<div> +border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line +</div> +</body> +</html> diff --git a/layout/reftests/border-image/border-image-width-large-ref.html b/layout/reftests/border-image/border-image-width-large-ref.html new file mode 100644 index 0000000000..b7d8f5822d --- /dev/null +++ b/layout/reftests/border-image/border-image-width-large-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>border-image with equally large left and right border image width.</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; } + td { padding: 0; } + + </style> +</head> +<body> +<table> + <col style="width: 57px"> + <col style="width: 57px"> + <tr style="height: 24px"> + <td style="background: #90a213"></td> + <td style="background: #90c157"></td> + </tr> +</table> +</body> +</html> diff --git a/layout/reftests/border-image/border-image-width-large.html b/layout/reftests/border-image/border-image-width-large.html new file mode 100644 index 0000000000..481aa19486 --- /dev/null +++ b/layout/reftests/border-image/border-image-width-large.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>test of border-image with equally large left and right border image width.</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + div { + border-width: 7px; + border-style: solid; + border-image: url('3x3multicolor.png') 1 1 1 1 / 0 2000000000em 0 2000000000em; + } + </style> +</head> +<body> +<div style="width: 100px; height: 10px;"></div> +</body> +</html> diff --git a/layout/reftests/border-image/border.png b/layout/reftests/border-image/border.png Binary files differnew file mode 100644 index 0000000000..7a657391d6 --- /dev/null +++ b/layout/reftests/border-image/border.png diff --git a/layout/reftests/border-image/center-scaling-1-ref.html b/layout/reftests/border-image/center-scaling-1-ref.html new file mode 100644 index 0000000000..c3755d82db --- /dev/null +++ b/layout/reftests/border-image/center-scaling-1-ref.html @@ -0,0 +1,64 @@ +<!doctype html> +<style>div { line-height: 0 }</style> +<body +><div><img src="reticule-tl.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-tr.png" width="27" height="27"></div +><div><img src="reticule-le.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ri.png" width="27" height="27"></div +><div><img src="reticule-le.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ri.png" width="27" height="27"></div +><div><img src="reticule-le.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ri.png" width="27" height="27"></div +><div><img src="reticule-le.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ri.png" width="27" height="27"></div +><div><img src="reticule-bl.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-br.png" width="27" height="27"></div +></body> diff --git a/layout/reftests/border-image/center-scaling-1.html b/layout/reftests/border-image/center-scaling-1.html new file mode 100644 index 0000000000..7b1c2297a4 --- /dev/null +++ b/layout/reftests/border-image/center-scaling-1.html @@ -0,0 +1,11 @@ +<!doctype html> +<style> +div { + border-width: 27px; + border-style: solid; + border-image: url("reticule.png") 27 fill round; + width: 216px; + height: 108px; +} +</style> +<div></div> diff --git a/layout/reftests/border-image/center-scaling-2-ref.html b/layout/reftests/border-image/center-scaling-2-ref.html new file mode 100644 index 0000000000..3b253fa529 --- /dev/null +++ b/layout/reftests/border-image/center-scaling-2-ref.html @@ -0,0 +1,44 @@ +<!doctype html> +<style>div { line-height: 0 }</style> +<body +><div><img src="reticule-tl.png" width="54" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-tr.png" width="54" height="27"></div +><div><img src="reticule-le.png" width="54" height="54" + ><img src="reticule-ct.png" width="27" height="54" + ><img src="reticule-ct.png" width="27" height="54" + ><img src="reticule-ct.png" width="27" height="54" + ><img src="reticule-ct.png" width="27" height="54" + ><img src="reticule-ct.png" width="27" height="54" + ><img src="reticule-ct.png" width="27" height="54" + ><img src="reticule-ct.png" width="27" height="54" + ><img src="reticule-ct.png" width="27" height="54" + ><img src="reticule-ri.png" width="54" height="54"></div +><div><img src="reticule-le.png" width="54" height="54" + ><img src="reticule-ct.png" width="27" height="54" + ><img src="reticule-ct.png" width="27" height="54" + ><img src="reticule-ct.png" width="27" height="54" + ><img src="reticule-ct.png" width="27" height="54" + ><img src="reticule-ct.png" width="27" height="54" + ><img src="reticule-ct.png" width="27" height="54" + ><img src="reticule-ct.png" width="27" height="54" + ><img src="reticule-ct.png" width="27" height="54" + ><img src="reticule-ri.png" width="54" height="54"></div +><div><img src="reticule-bl.png" width="54" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-br.png" width="54" height="27"></div +></body> diff --git a/layout/reftests/border-image/center-scaling-2.html b/layout/reftests/border-image/center-scaling-2.html new file mode 100644 index 0000000000..d679e17d53 --- /dev/null +++ b/layout/reftests/border-image/center-scaling-2.html @@ -0,0 +1,11 @@ +<!doctype html> +<style> +div { + border-width: 27px 54px; + border-style: solid; + border-image: url("reticule.png") 27 fill round; + width: 216px; + height: 108px; +} +</style> +<div></div> diff --git a/layout/reftests/border-image/center-scaling-3-ref.html b/layout/reftests/border-image/center-scaling-3-ref.html new file mode 100644 index 0000000000..86db1ec450 --- /dev/null +++ b/layout/reftests/border-image/center-scaling-3-ref.html @@ -0,0 +1,40 @@ +<!doctype html> +<style>div { line-height: 0 }</style> +<body +><div><img src="reticule-tl.png" width="27" height="54" + ><img src="reticule-to.png" width="54" height="54" + ><img src="reticule-to.png" width="54" height="54" + ><img src="reticule-to.png" width="54" height="54" + ><img src="reticule-to.png" width="54" height="54" + ><img src="reticule-tr.png" width="27" height="54"></div +><div><img src="reticule-le.png" width="27" height="27" + ><img src="reticule-ct.png" width="54" height="27" + ><img src="reticule-ct.png" width="54" height="27" + ><img src="reticule-ct.png" width="54" height="27" + ><img src="reticule-ct.png" width="54" height="27" + ><img src="reticule-ri.png" width="27" height="27"></div +><div><img src="reticule-le.png" width="27" height="27" + ><img src="reticule-ct.png" width="54" height="27" + ><img src="reticule-ct.png" width="54" height="27" + ><img src="reticule-ct.png" width="54" height="27" + ><img src="reticule-ct.png" width="54" height="27" + ><img src="reticule-ri.png" width="27" height="27"></div +><div><img src="reticule-le.png" width="27" height="27" + ><img src="reticule-ct.png" width="54" height="27" + ><img src="reticule-ct.png" width="54" height="27" + ><img src="reticule-ct.png" width="54" height="27" + ><img src="reticule-ct.png" width="54" height="27" + ><img src="reticule-ri.png" width="27" height="27"></div +><div><img src="reticule-le.png" width="27" height="27" + ><img src="reticule-ct.png" width="54" height="27" + ><img src="reticule-ct.png" width="54" height="27" + ><img src="reticule-ct.png" width="54" height="27" + ><img src="reticule-ct.png" width="54" height="27" + ><img src="reticule-ri.png" width="27" height="27"></div +><div><img src="reticule-bl.png" width="27" height="54" + ><img src="reticule-bo.png" width="54" height="54" + ><img src="reticule-bo.png" width="54" height="54" + ><img src="reticule-bo.png" width="54" height="54" + ><img src="reticule-bo.png" width="54" height="54" + ><img src="reticule-br.png" width="27" height="54"></div +></body> diff --git a/layout/reftests/border-image/center-scaling-3.html b/layout/reftests/border-image/center-scaling-3.html new file mode 100644 index 0000000000..6f33bb0fa1 --- /dev/null +++ b/layout/reftests/border-image/center-scaling-3.html @@ -0,0 +1,11 @@ +<!doctype html> +<style> +div { + border-width: 54px 27px; + border-style: solid; + border-image: url("reticule.png") 27 fill round; + width: 216px; + height: 108px; +} +</style> +<div></div> diff --git a/layout/reftests/border-image/center-scaling-4b-ref.html b/layout/reftests/border-image/center-scaling-4b-ref.html new file mode 100644 index 0000000000..3b23376407 --- /dev/null +++ b/layout/reftests/border-image/center-scaling-4b-ref.html @@ -0,0 +1,54 @@ +<!doctype html> +<style>div { line-height: 0 }</style> +<body +><div><img src="reticule-tl.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-tr.png" width="27" height="27"></div +><div><img src="reticule-le.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ri.png" width="27" height="27"></div +><div><img src="reticule-le.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ri.png" width="27" height="27"></div +><div><img src="reticule-le.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ri.png" width="27" height="27"></div +><div><img src="reticule-le.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ri.png" width="27" height="27"></div +></body> diff --git a/layout/reftests/border-image/center-scaling-4b.html b/layout/reftests/border-image/center-scaling-4b.html new file mode 100644 index 0000000000..c41e43a511 --- /dev/null +++ b/layout/reftests/border-image/center-scaling-4b.html @@ -0,0 +1,11 @@ +<!doctype html> +<style> +div { + border-width: 27px 27px 0 27px; + border-style: solid; + border-image: url("reticule.png") 27 fill round; + width: 216px; + height: 108px; +} +</style> +<div></div> diff --git a/layout/reftests/border-image/center-scaling-4l-ref.html b/layout/reftests/border-image/center-scaling-4l-ref.html new file mode 100644 index 0000000000..e3ebeb8763 --- /dev/null +++ b/layout/reftests/border-image/center-scaling-4l-ref.html @@ -0,0 +1,58 @@ +<!doctype html> +<style>div { line-height: 0 }</style> +<body +><div><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-tr.png" width="27" height="27"></div +><div><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ri.png" width="27" height="27"></div +><div><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ri.png" width="27" height="27"></div +><div><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ri.png" width="27" height="27"></div +><div><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ri.png" width="27" height="27"></div +><div><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-br.png" width="27" height="27"></div +></body> diff --git a/layout/reftests/border-image/center-scaling-4l.html b/layout/reftests/border-image/center-scaling-4l.html new file mode 100644 index 0000000000..c4a4aec60a --- /dev/null +++ b/layout/reftests/border-image/center-scaling-4l.html @@ -0,0 +1,11 @@ +<!doctype html> +<style> +div { + border-width: 27px 27px 27px 0; + border-style: solid; + border-image: url("reticule.png") 27 fill round; + width: 216px; + height: 108px; +} +</style> +<div></div> diff --git a/layout/reftests/border-image/center-scaling-4lr-ref.html b/layout/reftests/border-image/center-scaling-4lr-ref.html new file mode 100644 index 0000000000..58869ac1d2 --- /dev/null +++ b/layout/reftests/border-image/center-scaling-4lr-ref.html @@ -0,0 +1,52 @@ +<!doctype html> +<style>div { line-height: 0 }</style> +<body +><div><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27"></div +><div><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27"></div +><div><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27"></div +><div><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27"></div +><div><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27"></div +><div><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27"></div +></body> diff --git a/layout/reftests/border-image/center-scaling-4lr.html b/layout/reftests/border-image/center-scaling-4lr.html new file mode 100644 index 0000000000..439ee5dce8 --- /dev/null +++ b/layout/reftests/border-image/center-scaling-4lr.html @@ -0,0 +1,11 @@ +<!doctype html> +<style> +div { + border-width: 27px 0 27px 0; + border-style: solid; + border-image: url("reticule.png") 27 fill round; + width: 216px; + height: 108px; +} +</style> +<div></div> diff --git a/layout/reftests/border-image/center-scaling-4r-ref.html b/layout/reftests/border-image/center-scaling-4r-ref.html new file mode 100644 index 0000000000..5edcd2381d --- /dev/null +++ b/layout/reftests/border-image/center-scaling-4r-ref.html @@ -0,0 +1,58 @@ +<!doctype html> +<style>div { line-height: 0 }</style> +<body +><div><img src="reticule-tl.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27" + ><img src="reticule-to.png" width="27" height="27"></div +><div><img src="reticule-le.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27"></div +><div><img src="reticule-le.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27"></div +><div><img src="reticule-le.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27"></div +><div><img src="reticule-le.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27"></div +><div><img src="reticule-bl.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27"></div +></body> diff --git a/layout/reftests/border-image/center-scaling-4r.html b/layout/reftests/border-image/center-scaling-4r.html new file mode 100644 index 0000000000..38874cbbbb --- /dev/null +++ b/layout/reftests/border-image/center-scaling-4r.html @@ -0,0 +1,11 @@ +<!doctype html> +<style> +div { + border-width: 27px 0 27px 27px; + border-style: solid; + border-image: url("reticule.png") 27 fill round; + width: 216px; + height: 108px; +} +</style> +<div></div> diff --git a/layout/reftests/border-image/center-scaling-4t-ref.html b/layout/reftests/border-image/center-scaling-4t-ref.html new file mode 100644 index 0000000000..c04f1670cf --- /dev/null +++ b/layout/reftests/border-image/center-scaling-4t-ref.html @@ -0,0 +1,54 @@ +<!doctype html> +<style>div { line-height: 0 }</style> +<body +><div><img src="reticule-le.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ri.png" width="27" height="27"></div +><div><img src="reticule-le.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ri.png" width="27" height="27"></div +><div><img src="reticule-le.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ri.png" width="27" height="27"></div +><div><img src="reticule-le.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ri.png" width="27" height="27"></div +><div><img src="reticule-bl.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-bo.png" width="27" height="27" + ><img src="reticule-br.png" width="27" height="27"></div +></body> diff --git a/layout/reftests/border-image/center-scaling-4t.html b/layout/reftests/border-image/center-scaling-4t.html new file mode 100644 index 0000000000..401005a39f --- /dev/null +++ b/layout/reftests/border-image/center-scaling-4t.html @@ -0,0 +1,11 @@ +<!doctype html> +<style> +div { + border-width: 0 27px 27px 27px; + border-style: solid; + border-image: url("reticule.png") 27 fill round; + width: 216px; + height: 108px; +} +</style> +<div></div> diff --git a/layout/reftests/border-image/center-scaling-4tb-ref.html b/layout/reftests/border-image/center-scaling-4tb-ref.html new file mode 100644 index 0000000000..08344b38a0 --- /dev/null +++ b/layout/reftests/border-image/center-scaling-4tb-ref.html @@ -0,0 +1,44 @@ +<!doctype html> +<style>div { line-height: 0 }</style> +<body +><div><img src="reticule-le.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ri.png" width="27" height="27"></div +><div><img src="reticule-le.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ri.png" width="27" height="27"></div +><div><img src="reticule-le.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ri.png" width="27" height="27"></div +><div><img src="reticule-le.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ct.png" width="27" height="27" + ><img src="reticule-ri.png" width="27" height="27"></div +></body> diff --git a/layout/reftests/border-image/center-scaling-4tb.html b/layout/reftests/border-image/center-scaling-4tb.html new file mode 100644 index 0000000000..2d23aa8e41 --- /dev/null +++ b/layout/reftests/border-image/center-scaling-4tb.html @@ -0,0 +1,11 @@ +<!doctype html> +<style> +div { + border-width: 0 27px 0 27px; + border-style: solid; + border-image: url("reticule.png") 27 fill round; + width: 216px; + height: 108px; +} +</style> +<div></div> diff --git a/layout/reftests/border-image/diamonds.png b/layout/reftests/border-image/diamonds.png Binary files differnew file mode 100644 index 0000000000..7fe5da5e60 --- /dev/null +++ b/layout/reftests/border-image/diamonds.png diff --git a/layout/reftests/border-image/different-h-v-1.html b/layout/reftests/border-image/different-h-v-1.html new file mode 100644 index 0000000000..908b732720 --- /dev/null +++ b/layout/reftests/border-image/different-h-v-1.html @@ -0,0 +1,15 @@ +<!doctype html> +<html><head> +<style> +div { + margin: 27px; + border-width: 1em; + border-style: solid; + border-image: url("diamonds.png") 27 stretch round; + width: 270px; + height: 135px; +} +</style> +<body> +<div></div> +</body></html> diff --git a/layout/reftests/border-image/different-h-v-2.html b/layout/reftests/border-image/different-h-v-2.html new file mode 100644 index 0000000000..6bce841adf --- /dev/null +++ b/layout/reftests/border-image/different-h-v-2.html @@ -0,0 +1,15 @@ +<!doctype html> +<html><head> +<style> +div { + margin: 27px; + border-width: 1em; + border-style: solid; + border-image: url("diamonds.png") 27 round stretch; + width: 270px; + height: 135px; +} +</style> +<body> +<div></div> +</body></html> diff --git a/layout/reftests/border-image/different-h-v-ref.html b/layout/reftests/border-image/different-h-v-ref.html new file mode 100644 index 0000000000..3beef12726 --- /dev/null +++ b/layout/reftests/border-image/different-h-v-ref.html @@ -0,0 +1,14 @@ +<!doctype html> +<html><head> +<style> +div { + margin: 27px; + border-width: 1em; + border-image: url("diamonds.png") 27 stretch; + width: 270px; + height: 135px; +} +</style> +<body> +<div></div> +</body></html> diff --git a/layout/reftests/border-image/gen-refs.py b/layout/reftests/border-image/gen-refs.py new file mode 100644 index 0000000000..029d46f2a8 --- /dev/null +++ b/layout/reftests/border-image/gen-refs.py @@ -0,0 +1,473 @@ +# This Source Code Form is subject to the terms of the Mozilla Public +# License, v. 2.0. If a copy of the MPL was not distributed with this +# file, You can obtain one at http://mozilla.org/MPL/2.0/. + +# Generates tables of background images which correspond with border images for +# creating reftests. Input is the filename containing input defined below (a subset +# of the allowed CSS border properties). An html representation of a table is +# output to stdout. +# +# Usage: python gen-refs.py input_filename +# +# Input must take the form (order is not important, nothing is optional, distance in order top, right, bottom, left): +# width: p; +# height: p; +# border-width: p; +# border-image-source: ...; +# border-image-slice: p p p p; +# note that actually border-image-slice takes numbers without px, which represent pixels anyway (or at least coords) +# border-image-width: np np np np; +# border-image-repeat: stretch | repeat | round; +# border-image-outset: np np np np; +# +# where: +# p ::= n'px' +# np ::= n | p +# +# Assumes there is no intrinsic size for the border-image-source, so uses +# the size of the border image area. + +import sys + + +class Point: + def __init__(self, w=0, h=0): + self.x = w + self.y = h + + +class Size: + def __init__(self, w=0, h=0): + self.width = w + self.height = h + + +class Rect: + def __init__(self, x=0, y=0, x2=0, y2=0): + self.x = x + self.y = y + self.x2 = x2 + self.y2 = y2 + + def width(self): + return self.x2 - self.x + + def height(self): + return self.y2 - self.y + + +class Props: + def __init__(self): + self.size = Size() + + +class np: + def __init__(self, n, p): + self.n = n + self.p = p + + def get_absolute(self, ref): + if not self.p == 0: + return self.p + return self.n * ref + + +def parse_p(tok): + if tok[-2:] == "px": + return float(tok[:-2]) + print("Whoops, not a pixel value", tok) + + +def parse_np(tok): + if tok[-2:] == "px": + return np(0, float(tok[:-2])) + return np(float(tok), 0) + + +def parse(filename): + f = open(filename, "r") + props = Props() + for l in f: + l = l.strip() + if not l[-1] == ";": + continue + toks = l[:-1].split() + if toks[0] == "border-width:": + props.width = parse_p(toks[1]) + if toks[0] == "height:": + props.size.height = parse_p(toks[1]) + if toks[0] == "width:": + props.size.width = parse_p(toks[1]) + if toks[0] == "border-image-source:": + props.source = l[l.find(":") + 1 : l.rfind(";")].strip() + if toks[0] == "border-image-repeat:": + props.repeat = toks[1] + if toks[0] == "border-image-slice:": + props.slice = map(parse_p, toks[1:5]) + if toks[0] == "border-image-width:": + props.image_width = map(parse_np, toks[1:5]) + if toks[0] == "border-image-outset:": + props.outset = map(parse_np, toks[1:5]) + f.close() + return props + + +# the result of normalisation is that all sizes are in pixels and the size, +# widths, and outset have been normalised to a size and width - the former is +# the element's interior, the latter is the width of the drawn border. +def normalise(props): + result = Props() + result.source = props.source + result.repeat = props.repeat + result.width = map(lambda x: x.get_absolute(props.width), props.image_width) + outsets = map(lambda x: x.get_absolute(props.width), props.outset) + result.size.width = props.size.width + 2 * props.width + outsets[1] + outsets[3] + result.size.height = props.size.height + 2 * props.width + outsets[0] + outsets[2] + result.slice = props.slice + for i in [0, 2]: + if result.slice[i] > result.size.height: + result.slice[i] = result.size.height + if result.slice[i + 1] > result.size.width: + result.slice[i + 1] = result.size.width + + return result + + +def check_parse(props): + if not hasattr(props, "source"): + print("missing border-image-source") + return False + if not hasattr(props.size, "width"): + print("missing width") + return False + if not hasattr(props.size, "height"): + print("missing height") + return False + if not hasattr(props, "width"): + print("missing border-width") + return False + if not hasattr(props, "image_width"): + print("missing border-image-width") + return False + if not hasattr(props, "slice"): + print("missing border-image-slice") + return False + if not hasattr(props, "repeat") or ( + props.repeat not in ["stretch", "repeat", "round"] + ): + print("missing or incorrect border-image-repeat '" + props.repeat + "'") + return False + if not hasattr(props, "outset"): + print("missing border-image-outset") + return False + + return True + + +def check_normalise(props): + if not hasattr(props, "source"): + print("missing border-image-source") + return False + if not hasattr(props.size, "width"): + print("missing width") + return False + if not hasattr(props.size, "height"): + print("missing height") + return False + if not hasattr(props, "slice"): + print("missing border-image-slice") + return False + if not hasattr(props, "repeat") or ( + props.repeat not in ["stretch", "repeat", "round"] + ): + print("missing or incorrect border-image-repeat '" + props.repeat + "'") + return False + + return True + + +class Tile: + def __init__(self): + self.slice = Rect() + self.border_width = Rect() + + +# throughout, we will use arrays for nine-patches, the indices correspond thusly: +# 0 1 2 +# 3 4 5 +# 6 7 8 + +# Compute the source tiles' slice and border-width sizes +def make_src_tiles(): + tiles = [Tile() for i in range(9)] + + rows = [range(3 * i, 3 * (i + 1)) for i in range(3)] + cols = [[i, i + 3, i + 6] for i in range(3)] + + row_limits_slice = [ + 0, + props.slice[3], + props.size.width - props.slice[1], + props.size.width, + ] + row_limits_width = [ + 0, + props.width[3], + props.size.width - props.width[1], + props.size.width, + ] + for r in range(3): + for t in [tiles[i] for i in cols[r]]: + t.slice.x = row_limits_slice[r] + t.slice.x2 = row_limits_slice[r + 1] + t.border_width.x = row_limits_width[r] + t.border_width.x2 = row_limits_width[r + 1] + + col_limits_slice = [ + 0, + props.slice[0], + props.size.height - props.slice[2], + props.size.height, + ] + col_limits_width = [ + 0, + props.width[0], + props.size.height - props.width[2], + props.size.height, + ] + for c in range(3): + for t in [tiles[i] for i in rows[c]]: + t.slice.y = col_limits_slice[c] + t.slice.y2 = col_limits_slice[c + 1] + t.border_width.y = col_limits_width[c] + t.border_width.y2 = col_limits_width[c + 1] + + return tiles + + +def compute(props): + tiles = make_src_tiles() + + # corners scale easy + for t in [tiles[i] for i in [0, 2, 6, 8]]: + t.scale = Point( + t.border_width.width() / t.slice.width(), + t.border_width.height() / t.slice.height(), + ) + # edges are by their secondary dimension + for t in [tiles[i] for i in [1, 7]]: + t.scale = Point( + t.border_width.height() / t.slice.height(), + t.border_width.height() / t.slice.height(), + ) + for t in [tiles[i] for i in [3, 5]]: + t.scale = Point( + t.border_width.width() / t.slice.width(), + t.border_width.width() / t.slice.width(), + ) + # the middle is scaled by the factors for the top and left edges + tiles[4].scale = Point(tiles[1].scale.x, tiles[3].scale.y) + + # the size of a source tile for the middle section + src_tile_size = Size( + tiles[4].slice.width() * tiles[4].scale.x, + tiles[4].slice.height() * tiles[4].scale.y, + ) + + # the size of a single destination tile in the central part + dest_tile_size = Size() + if props.repeat == "stretch": + dest_tile_size.width = tiles[4].border_width.width() + dest_tile_size.height = tiles[4].border_width.height() + for t in [tiles[i] for i in [1, 7]]: + t.scale.x = t.border_width.width() / t.slice.width() + for t in [tiles[i] for i in [3, 5]]: + t.scale.y = t.border_width.height() / t.slice.height() + elif props.repeat == "repeat": + dest_tile_size = src_tile_size + elif props.repeat == "round": + dest_tile_size.width = tiles[4].border_width.width() / math.ceil( + tiles[4].border_width.width() / src_tile_size.width + ) + dest_tile_size.height = tiles[4].border_width.height() / math.ceil( + tiles[4].border_width.height() / src_tile_size.height + ) + for t in [tiles[i] for i in [1, 4, 7]]: + t.scale.x = dest_tile_size.width / t.slice.width() + for t in [tiles[i] for i in [3, 4, 5]]: + t.scale.y = dest_tile_size.height / t.slice.height() + else: + print("Whoops, invalid border-image-repeat value") + + # catch overlapping slices. Its easier to deal with it here than to catch + # earlier and have to avoid all the divide by zeroes above + for t in tiles: + if t.slice.width() < 0: + t.scale.x = 0 + if t.slice.height() < 0: + t.scale.y = 0 + + tiles_h = int(math.ceil(tiles[4].border_width.width() / dest_tile_size.width) + 2) + tiles_v = int(math.ceil(tiles[4].border_width.height() / dest_tile_size.height) + 2) + + # if border-image-repeat: repeat, then we will later center the tiles, that + # means we need an extra tile for the two 'half' tiles at either end + if props.repeat == "repeat": + if tiles_h % 2 == 0: + tiles_h += 1 + if tiles_v % 2 == 0: + tiles_v += 1 + dest_tiles = [Tile() for i in range(tiles_h * tiles_v)] + + # corners + corners = [ + (0, 0), + (tiles_h - 1, 2), + (tiles_v * (tiles_h - 1), 6), + (tiles_v * tiles_h - 1, 8), + ] + for d, s in corners: + dest_tiles[d].size = Size( + tiles[s].scale.x * props.size.width, tiles[s].scale.y * props.size.height + ) + dest_tiles[d].dest_size = Size( + tiles[s].border_width.width(), tiles[s].border_width.height() + ) + dest_tiles[0].offset = Point(0, 0) + dest_tiles[tiles_h - 1].offset = Point( + tiles[2].border_width.width() - dest_tiles[tiles_h - 1].size.width, 0 + ) + dest_tiles[tiles_v * (tiles_h - 1)].offset = Point( + 0, + tiles[6].border_width.height() + - dest_tiles[tiles_v * (tiles_h - 1)].size.height, + ) + dest_tiles[tiles_v * tiles_h - 1].offset = Point( + tiles[8].border_width.width() - dest_tiles[tiles_h * tiles_v - 1].size.width, + tiles[8].border_width.height() - dest_tiles[tiles_h * tiles_v - 1].size.height, + ) + + # horizontal edges + for i in range(1, tiles_h - 1): + dest_tiles[i].size = Size( + tiles[1].scale.x * props.size.width, tiles[1].scale.y * props.size.height + ) + dest_tiles[(tiles_v - 1) * tiles_h + i].size = Size( + tiles[7].scale.x * props.size.width, tiles[7].scale.y * props.size.height + ) + dest_tiles[i].dest_size = Size( + dest_tile_size.width, tiles[1].border_width.height() + ) + dest_tiles[(tiles_v - 1) * tiles_h + i].dest_size = Size( + dest_tile_size.width, tiles[7].border_width.height() + ) + dest_tiles[i].offset = Point( + -tiles[1].scale.x * tiles[1].slice.x, -tiles[1].scale.y * tiles[1].slice.y + ) + dest_tiles[(tiles_v - 1) * tiles_h + i].offset = Point( + -tiles[7].scale.x * tiles[7].slice.x, -tiles[7].scale.y * tiles[7].slice.y + ) + + # vertical edges + for i in range(1, tiles_v - 1): + dest_tiles[i * tiles_h].size = Size( + tiles[3].scale.x * props.size.width, tiles[3].scale.y * props.size.height + ) + dest_tiles[(i + 1) * tiles_h - 1].size = Size( + tiles[5].scale.x * props.size.width, tiles[5].scale.y * props.size.height + ) + dest_tiles[i * tiles_h].dest_size = Size( + tiles[3].border_width.width(), dest_tile_size.height + ) + dest_tiles[(i + 1) * tiles_h - 1].dest_size = Size( + tiles[5].border_width.width(), dest_tile_size.height + ) + dest_tiles[i * tiles_h].offset = Point( + -tiles[3].scale.x * tiles[3].slice.x, -tiles[3].scale.y * tiles[3].slice.y + ) + dest_tiles[(i + 1) * tiles_h - 1].offset = Point( + -tiles[5].scale.x * tiles[5].slice.x, -tiles[5].scale.y * tiles[5].slice.y + ) + + # middle + for i in range(1, tiles_v - 1): + for j in range(1, tiles_h - 1): + dest_tiles[i * tiles_h + j].size = Size( + tiles[4].scale.x * props.size.width, + tiles[4].scale.y * props.size.height, + ) + dest_tiles[i * tiles_h + j].offset = Point( + -tiles[4].scale.x * tiles[4].slice.x, + -tiles[4].scale.y * tiles[4].slice.y, + ) + dest_tiles[i * tiles_h + j].dest_size = dest_tile_size + + # edge and middle tiles are centered with border-image-repeat: repeat + # we need to change the offset to take account of this and change the dest_size + # of the tiles at the sides of the edges if they are clipped + if props.repeat == "repeat": + diff_h = ( + (tiles_h - 2) * dest_tile_size.width - tiles[4].border_width.width() + ) / 2 + diff_v = ( + (tiles_v - 2) * dest_tile_size.height - tiles[4].border_width.height() + ) / 2 + for i in range(0, tiles_h): + dest_tiles[tiles_h + i].dest_size.height -= diff_v + dest_tiles[tiles_h + i].offset.y -= diff_v # * tiles[4].scale.y + dest_tiles[(tiles_v - 2) * tiles_h + i].dest_size.height -= diff_v + for i in range(0, tiles_v): + dest_tiles[i * tiles_h + 1].dest_size.width -= diff_h + dest_tiles[i * tiles_h + 1].offset.x -= diff_h # * tiles[4].scale.x + dest_tiles[(i + 1) * tiles_h - 2].dest_size.width -= diff_h + + # output the table to simulate the border + print("<table>") + for i in range(tiles_h): + print('<col style="width: ' + str(dest_tiles[i].dest_size.width) + 'px;">') + for i in range(tiles_v): + print( + '<tr style="height: ' + + str(dest_tiles[i * tiles_h].dest_size.height) + + 'px;">' + ) + for j in range(tiles_h): + width = dest_tiles[i * tiles_h + j].size.width + height = dest_tiles[i * tiles_h + j].size.height + # catch any tiles with negative widths/heights + # this happends when the total of the border-image-slices > borde drawing area + if width <= 0 or height <= 0: + print(' <td style="background: white;"></td>') + else: + print( + ' <td style="background-image: ' + + props.source + + "; background-size: " + + str(width) + + "px " + + str(height) + + "px; background-position: " + + str(dest_tiles[i * tiles_h + j].offset.x) + + "px " + + str(dest_tiles[i * tiles_h + j].offset.y) + + 'px;"></td>' + ) + print("</tr>") + print("</table>") + + +# start here +args = sys.argv[1:] +if len(args) == 0: + print("whoops: no source file") + exit(1) + + +props = parse(args[0]) +if not check_parse(props): + print(dir(props)) + exit(1) +props = normalise(props) +if not check_normalise(props): + exit(1) +compute(props) diff --git a/layout/reftests/border-image/multicolor-image-1-ref.html b/layout/reftests/border-image/multicolor-image-1-ref.html new file mode 100644 index 0000000000..56ba68aa98 --- /dev/null +++ b/layout/reftests/border-image/multicolor-image-1-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>test of border-image</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; } + td { padding: 0; } + + </style> +</head> +<body> +<table> + <col style="width: 7px"> + <col style="width: 100px"> + <col style="width: 7px"> + + <tr style="height: 7px"> + <td style="background: #87f0b4"></td> + <td style="background: #4a298e"></td> + <td style="background: #c98bb7"></td> + </tr> + <tr style="height: 5px"> + <td style="background: #90a213"></td> + <td style="background: #c9aa7d"></td> + <td style="background: #90c157"></td> + </tr> + <tr style="height: 7px"> + <td style="background: #9d57c1"></td> + <td style="background: #3a8e20"></td> + <td style="background: #0e6f6c"></td> + </tr> +</table> +</body> +</html> diff --git a/layout/reftests/border-image/multicolor-image-1.html b/layout/reftests/border-image/multicolor-image-1.html new file mode 100644 index 0000000000..de76bd27be --- /dev/null +++ b/layout/reftests/border-image/multicolor-image-1.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>test of border-image</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + div { + border-width: 7px; + border-style: solid; + background: red; /* fail if this shows through */ + background-image: url('3x3multicolor.png'); /* fail if this shows through */ + border-image: url('3x3multicolor.png') 1 1 1 1 fill; + -khtml-border-image: url('3x3multicolor.png') 1 1 1 1 fill; + border-image: url('3x3multicolor.png') 1 1 1 1 fill; + } + + </style> +</head> +<body> +<div style="width: 100px; height: 5px"></div> +</body> +</html> diff --git a/layout/reftests/border-image/multicolor-image-2-ref.html b/layout/reftests/border-image/multicolor-image-2-ref.html new file mode 100644 index 0000000000..2adb8d636e --- /dev/null +++ b/layout/reftests/border-image/multicolor-image-2-ref.html @@ -0,0 +1,165 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>test of border-image</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; } + td { padding: 0; } + table { margin-bottom: 2px; } + + </style> +</head> +<body> + +<table> + <col style="width: 11px"> + <col style="width: 9px"> + <col style="width: 6px"> + <tr style="height: 4px"> + <td style="background: #93bd5d"></td> + <td style="background: #b55dbd"></td> + <td style="background: #8d4921"></td> + </tr> + <tr style="height: 1px"> + <td style="background: #21a02c"></td> + <td style="background: #4a298e"></td> + <td style="background: #ef9b23"></td> + </tr> + <tr style="height: 8px"> + <td style="background: #9b733a"></td> + <td style="background: #f155ad"></td> + <td style="background: #adf3eb"></td> + </tr> +</table> + +<table> + <col style="width: 4px"> + <col style="width: 2px"> + <col style="width: 1px"> + <tr style="height: 3px"> + <td style="background: #93bd5d"></td> + <td style="background: #b55dbd"></td> + <td style="background: #8d4921"></td> + </tr> + <tr style="height: 17px"> + <td style="background: #21a02c"></td> + <td style="background: #4a298e"></td> + <td style="background: #ef9b23"></td> + </tr> + <tr style="height: 0px"> + <td style="background: #9b733a"></td> + <td style="background: #f155ad"></td> + <td style="background: #adf3eb"></td> + </tr> +</table> + +<table> + <col style="width: 3px"> + <col style="width: 17px"> + <col style="width: 2px"> + <tr style="height: 10px"> + <td style="background: #93bd5d"></td> + <td style="background: #b55dbd"></td> + <td style="background: #8d4921"></td> + </tr> + <tr style="height: 8px"> + <td style="background: #21a02c"></td> + <td style="background: #4a298e"></td> + <td style="background: #ef9b23"></td> + </tr> + <tr style="height: 5px"> + <td style="background: #9b733a"></td> + <td style="background: #f155ad"></td> + <td style="background: #adf3eb"></td> + </tr> +</table> + +<table> + <col style="width: 0px"> + <col style="width: 8px"> + <col style="width: 7px"> + <tr style="height: 5px"> + <td style="background: #93bd5d"></td> + <td style="background: #b55dbd"></td> + <td style="background: #8d4921"></td> + </tr> + <tr style="height: 5px"> + <td style="background: #21a02c"></td> + <td style="background: #4a298e"></td> + <td style="background: #ef9b23"></td> + </tr> + <tr style="height: 1px"> + <td style="background: #9b733a"></td> + <td style="background: #f155ad"></td> + <td style="background: #adf3eb"></td> + </tr> +</table> + +<table> + <col style="width: 2px"> + <col style="width: 0px"> + <col style="width: 8px"> + <tr style="height: 4px"> + <td style="background: #93bd5d"></td> + <td style="background: #b55dbd"></td> + <td style="background: #8d4921"></td> + </tr> + <tr style="height: 8px"> + <td style="background: #21a02c"></td> + <td style="background: #4a298e"></td> + <td style="background: #ef9b23"></td> + </tr> + <tr style="height: 10px"> + <td style="background: #9b733a"></td> + <td style="background: #f155ad"></td> + <td style="background: #adf3eb"></td> + </tr> +</table> + +<table> + <col style="width: 2px"> + <col style="width: 17px"> + <col style="width: 0px"> + <tr style="height: 4px"> + <td style="background: #93bd5d"></td> + <td style="background: #b55dbd"></td> + <td style="background: #8d4921"></td> + </tr> + <tr style="height: 0px"> + <td style="background: #21a02c"></td> + <td style="background: #4a298e"></td> + <td style="background: #ef9b23"></td> + </tr> + <tr style="height: 10px"> + <td style="background: #9b733a"></td> + <td style="background: #f155ad"></td> + <td style="background: #adf3eb"></td> + </tr> +</table> + +<table> + <col style="width: 0px"> + <col style="width: 17px"> + <col style="width: 3px"> + <tr style="height: 1px"> + <td style="background: #93bd5d"></td> + <td style="background: #b55dbd"></td> + <td style="background: #8d4921"></td> + </tr> + <tr style="height: 0px"> + <td style="background: #21a02c"></td> + <td style="background: #4a298e"></td> + <td style="background: #ef9b23"></td> + </tr> + <tr style="height: 0px"> + <td style="background: #9b733a"></td> + <td style="background: #f155ad"></td> + <td style="background: #adf3eb"></td> + </tr> +</table> + +</body> +</html> diff --git a/layout/reftests/border-image/multicolor-image-2.html b/layout/reftests/border-image/multicolor-image-2.html new file mode 100644 index 0000000000..a35d041b38 --- /dev/null +++ b/layout/reftests/border-image/multicolor-image-2.html @@ -0,0 +1,96 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>test of border-image</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + div { + background: red; /* fail if this shows through */ + background-image: url('3x3multicolor.png'); /* fail if this shows through */ + margin-bottom: 2px; + } + + div.one { + border-image: url(10x5multicolor.png) 2 2 1 3 fill; + -khtml-border-image: url(10x5multicolor.png) 2 2 1 3 fill; + border-image: url(10x5multicolor.png) 2 2 1 3 fill; + border-width: 4px 6px 8px 11px; + border-style: solid; + width: 9px; + height: 1px; + } + + div.two { + border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill; + -khtml-border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill; + border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill; + border-width: 3px 1px 0px 4px; + border-style: solid; + width: 2px; + height: 17px; + } + + div.three { + border-image: url(10x5multicolor.png) 40% 2 1 30% fill; + -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill; + border-image: url(10x5multicolor.png) 40% 2 1 30% fill; + border-width: 10px 2px 5px 3px; + border-style: solid; + width: 17px; + height: 8px; + } + + div.four { + border-image: url(10x5multicolor.png) 2 2 20% 30% fill; + -khtml-border-image: url(10x5multicolor.png) 2 2 20% 30% fill; + border-image: url(10x5multicolor.png) 2 2 20% 30% fill; + border-width: 5px 7px 1px 0; + border-style: solid; + width: 8px; + height: 5px; + } + + div.five { + border-width: 4px 8px 10px 2px; + border-image: url(10x5multicolor.png) 40% 2 1 30% fill; + -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill; + border-image: url(10x5multicolor.png) 40% 2 1 30% fill; + border-style: solid; + width: 0; + height: 8px; + } + + div.six { + border-width: 4px 0 10px 2px; + border-image: url(10x5multicolor.png) 40% 2 1 30% fill; + -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill; + border-image: url(10x5multicolor.png) 40% 2 1 30% fill; + border-style: solid; + width: 17px; + height: 0; + } + + div.seven { + border-image: url(10x5multicolor.png) 40% 2 1 30% fill; + -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill; + border-image: url(10x5multicolor.png) 40% 2 1 30% fill; + border-width: 1px 3px 0 0; + border-style: solid; + width: 17px; + height: 0; + } + + </style> +</head> +<body> +<div class="one"></div> +<div class="two"></div> +<div class="three"></div> +<div class="four"></div> +<div class="five"></div> +<div class="six"></div> +<div class="seven"></div> +</body> +</html> diff --git a/layout/reftests/border-image/multicolor-image-3-ref.html b/layout/reftests/border-image/multicolor-image-3-ref.html new file mode 100644 index 0000000000..ed74e4d7b8 --- /dev/null +++ b/layout/reftests/border-image/multicolor-image-3-ref.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>test of border-image: number repetition</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + div { + background: red; /* fail if this shows through */ + background-image: url('3x3multicolor.png'); /* fail if this shows through */ + margin-bottom: 2px; + } + + div.one { + border-width: 4px 6px 8px 6px; + border-style: solid; + border-image: url(10x5multicolor.png) 2 2 2 2; + -khtml-border-image: url(10x5multicolor.png) 2 2 2 2; + border-image: url(10x5multicolor.png) 2 2 2 2; + width: 5px; + height: 2px; + } + + div.two { + border-width: 4px 4px 4px 4px; + border-style: solid; + border-image: url(10x5multicolor.png) 2 1 2 1; + -khtml-border-image: url(10x5multicolor.png) 2 1 2 1; + border-image: url(10x5multicolor.png) 2 1 2 1; + width: 5px; + height: 2px; + } + + div.three { + border-width: 4px 2px 4px 2px; + border-style: solid; + border-image: url(10x5multicolor.png) 2 3 1 3; + -khtml-border-image: url(10x5multicolor.png) 2 3 1 3; + border-image: url(10x5multicolor.png) 2 3 1 3; + width: 5px; + height: 2px; + } + + div.four { + border-width: 4px 3px 4px 3px; + border-style: solid; + border-image: url(10x5multicolor.png) 2 3 1 1; + -khtml-border-image: url(10x5multicolor.png) 2 3 1 1; + border-image: url(10x5multicolor.png) 2 3 1 1; + width: 5px; + height: 2px; + } + + </style> +</head> +<body> +<div class="one"></div> +<div class="two"></div> +<div class="three"></div> +<div class="four"></div> +</body> +</html> diff --git a/layout/reftests/border-image/multicolor-image-3.html b/layout/reftests/border-image/multicolor-image-3.html new file mode 100644 index 0000000000..7727bb083d --- /dev/null +++ b/layout/reftests/border-image/multicolor-image-3.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>test of border-image: number repetition</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + div { + background: red; /* fail if this shows through */ + background-image: url('3x3multicolor.png'); /* fail if this shows through */ + margin-bottom: 2px; + } + + div.one { + border-width: 4px 6px 8px; + border-style: solid; + border-image: url(10x5multicolor.png) 2; + -khtml-border-image: url(10x5multicolor.png) 2; + border-image: url(10x5multicolor.png) 2; + width: 5px; + height: 2px; + } + + div.two { + border-width: 4px; + border-style: solid; + border-image: url(10x5multicolor.png) 2 1; + -khtml-border-image: url(10x5multicolor.png) 2 1; + border-image: url(10x5multicolor.png) 2 1; + width: 5px; + height: 2px; + } + + div.three { + border-image: url(10x5multicolor.png) 2 3 1; + -khtml-border-image: url(10x5multicolor.png) 2 3 1; + border-image: url(10x5multicolor.png) 2 3 1; + border-width: 4px 2px; + border-style: solid; + width: 5px; + height: 2px; + } + + div.four { + border-width: 4px 3px; + border-style: solid; + border-image: url(10x5multicolor.png) 2 3 1 1; + -khtml-border-image: url(10x5multicolor.png) 2 3 1 1; + border-image: url(10x5multicolor.png) 2 3 1 1; + width: 5px; + height: 2px; + } + + </style> +</head> +<body> +<div class="one"></div> +<div class="two"></div> +<div class="three"></div> +<div class="four"></div> +</body> +</html> diff --git a/layout/reftests/border-image/multicolor-image-4-ref.html b/layout/reftests/border-image/multicolor-image-4-ref.html new file mode 100644 index 0000000000..55e14cb084 --- /dev/null +++ b/layout/reftests/border-image/multicolor-image-4-ref.html @@ -0,0 +1,167 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>test of border-image</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; } + td { padding: 0; } + table { margin-bottom: 6px; } + + </style> +</head> +<body> + +<div style="padding-top: 100px; padding-left: 100px"> +<table> + <col style="width: 22px"> + <col style="width: 18px"> + <col style="width: 12px"> + <tr style="height: 12px"> + <td style="background: #93bd5d"></td> + <td style="background: #b55dbd"></td> + <td style="background: #8d4921"></td> + </tr> + <tr style="height: 3px"> + <td style="background: #21a02c"></td> + <td style="background: #4a298e"></td> + <td style="background: #ef9b23"></td> + </tr> + <tr style="height: 24px"> + <td style="background: #9b733a"></td> + <td style="background: #f155ad"></td> + <td style="background: #adf3eb"></td> + </tr> +</table> + +<table> + <col style="width: 8px"> + <col style="width: 4px"> + <col style="width: 2px"> + <tr style="height: 9px"> + <td style="background: #93bd5d"></td> + <td style="background: #b55dbd"></td> + <td style="background: #8d4921"></td> + </tr> + <tr style="height: 51px"> + <td style="background: #21a02c"></td> + <td style="background: #4a298e"></td> + <td style="background: #ef9b23"></td> + </tr> + <tr style="height: 0px"> + <td style="background: #9b733a"></td> + <td style="background: #f155ad"></td> + <td style="background: #adf3eb"></td> + </tr> +</table> + +<table> + <col style="width: 6px"> + <col style="width: 34px"> + <col style="width: 4px"> + <tr style="height: 30px"> + <td style="background: #93bd5d"></td> + <td style="background: #b55dbd"></td> + <td style="background: #8d4921"></td> + </tr> + <tr style="height: 24px"> + <td style="background: #21a02c"></td> + <td style="background: #4a298e"></td> + <td style="background: #ef9b23"></td> + </tr> + <tr style="height: 15px"> + <td style="background: #9b733a"></td> + <td style="background: #f155ad"></td> + <td style="background: #adf3eb"></td> + </tr> +</table> + +<table> + <col style="width: 0px"> + <col style="width: 16px"> + <col style="width: 14px"> + <tr style="height: 15px"> + <td style="background: #93bd5d"></td> + <td style="background: #b55dbd"></td> + <td style="background: #8d4921"></td> + </tr> + <tr style="height: 15px"> + <td style="background: #21a02c"></td> + <td style="background: #4a298e"></td> + <td style="background: #ef9b23"></td> + </tr> + <tr style="height: 3px"> + <td style="background: #9b733a"></td> + <td style="background: #f155ad"></td> + <td style="background: #adf3eb"></td> + </tr> +</table> + +<table> + <col style="width: 4px"> + <col style="width: 0px"> + <col style="width: 16px"> + <tr style="height: 12px"> + <td style="background: #93bd5d"></td> + <td style="background: #b55dbd"></td> + <td style="background: #8d4921"></td> + </tr> + <tr style="height: 24px"> + <td style="background: #21a02c"></td> + <td style="background: #4a298e"></td> + <td style="background: #ef9b23"></td> + </tr> + <tr style="height: 30px"> + <td style="background: #9b733a"></td> + <td style="background: #f155ad"></td> + <td style="background: #adf3eb"></td> + </tr> +</table> + +<table> + <col style="width: 4px"> + <col style="width: 34px"> + <col style="width: 0px"> + <tr style="height: 12px"> + <td style="background: #93bd5d"></td> + <td style="background: #b55dbd"></td> + <td style="background: #8d4921"></td> + </tr> + <tr style="height: 0px"> + <td style="background: #21a02c"></td> + <td style="background: #4a298e"></td> + <td style="background: #ef9b23"></td> + </tr> + <tr style="height: 30px"> + <td style="background: #9b733a"></td> + <td style="background: #f155ad"></td> + <td style="background: #adf3eb"></td> + </tr> +</table> + +<table> + <col style="width: 0px"> + <col style="width: 34px"> + <col style="width: 6px"> + <tr style="height: 3px"> + <td style="background: #93bd5d"></td> + <td style="background: #b55dbd"></td> + <td style="background: #8d4921"></td> + </tr> + <tr style="height: 0px"> + <td style="background: #21a02c"></td> + <td style="background: #4a298e"></td> + <td style="background: #ef9b23"></td> + </tr> + <tr style="height: 0px"> + <td style="background: #9b733a"></td> + <td style="background: #f155ad"></td> + <td style="background: #adf3eb"></td> + </tr> +</table> +</div> + +</body> +</html> diff --git a/layout/reftests/border-image/multicolor-image-4.html b/layout/reftests/border-image/multicolor-image-4.html new file mode 100644 index 0000000000..a62562bd70 --- /dev/null +++ b/layout/reftests/border-image/multicolor-image-4.html @@ -0,0 +1,113 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>test of border-image</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + /** + * This is a copy of multicolor-image-2.html with a few changes: + * (1) the whole thing is inside a -moz-transform + * (2) different border-images have different values for + * repeat/stretch/round + */ + + body { + width: 100px; + -moz-transform: translate(100px, 100px) scale(2,3); + -moz-transform-origin: 0 0; + -khtml-transform: translate(100px, 100px) scale(2,3); + -khtml-transform-origin: 0 0; + transform: translate(100px, 100px) scale(2,3); + transform-origin: 0 0; + } + + div { + background: red; /* fail if this shows through */ + background-image: url('3x3multicolor.png'); /* fail if this shows through */ + margin-bottom: 2px; + } + + div.one { + border-image: url(10x5multicolor.png) 2 2 1 3 fill stretch; + -khtml-border-image: url(10x5multicolor.png) 2 2 1 3 fill stretch; + border-image: url(10x5multicolor.png) 2 2 1 3 fill stretch; + border-width: 4px 6px 8px 11px; + border-style: solid; + width: 9px; + height: 1px; + } + + div.two { + border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill repeat; + -khtml-border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill repeat; + border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill repeat; + border-width: 3px 1px 0px 4px; + border-style: solid; + width: 2px; + height: 17px; + } + + div.three { + border-image: url(10x5multicolor.png) 40% 2 1 30% fill round; + -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill round; + border-image: url(10x5multicolor.png) 40% 2 1 30% fill round; + border-width: 10px 2px 5px 3px; + border-style: solid; + width: 17px; + height: 8px; + } + + div.four { + border-image: url(10x5multicolor.png) 2 2 20% 30% fill stretch round; + -khtml-border-image: url(10x5multicolor.png) 2 2 20% 30% fill stretch round; + border-image: url(10x5multicolor.png) 2 2 20% 30% fill stretch round; + border-width: 5px 7px 1px 0; + border-style: solid; + width: 8px; + height: 5px; + } + + div.five { + border-width: 4px 8px 10px 2px; + border-style: solid; + border-image: url(10x5multicolor.png) 40% 2 1 30% fill repeat stretch; + -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill repeat stretch; + border-image: url(10x5multicolor.png) 40% 2 1 30% fill repeat stretch; + width: 0; + height: 8px; + } + + div.six { + border-width: 4px 0 10px 2px; + border-style: solid; + border-image: url(10x5multicolor.png) 40% 2 1 30% fill round repeat; + -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill round repeat; + border-image: url(10x5multicolor.png) 40% 2 1 30% fill round repeat; + width: 17px; + height: 0; + } + + div.seven { + border-image: url(10x5multicolor.png) 40% 2 1 30% fill stretch repeat; + -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill stretch repeat; + border-image: url(10x5multicolor.png) 40% 2 1 30% fill stretch repeat; + border-width: 1px 3px 0 0; + border-style: solid; + width: 17px; + height: 0; + } + + </style> +</head> +<body> +<div class="one"></div> +<div class="two"></div> +<div class="three"></div> +<div class="four"></div> +<div class="five"></div> +<div class="six"></div> +<div class="seven"></div> +</body> +</html> diff --git a/layout/reftests/border-image/multicolor-image-5-ref.html b/layout/reftests/border-image/multicolor-image-5-ref.html new file mode 100644 index 0000000000..f4e6ab1e18 --- /dev/null +++ b/layout/reftests/border-image/multicolor-image-5-ref.html @@ -0,0 +1,167 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>test of border-image</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; } + td { padding: 0; } + table { margin-bottom: 2px; } + + </style> +</head> +<body> + +<div style="padding-top: 100px; padding-left: 100px"> +<table> + <col style="width: 11px"> + <col style="width: 9px"> + <col style="width: 6px"> + <tr style="height: 4px"> + <td style="background: #93bd5d"></td> + <td style="background: #b55dbd"></td> + <td style="background: #8d4921"></td> + </tr> + <tr style="height: 1px"> + <td style="background: #21a02c"></td> + <td style="background: #4a298e"></td> + <td style="background: #ef9b23"></td> + </tr> + <tr style="height: 8px"> + <td style="background: #9b733a"></td> + <td style="background: #f155ad"></td> + <td style="background: #adf3eb"></td> + </tr> +</table> + +<table> + <col style="width: 4px"> + <col style="width: 2px"> + <col style="width: 1px"> + <tr style="height: 3px"> + <td style="background: #93bd5d"></td> + <td style="background: #b55dbd"></td> + <td style="background: #8d4921"></td> + </tr> + <tr style="height: 17px"> + <td style="background: #21a02c"></td> + <td style="background: #4a298e"></td> + <td style="background: #ef9b23"></td> + </tr> + <tr style="height: 0px"> + <td style="background: #9b733a"></td> + <td style="background: #f155ad"></td> + <td style="background: #adf3eb"></td> + </tr> +</table> + +<table> + <col style="width: 3px"> + <col style="width: 17px"> + <col style="width: 2px"> + <tr style="height: 10px"> + <td style="background: #93bd5d"></td> + <td style="background: #b55dbd"></td> + <td style="background: #8d4921"></td> + </tr> + <tr style="height: 8px"> + <td style="background: #21a02c"></td> + <td style="background: #4a298e"></td> + <td style="background: #ef9b23"></td> + </tr> + <tr style="height: 5px"> + <td style="background: #9b733a"></td> + <td style="background: #f155ad"></td> + <td style="background: #adf3eb"></td> + </tr> +</table> + +<table> + <col style="width: 0px"> + <col style="width: 8px"> + <col style="width: 7px"> + <tr style="height: 5px"> + <td style="background: #93bd5d"></td> + <td style="background: #b55dbd"></td> + <td style="background: #8d4921"></td> + </tr> + <tr style="height: 5px"> + <td style="background: #21a02c"></td> + <td style="background: #4a298e"></td> + <td style="background: #ef9b23"></td> + </tr> + <tr style="height: 1px"> + <td style="background: #9b733a"></td> + <td style="background: #f155ad"></td> + <td style="background: #adf3eb"></td> + </tr> +</table> + +<table> + <col style="width: 2px"> + <col style="width: 0px"> + <col style="width: 8px"> + <tr style="height: 4px"> + <td style="background: #93bd5d"></td> + <td style="background: #b55dbd"></td> + <td style="background: #8d4921"></td> + </tr> + <tr style="height: 8px"> + <td style="background: #21a02c"></td> + <td style="background: #4a298e"></td> + <td style="background: #ef9b23"></td> + </tr> + <tr style="height: 10px"> + <td style="background: #9b733a"></td> + <td style="background: #f155ad"></td> + <td style="background: #adf3eb"></td> + </tr> +</table> + +<table> + <col style="width: 2px"> + <col style="width: 17px"> + <col style="width: 0px"> + <tr style="height: 4px"> + <td style="background: #93bd5d"></td> + <td style="background: #b55dbd"></td> + <td style="background: #8d4921"></td> + </tr> + <tr style="height: 0px"> + <td style="background: #21a02c"></td> + <td style="background: #4a298e"></td> + <td style="background: #ef9b23"></td> + </tr> + <tr style="height: 10px"> + <td style="background: #9b733a"></td> + <td style="background: #f155ad"></td> + <td style="background: #adf3eb"></td> + </tr> +</table> + +<table> + <col style="width: 0px"> + <col style="width: 17px"> + <col style="width: 3px"> + <tr style="height: 1px"> + <td style="background: #93bd5d"></td> + <td style="background: #b55dbd"></td> + <td style="background: #8d4921"></td> + </tr> + <tr style="height: 0px"> + <td style="background: #21a02c"></td> + <td style="background: #4a298e"></td> + <td style="background: #ef9b23"></td> + </tr> + <tr style="height: 0px"> + <td style="background: #9b733a"></td> + <td style="background: #f155ad"></td> + <td style="background: #adf3eb"></td> + </tr> +</table> +</div> + +</body> +</html> diff --git a/layout/reftests/border-image/multicolor-image-5.html b/layout/reftests/border-image/multicolor-image-5.html new file mode 100644 index 0000000000..95763c6d95 --- /dev/null +++ b/layout/reftests/border-image/multicolor-image-5.html @@ -0,0 +1,114 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>test of border-image</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + /** + * This is a copy of multicolor-image-2.html with a few changes: + * (1) the whole thing is inside a -moz-transform + * (2) different border-images have different values for + * repeat/stretch/round + */ + + body { + width: 100px; + /* This transform has no scale, and thus tests pixel-snapping codepaths! */ + -moz-transform: translate(100px, 100px); + -moz-transform-origin: 0 0; + -khtml-transform: translate(100px, 100px); + -khtml-transform-origin: 0 0; + transform: translate(100px, 100px); + transform-origin: 0 0; + } + + div { + background: red; /* fail if this shows through */ + background-image: url('3x3multicolor.png'); /* fail if this shows through */ + margin-bottom: 2px; + } + + div.one { + border-image: url(10x5multicolor.png) 2 2 1 3 fill stretch; + -khtml-border-image: url(10x5multicolor.png) 2 2 1 3 fill stretch; + border-image: url(10x5multicolor.png) 2 2 1 3 fill stretch; + border-width: 4px 6px 8px 11px; + border-style: solid; + width: 9px; + height: 1px; + } + + div.two { + border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill repeat; + -khtml-border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill repeat; + border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill repeat; + border-width: 3px 1px 0px 4px; + border-style: solid; + width: 2px; + height: 17px; + } + + div.three { + border-image: url(10x5multicolor.png) 40% 2 1 30% fill round; + -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill round; + border-image: url(10x5multicolor.png) 40% 2 1 30% fill round; + border-width: 10px 2px 5px 3px; + border-style: solid; + width: 17px; + height: 8px; + } + + div.four { + border-image: url(10x5multicolor.png) 2 2 20% 30% fill stretch round; + -khtml-border-image: url(10x5multicolor.png) 2 2 20% 30% fill stretch round; + border-image: url(10x5multicolor.png) 2 2 20% 30% fill stretch round; + border-width: 5px 7px 1px 0; + border-style: solid; + width: 8px; + height: 5px; + } + + div.five { + border-width: 4px 8px 10px 2px; + border-style: solid; + border-image: url(10x5multicolor.png) 40% 2 1 30% fill repeat stretch; + -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill repeat stretch; + border-image: url(10x5multicolor.png) 40% 2 1 30% fill repeat stretch; + width: 0; + height: 8px; + } + + div.six { + border-width: 4px 0 10px 2px; + border-style: solid; + border-image: url(10x5multicolor.png) 40% 2 1 30% round repeat; + -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% round repeat; + border-image: url(10x5multicolor.png) 40% 2 1 30% round repeat; + width: 17px; + height: 0; + } + + div.seven { + border-image: url(10x5multicolor.png) 40% 2 1 30% stretch repeat; + -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% stretch repeat; + border-image: url(10x5multicolor.png) 40% 2 1 30% stretch repeat; + border-width: 1px 3px 0 0; + border-style: solid; + width: 17px; + height: 0; + } + + </style> +</head> +<body> +<div class="one"></div> +<div class="two"></div> +<div class="three"></div> +<div class="four"></div> +<div class="five"></div> +<div class="six"></div> +<div class="seven"></div> +</body> +</html> diff --git a/layout/reftests/border-image/reftest.list b/layout/reftests/border-image/reftest.list new file mode 100644 index 0000000000..677d7c65ec --- /dev/null +++ b/layout/reftests/border-image/reftest.list @@ -0,0 +1,97 @@ +== solid-image-1.html solid-image-1-ref.html +== solid-image-1a.html solid-image-1-ref.html +== solid-image-2.html solid-image-2-ref.html +== solid-image-2a.html solid-image-2-ref.html +== multicolor-image-1.html multicolor-image-1-ref.html +# This is fuzzy temporarily until bug 1044702 makes it possible to use source +# clipping on Windows. (Any other fix would have a significant perf cost.) +fuzzy-if(winWidget,0-1,0-1) == multicolor-image-2.html multicolor-image-2-ref.html +== multicolor-image-3.html multicolor-image-3-ref.html +== multicolor-image-4.html multicolor-image-4-ref.html +== multicolor-image-5.html multicolor-image-5-ref.html +== transparent-image-1.html transparent-image-1-ref.html +!= repeat-image-1.html repeat-image-1-ref.html +== 470250-1.html 470250-1-ref.html +== 470250-2.html 470250-2-ref.html +!= different-h-v-1.html different-h-v-ref.html +!= different-h-v-2.html different-h-v-ref.html +!= different-h-v-1.html different-h-v-2.html +== center-scaling-1.html center-scaling-1-ref.html +fuzzy-if(useDrawSnapshot,35-35,4050-4050) == center-scaling-2.html center-scaling-2-ref.html # Android: very different scaling (blurriness) on some sides +fuzzy-if(useDrawSnapshot,35-35,5220-5220) == center-scaling-3.html center-scaling-3-ref.html # Android: very different scaling (blurriness) on some sides +== center-scaling-4t.html center-scaling-4t-ref.html +== center-scaling-4r.html center-scaling-4r-ref.html +== center-scaling-4b.html center-scaling-4b-ref.html +== center-scaling-4l.html center-scaling-4l-ref.html +== center-scaling-4tb.html center-scaling-4tb-ref.html +== center-scaling-4lr.html center-scaling-4lr-ref.html +== side-scaling-1h.html side-scaling-1h-ref.html +== side-scaling-1v.html side-scaling-1v-ref.html +== border-image-width-1a.html border-image-width-1-ref.html +== border-image-width-1b.html border-image-width-1-ref.html +== border-image-width-1c.html border-image-width-1-ref.html +== border-image-width-large.html border-image-width-large-ref.html +== border-image-outset-1a.html border-image-outset-1-ref.html +== border-image-outset-1b.html border-image-outset-1-ref.html +== border-image-outset-1c.html border-image-outset-1-ref.html +== border-image-nofill-1.html border-image-nofill-1-ref.html +== border-image-outset-resize-1.html border-image-outset-resize-1-ref.html +fuzzy-if(asyncPan&&!layersGPUAccelerated,0-140,0-514) fuzzy-if(winWidget,0-144,0-448) == border-image-outset-move-1.html border-image-outset-move-1-ref.html +== 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 + +# The fuzziness here is due to subtle rounding behavior differences +# between different code paths that aren't necessarily a bug: +fuzzy(1-150,1-2650) fails-if(useDrawSnapshot) == border-image-repeat-space-8z.html border-image-repeat-space-8z-ref.html + +# border images with gradients +fuzzy-if(!useDrawSnapshot&&!geckoview,1-3,300-1804) == border-image-linear-gradient.html border-image-linear-gradient-ref.html +fuzzy(0-1,0-350) fuzzy-if(!geckoview,1-3,179-37537) == border-image-linear-gradient-slice-1.html border-image-linear-gradient-slice-1-ref.html +fuzzy(0-1,0-515) fuzzy-if(OSX,0-1,0-10595) fuzzy-if(!geckoview,1-3,272-25136) == border-image-linear-gradient-slice-2.html border-image-linear-gradient-slice-2-ref.html +fuzzy(0-1,0-2500) fuzzy-if(!geckoview,1-3,200-86037) == border-image-linear-gradient-slice-fill-1.html border-image-linear-gradient-slice-fill-1-ref.html +fuzzy(0-1,0-649) fuzzy-if(OSX,0-1,0-25771) fuzzy-if(!Android,0-1,0-546) fuzzy-if(Android,0-1,0-6093) fuzzy-if(!geckoview,1-3,477-57480) == border-image-linear-gradient-slice-fill-2.html border-image-linear-gradient-slice-fill-2-ref.html +fuzzy(0-1,0-134) fuzzy-if(OSX,0-5,0-1676) fuzzy-if(!geckoview,1-1,0-4537) == border-image-linear-gradient-width.html border-image-linear-gradient-width-ref.html +fuzzy(0-2,0-60590) fuzzy-if(Android,0-4,0-18022) fuzzy-if(OSX,0-1,0-15000) fuzzy-if(!useDrawSnapshot&&!geckoview,1-2,3900-60581) == border-image-linear-gradient-slice-width.html border-image-linear-gradient-slice-width-ref.html +fuzzy(0-2,0-26758) fuzzy-if(OSX,0-1,0-6000) fuzzy-if(!geckoview,1-3,2400-26758) == border-image-linear-gradient-outset.html border-image-linear-gradient-outset-ref.html +fuzzy(0-1,0-400) fuzzy-if(!geckoview,1-3,200-26872) == border-image-linear-gradient-repeat-repeat-1.html border-image-linear-gradient-repeat-repeat-1-ref.html +fuzzy(0-1,0-300) fuzzy-if(!geckoview,1-3,200-27131) == border-image-linear-gradient-repeat-round-1.html border-image-linear-gradient-repeat-round-1-ref.html +fuzzy-if(Android,0-1,0-1894) fuzzy-if(!useDrawSnapshot&&!geckoview,1-2,2400-67805) == border-image-linear-gradient-repeat-repeat-2.html border-image-linear-gradient-repeat-repeat-2-ref.html +fuzzy(0-1,0-2000) fuzzy-if(!geckoview,1-2,288-9500) == border-image-linear-gradient-repeat-round-2.html border-image-linear-gradient-repeat-round-2-ref.html +fuzzy(0-1,0-8533) fuzzy-if(!geckoview&&!swgl,1-3,972-9500) == border-image-linear-gradient-repeat-repeat-3.html border-image-linear-gradient-repeat-repeat-3-ref.html +fuzzy(0-3,0-107563) fuzzy-if(!geckoview&&!swgl,1-3,1000-107563) == border-image-linear-gradient-repeat-round-3.html border-image-linear-gradient-repeat-round-3-ref.html + +fuzzy(0-1,0-2096) == border-image-radial-gradient.html border-image-radial-gradient-ref.html +fuzzy(0-1,0-37818) == border-image-radial-gradient-slice-1.html border-image-radial-gradient-slice-1-ref.html +fuzzy(0-1,0-26363) == border-image-radial-gradient-slice-2.html border-image-radial-gradient-slice-2-ref.html +fuzzy(0-1,0-90873) == border-image-radial-gradient-slice-fill-1.html border-image-radial-gradient-slice-fill-1-ref.html +fuzzy(0-1,0-61729) == border-image-radial-gradient-slice-fill-2.html border-image-radial-gradient-slice-fill-2-ref.html +fuzzy(0-2,0-4894) == border-image-radial-gradient-width.html border-image-radial-gradient-width-ref.html +fuzzy(0-3,0-66698) == border-image-radial-gradient-slice-width.html border-image-radial-gradient-slice-width-ref.html + +# OS X failures tracked in bug 957025 +fuzzy-if(!useDrawSnapshot&&!geckoview,1-4,455-2000) == border-image-repeating-linear-gradient.html border-image-repeating-linear-gradient-ref.html +fails-if(OSX) fuzzy(0-3,0-95449) == border-image-repeating-linear-gradient-slice-fill-2.html border-image-repeating-linear-gradient-slice-fill-2-ref.html +fails-if(OSX) fuzzy(0-3,0-20000) fuzzy-if(!geckoview,1-4,800-14000) == border-image-repeating-linear-gradient-repeat-round-2.html border-image-repeating-linear-gradient-repeat-round-2-ref.html + +fuzzy(0-3,0-3008) == border-image-repeating-radial-gradient.html border-image-repeating-radial-gradient-ref.html +fuzzy(0-3,0-62078) == border-image-repeating-radial-gradient-slice-1.html border-image-repeating-radial-gradient-slice-1-ref.html +fuzzy(0-3,0-40536) == border-image-repeating-radial-gradient-slice-2.html border-image-repeating-radial-gradient-slice-2-ref.html +fuzzy(0-3,0-1794) fuzzy-if(!geckoview,1-3,30-12194) == border-image-repeating-radial-gradient-slice-fill-1.html border-image-repeating-radial-gradient-slice-fill-1-ref.html +fails-if(OSX) fuzzy(0-3,0-1435) fuzzy-if(!geckoview,1-2,20-8000) == border-image-repeating-radial-gradient-slice-fill-2.html border-image-repeating-radial-gradient-slice-fill-2-ref.html +fuzzy(0-3,0-7441) == border-image-repeating-radial-gradient-width.html border-image-repeating-radial-gradient-width-ref.html +fails-if(OSX) fuzzy(0-8,0-99728) == border-image-repeating-radial-gradient-slice-width.html border-image-repeating-radial-gradient-slice-width-ref.html +fuzzy(0-3,0-117768) == border-image-repeating-radial-gradient-repeat-repeat-2.html border-image-repeating-radial-gradient-repeat-repeat-2-ref.html +fails-if(OSX) fuzzy(0-3,0-116185) == border-image-repeating-radial-gradient-repeat-round-2.html border-image-repeating-radial-gradient-repeat-round-2-ref.html + +# border-image-source (-moz-)element +fuzzy(0-125,0-5903) == border-image-element.html border-image-element-ref.html + +# svg-as-border-image +== svg-as-border-image-1a.html svg-as-border-image-1-ref.html +== svg-as-border-image-1b.html svg-as-border-image-1-ref.html +== svg-as-border-image-1c.html svg-as-border-image-1-ref.html +== svg-as-border-image-2.html svg-as-border-image-2-ref.html +== svg-as-border-image-3.html svg-as-border-image-3-ref.html +== svg-as-border-image-4a.html svg-as-border-image-4-ref.html +== svg-as-border-image-4b.html svg-as-border-image-4-ref.html diff --git a/layout/reftests/border-image/repeat-image-1-ref.html b/layout/reftests/border-image/repeat-image-1-ref.html new file mode 100644 index 0000000000..73620462c5 --- /dev/null +++ b/layout/reftests/border-image/repeat-image-1-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>test of border-image</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; } + td { padding: 0; } + + </style> +</head> +<body> +<table> + <col style="width: 3px"> + <col style="width: 1px"> + <col style="width: 1px"> + <col style="width: 1px"> + <col style="width: 1px"> + <col style="width: 3px"> + + <tr style="height: 1px"> + <td style="background: #ff0000"></td> + <td style="background: #00ff00"></td> + <td style="background: #0000ff"></td> + <td style="background: #00ff00"></td> + <td style="background: #0000ff"></td> + <td style="background: #ff0000"></td> + </tr> + <tr style="height: 1px"> + <td style="background: #00ff00"></td> + <td style="background: #ff0000"></td> + <td style="background: #ff0000"></td> + <td style="background: #ff0000"></td> + <td style="background: #ff0000"></td> + <td style="background: #0000ff"></td> + </tr> + <tr style="height: 1px"> + <td style="background: #0000ff"></td> + <td style="background: #ff0000"></td> + <td style="background: #ff0000"></td> + <td style="background: #ff0000"></td> + <td style="background: #ff0000"></td> + <td style="background: #00ff00"></td> + </tr> + <tr style="height: 1px"> + <td style="background: #ff0000"></td> + <td style="background: #00ff00"></td> + <td style="background: #0000ff"></td> + <td style="background: #00ff00"></td> + <td style="background: #0000ff"></td> + <td style="background: #ff0000"></td> + </tr> +</table> +</body> +</html> diff --git a/layout/reftests/border-image/repeat-image-1.html b/layout/reftests/border-image/repeat-image-1.html new file mode 100644 index 0000000000..87705a0b7c --- /dev/null +++ b/layout/reftests/border-image/repeat-image-1.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>test of border-image</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + div.p1 { + background: red; /* fail if this shows through */ + background-image: url('3x3multicolor.png'); /* fail if this shows through */ + border-width: 1px 3px; + border-style: solid; + border-image: url('4x4multicolor.png') 1 1 1 1 repeat; + -khtml-border-image: url('4x4multicolor.png') 1 1 1 1 repeat; + border-image: url('4x4multicolor.png') 1 1 1 1 repeat; + } + + div.p2 { + background: red; /* fail if this shows through */ + background-image: url('3x3multicolor.png'); /* fail if this shows through */ + border-width: 1px 3px; + border-style: solid; + border-image: url('4x4multicolor.png') 1 1 1 1; + -khtml-border-image: url('4x4multicolor.png') 1 1 1 1; + border-image: url('4x4multicolor.png') 1 1 1 1; + } + + </style> +</head> +<body> +<div class="p1" style="width: 4px; height: 2px"></div> +<!--<div class="p2" style="width: 4px; height: 2px"></div> --> +</body> +</html> diff --git a/layout/reftests/border-image/reticule-bl.png b/layout/reftests/border-image/reticule-bl.png Binary files differnew file mode 100644 index 0000000000..6abbaf319f --- /dev/null +++ b/layout/reftests/border-image/reticule-bl.png diff --git a/layout/reftests/border-image/reticule-bo.png b/layout/reftests/border-image/reticule-bo.png Binary files differnew file mode 100644 index 0000000000..f72a67381c --- /dev/null +++ b/layout/reftests/border-image/reticule-bo.png diff --git a/layout/reftests/border-image/reticule-br.png b/layout/reftests/border-image/reticule-br.png Binary files differnew file mode 100644 index 0000000000..84e22afe2a --- /dev/null +++ b/layout/reftests/border-image/reticule-br.png diff --git a/layout/reftests/border-image/reticule-ct.png b/layout/reftests/border-image/reticule-ct.png Binary files differnew file mode 100644 index 0000000000..71ac10f611 --- /dev/null +++ b/layout/reftests/border-image/reticule-ct.png diff --git a/layout/reftests/border-image/reticule-le.png b/layout/reftests/border-image/reticule-le.png Binary files differnew file mode 100644 index 0000000000..abe56ffad6 --- /dev/null +++ b/layout/reftests/border-image/reticule-le.png diff --git a/layout/reftests/border-image/reticule-ri.png b/layout/reftests/border-image/reticule-ri.png Binary files differnew file mode 100644 index 0000000000..95d7db8423 --- /dev/null +++ b/layout/reftests/border-image/reticule-ri.png diff --git a/layout/reftests/border-image/reticule-tl.png b/layout/reftests/border-image/reticule-tl.png Binary files differnew file mode 100644 index 0000000000..8a3516998a --- /dev/null +++ b/layout/reftests/border-image/reticule-tl.png diff --git a/layout/reftests/border-image/reticule-to.png b/layout/reftests/border-image/reticule-to.png Binary files differnew file mode 100644 index 0000000000..d1b082c9ba --- /dev/null +++ b/layout/reftests/border-image/reticule-to.png diff --git a/layout/reftests/border-image/reticule-tr.png b/layout/reftests/border-image/reticule-tr.png Binary files differnew file mode 100644 index 0000000000..cd9bb5a5a4 --- /dev/null +++ b/layout/reftests/border-image/reticule-tr.png diff --git a/layout/reftests/border-image/reticule.png b/layout/reftests/border-image/reticule.png Binary files differnew file mode 100644 index 0000000000..02c7d10e76 --- /dev/null +++ b/layout/reftests/border-image/reticule.png diff --git a/layout/reftests/border-image/roundrectbutton.png b/layout/reftests/border-image/roundrectbutton.png Binary files differnew file mode 100644 index 0000000000..c194fdc5fb --- /dev/null +++ b/layout/reftests/border-image/roundrectbutton.png diff --git a/layout/reftests/border-image/side-scaling-1h-ref.html b/layout/reftests/border-image/side-scaling-1h-ref.html new file mode 100644 index 0000000000..2b306c385a --- /dev/null +++ b/layout/reftests/border-image/side-scaling-1h-ref.html @@ -0,0 +1,28 @@ +<!doctype html> +<html><head> +<title>border-image: repeat with zero-height top and bottom</title> +<style> +span { + display: inline-block; + margin: 10px; + box-sizing: border-box; + height: 24px; + border-style: solid; + border-color: transparent; + border-width: 0 6px; + border-image: url("roundrectbutton.png") 0 6 repeat stretch; +} +</style> +</head><body> +<p> +<span style="width:12px"></span> +<span style="width:13px"></span> +<span style="width:14px"></span> +<span style="width:16px"></span> +<span style="width:18px"></span> +<span style="width:20px"></span> +<span style="width:25px"></span> +<span style="width:30px"></span> +<span style="width:40px"></span> +</p> +</body></html> diff --git a/layout/reftests/border-image/side-scaling-1h.html b/layout/reftests/border-image/side-scaling-1h.html new file mode 100644 index 0000000000..6ad0369af9 --- /dev/null +++ b/layout/reftests/border-image/side-scaling-1h.html @@ -0,0 +1,28 @@ +<!doctype html> +<html><head> +<title>border-image: repeat with zero-height top and bottom</title> +<style> +span { + display: inline-block; + margin: 10px; + box-sizing: border-box; + height: 24px; + border-style: solid; + border-color: transparent; + border-width: 0 6px; + border-image: url("roundrectbutton.png") 0 6 repeat; +} +</style> +</head><body> +<p> +<span style="width:12px"></span> +<span style="width:13px"></span> +<span style="width:14px"></span> +<span style="width:16px"></span> +<span style="width:18px"></span> +<span style="width:20px"></span> +<span style="width:25px"></span> +<span style="width:30px"></span> +<span style="width:40px"></span> +</p> +</body></html> diff --git a/layout/reftests/border-image/side-scaling-1v-ref.html b/layout/reftests/border-image/side-scaling-1v-ref.html new file mode 100644 index 0000000000..735ecf3cfa --- /dev/null +++ b/layout/reftests/border-image/side-scaling-1v-ref.html @@ -0,0 +1,28 @@ +<!doctype html> +<html><head> +<title>border-image: repeat with zero-width left and right</title> +<style> +span { + display: inline-block; + margin: 5px; + box-sizing: border-box; + width: 13px; + border-style: solid; + border-color: transparent; + border-width: 10px 0; + border-image: url("roundrectbutton.png") 10 0 stretch repeat; +} +</style> +</head><body> +<p> +<span style="height:24px"></span> +<span style="height:25px"></span> +<span style="height:26px"></span> +<span style="height:27px"></span> +<span style="height:28px"></span> +<span style="height:30px"></span> +<span style="height:35px"></span> +<span style="height:40px"></span> +<span style="height:50px"></span> +</p> +</body></html> diff --git a/layout/reftests/border-image/side-scaling-1v.html b/layout/reftests/border-image/side-scaling-1v.html new file mode 100644 index 0000000000..b3c99f6a28 --- /dev/null +++ b/layout/reftests/border-image/side-scaling-1v.html @@ -0,0 +1,28 @@ +<!doctype html> +<html><head> +<title>border-image: repeat with zero-width left and right</title> +<style> +span { + display: inline-block; + margin: 5px; + box-sizing: border-box; + width: 13px; + border-style: solid; + border-color: transparent; + border-width: 10px 0; + border-image: url("roundrectbutton.png") 10 0 repeat; +} +</style> +</head><body> +<p> +<span style="height:24px"></span> +<span style="height:25px"></span> +<span style="height:26px"></span> +<span style="height:27px"></span> +<span style="height:28px"></span> +<span style="height:30px"></span> +<span style="height:35px"></span> +<span style="height:40px"></span> +<span style="height:50px"></span> +</p> +</body></html> diff --git a/layout/reftests/border-image/solid-image-1-ref.html b/layout/reftests/border-image/solid-image-1-ref.html new file mode 100644 index 0000000000..511dc115b7 --- /dev/null +++ b/layout/reftests/border-image/solid-image-1-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>test of border-image</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> +</head> +<body> +<div style="border: solid #1DD813 1em;">border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line</div> +</body> +</html> diff --git a/layout/reftests/border-image/solid-image-1.html b/layout/reftests/border-image/solid-image-1.html new file mode 100644 index 0000000000..ef28ba1141 --- /dev/null +++ b/layout/reftests/border-image/solid-image-1.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>test of border-image</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + div { + border-width: 1em; + border-style: solid; + border-image: url('3x3green-1DD813.png') 1 1 1 1; + -khtml-border-image: url('3x3green-1DD813.png') 1 1 1 1; + border-image: url('3x3green-1DD813.png') 1 1 1 1; + } + </style> +</head> +<body> +<div>border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line</div> +</body> +</html> diff --git a/layout/reftests/border-image/solid-image-1a.html b/layout/reftests/border-image/solid-image-1a.html new file mode 100644 index 0000000000..af60a75e36 --- /dev/null +++ b/layout/reftests/border-image/solid-image-1a.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>test of border-image</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + div { + border-width: 1em; + border-style: solid; + border-image-source: url('3x3green-1DD813.png'); + border-image-slice: 1 1 1 1; + } + </style> +</head> +<body> +<div>border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line</div> +</body> +</html> diff --git a/layout/reftests/border-image/solid-image-2-ref.html b/layout/reftests/border-image/solid-image-2-ref.html new file mode 100644 index 0000000000..640791fea7 --- /dev/null +++ b/layout/reftests/border-image/solid-image-2-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>test of border-image</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + div { + border: 10px solid #1DD813; + margin: 1px; + } + + </style> +</head> +<body> +<div style="width: 50px; height: 5px"></div> +<div style="width: 51px; height: 5px"></div> +<div style="width: 52px; height: 5px"></div> +<div style="width: 53px; height: 5px"></div> +<div style="width: 54px; height: 5px"></div> +<div style="width: 55px; height: 5px"></div> +<div style="width: 56px; height: 5px"></div> +<div style="width: 57px; height: 5px"></div> +<div style="width: 58px; height: 5px"></div> +<div style="width: 59px; height: 5px"></div> +<div style="width: 550px; height: 5px"></div> +<div style="width: 551px; height: 5px"></div> +<div style="width: 552px; height: 5px"></div> +<div style="width: 553px; height: 5px"></div> +<div style="width: 554px; height: 5px"></div> +<div style="width: 555px; height: 5px"></div> +<div style="width: 556px; height: 5px"></div> +<div style="width: 557px; height: 5px"></div> +<div style="width: 558px; height: 5px"></div> +<div style="width: 559px; height: 5px"></div> +</body> +</html> diff --git a/layout/reftests/border-image/solid-image-2.html b/layout/reftests/border-image/solid-image-2.html new file mode 100644 index 0000000000..fe1837f511 --- /dev/null +++ b/layout/reftests/border-image/solid-image-2.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>test of border-image</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + div { + border-width: 10px; + border-style: solid; + border-image: url('3x3green-1DD813.png') 1 1 1 1; + -khtml-border-image: url('3x3green-1DD813.png') 1 1 1 1; + border-image: url('3x3green-1DD813.png') 1 1 1 1; + margin: 1px; + } + + </style> +</head> +<body> +<div style="width: 50px; height: 5px"></div> +<div style="width: 51px; height: 5px"></div> +<div style="width: 52px; height: 5px"></div> +<div style="width: 53px; height: 5px"></div> +<div style="width: 54px; height: 5px"></div> +<div style="width: 55px; height: 5px"></div> +<div style="width: 56px; height: 5px"></div> +<div style="width: 57px; height: 5px"></div> +<div style="width: 58px; height: 5px"></div> +<div style="width: 59px; height: 5px"></div> +<div style="width: 550px; height: 5px"></div> +<div style="width: 551px; height: 5px"></div> +<div style="width: 552px; height: 5px"></div> +<div style="width: 553px; height: 5px"></div> +<div style="width: 554px; height: 5px"></div> +<div style="width: 555px; height: 5px"></div> +<div style="width: 556px; height: 5px"></div> +<div style="width: 557px; height: 5px"></div> +<div style="width: 558px; height: 5px"></div> +<div style="width: 559px; height: 5px"></div> +</body> +</html> diff --git a/layout/reftests/border-image/solid-image-2a.html b/layout/reftests/border-image/solid-image-2a.html new file mode 100644 index 0000000000..3e2f48f60d --- /dev/null +++ b/layout/reftests/border-image/solid-image-2a.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>test of border-image</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + div { + border-width: 10px; + border-style: solid; + border-image: url('3x3green-1DD813.png') 1 1 1 1 repeat; + -khtml-border-image: url('3x3green-1DD813.png') 1 1 1 1 repeat; + border-image: url('3x3green-1DD813.png') 1 1 1 1 repeat; + margin: 1px; + } + + </style> +</head> +<body> +<div style="width: 50px; height: 5px"></div> +<div style="width: 51px; height: 5px"></div> +<div style="width: 52px; height: 5px"></div> +<div style="width: 53px; height: 5px"></div> +<div style="width: 54px; height: 5px"></div> +<div style="width: 55px; height: 5px"></div> +<div style="width: 56px; height: 5px"></div> +<div style="width: 57px; height: 5px"></div> +<div style="width: 58px; height: 5px"></div> +<div style="width: 59px; height: 5px"></div> +<div style="width: 550px; height: 5px"></div> +<div style="width: 551px; height: 5px"></div> +<div style="width: 552px; height: 5px"></div> +<div style="width: 553px; height: 5px"></div> +<div style="width: 554px; height: 5px"></div> +<div style="width: 555px; height: 5px"></div> +<div style="width: 556px; height: 5px"></div> +<div style="width: 557px; height: 5px"></div> +<div style="width: 558px; height: 5px"></div> +<div style="width: 559px; height: 5px"></div> +</body> +</html> diff --git a/layout/reftests/border-image/svg-as-border-image-1-ref.html b/layout/reftests/border-image/svg-as-border-image-1-ref.html new file mode 100644 index 0000000000..ea2a51381b --- /dev/null +++ b/layout/reftests/border-image/svg-as-border-image-1-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> +<title>reference of svg-as-border-image</title> +<style> +div.border { + width: 40px; + height: 40px; + background-color: blue; + background-repeat: no-repeat; + background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><rect x="0" y="0" width="15" height="15" fill="pink"/><rect x="25" y="25" width="15" height="15" fill="green"/></svg>'); +} + +</style> +</head> +<body> +<div class="border"></div> +</body> +</html> diff --git a/layout/reftests/border-image/svg-as-border-image-1a.html b/layout/reftests/border-image/svg-as-border-image-1a.html new file mode 100644 index 0000000000..6b5eaf405d --- /dev/null +++ b/layout/reftests/border-image/svg-as-border-image-1a.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> +<title>test of svg-as-border-image</title> +<style> +div.border { + width: 10px; + height: 10px; + background-color: blue; + border: 15px solid; + border-image: 25% url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" ><rect x="0" y="0" width="10" height="10" fill="pink"/><rect x="30" y="30" width="10" height="10" fill="green"/></svg>'); +} +</style> +</head> +<body> +<div class="border"></div> +</body> +</html> diff --git a/layout/reftests/border-image/svg-as-border-image-1b.html b/layout/reftests/border-image/svg-as-border-image-1b.html new file mode 100644 index 0000000000..2c3e5d92bc --- /dev/null +++ b/layout/reftests/border-image/svg-as-border-image-1b.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> +<title>test of svg-as-border-image</title> +<style> +div.border { + width: 10px; + height: 10px; + background-color: blue; + border: 15px solid; + border-image: 25% url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="25%" height="25%" fill="pink"/><rect x="75%" y="75%" width="25%" height="25%" fill="green"/></svg>'); +} +</style> +</head> +<body> +<div class="border"></div> +</body> +</html> diff --git a/layout/reftests/border-image/svg-as-border-image-1c.html b/layout/reftests/border-image/svg-as-border-image-1c.html new file mode 100644 index 0000000000..2ab2642e6b --- /dev/null +++ b/layout/reftests/border-image/svg-as-border-image-1c.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> +<title>test of svg-as-border-image</title> +<style> +div.border { + width: 10px; + height: 10px; + background-color: blue; + border: 15px solid; + border-image: 25% url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 20" preserveAspectRatio="xMaxYMid slice"><rect x="0" y="0" width="10" height="5" fill="pink"/><rect x="30" y="15" width="10" height="5" fill="green"/></svg>'); +} +</style> +</head> +<body> +<div class="border"></div> +</body> +</html> diff --git a/layout/reftests/border-image/svg-as-border-image-2-ref.html b/layout/reftests/border-image/svg-as-border-image-2-ref.html new file mode 100644 index 0000000000..72cd23b153 --- /dev/null +++ b/layout/reftests/border-image/svg-as-border-image-2-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> +<title>reference for svg-as-border-image</title> +<style> +div.border { + width: 10px; + height: 10px; + background-color: blue; + border: 10px solid; + border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="240px" height="240px" viewBox="0 0 240 240"><circle cx="50%" cy="50%" r="50%" fill="red"/></svg>') 5% stretch; +} +</style> +</head> +<body> +<div class="border" style="width:100px;height:100px"></div> +</body> +</html> diff --git a/layout/reftests/border-image/svg-as-border-image-2.html b/layout/reftests/border-image/svg-as-border-image-2.html new file mode 100644 index 0000000000..56d9e3b81c --- /dev/null +++ b/layout/reftests/border-image/svg-as-border-image-2.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> +<title>test of svg-as-border-image</title> +<style> +div.border { + width: 10px; + height: 10px; + background-color: blue; + border: 10px solid; + border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50%" cy="50%" r="50%" fill="red"/></svg>') 5% stretch; +} +</style> +</head> +<body> +<div class="border" style="width:100px;height:100px"></div> +</body> +</html> diff --git a/layout/reftests/border-image/svg-as-border-image-3-ref.html b/layout/reftests/border-image/svg-as-border-image-3-ref.html new file mode 100644 index 0000000000..42c176b866 --- /dev/null +++ b/layout/reftests/border-image/svg-as-border-image-3-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> +<title>reference for svg-as-border-image</title> +<style> +div.border { + width: 10px; + height: 10px; + background-color: blue; + border: 10px solid; + border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 100 100"><circle cx="50%" cy="50%" r="50%" fill="red"/></svg>') 5% stretch; +} +</style> +</head> +<body> +<div class="border" style="width:200px;height:100px"></div> +</body> +</html> diff --git a/layout/reftests/border-image/svg-as-border-image-3.html b/layout/reftests/border-image/svg-as-border-image-3.html new file mode 100644 index 0000000000..44403c15c1 --- /dev/null +++ b/layout/reftests/border-image/svg-as-border-image-3.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> +<title>test of svg-as-border-image</title> +<style> +div.border { + width: 10px; + height: 10px; + background-color: blue; + border: 10px solid; + border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px"><circle cx="50%" cy="50%" r="50%" fill="red"/></svg>') 5% stretch; +} +</style> +</head> +<body> +<div class="border" style="width:200px;height:100px"></div> +</body> +</html> diff --git a/layout/reftests/border-image/svg-as-border-image-4-ref.html b/layout/reftests/border-image/svg-as-border-image-4-ref.html new file mode 100644 index 0000000000..1fcff1f834 --- /dev/null +++ b/layout/reftests/border-image/svg-as-border-image-4-ref.html @@ -0,0 +1,24 @@ +<html> +<head> +<title>reference of svg-as-border-image</title> +<style type="text/css"> +div { + width: 100px; + height: 100px; + margin: 30px; + border-width: 30px; + border-style: solid; +} +#border5p { + border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50%" cy="50%" r="50%" fill="red"/></svg>') 5% stretch; +} +#border25p { + border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50%" cy="50%" r="50%" fill="red"/></svg>') 25% stretch; +} +</style> +</head> +<body> +<div id="border5p"></div> +<div id="border25p"></div> +</body> +</html> diff --git a/layout/reftests/border-image/svg-as-border-image-4a.html b/layout/reftests/border-image/svg-as-border-image-4a.html new file mode 100644 index 0000000000..ec4f54e61a --- /dev/null +++ b/layout/reftests/border-image/svg-as-border-image-4a.html @@ -0,0 +1,33 @@ +<html class="reftest-wait"> +<head> +<title>test of svg-as-border-image</title> +<style type="text/css"> +div { + width: 400px; + height: 100px; + margin: 30px; + border-width: 30px; + border-style: solid; +} +#border5p { + border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50%" cy="50%" r="50%" fill="red"/></svg>') 5% stretch; +} +#border25p { + border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50%" cy="50%" r="50%" fill="red"/></svg>') 25% stretch; +} +</style> +<script> +function resizeDiv() { + document.getElementById('border5p').style.width = '100px'; + document.getElementById('border25p').style.width = '100px'; + document.documentElement.removeAttribute('class'); +} + +document.addEventListener('MozReftestInvalidate', resizeDiv); +</script> +</head> +<body> +<div id="border5p"></div> +<div id="border25p"></div> +</body> +</html> diff --git a/layout/reftests/border-image/svg-as-border-image-4b.html b/layout/reftests/border-image/svg-as-border-image-4b.html new file mode 100644 index 0000000000..80600ebe90 --- /dev/null +++ b/layout/reftests/border-image/svg-as-border-image-4b.html @@ -0,0 +1,25 @@ +<html> +<head> +<title>test of svg-as-border-image</title> +<style type="text/css"> +div { + width: 100px; + height: 100px; + margin: 30px; + border-width: 30px; + border-style: solid; + transform: translate(100px, 200px); +} +#border5p { + border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50%" cy="50%" r="50%" fill="red"/></svg>') 5% stretch; +} +#border25p { + border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50%" cy="50%" r="50%" fill="red"/></svg>') 25% stretch; +} +</style> +</head> +<body style="transform: translate(-100px, -200px);"> +<div id="border5p"></div> +<div id="border25p"></div> +</body> +</html> diff --git a/layout/reftests/border-image/transparent-image-1-ref.html b/layout/reftests/border-image/transparent-image-1-ref.html new file mode 100644 index 0000000000..cf1b72dfc7 --- /dev/null +++ b/layout/reftests/border-image/transparent-image-1-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>test of border-image</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> +</head> +<body> +<div style="padding: 1em;">border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line</div> +</body> +</html> diff --git a/layout/reftests/border-image/transparent-image-1.html b/layout/reftests/border-image/transparent-image-1.html new file mode 100644 index 0000000000..397d470a45 --- /dev/null +++ b/layout/reftests/border-image/transparent-image-1.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>test of border-image</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + div { + border: double orange 1em; + border-image: url('3x3transparent.png') 1 1 1 1; + -khtml-border-image: url('3x3transparent.png') 1 1 1 1; + border-image: url('3x3transparent.png') 1 1 1 1; + } + </style> +</head> +<body> +<div>border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line</div> +</body> +</html> |
