diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-backgrounds/reference | |
| parent | Initial commit. (diff) | |
| download | firefox-upstream.tar.xz firefox-upstream.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-backgrounds/reference')
99 files changed, 2918 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/60x60-green-background.html b/testing/web-platform/tests/css/css-backgrounds/reference/60x60-green-background.html new file mode 100644 index 0000000000..d19ed4ea26 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/60x60-green-background.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>CSS Reftest Reference: 60px by 60px green box</title> +<link rel="author" title="Google" href="http://www.google.com/"/> +</head> +<body> +<div style="width: 100px; height: 100px; background: url('../support/60x60-green.png') no-repeat;"><br></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-334-ref.xht b/testing/web-platform/tests/css/css-backgrounds/reference/background-334-ref.xht new file mode 100644 index 0000000000..2b568109db --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-334-ref.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + background-color: #CCC; /* medium gray-ish */ + border: black dotted 5px; + width: 150px; + } + + img {vertical-align: top;} + /* otherwise, the image "sits" on the baseline inside line box. */ + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square with gray background, black dotted borders and <strong>no red</strong>.</p> + + <div><img src="../support/50x50-green.png" height="150" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-attachment-local-hidden-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-attachment-local-hidden-ref.html new file mode 100644 index 0000000000..fc593c23cd --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-attachment-local-hidden-ref.html @@ -0,0 +1,23 @@ +<!doctype HTML> +<style> + .outer { + position:relative; + width: 120px; + height: 120px; + border-radius: 40px; + background-color: rgba(255,0,0,0.5); + } + + .inner { + position:absolute; + top:10px; + left:10px; + width: 100px; + height: 100px; + border-radius: 30px; + background-color: lightblue; + } +</style> +<div class = "outer"> + <div class = "inner"></div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-clip-002-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-clip-002-ref.html new file mode 100644 index 0000000000..a03d6e2020 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-clip-002-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Reference: background-clip - initial value</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + div { + background-color: green; + height: 160px; + width: 160px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div></div> +</body> + diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-clip-004-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-clip-004-ref.html new file mode 100644 index 0000000000..ecc34dbc70 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-clip-004-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Reference: background-clip - padding-box keyword value</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + div { + background-color: green; + height: 150px; + left: 5px; + position: relative; + top: 5px; + width: 150px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-clip-005-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-clip-005-ref.html new file mode 100644 index 0000000000..c019cdb3ec --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-clip-005-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Reference: background-clip - content-box keyword value</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + div { + background-color: green; + height: 100px; + left: 30px; + position: relative; + top: 30px; + width: 100px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-clip-content-box-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-clip-content-box-ref.html new file mode 100644 index 0000000000..dc6d9a00d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-clip-content-box-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>CSS Backgrounds and Borders Test: background-clip Reference</title> +<link rel="author" title="James Wang" href="mailto:wangjian@ucweb.com"> +<style> +#test-color-box { + position: absolute; + width: 180px; + height: 180px; + background-color: rgba(255, 165, 0, 1); + border: 10px solid blue; +} +</style> +<p>Test passes if the orange box has a 10px width blue edge.</p> +<!-- background --> +<div id="test-color-box"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-color-clip.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-color-clip.html new file mode 100644 index 0000000000..18e80a9258 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-color-clip.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Green Rectangle</title> +<style> + div { + width: 120px; + height: 100px; + background-color: green; + background-clip: content-box; + border-style: solid; + border-width: 10px; + border-color: transparent; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-gradient-subpixel-fills-area-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-gradient-subpixel-fills-area-ref.html new file mode 100644 index 0000000000..49fcbb6204 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-gradient-subpixel-fills-area-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html lang="en-GB" xml:lang="en-GB" xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Background Test Reference</title> + <link rel="author" title="schenney" href="mailto:schenney@chromium.org"> + <style> + ul { + width: 396.875px; + overflow: auto; + padding: 0; + list-style: none; + background-color: red; + } + + li { + float: left; + } + + div { + display: block; + width: 376.875px; + height: 17px; + padding: 20px 10px; + background: linear-gradient(to bottom, green 0%, darkgreen 100%) darkgreen; + } + </style> +</head> +<body> + <ul> + <li><div></div></li> + </ul> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-image-001-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-image-001-ref.html new file mode 100644 index 0000000000..f8b2ad25cc --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-image-001-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>background-image referance</title> +<link rel="author" title="Justin Hill" href="http://www.justin-hill.com"> +<style> + .green { + top:50px; + left:50px; + } +</style> +<body> + <p> Test passes if green image shows and no red visable.</p> + <img class="green" src="../support/green.png"> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-image-centered-with-border-radius-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-image-centered-with-border-radius-ref.html new file mode 100644 index 0000000000..44db3f5601 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-image-centered-with-border-radius-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Background Test Reference</title> + <link rel="author" title="schenney" href="mailto:schenney@chromium.org"> + <style> + span { + background-color: green; + display: inline-block; + height: 60px; + width: 60px; + border: 5px solid green; + border-radius: 5px; + box-sizing: border-box; + } + </style> +</head> + +<body> + <span></span> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-image-cover-zoomed-1-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-image-cover-zoomed-1-ref.html new file mode 100644 index 0000000000..d61bac9fed --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-image-cover-zoomed-1-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Background Test Reference</title> + <link rel="author" title="schenney" href="mailto:schenney@chromium.org"> + <style> + body { + zoom: 80%; + } + body > div { + width: 504px; + height: 252px; + background-image: url(../support/40px-wide-20px-tall-green-rect.png); + background-size: cover; + background-repeat: no-repeat; + } + </style> +</head> + +<body> + <div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-image-first-letter-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-image-first-letter-ref.html new file mode 100644 index 0000000000..fd2fdf93aa --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-image-first-letter-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Ethan Malasky" href="mailto:emalasky@adobe.com"> + <meta name="flags" content="ahem image"> + <script src="/common/reftest-wait.js"></script> + <link rel="preload" as="image" href="../support/cat.png" onload="takeScreenshot()" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #content { + color: transparent; + font: 100px Ahem; + } + #content > #foo { + background-image: url("../support/cat.png"); /* 98 w. by 99px h. */ + background-repeat: no-repeat; + } + </style> +</head> +<body> + <p>Test passes if cat image is visible.</p> + <div id="content"><span id="foo">X</span> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-image-first-line-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-image-first-line-ref.html new file mode 100644 index 0000000000..3bbe8467a5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-image-first-line-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta name="flags" content="ahem image"> +<script src="/common/reftest-wait.js"></script> +<link rel="preload" as="image" href="../support/cat.png" onload="takeScreenshot()" /> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style type="text/css"> +#content { + color: transparent; + font: 100px/1 Ahem; + background-image: url("../support/cat.png"); /* 98 w. by 99px h. */ + background-repeat: no-repeat; +} +</style> +<p>Test passes if cat image is visible.</p> +<div id="content">X</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-image-large-with-auto-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-image-large-with-auto-ref.html new file mode 100644 index 0000000000..7bad169e3a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-image-large-with-auto-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Background Test Reference</title> + <link rel="author" title="schenney" href="mailto:schenney@chromium.org"> + <style> + .wide-div { + background-image: url(../support/green-1000x10.png); + background-repeat: no-repeat; + background-size: 10000px 100px; + width: 1000px; + height: 100px; + border: 1px solid black; + } + + .high-div { + background-image: url(../support/green-10x1000.png); + background-repeat: no-repeat; + background-size: 100px 10000px; + width: 100px; + height: 1000px; + border: 1px solid black; + } + </style> +</head> + +<body> + <div class='wide-div'></div> + <div class='high-div'></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-image-table-cells-zoomed-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-image-table-cells-zoomed-ref.html new file mode 100644 index 0000000000..6f4261ecf4 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-image-table-cells-zoomed-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Background Test Reference</title> + <link rel="author" title="schenney" href="mailto:schenney@chromium.org"> + <style> + body { + zoom: 121%; + } + .test-table { + display: table; + width: 600px; + border-collapse: collapse; + border-spacing: 0; + background-color: green; + } + .test-row { + display: table-row; + padding: 0px; + } + .test-cell { + display: table-cell; + padding: 0px; + height: 50px; + border: 0; + } + + </style> +</head> + +<body> + <div class="test-table"> + <div class="test-row"> + <div class="test-cell"></div> + <div class="test-cell"></div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-image-with-border-radius-fidelity-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-image-with-border-radius-fidelity-ref.html new file mode 100644 index 0000000000..0d8f30d74f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-image-with-border-radius-fidelity-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>Consistent image fidelity of background-image with border-radius (reference)</title> +<style> + #target { + background-image: url("../support/aqua-yellow-32x32.png"); + background-size: 100% 100%; + border-radius: 8px; + width: 256px; + height: 256px; + } +</style> +<div id="target" style="background-clip: padding-box"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-origin-002-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-origin-002-ref.html new file mode 100644 index 0000000000..88d61225a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-origin-002-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + div { + background-color: green; + height: 60px; + left: 5px; + position: relative; + top: 5px; + width: 60px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div></div> +</body> + diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-origin-004-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-origin-004-ref.html new file mode 100644 index 0000000000..0e26ab5bb0 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-origin-004-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + div { + background-color: green; + height: 60px; + width: 60px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-origin-005-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-origin-005-ref.html new file mode 100644 index 0000000000..12d359397b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-origin-005-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + div { + background-color: green; + height: 60px; + left: 30px; + position: relative; + top: 30px; + width: 60px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-origin-006-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-origin-006-ref.html new file mode 100644 index 0000000000..a94eb84c0c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-origin-006-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + html { + padding-left: 170px; + } + div { + background-color: green; + height: 60px; + left: 0px; + position: absolute; + top: 0px; + width: 60px; + } +</style> +<body> + <p>Test passes if there is a filled green square at the left of the page and <strong>no red</strong>.</p> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-origin-007-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-origin-007-ref.html new file mode 100644 index 0000000000..d3a1d05328 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-origin-007-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + div { + background-color: green; + height: 55px; + left: 5px; + position: relative; + top: 5px; + width: 55px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-paint-order-001-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-paint-order-001-ref.html new file mode 100644 index 0000000000..5783dfe863 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-paint-order-001-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Background clip and border painting order</title> + <link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@webkit.org"> + <link rel="reviewer" title="Arron Eicholz" href="mailto:arronei@microsoft.com" /> <!-- 2012-10-27 --> + <style> + div + { + height: 100px; + width: 100px; + background-color: green; + } + </style> + </head> + <body> + <p>Test passes if there is a green rectangle below and no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-position-negative-percentage-comparison-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-position-negative-percentage-comparison-ref.html new file mode 100644 index 0000000000..aa68e23fe0 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-position-negative-percentage-comparison-ref.html @@ -0,0 +1,12 @@ +<!doctype html> +<style> +.target { + margin: 50px; + width: 50px; + height: 50px; + border: 1px solid black; + background-image: url("../support/100x100-blue-and-orange.png"); + background-position: right top; +} +</style> +<div class="target"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-position-subpixel-at-border-ref.tentative.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-position-subpixel-at-border-ref.tentative.html new file mode 100644 index 0000000000..2964ffa4ce --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-position-subpixel-at-border-ref.tentative.html @@ -0,0 +1,87 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Backgrounds: Subpixel positions adjacent to the borders reference</title> + <link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> + <style> + #no-repeat-y-bottom { + position: absolute; + top: 201px; + left: 8px; + width: 150px; + height: 37px; + border-width: 0px 0px 1px; + border-style: solid; + border-color: rgba(0,0,0,0.5); + border-bottom-color: transparent; + box-sizing: border-box; + background-color: lightgrey; + background-image: url("../resources/green50x1.png"); + background-position: bottom -1px left 0px; + background-repeat: repeat-x; + padding: 3px 3px 1px 3px; + } + #no-repeat-y-top { + position: absolute; + top: 160px; + left: 8px; + width: 150px; + height: 38px; + border-width: 1px 0px 0px 0px; + border-style: solid; + border-color: rgba(0,0,0,0.5); + border-top-color: transparent; + box-sizing: border-box; + background-color: lightgrey; + background-image: url("../resources/green50x1.png"); + background-position: top -1px left 0px; + background-repeat: repeat-x; + padding: 1px 3px 3px 3px; + } + #no-repeat-x-right { + position: absolute; + top: 8px; + left: 201px; + width: 37px; + height: 150px; + border-width: 0px 1px 0px 0px; + border-style: solid; + border-color: rgba(0,0,0,0.5); + border-right-color: transparent; + box-sizing: border-box; + background-color: lightgrey; + background-image: url("../resources/green1x50.png"); + background-position: right -1px top 0px; + background-repeat: repeat-y; + padding: 3px 1px 3px 3px; + } + #no-repeat-x-left { + position: absolute; + top: 8px; + left: 160px; + width: 38px; + height: 150px; + border-width: 0px 0px 0px 1px; + border-style: solid; + border-color: rgba(0,0,0,0.5); + border-left-color: transparent; + box-sizing: border-box; + background-color: lightgrey; + background-image: url("../resources/green1x50.png"); + background-position: left -1px top 0px; + background-repeat: repeat-y; + padding: 3px 3px 3px 1px; + } + </style> +</head> +<body> + <div id="no-repeat-y-top"> + </div> + <div id="no-repeat-y-bottom"> + </div> + <div id="no-repeat-x-right"> + </div> + <div id="no-repeat-x-left"> + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-position-three-four-values-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-position-three-four-values-ref.html new file mode 100644 index 0000000000..e721a2c0fa --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-position-three-four-values-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + +<style type="text/css"> +div { + width: 200px; + height: 200px; + border: 2px solid black; + background-image: url("../support/blue_color.png"); + background-repeat: no-repeat; + display: inline-block; +} +.test1 { + background-position: 50px 50%; +} +.test2 { + background-position: 75% 75%; +} +.test3 { + background-position: 25px 25%; +} +.test4 { + background-position: 75% 75%; +} +</style> + +</head> +<body> + +<div class="test1"></div> +<div class="test2"></div> +<div class="test3"></div> +<div class="test4"></div> + +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-rounded-image-clip.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-rounded-image-clip.html new file mode 100644 index 0000000000..2436bedad5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-rounded-image-clip.html @@ -0,0 +1,17 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Corner Clipped Background Color</title> +<style> + html { + background-color: green; + } + #a { + top: 20px; + left: 20px; + position: absolute; + width: 20px; + height: 20px; + background-color: black; + } +</style> +<div id="a"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-size-002-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-size-002-ref.html new file mode 100644 index 0000000000..0e26ab5bb0 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-size-002-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + div { + background-color: green; + height: 60px; + width: 60px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-size-006-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-size-006-ref.html new file mode 100644 index 0000000000..c891bb4adc --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-size-006-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + div { + background-color: green; + height: 45px; + width: 45px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-size-021-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-size-021-ref.html new file mode 100644 index 0000000000..e59e4eab60 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-size-021-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + div { + background-color: green; + left: 30px; + height: 100px; + position: relative; + top: 30px; + width: 100px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div></div> +</body> + diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-size-025-ref.xht b/testing/web-platform/tests/css/css-backgrounds/reference/background-size-025-ref.xht new file mode 100644 index 0000000000..c80d4a1543 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-size-025-ref.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + img + { + height: 70px; + vertical-align: top; + width: 70px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is 3 rows of 3 blue-and-orange squares and if there is <strong>no partially</strong> displayed squares and <strong>no red</strong>.</p> + + <div><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><br /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><br /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-size-026-ref.xht b/testing/web-platform/tests/css/css-backgrounds/reference/background-size-026-ref.xht new file mode 100644 index 0000000000..133d5241b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-size-026-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div {width: 196px;} + + img {vertical-align: top;} + ]]></style> + + </head> + + <body> + + <p>Test passes if there is 2 rows of 2 cats and if there is <strong>no partially</strong> displayed cat and <strong>no red</strong>.</p> + + <div> + <img alt="Image download support must be enabled" src="../support/cat.png" /><img alt="Image download support must be enabled" src="../support/cat.png" /><img alt="Image download support must be enabled" src="../support/cat.png" /><img alt="Image download support must be enabled" src="../support/cat.png" /> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-size-027-ref.xht b/testing/web-platform/tests/css/css-backgrounds/reference/background-size-027-ref.xht new file mode 100644 index 0000000000..36b55b082f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-size-027-ref.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + img + { + height: 60px; + vertical-align: top; + width: 52px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is 3 rows of 3 blue-and-orange rectangles and if there is <strong>no partially</strong> displayed rectangles and <strong>no red</strong>.</p> + + <div><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><br /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><br /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-size-028-ref.xht b/testing/web-platform/tests/css/css-backgrounds/reference/background-size-028-ref.xht new file mode 100644 index 0000000000..edc236f5ee --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-size-028-ref.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + img + { + height: 50px; + vertical-align: top; + width: 50px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is 4 rows of 4 blue-and-orange squares and if there is <strong>no partially</strong> displayed square and <strong>no red</strong>.</p> + + <div><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><br /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><br /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><br /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-size-029-ref.xht b/testing/web-platform/tests/css/css-backgrounds/reference/background-size-029-ref.xht new file mode 100644 index 0000000000..81499e8683 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-size-029-ref.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + img + { + height: 60px; + vertical-align: top; + width: 60px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is 3 rows of 3 blue-and-orange squares and if there is <strong>no partially</strong> displayed squares and <strong>no red</strong>.</p> + + <div><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><br /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><br /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-size-031-ref.xht b/testing/web-platform/tests/css/css-backgrounds/reference/background-size-031-ref.xht new file mode 100644 index 0000000000..ea0dd78ba0 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-size-031-ref.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + img + { + height: 50px; + vertical-align: top; + width: 50px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is 1 column of 3 blue-and-orange squares and if there is <strong>no partially</strong> displayed square and <strong>no red</strong>.</p> + + <div><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><br /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><br /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-size-041-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-size-041-ref.html new file mode 100644 index 0000000000..fe66052ebf --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-size-041-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div#black-walls + { + border: solid 40px; + border-color: transparent black; + height: 400px; + width: 400px; + } + + div#gradient + { + background-image: linear-gradient(orange, blue); + height: 100%; /* computes to 400px */ + margin: 0px auto; + /* the gradient block is horizontally centered inside div#black-walls */ + width: 200px; + } + </style> + + <div id="black-walls"><div id="gradient"></div></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-size-043-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-size-043-ref.html new file mode 100644 index 0000000000..bf60e2183d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-size-043-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div#black-walls + { + border: solid 40px; + border-color: transparent black; + height: 400px; + width: 400px; + } + + div#inner-orange + { + background-color: orange; + border: blue solid 16px; + height: 368px; /* 400px - 2 * 16px == 368px */ + margin: 0px auto; + /* the orange block is horizontally centered inside div#black-walls */ + width: 168px; /* 200px - 2 * 16px == 168px */ + } + </style> + + <div id="black-walls"><div id="inner-orange"></div></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background-size-one-value-1x1-image-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/background-size-one-value-1x1-image-ref.html new file mode 100644 index 0000000000..0a0404a9b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background-size-one-value-1x1-image-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Background Test Reference</title> + <link rel="author" title="schenney" href="mailto:schenney@chromium.org"> + <style type="text/css"> + .backgroundSize{ + background: url("../support/1x1-green.png"); + background-size: 50% 100%; + background-repeat: repeat-y; + height: 100px; + } + </style> +</head> +<body> + <div style="background: #7957d5"> + <div class="backgroundSize"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/background_clip_padding-box.html b/testing/web-platform/tests/css/css-backgrounds/reference/background_clip_padding-box.html new file mode 100644 index 0000000000..fe42b53257 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/background_clip_padding-box.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Backgrounds and Borders Test: background-clip_border-box</title> + <link rel="author" title="Xiaoyan Jiang" href="mailto:dajiangxiaoyan@126.com"> + <link rel="reviewer" title="Jinlong Zhang" href="mailto:jinlongz@oupeng.com"> + <style type="text/css"> + /* Positioned container allows for the self-describing statement to still + be visible in the case of failure */ + .container { + position: absolute; + } + .ref { + background-color: red; + height: 130px; + left: 10px; + top: 10px; + width: 130px; + position: absolute; + } + + .ref1 { + height: 130px; + left: 5px; + top: 5px; + width: 130px; + position: absolute; + border: blue dotted 5px ; + } + + </style> +</head> +<body> +<p>Test passes if border is blue and dotted without red background</p> + <div class="container"> + <div class="ref"></div> + <div class="ref1"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/border-image-image-type-003-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-image-type-003-ref.html new file mode 100644 index 0000000000..690f9ad11a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-image-type-003-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div#outer + { + background-image: linear-gradient(to top, blue, orange); + height: 140px; + margin: 10px; + width: 140px; + } + + div#inner + { + background-color: white; + height: 80px; + left: 30px; + position: relative; + top: 30px; + width: 80px; + } + </style> + + <p>Test passes if there is no red visible on the page. + + <div id="outer"><div id="inner"></div></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/border-image-repeat-005-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-repeat-005-ref.html new file mode 100644 index 0000000000..0a372e088b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-repeat-005-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Reference: 'border-image-repeat' with 'space' and 'round'</title> +<style> + .green { + width: 100px; + height: 100px; + background-color: green; + position: absolute; + } +</style> +<p>There should be two green rectangles below:</p> +<div style="position: relative"> + <div class="green" style="left: 25px"></div> + <div class="green" style="left: 150px"></div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/border-image-repeat-round-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-repeat-round-ref.html new file mode 100644 index 0000000000..327013a933 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-repeat-round-ref.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<title>CSS Border Image: border-image-repeat: round (reference)</title> +<style type="text/css"> + .container { + position: relative; + width: 96px; + height: 96px; + } + .container > div { + position: absolute; + width: 16px; + height: 16px; + background-image: url("../support/border.png"); + background-size: 48px 48px; + } + .top { top: 0; } + .right { left: 80px; } + .bottom { top: 80px; } + .left { left: 0; } + .top-left-corner-tile { background-position: 0px 0px; } + .top-edge-tile { background-position: -16px 0px; } + .top-right-corner-tile { background-position: -32px 0px; } + .left-edge-tile { background-position: 0px -16px; } + .right-edge-tile { background-position: -32px -16px; } + .bottom-left-corner-tile { background-position: 0px -32px; } + .bottom-edge-tile { background-position: -16px -32px; } + .bottom-right-corner-tile { background-position: -32px -32px; } + .h-pos-0 { left: 16px; } + .h-pos-1 { left: 32px; } + .h-pos-2 { left: 48px; } + .h-pos-3 { left: 64px; } + .v-pos-0 { top: 16px; } + .v-pos-1 { top: 32px; } + .v-pos-2 { top: 48px; } + .v-pos-3 { top: 64px; } +</style> +<p>The test passes if diamonds in corners are red, and other diamonds are orange, there are 4 orange diamonds on each side.</p> +<div class="container"> + <div class="top left top-left-corner-tile"></div> + <div class="top top-edge-tile h-pos-0"></div> + <div class="top top-edge-tile h-pos-1"></div> + <div class="top top-edge-tile h-pos-2"></div> + <div class="top top-edge-tile h-pos-3"></div> + <div class="top right top-right-corner-tile"></div> + <div class="right right-edge-tile v-pos-0"></div> + <div class="right right-edge-tile v-pos-1"></div> + <div class="right right-edge-tile v-pos-2"></div> + <div class="right right-edge-tile v-pos-3"></div> + <div class="bottom right bottom-right-corner-tile"></div> + <div class="bottom bottom-edge-tile h-pos-0"></div> + <div class="bottom bottom-edge-tile h-pos-1"></div> + <div class="bottom bottom-edge-tile h-pos-2"></div> + <div class="bottom bottom-edge-tile h-pos-3"></div> + <div class="bottom left bottom-left-corner-tile"></div> + <div class="left left-edge-tile v-pos-0"></div> + <div class="left left-edge-tile v-pos-1"></div> + <div class="left left-edge-tile v-pos-2"></div> + <div class="left left-edge-tile v-pos-3"></div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/border-image-round-and-stretch-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-round-and-stretch-ref.html new file mode 100644 index 0000000000..4f0ffdbc52 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-round-and-stretch-ref.html @@ -0,0 +1,104 @@ +<!DOCTYPE html> +<title>CSS Border Image: border-image-repeat: round and stretch (reference)</title> +<style type="text/css"> + .container { + position: relative; + width: 224px; + height: 109px; + } + .container > div { + position: absolute; + width: 16px; + background-image: url("../support/border.png"); + } + .top { top: 0; } + .right { left: 208px; } + .bottom { top: 93px; } + .left { left: 0; } + .top-left-corner-tile { + background-position: 0px 0px; + background-size: 48px 48px; + height: 16px; + } + .top-edge-tile { + background-position: -16px 0px; + background-size: 48px 48px; + height: 16px; + } + .top-right-corner-tile { + background-position: -32px 0px; + background-size: 48px 48px; + height: 16px; + } + .left-edge-tile { + background-position: 0px -77px; + background-size: 48px 231px; + height: 77px; + } + .right-edge-tile { + background-position: -32px -77px; + background-size: 48px 231px; + height: 77px; + } + .bottom-left-corner-tile { + background-position: 0px -32px; + background-size: 48px 48px; + height: 16px; + } + .bottom-edge-tile { + background-position: -16px -32px; + background-size: 48px 48px; + height: 16px; + } + .bottom-right-corner-tile { + background-position: -32px -32px; + background-size: 48px 48px; + height: 16px; + } + .h-pos-0 { left: 16px; } + .h-pos-1 { left: 32px; } + .h-pos-2 { left: 48px; } + .h-pos-3 { left: 64px; } + .h-pos-4 { left: 80px; } + .h-pos-5 { left: 96px; } + .h-pos-6 { left: 112px; } + .h-pos-7 { left: 128px; } + .h-pos-8 { left: 144px; } + .h-pos-9 { left: 160px; } + .h-pos-10 { left: 176px; } + .h-pos-11 { left: 192px; } + .v-pos-0 { top: 16px; } +</style> +<p>The test passes if orange diamonds on top and bottom border repeat 12 times, and orange diamonds on left and right border are stretched, diamonds in corners are red, and other diamonds are orange.</p> +<div class="container"> + <div class="top left top-left-corner-tile"></div> + <div class="top top-edge-tile h-pos-0"></div> + <div class="top top-edge-tile h-pos-1"></div> + <div class="top top-edge-tile h-pos-2"></div> + <div class="top top-edge-tile h-pos-3"></div> + <div class="top top-edge-tile h-pos-4"></div> + <div class="top top-edge-tile h-pos-5"></div> + <div class="top top-edge-tile h-pos-6"></div> + <div class="top top-edge-tile h-pos-7"></div> + <div class="top top-edge-tile h-pos-8"></div> + <div class="top top-edge-tile h-pos-9"></div> + <div class="top top-edge-tile h-pos-10"></div> + <div class="top top-edge-tile h-pos-11"></div> + <div class="top right top-right-corner-tile"></div> + <div class="right right-edge-tile v-pos-0"></div> + <div class="bottom right bottom-right-corner-tile"></div> + <div class="bottom bottom-edge-tile h-pos-0"></div> + <div class="bottom bottom-edge-tile h-pos-1"></div> + <div class="bottom bottom-edge-tile h-pos-2"></div> + <div class="bottom bottom-edge-tile h-pos-3"></div> + <div class="bottom bottom-edge-tile h-pos-4"></div> + <div class="bottom bottom-edge-tile h-pos-5"></div> + <div class="bottom bottom-edge-tile h-pos-6"></div> + <div class="bottom bottom-edge-tile h-pos-7"></div> + <div class="bottom bottom-edge-tile h-pos-8"></div> + <div class="bottom bottom-edge-tile h-pos-9"></div> + <div class="bottom bottom-edge-tile h-pos-10"></div> + <div class="bottom bottom-edge-tile h-pos-11"></div> + <div class="bottom left bottom-left-corner-tile"></div> + <div class="left left-edge-tile v-pos-0"></div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/border-image-shorthand-001-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-shorthand-001-ref.html new file mode 100644 index 0000000000..fe9bf3b86a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-shorthand-001-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + border: 10px double red; + border-image-outset: 2; + border-image-repeat: round stretch; + border-image-slice: 30; + border-image-source: url("../support/blue-and-red-diamonds-81x81.png"); + border-image-width: 4; + height: 150px; + margin: 50px 0px 100px 50px; + width: 150px; + } + </style> + + <p>Test passes if there are <strong>2 identical images.</strong> + + <div></div> + + <div></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/border-image-shorthand-002-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-shorthand-002-ref.html new file mode 100644 index 0000000000..b21217c91e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-shorthand-002-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + border: green solid 20px; + height: 100px; + margin: 50px; + width: 100px; + } + </style> + + <p>Test passes if there are 2 identical green squares and <strong>no red</strong>. + + <div></div> + + <div></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/border-image-shorthand-003-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-shorthand-003-ref.html new file mode 100644 index 0000000000..3ff7980de6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-shorthand-003-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + border: green solid 20px; + height: 85px; + margin: 60px 60px 20px; + width: 85px; + } + + div#second + { + margin-top: 0px; + } + </style> + + <p>Test passes if there are 2 identical green squares and <strong>no red</strong>. + + <div></div> + + <div id="second"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/border-image-slice-005-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-slice-005-ref.html new file mode 100644 index 0000000000..d4a4040a78 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-slice-005-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div#outer + { + background-color: orange; + border: blue double 24px; + margin: 50px; + padding: 8px; + width: 216px; + } + + div#inner + { + border: blue solid 8px; + height: 100px; + } + </style> + + <p>Test passes if there is a filled orange rectangle inside 3 blue borders interleaved with 2 orange borders and <strong>no red</strong>. + + <div id="outer"> + <div id="inner"></div> + </div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/border-image-slice-007-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-slice-007-ref.html new file mode 100644 index 0000000000..2581d8dabf --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-slice-007-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div#outer + { + background-color: orange; + border: blue double 24px; + margin: 50px; + padding: 8px; + width: 216px; + } + + div#inner + { + background-color: green; + border: blue solid 8px; + height: 100px; + } + </style> + + <p>Test passes if there is a filled green rectangle inside 3 blue borders interleaved with 2 orange borders and <strong>no red</strong>. + + <div id="outer"> + <div id="inner"></div> + </div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/border-image-space-001-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-space-001-ref.html new file mode 100644 index 0000000000..22c5f4dfb8 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-space-001-ref.html @@ -0,0 +1,74 @@ +<!DOCTYPE html> +<html> +<!-- Submitted from TestTWF Paris --> + <head> + <title>CSS Test: Border Image: box with spaced repeating border image</title> + <link rel="author" title="Levi Weintraub" href="mailto:leviw@chromium.org"> + <style> + div { + background-color: green; + } + .borderContainer { + width: 108px; + height: 108px; + position: relative; + } + .borderContainer > div { + display: inline-block; + width: 20px; + height: 20px; + position: absolute; + } + .corner { + background-image: url('../support/border.png'); + background-size: 60px 60px; + } + .edge { + background-image: url('../support/border.png'); + background-position: left -20px; + background-size: 60px 60px; + } + .left { + left: 0px; + } + .left1 { + left: 22px; + } + .left2 { + left: 44px; + } + .left3 { + left: 66px; + } + .right { + right: 0px; + } + .top { + top: 0px; + } + .top1 { + top: 22px; + } + .top2 { + top: 44px; + } + .top3 { + top: 66px; + } + .bottom { + bottom: 0px; + } + </style> + </head> + <body> + <p>There should be a green box below with red diamonds in the corners, and three yellow diamonds evenly spaced + apart along the edges.</p> + <div class="borderContainer"> + <div class="corner top left"></div><div class="edge top left1"></div><div class="edge top left2"></div><div class="edge top left3"></div><div class="corner top right"></div> + <div class="edge left top1"></div><div class="edge right top1"></div> + <div class="edge left top2"></div><div class="edge right top2"></div> + <div class="edge left top3"></div><div class="edge right top3"></div> + <div class="corner bottom left"></div><div class="edge bottom left1"></div><div class="edge bottom left2"></div><div class="edge bottom left3"></div><div class="corner bottom right"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/border-image-width-009-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-width-009-ref.html new file mode 100644 index 0000000000..cc92298435 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-image-width-009-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + border: transparent solid 50px; + border-image-source: url("../support/9-colored-areas.png"); + border-image-slice: 5% 10% 15% 20%; + margin-bottom: 8px; + width: 0px; + } + + div#sub-test1 + { + border-image-width: 50px; + } + + div#sub-test2 + { + border-image-width: 50px 30px; + } + + div#sub-test3 + { + border-image-width: 70px 0px 30px 0px; + } + + div#sub-test4 + { + border-image-width: 0px 70px 0px 30px; + } + </style> + + <div id="sub-test1"></div> + + <div id="sub-test2"></div> + + <div id="sub-test3"></div> + + <div id="sub-test4"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/border-radius-clip-002-ref.htm b/testing/web-platform/tests/css/css-backgrounds/reference/border-radius-clip-002-ref.htm new file mode 100644 index 0000000000..2a68ea3587 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-radius-clip-002-ref.htm @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Background is clipped to the curve of the content-box when 'background-clip: content-box'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> + <style type="text/css"> + .base + { + width: 98px; + height: 98px; + border: 10px double black; + padding: 11px; + border-radius: 40px; + } + .cover + { + margin: -120px 0 40px 20px; + width: 100px; + height: 100px; + border-radius: 20px; + background-color: black; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div class="base"></div> + <div class="cover"></div> + <div class="base"></div> + <div class="cover"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/border-radius-clipping-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-radius-clipping-ref.html new file mode 100644 index 0000000000..2aeef90eb0 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-radius-clipping-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + background-color: green; + border-radius: 50%; + margin: 20px; + height: 100px; + width: 100px; + float: left; + } + </style> + + <p>Test passes if there are four filled green circles and <strong>no red</strong>. + + <div></div> + + <div></div> + + <div></div> + + <div></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/border-radius-horizontal-value-is-zero-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-radius-horizontal-value-is-zero-ref.html new file mode 100644 index 0000000000..67324c7178 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-radius-horizontal-value-is-zero-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test Background: border-radius property if horizontal value is zero</title> + <link rel="author" title="Marc Silverman" href="mailto:silverman@adobe.com"> + <style type="text/css"> + #rounded-div { + position: absolute; + top: 50px; + left: 5px; + width: 13em; + height: 8em; + border: solid 1em green; + } + </style> +</head> +<body> + <p>The test passes if the rectangle has four square corners (no red is shown).</p> + <div id="rounded-div"> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/border-right-width-1px-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-right-width-1px-ref.html new file mode 100644 index 0000000000..b725d6ea0f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-right-width-1px-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Borders: border-right-width: 1px, reference</title> +<style> + div { display: inline-block; height: 100px; border-left-style: solid; border-left-width: 1px; } +</style> +</head> +<body> + <p>There should be a black line below and no red.</p> + <div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/border-right-width-3px-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-right-width-3px-ref.html new file mode 100644 index 0000000000..068da127d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-right-width-3px-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Borders: border-right-width: 3px, reference</title> +<style> + div { display: inline-block; height: 100px; border-left-style: solid; border-left-width: 3px; } +</style> +</head> +<body> + <p>There should be a black line below and no red.</p> + <div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/border-right-width-5px-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-right-width-5px-ref.html new file mode 100644 index 0000000000..29706fa4f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-right-width-5px-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Borders: border-right-width: 5px, reference</title> +<style> + div { display: inline-block; height: 100px; border-left-style: solid; border-left-width: 5px; } +</style> +</head> +<body> + <p>There should be a black line below and no red.</p> + <div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/border-top-width-1px-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-top-width-1px-ref.html new file mode 100644 index 0000000000..15b1948226 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-top-width-1px-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Borders: border-top-width: 1px, reference</title> +<style> + div { border-top-style: solid; border-top-width: 1px; } +</style> +</head> +<body> + <p>There should be a black line below and no red.</p> + <div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/border-top-width-3px-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-top-width-3px-ref.html new file mode 100644 index 0000000000..3fea5943cf --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-top-width-3px-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Borders: border-top-width: 3px, reference</title> +<style> + div { border-top-style: solid; border-top-width: 3px; } +</style> +</head> +<body> + <p>There should be a black line below and no red.</p> + <div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/border-top-width-5px-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-top-width-5px-ref.html new file mode 100644 index 0000000000..fa6db4a843 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-top-width-5px-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Borders: border-top-width: 5px, reference</title> +<style> + div { border-top-style: solid; border-top-width: 5px; } +</style> +</head> +<body> + <p>There should be a black line below and no red.</p> + <div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/border-width-pixel-snapping-001-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-width-pixel-snapping-001-ref.html new file mode 100644 index 0000000000..99dd2f0beb --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-width-pixel-snapping-001-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Reference Test: border-width pixel snapping</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<div style="border: 2px solid black; width: 100px; height: 100px;"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/border-width-small-values-001-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/border-width-small-values-001-ref.html new file mode 100644 index 0000000000..26177acb37 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/border-width-small-values-001-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Reference Test: border-width small values</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<div>The test passes if this text has a border</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-005-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-005-ref.html new file mode 100644 index 0000000000..81a5cbf6b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-005-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test Background: Box-Shadow property</title> + <link rel="author" title="Marc Silverman" href="mailto:silverman@adobe.com"> + <style type="text/css"> + #box-div { + position: absolute; + top: 50px; + left: 5px; + background-color:#000; + width: 144px; + height: 144px; + } + #shadow-div { + position: absolute; + top: 60px; + left: 15px; + background-color:#00ff00; + width: 144px; + height: 144px; + } + </style> +</head> +<body> + <p>The test passes if there is a green drop shadow and no red.</p> + <div id="shadow-div"> + </div> + <div id="box-div"> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-039-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-039-ref.html new file mode 100644 index 0000000000..6f364d09a2 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-039-ref.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div.blue + { + background-color: rgba(0, 0, 255, 0.5); /* semi-transparent blue */ + border: black double 18px; + height: 36px; + width: 36px; + } + + div#sub-test1-orange + { + background-color: rgba(255, 165, 0, 0.5); /* semi-transparent orange */ + bottom: 72px; /* offsetHeight == 72px */ + height: 72px; + left: 72px; /* offsetWidth == 72px */ + position: relative; + width: 36px; + } + + div#sub-test21-orange + { + background-color: rgba(255, 165, 0, 0.5); /* semi-transparent orange */ + bottom: 126px; /* 18px + 72px + 36px == 126px */ + height: 18px; + left: 18px; + position: relative; + width: 108px; + } + + div#sub-test22-orange + { + background-color: rgba(255, 165, 0, 0.5); /* semi-transparent orange */ + bottom: 126px; + height: 72px; + left: 72px; + position: relative; + width: 54px; + } + + div#sub-test23-orange + { + background-color: rgba(255, 165, 0, 0.5); /* semi-transparent orange */ + bottom: 126px; + height: 18px; + left: 18px; + position: relative; + width: 108px; + } + + div#sub-test3-orange + { + background-color: rgba(255, 165, 0, 0.5); /* semi-transparent orange */ + bottom: 162px; + height: 36px; + left: 72px; + position: relative; + width: 18px; + } + </style> + + <h3>Not inset and Npx 0px: 36px 0px</h3> + + <div class="blue"></div><div id="sub-test1-orange"></div> + + <div class="blue" style="position: relative; bottom: 36px;"></div><div id="sub-test21-orange"></div><div id="sub-test22-orange"></div><div id="sub-test23-orange"></div> + + <div class="blue" style="position: relative; bottom: 108px;"></div><div id="sub-test3-orange"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-040-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-040-ref.html new file mode 100644 index 0000000000..14159cfcdf --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-040-ref.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div.blue + { + background-color: rgba(0, 0, 255, 0.5); /* semi-transparent blue */ + border: black double 18px; + height: 36px; + width: 36px; + } + + div#sub-test41-orange + { + background-color: rgba(255, 165, 0, 0.5); /* semi-transparent orange */ + bottom: 54px; /* offsetHeight == 54px */ + height: 54px; + left: 72px; + position: relative; + width: 36px; + } + + div#sub-test42-orange + { + background-color: rgba(255, 165, 0, 0.5); /* semi-transparent orange */ + bottom: 54px; + height: 18px; + left: 36px; + position: relative; + width: 72px; + } + + div#sub-test51-orange + { + background-color: rgba(255, 165, 0, 0.5); /* semi-transparent orange */ + bottom: 90px; /* 18px + 72px == 90px */ + height: 72px; + left: 72px; + position: relative; + width: 54px; + } + + div#sub-test52-orange + { + background-color: rgba(255, 165, 0, 0.5); /* semi-transparent orange */ + bottom: 90px; + height: 36px; + left: 18px; + position: relative; + width: 108px; + } + + div#sub-test6-orange + { + background-color: rgba(255, 165, 0, 0.5); /* semi-transparent orange */ + bottom: 108px; + height: 36px; + left: 72px; + position: relative; + width: 18px; + } + </style> + + <h3>Not inset and Npx Mpx: 36px 18px</h3> + + <div class="blue"></div><div id="sub-test41-orange"></div><div id="sub-test42-orange"></div> + + <div class="blue" style="position: relative; bottom: 18px;"></div><div id="sub-test51-orange"></div><div id="sub-test52-orange"></div> + + <div class="blue" style="position: relative; bottom: 72px;"></div><div id="sub-test6-orange"></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-041-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-041-ref.html new file mode 100644 index 0000000000..8b93bbdf11 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-041-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div.blue + { + background-color: rgba(0, 0, 255, 0.5); /* semi-transparent blue */ + border: black double 18px; + height: 36px; + margin-bottom: 36px; + width: 36px; + } + + div#sub-test7-orange + { + background-color: rgba(255, 165, 0, 0.5); /* semi-transparent orange */ + height: 36px; + width: 18px; + } + + div#sub-test81-orange , div#sub-test83-orange + { + background-color: rgba(255, 165, 0, 0.5); /* semi-transparent orange */ + height: 12px; + width: 36px; + } + + div#sub-test82-orange + { + background-color: rgba(255, 165, 0, 0.5); /* semi-transparent orange */ + height: 12px; + width: 30px; + } + + div#sub-test9-orange + { + background-color: rgba(255, 165, 0, 0.5); /* semi-transparent orange */ + height: 36px; + width: 12px; + } + </style> + + <h3>With inset and Npx 0px: 18px 0px</h3> + + <div class="blue"><div id="sub-test7-orange"></div></div> + + <div class="blue"><div id="sub-test81-orange"></div><div id="sub-test82-orange"></div><div id="sub-test83-orange"></div></div> + + <div class="blue"><div id="sub-test9-orange"></div></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-042-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-042-ref.html new file mode 100644 index 0000000000..ccc209a02d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-042-ref.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div.blue + { + background-color: rgba(0, 0, 255, 0.5); /* semi-transparent blue */ + border: black double 18px; + height: 36px; + margin-bottom: 36px; + width: 36px; + } + + div#sub-test101-orange + { + background-color: rgba(255, 165, 0, 0.5); /* semi-transparent orange */ + height: 12px; + width: 36px; + } + + div#sub-test102-orange + { + background-color: rgba(255, 165, 0, 0.5); /* semi-transparent orange */ + height: 24px; + width: 18px; + } + + div#sub-test111-orange + { + background-color: rgba(255, 165, 0, 0.5); /* semi-transparent orange */ + height: 24px; + width: 36px; + } + + div#sub-test112-orange + { + background-color: rgba(255, 165, 0, 0.5); /* semi-transparent orange */ + height: 12px; + width: 30px; + } + + div#sub-test121-orange + { + background-color: rgba(255, 165, 0, 0.5); /* semi-transparent orange */ + height: 6px; + width: 36px; + } + + div#sub-test122-orange + { + background-color: rgba(255, 165, 0, 0.5); /* semi-transparent orange */ + height: 30px; + width: 12px; + } + </style> + + <h3>With inset and Npx Mpx: 18px 12px</h3> + + <div class="blue"><div id="sub-test101-orange"></div><div id="sub-test102-orange"></div></div> + + <div class="blue"><div id="sub-test111-orange"></div><div id="sub-test112-orange"></div></div> + + <div class="blue"><div id="sub-test121-orange"></div><div id="sub-test122-orange"></div></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-body-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-body-ref.html new file mode 100644 index 0000000000..d2ae1ebd84 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-body-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS box-shadow Test Reference</title> + <link rel="author" title="fmalita" href="mailto:fmalita@chromium.org"> + <style type="text/css"> + html { + background-color: white; + } + body { + position: relative; + box-shadow: 0 0 0 4px red; + height: 300px; + width: 600px; + margin: 20px auto; + } + </style> +</head> +<body></body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-inset-spread-without-border-radius.html b/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-inset-spread-without-border-radius.html new file mode 100644 index 0000000000..5e9cf0d34e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-inset-spread-without-border-radius.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> + <title>Reference File</title> + <link rel="author" title="Zhang Xiaochong" href="mailto:joy.xczhang@gmail.com"> + <style type="text/css"> + .container { + position: relative; + } + .ref { + background-color: green; + height: 150px; + position: absolute; + width: 150px; + } + </style> +</head> +<body> + <p>The test passes if there is a filled green square and no red.</p> + <div class="container"> + <div class="ref"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-inset-without-border-radius.html b/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-inset-without-border-radius.html new file mode 100644 index 0000000000..5e9cf0d34e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-inset-without-border-radius.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> + <title>Reference File</title> + <link rel="author" title="Zhang Xiaochong" href="mailto:joy.xczhang@gmail.com"> + <style type="text/css"> + .container { + position: relative; + } + .ref { + background-color: green; + height: 150px; + position: absolute; + width: 150px; + } + </style> +</head> +<body> + <p>The test passes if there is a filled green square and no red.</p> + <div class="container"> + <div class="ref"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-outset-spread-without-border-radius.html b/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-outset-spread-without-border-radius.html new file mode 100644 index 0000000000..f62399abce --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-outset-spread-without-border-radius.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>Reference File</title> + <link rel="author" title="Zhang Xiaochong" href="mailto:joy.xczhang@gmail.com"> + <style type="text/css"> + .container { + position: relative; + } + .ref { + background-color: green; + height: 160px; + left: 5px; + position: absolute; + top: 5px; + width: 160px; + } + </style> +</head> +<body> + <p>The test passes if there is a filled green square and no red.</p> + <div class="container"> + <div class="ref"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-outset-without-border-radius.html b/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-outset-without-border-radius.html new file mode 100644 index 0000000000..2bca4c6961 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-outset-without-border-radius.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>Reference File</title> + <link rel="author" title="Zhang Xiaochong" href="mailto:joy.xczhang@gmail.com"> + <style type="text/css"> + .container { + position: relative; + } + .ref { + background-color: green; + height: 150px; + left: 10px; + position: absolute; + top: 10px; + width: 150px; + } + </style> +</head> +<body> + <p>The test passes if there is a filled green square and no red.</p> + <div class="container"> + <div class="ref"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-overlapping-001-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-overlapping-001-ref.html new file mode 100644 index 0000000000..9b875c79fa --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-overlapping-001-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + background-color: green; + height: 100px; + width: 600px; + } + </style> + + <p>Test passes if there is a filled green rectangle and <strong>no red</strong>. + + <div></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-overlapping-003-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-overlapping-003-ref.html new file mode 100644 index 0000000000..677a5f3312 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-overlapping-003-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + background-color: green; + height: 200px; + width: 600px; + } + </style> + + <p>Test passes if there is a filled green rectangle and <strong>no red</strong>. + + <div></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-table-border-collapse-001-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-table-border-collapse-001-ref.html new file mode 100644 index 0000000000..fb2734a7c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/box-shadow-table-border-collapse-001-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + background-color: orange; + border: blue solid 30px; + box-shadow: 20px 20px darkgray; + height: 100px; + width: 100px; + } + </style> + + <p>Test passes if there is a filled orange square with a thick blue border and if such square has a gray outer shadow at its bottom and at its right side. + + <div></div> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/css-border-radius-ref-001.html b/testing/web-platform/tests/css/css-backgrounds/reference/css-border-radius-ref-001.html new file mode 100644 index 0000000000..b89f285326 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/css-border-radius-ref-001.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS border-radius Test</title> + <style type="text/css"> + .redSquare{ + position: absolute; + top:50px; + left:50px; + width: 100px; + height: 100px; + background-color:rgba(255, 0, 0, 1); + } + .greenSquare { + position: absolute; + top:50px; + left:50px; + width: 100px; + height: 100px; + /*border-radius: 50%;*/ + background:url(../support/y.png); + } + .container { + position: absolute; + } + </style> +</head> +<body> + <p>The test passes if you the green is inscribed circle of the red square.</p> + <div class="container"> + <!-- This is the square that has a inscribed circle if the test passes --> + <div id="red" class="redSquare"></div> + <!-- This is the square being tested with the radius--> + <div id="green" class="greenSquare"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/css-box-shadow-ref-001.html b/testing/web-platform/tests/css/css-backgrounds/reference/css-box-shadow-ref-001.html new file mode 100644 index 0000000000..837a87b9c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/css-box-shadow-ref-001.html @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS box-shadow Test</title> + <link rel="author" title="tmd" href="mailto:weisong4413@126.com"> + <style type="text/css"> + .greenSquare-shadow{ + position: absolute; + top:50px; + left:50px; + width: 100px; + height: 100px; + Border-bottom-right-radius: 50px 50px; + Border-top-left-radius: 50px 50px; + background-color:rgba(0, 255, 0, 1); + /*box-shadow: 110px 110px 0px 10px #000000;*/ + } + .black-shadow{ + position: absolute; + top: 150px; + left: 150px; + width: 120px; + height: 120px; + Border-bottom-right-radius: 60px 60px; + Border-top-left-radius: 60px 60px; + background-color:black; + } + .container { + position: absolute; + } + /* This div should only be visible if the test fails */ + .redSquare { + position: absolute; + top: 150px; + left: 150px; + width: 120px; + height: 120px; + Border-bottom-right-radius: 60px 60px; + Border-top-left-radius: 60px 60px; + background-color:red; + } + </style> +</head> +<body> + <p>The test passes if you the green square's black shadow and it completely covers the red square.</p> + <div class="container"> + <!-- This is the square that should not be visible if the test passes --> + <div id="red" class="redSquare"></div> + <!-- This is the square being tested with the shadow --> + <div id="green" class="greenSquare-shadow"></div> + <div id="black" class="black-shadow"></div> + </div> + <input type="button" value="Border radius?" onclick="fun_radius()"> + <script> + var have_radius=true; + var black=document.getElementById("black"); + var red=document.getElementById("red"); + var green=document.getElementById("green"); + function fun_radius(){ + if(have_radius){ + red.style.borderBottomRightRadius="0px"; + red.style.borderTopLeftRadius="0px"; + black.style.borderBottomRightRadius="0px"; + black.style.borderTopLeftRadius="0px"; + green.style.borderBottomRightRadius="0px"; + green.style.borderTopLeftRadius="0px"; have_radius=false; + }else{ + red.style.borderBottomRightRadius="60px"; + red.style.borderTopLeftRadius="60px"; + black.style.borderBottomRightRadius="60px"; + black.style.borderTopLeftRadius="60px"; + green.style.borderBottomRightRadius="50px"; + green.style.borderTopLeftRadius="50px"; + have_radius=true; + } + } + </script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/css3-background-clip-border-box-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/css3-background-clip-border-box-ref.html new file mode 100644 index 0000000000..ab0f120846 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/css3-background-clip-border-box-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8" /> + <title>CSS Backgrounds Test:background clip property with value border-box</title> + <link rel="author" title="yanshasha" href="mailto:yanshasha133@gmail.com" /> + <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-03 --> + <style type="text/css"> + .box { + width: 200px; + height: 200px; + position: relative; + } + .box div { + position: absolute; + } + #div1 { + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: green; + } + </style> + </head> + <body> + <p> + The test passes if there is only one green box. + </p> + <div class="box"> + <div id="div1"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/css3-background-clip-content-box-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/css3-background-clip-content-box-ref.html new file mode 100644 index 0000000000..bf522dd17c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/css3-background-clip-content-box-ref.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8" /> + <title>CSS Backgrounds Test:background clip property with value content-box</title> + <link rel="author" title="yanshasha" href="mailto:yanshasha133@gmail.com" /> + <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-03 --> + <style type="text/css"> + .box { + width: 200px; + height: 200px; + position: relative; + } + .box div { + position: absolute; + } + #div1 { + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: green; + } + #div2 { + top: 15px; + left: 15px; + right: 15px; + bottom: 15px; + background-color: red; + } + #div3 { + top: 30px; + left: 30px; + right: 30px; + bottom: 30px; + background-color: yellow; + } + </style> + </head> + <body> + <p> + The test passes if threre are three overlapping squares with different color(green,red and yellow from outside to inside). + </p> + <div class="box"> + <div id="div1"></div> + <div id="div2"></div> + <div id="div3"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/css3-background-clip-padding-box-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/css3-background-clip-padding-box-ref.html new file mode 100644 index 0000000000..194a26cad5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/css3-background-clip-padding-box-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8" /> + <title>CSS Backgrounds Test:background clip property with value padding-box</title> + <link rel="author" title="yanshasha" href="mailto:yanshasha133@gmail.com" /> + <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-03 --> + <style type="text/css"> + .box { + width: 200px; + height: 200px; + position: relative; + } + .box div { + position: absolute; + } + #div1 { + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: green; + } + #div2 { + top: 15px; + left: 15px; + right: 15px; + bottom: 15px; + background-color: yellow; + } + </style> + </head> + <body> + <p> + The test passes if threre are two overlapping squares with different color(green and yellow from outside to inside). + </p> + <div class="box"> + <div id="div1"></div> + <div id="div2"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/css3-background-clip-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/css3-background-clip-ref.html new file mode 100644 index 0000000000..5835c8543b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/css3-background-clip-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="UTF-8"> + <title>CSS Background-clip Test: the background is pruned to content box</title> + <link rel="author" title="Xie Bing" href="mailto:451887565@qq.com"> + <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-03 --> + <style type="text/css"> + .box{ + width:300px; + height:300px; + padding:50px; + border:10px dashed #000000; + } + .inner{ + width:300px; + height:300px; + background-color:yellow; + } + </style> +</head> +<body> + <p>The test passes if the background is pruned to content box.</p> + <div class="box"> + <div class="inner">Inner area!</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/css3-background-origin-border-box-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/css3-background-origin-border-box-ref.html new file mode 100644 index 0000000000..807bdf81c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/css3-background-origin-border-box-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8" /> + <title>CSS Backgrounds Test:background origin property with value border-box</title> + <link rel="author" title="yanshasha" href="mailto:yanshasha133@gmail.com" /> + <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-03 --> + <style type="text/css"> + div { + width: 100px; + height: 100px; + border: 12px dashed black; + padding: 20px; + position: relative; + } + img { + position: absolute; + top: -12px; + left: -12px; + z-index: -1; + } + </style> + </head> + <body> + <p> + The test passes if some part of the green square is covered by the dashed border. + </p> + <div> + <img src="../support/green-60-60.png" alt="green square" /> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/css3-background-origin-content-box-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/css3-background-origin-content-box-ref.html new file mode 100644 index 0000000000..36079358df --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/css3-background-origin-content-box-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8" /> + <title>CSS Backgrounds Test:background origin property with value content-box</title> + <link rel="author" title="yanshasha" href="mailto:yanshasha133@gmail.com" /> + <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-03 --> + <style type="text/css"> + div { + width: 100px; + height: 100px; + border: 12px dashed black; + padding: 20px; + position: relative; + } + img { + position: absolute; + top: 20px; + left: 20px; + } + </style> + </head> + <body> + <p> + The test passes if there are some paddings between the green square and the dashed border. + </p> + <div> + <img src="../support/green-60-60.png" alt="green square" /> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/css3-background-origin-padding-box-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/css3-background-origin-padding-box-ref.html new file mode 100644 index 0000000000..5b58dee5b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/css3-background-origin-padding-box-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8" /> + <title>CSS Backgrounds Test:background origin property with value content-box</title> + <link rel="author" title="yanshasha" href="mailto:yanshasha133@gmail.com" /> + <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-03 --> + <style type="text/css"> + div { + width: 100px; + height: 100px; + border: 12px dashed black; + padding: 20px; + position: relative; + } + img { + position: absolute; + top: 0; + left: 0; + } + </style> + </head> + <body> + <p> + The test passes if the green square is just close to the dashed border. + </p> + <div> + <img src="../support/green-60-60.png" alt="green square" /> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/css3-background-size-001-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/css3-background-size-001-ref.html new file mode 100644 index 0000000000..2c842997c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/css3-background-size-001-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8" /> + <title>CSS Backgrounds Test:background size property</title> + <link rel="author" title="yanshasha" href="mailto:yanshasha133@gmail.com" /> + <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-03 --> + <style type="text/css"> + div { + width: 150px; + height: 150px; + } + img { + display: block; + } + #div1 img { + width: 30%; + } + #div2 img { + width: 60%; + } + #div3 img { + width: 100%; + } + </style> + </head> + <body> + <p> + The test passes if the following three green squares have different size. + </p> + <div id="div1"><img src="../support/green-150-150.png" alt="30% image" /> + </div> + <div id="div2"><img src="../support/green-150-150.png" alt="60% image" /> + </div> + <div id="div3"><img src="../support/green-150-150.png" alt="100% image" /> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/css3-background-size-contain-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/css3-background-size-contain-ref.html new file mode 100644 index 0000000000..02a35950bc --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/css3-background-size-contain-ref.html @@ -0,0 +1,28 @@ +<!doctype html> +<html> +<head> + <meta charset="UTF-8"> + <title>CSS3 background-size:contain</title> + <link rel="author" title="Yue Hu" href="mailto:miniwade514@gmail.com" /> + <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-03 --> + <style> + div { + width: 200px; + height: 250px; + border: 5px dashed black; + overflow: hidden; + } + + img { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if the green box image is scaled to fit the width of the outer box, while preserving its intrinsic aspect ratio.</p> + <div> + <img src="../support/60x60-green.png" alt="" /> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/css3-background-size-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/css3-background-size-ref.html new file mode 100644 index 0000000000..a49c88894f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/css3-background-size-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="UTF-8"> + <title>CSS Background-size Test: the size of the background image</title> + <link rel="author" title="Xie Bing" href="mailto:451887565@qq.com"> + <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-03 --> + <style type="text/css"> + img{ + width:30px; + height:30px; + } + </style> +</head> +<body> + <p>The test passes if the green box is resized to 50%.</p> + <img src="../support/60x60-green.png"> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/css3-border-image-repeat-repeat-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/css3-border-image-repeat-repeat-ref.html new file mode 100644 index 0000000000..58d48f0075 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/css3-border-image-repeat-repeat-ref.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + table + { + border-spacing: 0px; + table-layout: fixed; + } + + td + { + height: 18px; + padding: 0px; + } + + td.corner + { + background-image: url("../support/new-red-diamond-27x27.png"); + background-size: cover; + } + + td#first-row-second-cell , td#third-row-second-cell , td.second-row + { + background-image: url("../support/blue-diamond-27x27.png"); + background-size: contain; + background-position: center; + } + + td.second-row + { + height: 108px; /* 6 times 18 == 108 */ + } + </style> + + <p>Test passes if a blue diamond is repeated 8 times horizontally between red diamonds and repeated 6 times vertically between red diamonds. Each of the 4 edges between red diamonds must start and end with a half slice of a blue diamond. + + <table> + + <col width="18"><col width="144"><col width="18"> + + <tr><td class="corner"><td id="first-row-second-cell"><td class="corner"> + + <tr><td class="second-row"><td><td class="second-row"> + + <tr><td class="corner"><td id="third-row-second-cell"><td class="corner"> + + </table> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/css3-border-image-repeat-stretch-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/css3-border-image-repeat-stretch-ref.html new file mode 100644 index 0000000000..ed83c3dbf2 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/css3-border-image-repeat-stretch-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + table + { + border-spacing: 0px; + table-layout: fixed; + width: 154px; + } + + td + { + height: 27px; + padding: 0px; + } + + td.corner + { + background-image: url("../support/blue-and-red-diamonds-81x81.png"); + } + + img + { + vertical-align: top; + } + </style> + + <p>Test passes if a blue diamond is stretched between red diamonds. + + <table> + + <col width="27"><col width="100"><col width="27"> + + <tr><td class="corner"><td><img src="../support/blue-diamond-27x27.png" width="100" height="27" alt="Image download support must be enabled"><td class="corner"> + + <tr><td><img src="../support/blue-diamond-27x27.png" width="27" height="100" alt="Image download support must be enabled"><td><td><img src="../support/blue-diamond-27x27.png" width="27" height="100" alt="Image download support must be enabled"> + + <tr><td class="corner"><td><img src="../support/blue-diamond-27x27.png" width="100" height="27" alt="Image download support must be enabled"><td class="corner"> + + </table> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/css3-border-image-source-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/css3-border-image-source-ref.html new file mode 100644 index 0000000000..e2d32ad485 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/css3-border-image-source-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8" /> + <title>CSS Border Test:border image source property</title> + <link rel="author" title="yanshasha" href="mailto:yanshasha133@gmail.com" /> + <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-03 --> + <style type="text/css"> + div { + background-color: yellow; + width: 220px; + height: 220px; + position: relative; + } + img { + width: 60px; + height: 60px; + position: absolute; + } + #img1 { + top: 0; + left: 0; + } + #img2 { + top: 0; + right: 0; + } + #img3 { + bottom: 0; + right: 0; + } + #img4 { + bottom: 0; + left: 0; + } + </style> + </head> + <body> + <p> + The test passes if there are four green squares at each corner of the yellow square and no red border can be seen. + </p> + <div> + <img src="../support/green-60-60.png" id="img1" alt="baidu logo at left top" /> + <img src="../support/green-60-60.png" id="img2" alt="baidu logo at right top" /> + <img src="../support/green-60-60.png" id="img3" alt="baidu logo at right bottom" /> + <img src="../support/green-60-60.png" id="img4" alt="baidu logo at left bottom" /> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/css3-box-shadow-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/css3-box-shadow-ref.html new file mode 100644 index 0000000000..feb7271db8 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/css3-box-shadow-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="UTF-8"> + <title>CSS Box-shadow Test: the test passes if adding one or more shadow to the box</title> + <link rel="author" title="Xie Bing" href="mailto:451887565@qq.com"> + <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-03 --> + <style type="text/css"> + .wrapper{ + position:relative; + } + .first{ + width:300px; + height:100px; + background-color:#ff9900; + position:absolute; + z-index:500; + } + .second{ + width:300px; + height:100px; + background-color:#000; + position:absolute; + top:10px; + left:10px; + z-index:100; + } + </style> +</head> +<body> + <p>The test passes if there is a black shadow behind the orange box.</p> + <div class="wrapper"> + <div class="first"></div> + <div class="second"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/first-letter-space-not-selected-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/first-letter-space-not-selected-ref.html new file mode 100644 index 0000000000..21a22bd273 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/first-letter-space-not-selected-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Ethan Malasky" href="mailto:emalasky@adobe.com"> +</head> +<body> + <p>Test passes if there is no red.</p> + <div class="test"> </div> + <div class="test"> A</div> + <div class="test"> </div> + <div class="test"> B</div></body> + <div class="test"> </div> + <div class="test"> C</div></body> + <div class="test"> </div> + <div class="test"> D</div></body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/inline-background-rtl-001-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/inline-background-rtl-001-ref.html new file mode 100644 index 0000000000..fe2ac8bdb1 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/inline-background-rtl-001-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<style> +.atomic { display: inline-block; } +</style> +<body> +<div dir="rtl"> +<span> +<span>Hello<br>World<br></span> +<span class="atomic"></span> +</span> +</div> + +<div dir="rtl"> +<span dir="ltr"> +<span>Hello<br>World<br></span> +<span class="atomic"></span> +</span> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/ref-filled-black-96px-square.xht b/testing/web-platform/tests/css/css-backgrounds/reference/ref-filled-black-96px-square.xht new file mode 100644 index 0000000000..7309746e54 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/ref-filled-black-96px-square.xht @@ -0,0 +1,20 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + </head> + + <body> + + <p>Test passes if there is a filled black square.</p> + + <div><img src="../support/black96x96.png" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/ref-filled-green-100px-square.xht b/testing/web-platform/tests/css/css-backgrounds/reference/ref-filled-green-100px-square.xht new file mode 100644 index 0000000000..05a1379448 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/ref-filled-green-100px-square.xht @@ -0,0 +1,19 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <style type="text/css"><![CDATA[ + div + { + background-color: green; + height: 100px; + width: 100px; + } + ]]></style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/ref-if-there-is-no-red.xht b/testing/web-platform/tests/css/css-backgrounds/reference/ref-if-there-is-no-red.xht new file mode 100644 index 0000000000..a5b4e9f47a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/ref-if-there-is-no-red.xht @@ -0,0 +1,18 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/reference.html b/testing/web-platform/tests/css/css-backgrounds/reference/reference.html new file mode 100644 index 0000000000..439747a9ff --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/reference.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> + <head> + + <title>CSS Background and Borders Test:background-clip_pending-box</title> + <link rel="author" title="anping" href="mailto:zhuanping123@163.com" /> + <meta content="Check if the border-clip works."> + <style> + div{ + position:absolute; + } + + #outside{ + + border: blue dotted 5px; + height: 120px; + left: 10px; + top: 10px; + width: 120px; + background-color:transparent; + + } + #inside{ + + border: transparent; + height: 100px; + left: 25px; + top: 25px; + width: 100px; + background-color:red; + + } + + </style> + <head/> + <body> + <p> + "Test passes if the border is blue dotted without red." + </p> + <div id="container"> + + <div id="outside"></div> + <div id="inside"></div> + </div> + </body> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/subpixel-repeat-no-repeat-mix-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/subpixel-repeat-no-repeat-mix-ref.html new file mode 100644 index 0000000000..d2c2722627 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/subpixel-repeat-no-repeat-mix-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Background Test: Mixing background-repeat: repeat and no-repeat, subpixel sizes, Reference</title> + <link rel="author" title="schenney" href="mailto:schenney@chromium.org"> + <style> + div.x { + position: absolute; + left: 20px; + top: 10px; + width: 117px; + height: 10px; + background-image: url("../resources/green-right.png"); + background-position-x: right; + background-repeat: repeat-y; + background-size: 117px 1px; + } + div.y { + position: absolute; + left: 10px; + top: 20px; + width: 10px; + height: 117px; + background-image: url("../resources/green-bottom.png"); + background-position-y: bottom; + background-repeat: repeat-x; + background-size: 1px 117px; + } + </style> +</head> +<body> + <div class="y"></div> + <div class="x"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-backgrounds/reference/ttwf-reftest-borderRadius-ref.html b/testing/web-platform/tests/css/css-backgrounds/reference/ttwf-reftest-borderRadius-ref.html new file mode 100644 index 0000000000..dcb590dfea --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/reference/ttwf-reftest-borderRadius-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> + <title>Reference File</title> + <link rel="author reviewer" title="Jinlong Zhang" href="mailto:jinlongz@oupeng.com"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-radius-tables"> + <style type="text/css"> + #testCon{border: 4px solid green; border-collapse: collapse;} + #testCon td{width: 60px; height: 60px; border: 4px solid green;} + </style> +</head> +<body> + <p>The test passes if table's 'border-radius' style don't work.</p> + <p>CSS3 UAs should ignore border-radius properties applied to internal table elements when 'border-collapse' is 'collapse'.</p> + <table id="testCon"> + <tr><td></td><td></td><td></td></tr> + <tr><td></td><td></td><td></td></tr> + <tr><td></td><td></td><td></td></tr> + </table> +</body> +</html> |